theydo___style_reference:
  info: "> Blush editorial spread with magenta confetti. Warm pink paper, serif headlines, a single hot-pink accent that only outlines and whispers — never shouts."

  theme: "light"

  info: "TheyDo reads as an editorial product page printed on warm blush paper: a soft #fce7f3 canvas (never cold white) carries a confident serif headline (Wulkan) that pairs with a pragmatic sans (DM Sans) for body and UI. The visual identity is built on a single saturated hot-pink (#e82183) used exclusively as outline, stroke, and italic accent — never as a filled surface — which keeps the interface calm while still feeling branded. Floating magenta diamond motifs (echoing the TheyDo logo mark) scatter across the hero like confetti, establishing a playful geometry that recurs in card borders and section dividers. Components are flat and border-driven: 8px corners, 1px hairline rules (#c6c3c3 or pink tints), no shadows, and dark charcoal filled buttons (#131110) as the single primary action. The rhythm is generous — 80px between sections, 15–20px within cards — producing a spacious, magazine-like cadence rather than a dense SaaS dashboard."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Blush Paper | `#fce7f3` | `--color-blush-paper` | Primary page canvas, hero washes, and large background blocks — the warm off-white that replaces cold #ffffff in most full-page contexts |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, button text on dark fills, and the contrast layer that sits on top of the blush canvas inside containers |"
    info: "| Charcoal Ink | `#131110` | `--color-charcoal-ink` | Primary text, filled primary-action buttons (Get a demo, Explore Ask TheyDo), and the nav's dark CTA — the heaviest value in the system |"
    info: "| Black | `#000000` | `--color-black` | Secondary text color, icon strokes, and sharp typographic accents where maximum weight is needed without warmth |"
    info: "| Graphite | `#56504d` | `--color-graphite` | Body text, nav labels, and list copy — slightly warmer than pure black, carries the paragraph voice |"
    info: "| Stone | `#7b7674` | `--color-stone` | Muted helper text, secondary link color, and disabled-state labels — the quietest text tier |"
    info: "| Smoke | `#888381` | `--color-smoke` | Tertiary body and caption text — barely darker than Stone, used for timestamp-style metadata |"
    info: "| Ash | `#625c5b` | `--color-ash` | Deep muted text for sub-labels and fine print |"
    info: "| Hairline | `#c6c3c3` | `--color-hairline` | The dominant border color (2,700+ occurrences) — 1px dividers, card edges, list separators, link underlines. The structural skeleton of every layout |"
    info: "| Mist | `#e8e8e8` | `--color-mist` | Secondary card borders and subtle internal dividers where Hairline would feel too heavy against the blush canvas |"
    info: "| Magenta Pop | `#e82183` | `--color-magenta-pop` | The single brand accent — italic headline words, decorative diamond strokes, icon outlines, and outlined/ghost action borders. Never used as a filled surface or background |"
    info: "| Rose Whisper | `#fad6e9` | `--color-rose-whisper` | Pink-tinted card borders that carry the magenta family into container edges without the visual weight of the vivid hue |"
    info: "| Rose Glow | `#f9b4db` | `--color-rose-glow` | Mid-saturation pink border accent for highlighted cards and decorative borders that need more presence than Rose Whisper |"

  tokens___typography:

    times___times___detected_in_extracted_data_but_not_described_by_ai____font_times:
      - "**Weights:** 400"
      - "**Sizes:** 15px, 16px"
      - "**Line height:** 1.2, 1.25, 1.5"
      - "**Role:** Times — detected in extracted data but not described by AI"

    wulkan___display_and_heading_serif___carries_the_editorial_voice__used_for_hero_headlines__section_titles__and_large_numerical_callouts__the_aggressive_negative_tracking__0_035em_at_72px_makes_the_letterforms_lock_together_into_a_sculpted_block_rather_than_a_loose_paragraph__wulkan_is_custom__a_close_substitute_is_gt_super_or_tobias_____font_wulkan:
      - "**Substitute:** GT Super (Bold) or Tobias"
      - "**Weights:** 400, 500"
      - "**Sizes:** 19px, 24px, 32px, 36px, 40px, 48px, 60px, 72px"
      - "**Line height:** 1.10–1.25"
      - "**Letter spacing:** -0.035em at 72px → -0.004em at 19px (tighter as size grows)"
      - "**Role:** Display and heading serif — carries the editorial voice. Used for hero headlines, section titles, and large numerical callouts. The aggressive negative tracking (-0.035em at 72px) makes the letterforms lock together into a sculpted block rather than a loose paragraph. Wulkan is custom; a close substitute is GT Super or Tobias."

    dm_sans___body__ui__and_navigation_sans_serif___the_workhorse__paragraph_copy_at_16_18px_400__nav_labels_and_buttons_at_14_15px_500__and_bold_emphasis_at_600_700__the_tight_tracking_even_at_small_sizes_gives_the_ui_a_crisp__intentional_feel_rather_than_a_relaxed_default_____font_dm_sans:
      - "**Substitute:** Inter or General Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 14px, 15px, 16px, 17px, 18px"
      - "**Line height:** 1.33–1.60"
      - "**Letter spacing:** -0.014em at 18px → -0.005em at 14px (mild tightening, barely perceptible at body sizes)"
      - "**Role:** Body, UI, and navigation sans-serif — the workhorse. Paragraph copy at 16–18px/400, nav labels and buttons at 14–15px/500, and bold emphasis at 600–700. The tight tracking even at small sizes gives the UI a crisp, intentional feel rather than a relaxed default."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.5 | -0.07px | `--text-caption` |"
      info: "| body | 16px | 1.5 | -0.112px | `--text-body` |"
      info: "| body-lg | 18px | 1.56 | -0.252px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.25 | -0.456px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.2 | -0.768px | `--text-heading-sm` |"
      info: "| heading | 40px | 1.17 | -1.16px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.16 | -1.392px | `--text-heading-lg` |"
      info: "| display | 72px | 1.1 | -2.52px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 88 | 88px | `--spacing-88` |"
      info: "| 176 | 176px | `--spacing-176` |"
      info: "| 240 | 240px | `--spacing-240` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 8px |"
      info: "| buttons | 8px |"
      info: "| small-chips | 5px |"
      info: "| decorative-shapes | 20px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 15px"

  components:

    filled_primary_button:
      role: "Primary action (Get a demo, Explore Ask TheyDo)"

      info: "Charcoal #131110 background, white #ffffff text, 8px radius, 15px vertical / 20px horizontal padding, DM Sans 15px weight 500. The only dark filled surface in the system — appears once per screen as the dominant CTA. No shadow, no border."

    outlined_magenta_button:
      role: "Secondary brand action with color"

      info: "Transparent background, 1px border in Magenta Pop #e82183, text in #e82183, 8px radius, 15px/20px padding, DM Sans 15px weight 500. Used when the action is brand-relevant but secondary to the dark filled CTA."

    outlined_neutral_button:
      role: "Tertiary action (Talk to a person, Login)"

      info: "Transparent background, 1px border in Hairline #c6c3c3, text in Charcoal #131110, 8px radius, 15px/20px padding. The quiet ghost variant — always paired with a dark filled CTA."

    nav_bar:
      role: "Top-level site navigation"

      info: "Horizontal bar on blush canvas, 15px padding, DM Sans nav items at 15px weight 500 in Graphite #56504d. The TheyDo diamond logo sits left; the dark filled 'Get a demo' button sits right. No drop shadow, no sticky background change."

    hero_headline:
      role: "Page-top title with italic accent"

      info: "Wulkan 72px weight 400 (or 500), tracking -2.52px, color #131110. One word is set in italic Magenta Pop #e82183 as the editorial accent. Subhead below in DM Sans 18px weight 400 in Graphite #56504d. Centered alignment, 80px vertical breathing room."

    diamond_motif:
      role: "Decorative geometric element"

      rotated_squares_45__in_two_sizes: "small at ~15px, large at ~40px, scattered asymmetrically around the hero. Filled in Magenta Pop #e82183, Rose Glow #f9b4db, or Rose Whisper #fad6e9. Echoes the TheyDo logo mark — a signature visual device."

    pink_bordered_card:
      role: "Feature or content card with brand-tinted edge"

      info: "White #ffffff surface, 1px border in Rose Whisper #fad6e9 or Rose Glow #f9b4db, 8px radius, 20px padding. Title in DM Sans 16px weight 600 in Charcoal, body in DM Sans 15px weight 400 in Graphite. No shadow — the colored border is the elevation signal."

    neutral_card:
      role: "Standard content container"

      info: "White #ffffff surface, 1px border in Mist #e8e8e8, 8px radius, 20px padding. Used for product UI panels, journey map previews, and grouped content blocks. Flat — no shadow."

    client_logo_strip:
      role: "Social proof — 'world's leading brands' band"

      info: "Blush canvas background, 30px vertical padding, centered Wulkan subhead ('The world's leading brands run on experience intelligence'), then a 2-row grid of monochrome black logos at consistent height. No card containers, no borders — logos float on the pink."

    section_header:
      role: "Subsection title with centered alignment"

      info: "Wulkan 40–48px weight 400, tracking -1.16 to -1.39px, Charcoal #131110. Centered on the page with 15–20px gap to a Graphite #56504d subhead in DM Sans 18px. Optional Magenta Pop diamond cluster above the headline as a visual entry point."

    forrester___award_badge_block:
      role: "Third-party validation card"

      info: "White card with 8px radius, 1px Hairline border, 20px padding. Left column: Wulkan headline with one word in Magenta Pop italic. Right column: the award badge as a contained image. No decorative diamonds in this variant — it sits inside a structured card."

    floating_prompt_bubble:
      role: "Interactive product demo element"

      info: "White surface, 8px radius, 1px Hairline border, 15px padding. Contains a DM Sans prompt label and a magenta-accented action button. Positioned to overlap or sit beside a product screenshot — a bridge between the static page and the live tool."

    journey_card_grid:
      role: "4-column feature explanation"

      info: "Four equal-width Neutral Cards in a single row, 30px gap, each with a short Wulkan-or-DM-Sans-bold label and a one-line DM Sans description. Connected below by a dashed/dotted Hairline line to a row of diamond-shaped capability cards — the only place the grid breaks symmetry."

  do_s_and_don_ts:

    do:
      - "Use the Charcoal #131110 filled button as the single dark surface in any view — one per screen, never two side by side."
      - "Set the primary headline in Wulkan and never let it exceed 72px on the largest display — beyond that, the tracking breaks."
      - "Apply Magenta Pop #e82183 only as outline, stroke, or italic accent — never as a filled background, badge fill, or text color on a colored ground."
      - "Default the page canvas to Blush Paper #fce7f3; reserve #ffffff for card surfaces that need to lift off the canvas."
      - "Use Rose Whisper #fad6e9 or Rose Glow #f9b4db for card borders when the card sits on the blush canvas and needs to feel on-brand without a dark stroke."
      - "Maintain 80px between major sections and 15–20px within cards — the spacious cadence is the difference between editorial and dashboard."
      - "Place 1–3 magenta diamond motifs near the hero or section transitions to signal the brand geometry; never use more than a handful per viewport."

    don_t:
      - "Do not set the page background to pure #ffffff — the blush canvas is the brand's warm identity; cold white makes the site feel generic."
      - "Do not use Magenta Pop #e82183 as a filled button background, badge fill, or large solid block — it becomes visually aggressive and breaks the whisper-loud rhythm."
      - "Do not add drop shadows, glows, or blur effects to cards or buttons — the system is flat by design and elevation is expressed through border and surface color."
      - "Do not mix more than two border colors in a single card (e.g. Hairline + pink tint) — the visual noise competes with the editorial calm."
      - "Do not set body copy below 15px or use line-heights tighter than 1.45 — the generous leading is part of the magazine cadence."
      - "Do not center-align body paragraphs longer than two lines — use left-align for paragraphs, reserve center-align for headlines and short subheads."
      - "Do not introduce a third typeface or a new accent color — the system is built on the Wulkan/DM Sans pair and the single magenta accent; additions dilute the identity."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Blush Canvas | `#fce7f3` | Page-wide background — the warm off-white that defines the entire site's atmosphere |"
    info: "| 1 | Card White | `#ffffff` | Elevated card surfaces, content containers, and product UI panels sitting on the canvas |"
    info: "| 2 | Ink Surface | `#131110` | Filled primary-action buttons — the only dark surface in the system, used sparingly for maximum contrast |"

  elevation:

    info: "The system is deliberately shadowless. Depth is communicated through surface color shifts (Blush Paper → Card White → Ink Surface) and border color (Hairline for structural, pink tints for brand-aware). A single 1px line carries more visual weight in this system than a 12px blur shadow would — adding elevation would break the editorial, printed-on-paper feel."

  imagery:

    info: "Photography is minimal and product-focused: tight crops of real human faces used in floating circular avatars that compose the hero diamond cluster, and contained product-UI screenshots of the journey-mapping tool shown as white-surface panels with Hairline borders. No full-bleed lifestyle photography, no abstract gradients, no 3D renders. The dominant graphic device is the magenta diamond motif — rotated 45° squares scattered as decorative confetti in sizes from 8px to 40px, filled in Magenta Pop, Rose Glow, or Rose Whisper. Icons are outline-style at ~20px stroke weight, mono-color, using Magenta Pop for decorative or category icons and Charcoal for functional UI icons. The visual language is printed-page-meets-product-tool: human faces and product screenshots sit in white containers, while the pink paper and diamond confetti provide atmospheric branding around them."

  layout:

    info: "Centered max-width 1200px content column on a full-bleed Blush Paper canvas. The hero is a centered text stack (Wulkan headline, DM Sans subhead, two-button row) with diamond motifs scattered asymmetrically to the left and product-UI screenshots anchored to the right at a lower z-position. Below the hero, sections alternate between full-width pink bands and white-surface card rows at 80px vertical gaps. Client logos appear in a centered 2-row grid floating directly on the pink canvas with no card containers — the only time logos are not inside a surface. Card grids use 4 equal columns at 30px gap; feature sections use 2-column text+visual alternation. The nav is a single horizontal bar with no sticky behavior or background change. The overall rhythm is editorial: generous whitespace, centered titles, and one prominent visual element per section rather than dense information stacking."

  agent_prompt_guide:

    quick_color_reference:
    - "Text (primary): #131110"
    - "Text (body): #56504d"
    - "Text (muted): #7b7674"
    - "Background (canvas): #fce7f3"
    - "Background (card): #ffffff"
    - "Border (structural): #c6c3c3"
    - "Accent (magenta): #e82183"
    - "primary action: #131110 (filled action)"

    3_example_component_prompts:

    - "*Hero headline with italic brand accent*: Wulkan 72px weight 400, tracking -2.52px, color #131110, centered. Set the second word in italic #e82183 as the editorial accent. Subhead in DM Sans 18px weight 400, #56504d, max-width 600px, centered, 15px gap below headline."

    - "*Outlined magenta button*: 1px border #e82183, transparent background, text #e82183 in DM Sans 15px weight 500, 8px radius, 15px vertical and 20px horizontal padding. Pair with a dark #131110 filled button of identical dimensions to its left."

    - "*Pink-bordered feature card*: White #ffffff surface, 1px border #fad6e9, 8px radius, 20px padding on all sides. Title in DM Sans 16px weight 600 #131110, body in DM Sans 15px weight 400 #56504d. No shadow. Place 3–4 of these in a row at 30px gap on the blush canvas."

  similar_brands:

    - "**Notion** — Same flat, border-driven card system on a warm off-white canvas with a single accent color and generous editorial spacing."
    - "**Linear** — Similar tight tracking on display type and the discipline of using one dark filled button as the sole primary action per view."
    - "**Pitch** — Shares the editorial serif headline + clean sans body pairing and the playful use of geometric decorative shapes scattered across the hero."
    - "**Loom** — Same warm approachable canvas color (off-white/pink) replacing cold pure white, with confident display type and minimal shadow usage."
    - "**Framer** — Uses a similarly restrained single-accent-color system with bold serif headlines and floating decorative geometric motifs in the hero."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-blush-paper: #fce7f3;
          --color-pure-white: #ffffff;
          --color-charcoal-ink: #131110;
          --color-black: #000000;
          --color-graphite: #56504d;
          --color-stone: #7b7674;
          --color-smoke: #888381;
          --color-ash: #625c5b;
          --color-hairline: #c6c3c3;
          --color-mist: #e8e8e8;
          --color-magenta-pop: #e82183;
          --color-rose-whisper: #fad6e9;
          --color-rose-glow: #f9b4db;
        
          /* Typography — Font Families */
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wulkan: 'Wulkan', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --tracking-caption: -0.07px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.112px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.56;
          --tracking-body-lg: -0.252px;
          --text-subheading: 24px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.456px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.768px;
          --text-heading: 40px;
          --leading-heading: 1.17;
          --tracking-heading: -1.16px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.16;
          --tracking-heading-lg: -1.392px;
          --text-display: 72px;
          --leading-display: 1.1;
          --tracking-display: -2.52px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-176: 176px;
          --spacing-240: 240px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 15px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-2xl: 20px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 8px;
          --radius-buttons: 8px;
          --radius-small-chips: 5px;
          --radius-decorative-shapes: 20px;
        
          /* Surfaces */
          --surface-blush-canvas: #fce7f3;
          --surface-card-white: #ffffff;
          --surface-ink-surface: #131110;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-blush-paper: #fce7f3;
          --color-pure-white: #ffffff;
          --color-charcoal-ink: #131110;
          --color-black: #000000;
          --color-graphite: #56504d;
          --color-stone: #7b7674;
          --color-smoke: #888381;
          --color-ash: #625c5b;
          --color-hairline: #c6c3c3;
          --color-mist: #e8e8e8;
          --color-magenta-pop: #e82183;
          --color-rose-whisper: #fad6e9;
          --color-rose-glow: #f9b4db;
        
          /* Typography */
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wulkan: 'Wulkan', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.5;
          --tracking-caption: -0.07px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.112px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.56;
          --tracking-body-lg: -0.252px;
          --text-subheading: 24px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.456px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -0.768px;
          --text-heading: 40px;
          --leading-heading: 1.17;
          --tracking-heading: -1.16px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.16;
          --tracking-heading-lg: -1.392px;
          --text-display: 72px;
          --leading-display: 1.1;
          --tracking-display: -2.52px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-20: 20px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-88: 88px;
          --spacing-176: 176px;
          --spacing-240: 240px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-lg: 8px;
          --radius-2xl: 20px;
        }