mage___style_reference:
  info: "> data alchemy on parchment. Warm off-white canvas, whisper-weight Inter headlines, one cobalt switch for action, dark-mode product islands floating inside a bright editorial page."

  theme: "light"

  info: "Mage operates on a warm parchment canvas (#f7f7f1) that gives the data-platform brand an editorial, almost lab-notebook warmth rather than the cold gray most SaaS tools default to. The interface is deliberately quiet: soft cards on a warm white field, generous breathing room, and a single vivid electric-cobalt accent (#244cff) that acts as a switch — it appears only on primary actions, nowhere else. Typography is Inter-only, used at restrained weights (400 dominates even at display sizes), which makes the large headlines feel declarative rather than shouting. Product surfaces (the pipeline editor) are dark-mode islands embedded inside the light page, creating a clear visual contract: marketing context is warm-paper light, working context is deep-graphite dark. Decorative violet (#c3aeff) threads through the brand illustration as a secondary color note, never as UI chrome."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Cobalt | `#244cff` | `--color-electric-cobalt` | Primary action fill — CTA buttons, active nav state, the single switched-on color in an otherwise muted system |"
    info: "| Lavender Mist | `#c3aeff` | `--color-lavender-mist` | Brand illustration accent — decorative fills in the hero artwork and supporting graphics, echoes the cobalt at lower saturation |"
    info: "| Parchment | `#f7f7f1` | `--color-parchment` | Page canvas — warm off-white background that gives the whole site its editorial, paper-like quality |"
    info: "| Snow | `#ffffff` | `--color-snow` | Card surfaces, text on dark backgrounds, product thumbnail containers |"
    info: "| Ice Wash | `#e8f8ff` | `--color-ice-wash` | Tinted card surface — subtle blue-white variant for differentiated cards (logo bar, feature callouts) |"
    info: "| Sky Tint | `#d6f2ff` | `--color-sky-tint` | Decorative card wash — pale blue background for illustration overlays and feature card accents |"
    info: "| Lemon Wash | `#ffffbd` | `--color-lemon-wash` | Decorative card wash — warm yellow tint for illustration card backgrounds and feature highlights |"
    info: "| Blush | `#fcc2cd` | `--color-blush` | Decorative card wash — soft pink for illustration card backgrounds |"
    info: "| Buttercream | `#fced9f` | `--color-buttercream` | Decorative card wash — warm cream-yellow for illustration card backgrounds |"
    info: "| Azure | `#3388ff` | `--color-azure` | Illustration accent — mid-blue used in hero artwork and data visualization elements |"
    info: "| Slate Blue | `#5487a1` | `--color-slate-blue` | Illustration accent — muted blue for decorative borders and secondary graphic elements |"
    info: "| Amber | `#9e770b` | `--color-amber` | Illustration accent — warm dark-yellow for decorative graphic elements |"
    info: "| Lilac Pop | `#ba9ffc` | `--color-lilac-pop` | Illustration accent — vivid lavender for hero artwork highlights |"
    info: "| Deep Cobalt | `#294dba` | `--color-deep-cobalt` | Illustration accent — darker blue for hero artwork depth and contrast |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Primary text, hairline borders, high-contrast edges |"
    info: "| Graphite | `#2b2b2b` | `--color-graphite` | Secondary text, body copy on light surfaces — softer than pure black for reading comfort |"
    info: "| Obsidian | `#1d1f21` | `--color-obsidian` | High-contrast neutral action fill for primary buttons on light surfaces. |"
    info: "| Ash | `#878787` | `--color-ash` | Muted text — captions, helper text, secondary metadata |"
    info: "| Fog | `#b0b0b0` | `--color-fog` | Borders, dividers, disabled state outlines, muted link text |"

  tokens___typography:

    sans_serif___sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Role:** sans-serif — detected in extracted data but not described by AI"

    inter___workhorse_body_and_ui_text___body_copy_at_400__buttons_labels_at_500_600__bold_callouts_at_700__the_font_s_open_apertures_and_tall_x_height_make_it_readable_at_12_16px_on_the_warm_canvas____font_inter:
      - "**Substitute:** system-ui, -apple-system, 'Segoe UI', sans-serif"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 13px, 15px, 16px, 17px, 18px, 21px, 22px, 24px"
      - "**Line height:** 1.20-1.65"
      - "**OpenType features:** `\"cv03\", \"cv04\", \"cv09\", \"cv11\", \"blwf\"`"
      - "**Role:** Workhorse body and UI text — body copy at 400, buttons/labels at 500-600, bold callouts at 700. The font's open apertures and tall x-height make it readable at 12-16px on the warm canvas"

    inter_variable___display_and_heading_sizes___60px_display_headlines__38px_section_headers__30px_subheadings__weight_stays_at_400_even_at_display_size__the_headlines_whisper_rather_than_shout__authority_through_scale_not_weight____font_inter_variable:
      - "**Substitute:** Inter (static weights)"
      - "**Weights:** 400"
      - "**Sizes:** 20px, 22px, 30px, 38px, 60px"
      - "**Line height:** 1.30-1.40"
      - "**Role:** Display and heading sizes — 60px display headlines, 38px section headers, 30px subheadings. Weight stays at 400 even at display size: the headlines whisper rather than shout, authority through scale not weight"

    geist___small_bold_labels___compact_uppercase_style_tags_and_category_markers_at_14px_weight_600____font_geist:
      - "**Substitute:** Inter 600"
      - "**Weights:** 600"
      - "**Sizes:** 14px"
      - "**Line height:** 1.50"
      - "**Role:** Small bold labels — compact uppercase-style tags and category markers at 14px weight 600"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.5 | — | `--text-body-lg` |"
      info: "| subheading | 22px | 1.3 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 1.4 | — | `--text-heading` |"
      info: "| heading-lg | 38px | 1.3 | — | `--text-heading-lg` |"
      info: "| display | 60px | 1.3 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 6px |"
      info: "| images | 16px |"
      info: "| buttons | 100px |"
      info: "| largeSurfaces | 12px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24-40px"
      - "**Element gap:** 10px"

  components:

    primary_cta_button:
      role: "High-emphasis action — 'Start Building', form submissions"

      info: "Electric Cobalt #244cff background, white text, Inter 500 at 15-16px, pill radius (100px), padding 12px 24px. The single vivid color in the system — every primary action uses this exact shade. No hover darkening needed at this saturation; it already commands attention."

    dark_cta_button:
      role: "Secondary high-emphasis — 'Try Mage' in nav, product entry points"

      info: "Obsidian #1d1f21 background, white text, Inter 500 at 15-16px, pill radius (100px), padding 8px 16px. Used for the persistent product-access button in the nav bar. The dark-on-warm-white contrast creates a different kind of urgency than the cobalt — more 'enter the tool' than 'start here'."

    ghost_text_link:
      role: "Low-emphasis action — 'Get a demo', inline navigation"

      info: "No background, Graphite #2b2b2b text, Inter 500 at 15-16px. Sits beside filled CTAs as the secondary path. Underline appears on hover only."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Transparent over Parchment #f7f7f1 canvas. Left: Mage logo (custom mark) + nav links (Platform, Solutions, Resources, Pricing, Try) in Inter 500 at 15px. Right: 'Demo' ghost link + 'Try Mage' dark pill button. No background fill, no border — the bar relies on whitespace and the warm canvas to separate from content below."

    hero_product_thumbnail:
      role: "Embedded product preview in the hero section"

      info: "Dark-mode product UI screenshot (Obsidian #1d1f21 surface) inside a Snow #ffffff container with 16px radius. Central play button overlay (white circle with cobalt play icon) signals video. The dark product island inside the warm light page is the signature visual contrast — 'here is where the work happens'."

    trust_logo_bar:
      role: "Social proof — 'Trusted by data teams at leading companies'"

      info: "Horizontal strip of company logos (Samsung, Stability.ai, Comcast, IBM, etc.) on Parchment #f7f7f1 canvas. Logos rendered in Pure Black or Graphite. The logos themselves sit on subtle individual card containers with 6px radius and Ice Wash #e8f8ff or Parchment backgrounds."

    feature_card_product_screenshot:
      role: "Feature showcase — 'Build pipelines', 'Connect data', 'Run continuously', 'Fix and recover'"

      two_column_layout: "heading (Inter 400 at 18-22px) + subtext (Inter 400 at 16px, Graphite) above a dark-mode product screenshot with 6px radius. The screenshot shows the pipeline editor with dark sidebar and monospace code. The dark product image anchors each card and signals 'this is real, working software'."

    section_heading_group:
      role: "Section titles and descriptions"

      info: "Inter Variable 400 at 38px for the section title, Inter 400 at 16-18px Graphite for the subtitle. The 38px headline at weight 400 is the signature: no bold, no uppercase, no decorative flourishes — just scale and Inter's geometric clarity doing the work."

    illustration_overlay:
      role: "Decorative hero artwork — people interacting with a data orb"

      full_color_custom_illustration: "characters in varied clothing (coral, yellow, purple, teal) around a central blue spherical data object with circuit patterns. Uses the illustration palette: Lavender Mist #c3aeff, Azure #3388ff, Blush #fcc2cd, Buttercream #fced9f. Sits to the right of the hero text, roughly 50% of viewport width."

    data_source_icon_grid:
      role: "Integration showcase within the product UI"

      info: "Grid of colorful integration logos (PostgreSQL, MongoDB, etc.) visible in the 'Connect data' product screenshot. Each icon is a rounded square with the brand's native color. This is product UI content, not design system chrome."

  do_s_and_don_ts:

    do:
      - "Use Electric Cobalt #244cff exclusively for primary action fills — never as a decorative element or text color"
      - "Set all buttons to pill radius (100px) for both the cobalt primary and obsidian dark variants"
      - "Keep headlines at Inter weight 400 — authority comes from size (38px section, 60px display), not weight"
      - "Use Parchment #f7f7f1 as the page canvas for all marketing pages; reserve Snow #ffffff for elevated cards and containers"
      - "Embed dark-mode product screenshots (#1d1f21 surface) as visual anchors inside the light page — this light-dark contrast is the signature"
      - "Apply Inter font features \"cv03\", \"cv04\", \"cv09\", \"cv11\" to get the alternate glyph sets that distinguish Mage's Inter from default Inter"
      - "Use 6px radius for cards and product thumbnails, 16px for larger image containers, 100px (pill) for all interactive controls"

    don_t:
      - "Do not use multiple vivid colors as action buttons — the system has one action color (cobalt) and one dark variant; everything else is text or surface"
      - "Do not set headlines to weight 600 or 700 — the whisper-weight 400 at large size is the signature; bolding breaks the editorial tone"
      - "Do not add drop shadows to cards on the Parchment canvas — the warm tonal contrast between #f7f7f1 and #ffffff is enough separation"
      - "Do not use the illustration palette colors (#fcc2cd, #fced9f, #ba9ffc) as UI chrome — they are reserved for the hero artwork and decorative card washes"
      - "Do not mix Light Slate Blue #5487a1 or Amber #9e770b into text or border roles — they are illustration-only accents"
      - "Do not use sharp corners (0px radius) on cards or images — the 6px minimum radius is a system-wide baseline"
      - "Do not put body text below 14px — the Inter 12px usage is limited to micro-labels and metadata, never running prose"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Parchment | `#f7f7f1` | Page canvas — the warm off-white base of all marketing pages |"
    info: "| 1 | Snow | `#ffffff` | Card surfaces, elevated containers, product thumbnails |"
    info: "| 2 | Ice Wash | `#e8f8ff` | Tinted card surface for differentiated sections (logo trust bar, feature callouts) |"
    info: "| 3 | Obsidian | `#1d1f21` | Dark-mode product UI — the code editor and pipeline builder embedded as screenshots |"

  imagery:

    info: "Hero features a large custom illustration: 3-4 illustrated characters in colorful casual clothing (coral pants, yellow tops, purple overalls) interacting with a central blue spherical data object with circuit-board patterns. The illustration uses the brand's decorative palette (lavender, azure, blush, buttercream) and occupies the right half of the hero. Product screenshots are dark-mode (graphite sidebar + code editor) with vibrant integration logos in a grid. No photography. No abstract gradients or 3D renders beyond the illustration. Icon style in the UI is a mix: product UI uses small monospace-style code icons; the illustration uses flat filled shapes with no outlines."

  layout:

    info: "Max-width 1200px centered content. Hero is a two-column split: left ~40% holds headline + subtext + CTAs + a dark product video thumbnail stacked vertically; right ~55% holds the full-color illustration. Below the hero, a full-width trust logo bar spans the content width. Feature sections use a 2x2 grid: each cell has a heading + subtext on top, dark product screenshot below with 6px radius. The page alternates between warm-canvas sections and slightly different surface tints (Ice Wash) for visual separation. Navigation is a simple top bar with left-aligned logo + links, right-aligned CTA pair. No sidebar, no mega-menu. Section gaps are generous (~64px) creating a comfortable editorial rhythm rather than a dense product-grid feel."

  agent_prompt_guide:

    quick_color_reference:
    - "Canvas: #f7f7f1 (Parchment)"
    - "Card surface: #ffffff (Snow)"
    - "Tinted surface: #e8f8ff (Ice Wash)"
    - "Primary text: #000000 / #2b2b2b"
    - "Muted text: #878787 / #b0b0b0"
    - "Accent: #244cff (Electric Cobalt)"
    - "Dark surface: #1d1f21 (Obsidian)"
    - "primary action: no distinct CTA color"

    example_component_prompts:
    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "**Create a feature card**: No card background (sits on Parchment). Section heading at 38px Inter Variable weight 400, #000000. Subtitle at 16px Inter 400, #2b2b2b. Dark product screenshot below with 6px border-radius, 24px internal padding, showing a code editor with dark sidebar."


    - "**Create a navigation bar**: Transparent over Parchment. Left: logo + 5 nav links in Inter 500 at 15px, #000000. Right: 'Demo' ghost text link (#2b2b2b) + dark 'Try Mage' pill button (#1d1f21 background, white text, 8px 16px padding, 100px radius)."

    - "**Create a trust logo bar**: Full-width Parchment background. Caption 'Trusted by data teams' at 14px Inter 400, #878787. Row of 7 company logos in #000000, evenly spaced, max-height 24px each, with 10px gap between logos."

  similar_brands:

    - "**Vercel** — Same single-accent-plus-black approach with whisper-weight headlines and a warm off-white canvas; both use a dark-mode product surface inside a light marketing page"
    - "**Linear** — Similar pill-radius buttons, generous whitespace, Inter typography at restrained weights, and a dark product island embedded in light marketing context"
    - "**Airplane** — Same warm off-white canvas, Inter type system, single vivid accent color for primary actions, and dark-mode product screenshots as feature anchors"
    - "**PlanetScale** — Light editorial canvas with dark product UI previews, generous section spacing, and a single saturated brand color for action"
    - "**Modal** — Similar data-platform identity with light parchment-toned pages, custom illustration as hero centerpiece, and dark product UI as feature evidence"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-cobalt: #244cff;
          --color-lavender-mist: #c3aeff;
          --color-parchment: #f7f7f1;
          --color-snow: #ffffff;
          --color-ice-wash: #e8f8ff;
          --color-sky-tint: #d6f2ff;
          --color-lemon-wash: #ffffbd;
          --color-blush: #fcc2cd;
          --color-buttercream: #fced9f;
          --color-azure: #3388ff;
          --color-slate-blue: #5487a1;
          --color-amber: #9e770b;
          --color-lilac-pop: #ba9ffc;
          --color-deep-cobalt: #294dba;
          --color-pure-black: #000000;
          --color-graphite: #2b2b2b;
          --color-obsidian: #1d1f21;
          --color-ash: #878787;
          --color-fog: #b0b0b0;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 22px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 30px;
          --leading-heading: 1.4;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.3;
          --text-display: 60px;
          --leading-display: 1.3;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24-40px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-cards: 6px;
          --radius-images: 16px;
          --radius-buttons: 100px;
          --radius-largesurfaces: 12px;
        
          /* Surfaces */
          --surface-parchment: #f7f7f1;
          --surface-snow: #ffffff;
          --surface-ice-wash: #e8f8ff;
          --surface-obsidian: #1d1f21;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-cobalt: #244cff;
          --color-lavender-mist: #c3aeff;
          --color-parchment: #f7f7f1;
          --color-snow: #ffffff;
          --color-ice-wash: #e8f8ff;
          --color-sky-tint: #d6f2ff;
          --color-lemon-wash: #ffffbd;
          --color-blush: #fcc2cd;
          --color-buttercream: #fced9f;
          --color-azure: #3388ff;
          --color-slate-blue: #5487a1;
          --color-amber: #9e770b;
          --color-lilac-pop: #ba9ffc;
          --color-deep-cobalt: #294dba;
          --color-pure-black: #000000;
          --color-graphite: #2b2b2b;
          --color-obsidian: #1d1f21;
          --color-ash: #878787;
          --color-fog: #b0b0b0;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-variable: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.5;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.5;
          --text-subheading: 22px;
          --leading-subheading: 1.3;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 30px;
          --leading-heading: 1.4;
          --text-heading-lg: 38px;
          --leading-heading-lg: 1.3;
          --text-display: 60px;
          --leading-display: 1.3;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-13: 13px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-20: 20px;
          --spacing-21: 21px;
          --spacing-24: 24px;
          --spacing-30: 30px;
          --spacing-40: 40px;
          --spacing-50: 50px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-full: 100px;
        }