passionfroot___style_reference:
  info: "> Twilight cloud library on warm parchment. A serif headline drifts above cream cards lit by a violet-to-coral sky, where a pastel mascot peeks from the corner."

  theme: "mixed"

  info: "Passionfroot operates as a dusk-lit creative workspace: warm parchment canvas (#f8f7f2), a custom serif (new-kansas) for editorial-grade headlines, and a full-spectrum accent palette that treats color as joyful punctuation rather than corporate branding. Screens often open against a twilight sky gradient (deep violet bleeding into coral) before resolving into cream cards and content. The visual language is compact, rounded, and tactile — 12px radii everywhere, pill-shaped interactive chips, warm-toned layered shadows (oklch-tinted, not pure gray) that feel like sunlight on paper, and a 3D mascot that anchors the dreamy atmosphere. Components stay lightweight: thin 1px borders, ghost buttons, white elevated surfaces, no heavy drop-shadows. Color appears as small functional sprinkles — pastel card backgrounds, vivid icon strokes, chromatic borders — never as a single dominant brand color."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#1d1d1c` | `--color-ink-black` | Primary text, primary borders, dark surface fills — the workhorse neutral that carries all high-contrast text and structural outlines |"
    info: "| Parchment Cream | `#f8f7f2` | `--color-parchment-cream` | Page canvas, default body background, nav surface — warm off-white that replaces pure white to avoid sterile SaaS feel |"
    info: "| Sand Gray | `#d8d6ce` | `--color-sand-gray` | Hairline borders, dividers, soft box-shadow base — the warm-tinted stroke that gives components a paper-on-paper quality |"
    info: "| Linen Beige | `#edeae4` | `--color-linen-beige` | Card surfaces, elevated backgrounds, shadow tint — sits one step above Parchment Cream as the secondary surface level |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Highest-elevation surfaces, button fills, input fields — the brightest neutral reserved for the focal interactive elements |"
    info: "| Charcoal Stone | `#43423e` | `--color-charcoal-stone` | Secondary text, muted button borders, button text on light fills — the mid-dark neutral for body copy and neutral action outlines |"
    info: "| Ash Gray | `#99978f` | `--color-ash-gray` | Muted text, placeholder text, subtle icon strokes, disabled state borders — the warm mid-gray for de-emphasized content |"
    info: "| Slate Warm | `#7a7974` | `--color-slate-warm` | Secondary muted text, button labels in ghost variants — one step darker than Ash Gray for slightly more legible de-emphasis |"
    info: "| Electric Violet | `#b26bf5` | `--color-electric-violet` | Primary brand accent — the most-prominent chromatic across the system, used for highlighted card surfaces, illustration fills, and brand emphasis; vivid lavender that defines the Passionfroot identity |"
    info: "| Twilight Indigo | `#190922` | `--color-twilight-indigo` | Dark hero section base, deep contrast text on light surfaces — the near-black plum that anchors the twilight gradient backgrounds |"
    info: "| Bubblegum Pink | `#f788d2` | `--color-bubblegum-pink` | Accent card surface, tag pill, illustration fill — one of the pastel punctuation colors in the rainbow accent set |"
    info: "| Tangerine | `#ff9147` | `--color-tangerine` | Accent card surface, warm illustration fill, decorative highlight — the sunset-orange accent for warmth and energy |"
    info: "| Aqua Teal | `#4ad5e8` | `--color-aqua-teal` | Accent card surface, cool-toned illustration fill — the bright sky-cyan for variety in the multi-color accent set |"
    info: "| Sky Blue | `#51b1fb` | `--color-sky-blue` | Accent card surface, cool illustration fill — lighter blue accent used in color card rotation |"
    info: "| Sunshine Yellow | `#ffe747` | `--color-sunshine-yellow` | Accent card surface, highlight wash — the warm yellow accent for cheerful punctuation in card backgrounds |"
    info: "| Lavender Glow | `#b977f8` | `--color-lavender-glow` | Decorative border, icon stroke, soft accent outline — slightly lighter than Electric Violet for outlined elements |"
    info: "| Pale Violet | `#dab2ff` | `--color-pale-violet` | Outlined button border, soft accent stroke — the desaturated lavender for ghost/outlined action elements |"
    info: "| Lilac Mist | `#f3e8ff` | `--color-lilac-mist` | Outlined button background wash, soft accent fill — extremely pale violet for subtle tinted button states |"
    info: "| Deep Violet | `#8200db` | `--color-deep-violet` | Icon border, decorative stroke, bold accent outline — the saturated dark violet for iconography and emphasis strokes |"
    info: "| Coral Red | `#ee5968` | `--color-coral-red` | Illustration fill, warm accent, character highlight — the warm coral used in the mascot and decorative artwork |"
    info: "| Mint Green | `#58df8c` | `--color-mint-green` | Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content |"
    info: "| Forest Green | `#00a63e` | `--color-forest-green` | Green decorative accent for icons, marks, and small graphic details. Use as a supporting accent, not as a status color |"
    info: "| Burnt Orange | `#eb6928` | `--color-burnt-orange` | Icon border, warm stroke, illustrative accent — darker orange for icon outlines and warm decorative elements |"
    info: "| Deep Teal | `#2c91af` | `--color-deep-teal` | Icon border, cool stroke, informative accent — the desaturated teal for cool-toned iconography and strokes |"
    info: "| Magenta Bloom | `#b036a4` | `--color-magenta-bloom` | Icon border, decorative stroke, pink-magenta accent — the warm magenta for iconography and brand emphasis strokes |"
    info: "| Mint Wash | `#dcfce7` | `--color-mint-wash` | Gray wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Use as a supporting accent, not as a status color |"

  tokens___typography:

    new_kansas___display_and_heading_serif___the_editorial_voice__new_kansas_carries_the_brand_s_literary_storybook_personality_at_48px_and_64px_display_sizes__with_letter_spacing_tightening_from__0_023em_at_64px_to__0_010em_at_16px__the_400_weight_not_700_is_anti_convention__it_whispers_authority_through_restraint__letting_size_and_letter_spacing_do_the_work_rather_than_weight__font_features__calt___kern___liga__enable_the_custom_ligatures_that_give_new_kansas_its_distinctive_character__substitute_with__dm_serif_display__or__source_serif_pro__for_close_character_____font_new_kansas:
      - "**Substitute:** DM Serif Display"
      - "**Weights:** 400, 500"
      - "**Sizes:** 16px, 20px, 28px, 48px, 64px"
      - "**Line height:** 1.20, 1.25, 1.35, 1.45, 1.50"
      - "**Letter spacing:** -0.023em at 64px, -0.013em at 48px, -0.010em at 16px"
      - "**OpenType features:** `\"calt\" on, \"kern\" on, \"liga\" on`"
      - "**Role:** Display and heading serif — the editorial voice. new-kansas carries the brand's literary/storybook personality at 48px and 64px display sizes, with letter-spacing tightening from -0.023em at 64px to -0.010em at 16px. The 400 weight (not 700) is anti-convention: it whispers authority through restraint, letting size and letter-spacing do the work rather than weight. Font features 'calt', 'kern', 'liga' enable the custom ligatures that give new-kansas its distinctive character. Substitute with 'DM Serif Display' or 'Source Serif Pro' for close character."

    nunito_sans___ui_and_body_sans_serif___the_functional_workhorse__nunito_sans_covers_everything_below_the_headline__nav_links__button_text__body_copy__card_labels__form_inputs__footer_text__weights_range_from_400_body_to_700_emphasis__letter_spacing_tightens_to__0_012em_at_larger_sizes__font_features__kern___liga__for_clean_rendering__its_rounded_geometric_character_complements_the_3d_mascot_aesthetic__substitute_with__inter__or__dm_sans_____font_nunito_sans:
      - "**Substitute:** Inter"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 10px, 12px, 14px, 15px, 16px, 18px, 20px"
      - "**Line height:** 1.25, 1.33, 1.40, 1.43, 1.50, 1.56, 1.63"
      - "**Letter spacing:** -0.012em at 18-20px, -0.011em at 14-16px"
      - "**OpenType features:** `\"kern\" on, \"liga\" on`"
      - "**Role:** UI and body sans-serif — the functional workhorse. Nunito Sans covers everything below the headline: nav links, button text, body copy, card labels, form inputs, footer text. Weights range from 400 (body) to 700 (emphasis). Letter-spacing tightens to -0.012em at larger sizes. Font features 'kern', 'liga' for clean rendering. Its rounded geometric character complements the 3D mascot aesthetic. Substitute with 'Inter' or 'DM Sans'."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.01px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.011px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.011px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | -0.012px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.35 | -0.01px | `--text-heading-sm` |"
      info: "| heading | 48px | 1.2 | -0.013px | `--text-heading` |"
      info: "| display | 64px | 1.2 | -0.023px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      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: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 73 | 73px | `--spacing-73` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| pills | 9999px |"
      info: "| inputs | 12px |"
      info: "| buttons | 12px |"
      info: "| special | 24px |"
      info: "| large-cards | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgb(237, 234, 228) 0px 0px 0px 1px, oklch(0.23 0.002 98 /...` | `--shadow-subtle` |"
      info: "| subtle-2 | `oklch(0.958 0.007 98) 0px 0px 0px 1px, oklch(0.23 0.002 9...` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `oklch(0.876 0.011 98) 0px 0px 0px 1px, oklch(0.23 0.002 9...` | `--shadow-subtle-3` |"
      info: "| subtle-4 | `oklch(0.23 0.002 98 / 0.02) 0px 1px 1px -0.5px, oklch(0.2...` | `--shadow-subtle-4` |"
      info: "| subtle-5 | `rgba(255, 255, 255, 0.2) 0px 0px 0px 3px, rgba(255, 255, ...` | `--shadow-subtle-5` |"
      info: "| subtle-6 | `rgba(255, 255, 255, 0.2) 0px 0px 0px 3px` | `--shadow-subtle-6` |"
      info: "| subtle-7 | `oklab(0.999994 0.0000455678 0.0000200868 / 0.07) 0px 0px ...` | `--shadow-subtle-7` |"
      info: "| subtle-8 | `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px, rgba(255, 255, ...` | `--shadow-subtle-8` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 16px"
      - "**Element gap:** 8px"

  components:

    filled_action_button:
      role: "Primary CTA — the most prominent interactive element"

      info: "White background (#ffffff), Ink Black text (#1d1d1c), 12px radius, padding 10px 20px. Nunito Sans 14-16px weight 500-600. No visible border, but subtle layered shadow: oklch(0.23 0.002 98 / 0.04) at multiple offsets creating soft elevation. Label text uses -0.011em letter-spacing. The 'Start for free' button is the canonical example."

    ghost_action_button:
      role: "Secondary CTA — paired alongside the primary"

      info: "Transparent or very dark transparent background, white/cream text (#f8f7f2), 12px radius, padding 10px 20px. No border in hero context. Includes a play icon (▷) for trailer actions. Uses Nunito Sans 14-16px weight 500."

    outlined_violet_button:
      role: "Tertiary or categorical action with chromatic emphasis"

      info: "Pale Violet background (#f3e8ff), Pale Violet border (#dab2ff) at 1px, Ink Black text, 12px radius, padding 10px 16px. The chromatic border gives it personality without overwhelming. Nunito Sans 14px weight 500."

    neutral_bordered_button:
      role: "Standard secondary button in content areas"

      info: "Paper White background (#ffffff), Charcoal Stone border (#43423e) at 1px, Ink Black text, 12px radius, padding 8px 16px. Includes a subtle shadow: oklch(0.876 0.011 98) ring + soft layered drop-shadow. Used for form actions and neutral interactions."

    metric_card:
      role: "Floating product UI element — shows data in hero and features"

      info: "White background (#ffffff), Sand Gray border (#d8d6ce) at 1px, 12px radius, padding 12-16px. Contains a label in Nunito Sans 12px Ash Gray (#99978f) and a value in new-kansas or Nunito Sans 16-20px weight 500 Ink Black. Optional small positive delta (e.g. '+54%') in Forest Green. Cards float with layered oklch shadows and slight rotation for dimensional playfulness."

    chart_card:
      role: "Data visualization container — bar/line charts in floating product cards"

      info: "White background, 12px radius, 16px padding. Contains a chart label in Nunito Sans 12px, and a chart with brand-colored data: Tangerine bars, Electric Violet line strokes, Forest Green for positive trends. Legend dots in matching chromatic colors at 8px circles."

    ai_prompt_input:
      role: "Central input element — AI chat/command interface"

      info: "White background (#ffffff), Sand Gray border at 1px, 12px radius, padding 12px 16px. Contains placeholder text in Ash Gray Nunito Sans 14px, an '@' mention chip with Pale Violet background, and a dark circular send button (Ink Black, 32px, white arrow icon) at the right. The 'How many people did our @Q1 Campaign reach?' field is canonical."

    tab_navigation:
      role: "Content switcher — used for mode/category selection"

      info: "Horizontal row of text tabs in Nunito Sans 14-16px. Active tab: Ink Black text with 2px Ink Black underline. Inactive: Ash Gray text, no underline. 8px gap between tabs. The 'Launch a product / Announce a fundraiser / Stay top of mind' tab set is canonical."

    pill_tag_chip:
      role: "Category labels, suggestion chips, mention tokens"

      info: "12px to 9999px (full pill) radius, padding 4px 10px. Background varies: Pale Violet for mentions (#f3e8ff), Paper White for suggestions. Text in Nunito Sans 12-14px weight 500. Includes optional small icon (8-12px). The 'Plan strategy / Run campaign / Measure results' suggestion chips are canonical."

    logo_bar_row:
      role: "Social proof — trusted-by company logos"

      info: "Horizontal scrollable row of company logos on Parchment Cream background (#f8f7f2). Logos rendered in Charcoal Stone (#43423e) or Ash Gray (#99978f) at uniform 24-32px height. Even spacing with 32-48px gaps. Overline text above: 'Trusted by B2B marketing and growth teams' in Nunito Sans 12-14px weight 500, Ash Gray, centered."

    floating_product_card_stack:
      role: "Hero visual — the product UI peek that overlaps the hero content"

      info: "Multiple cards (Metric, Chart, AI Prompt Input) arranged in a loose floating composition with slight rotations (-2° to 2°). Each card has white background, 12px radius, warm layered shadows (oklch-tinted at 1px, 3px, 6px, 12px offsets), and 1px Sand Gray border. The stack creates depth and signals 'real product' without showing the full app."

    hero_section:
      role: "First-screen section — full-width twilight gradient"

      info: "Full-bleed background using Twilight Indigo (#190922) at top blending into a purple-pink-orange gradient (resembling sunset clouds). Centered content with max-width ~800px. Display headline in new-kansas 64px weight 400, white text, -0.023em letter-spacing. Subhead in Nunito Sans 16-18px weight 400, warm cream/white at reduced opacity. Button row centered below."

    testimonial_block:
      role: "Social proof — large-format quote with attribution"

      info: "Parchment Cream background. Large quote text in new-kansas or Nunito Sans 28-48px weight 400, Ink Black, centered, with a large opening quotation mark. Below: small avatar circle (32px) in Sand Gray placeholder, name in Nunito Sans 14px weight 500, title in Nunito Sans 12px Ash Gray."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Transparent or Parchment Cream background, positioned over hero. Left: brand wordmark 'passionfroot' in Nunito Sans 14px weight 700, lowercase. Center: nav items in Nunito Sans 14px weight 400. Right: text links + 'Get access' filled button (Ink Black bg, white text, 12px radius, small arrow icon)."

    accent_color_card_set:
      role: "Feature/benefit cards — rainbow card rotation for visual energy"

      info: "Cards with full-saturation pastel backgrounds from the accent set: Electric Violet, Bubblegum Pink, Tangerine, Aqua Teal, Sky Blue, Sunshine Yellow, Mint Green. 12px radius, 16-20px padding, Ink Black text. Nunito Sans 14-16px for labels. Used in feature grids to create rhythm and energy without needing photographic imagery."

  do_s_and_don_ts:

    do:
      - "Use new-kansas (or DM Serif Display) at 48-64px weight 400 for all display headlines — the light weight is the signature, not a fallback for 700"
      - "Set page background to Parchment Cream (#f8f7f2), never pure white — the warm tint is what makes the system feel like paper rather than screen"
      - "Apply 12px radius consistently across cards, buttons, and inputs — this is the single most defining shape token in the system"
      - "Use 9999px radius exclusively for tag pills and suggestion chips — full pills create a distinct typographic category from standard buttons"
      - "Layer shadows with oklch warm-tinted colors (not pure rgba(0,0,0,0.1)) — the 237/234/228 base color makes elevation feel like soft sunlight on paper"
      - "Pair the rainbow accent set (violet, pink, orange, teal, blue, yellow, green) as card backgrounds in feature grids — color rotation creates visual rhythm without illustration"
      - "Use Ink Black (#1d1d1c) for all primary text and structural borders — the warm-tinted near-black is softer than #000 and more distinctive than pure gray"

    don_t:
      - "Do not use weight 700 for display headlines — the 400 weight new-kansas is intentional restraint; bolding it destroys the whisper-quiet authority"
      - "Do not use pure white (#ffffff) as a page background — the warm cream canvas is a signature trait, not an oversight"
      - "Do not use pure black (#000000) for text — Ink Black (#1d1d1c) is warmer and the correct token"
      - "Do not add heavy drop-shadows with gray/black tints — shadows must use oklch warm tones to stay on-brand"
      - "Do not create a single-color CTA (e.g. solid Electric Violet button) — the system uses neutral filled buttons (white/ink) with chromatic accents reserved for decorative elements"
      - "Do not use radii other than 12px, 16px, 24px, or 9999px — these four values are the complete shape vocabulary"
      - "Do not mix the serif and sans-serif at body sizes — new-kansas stays at 28px and above; Nunito Sans owns everything below"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Twilight Sky | `#190922` | Hero section background base — dark indigo gradient field with starfield and cloud illustration |"
    info: "| 1 | Parchment Canvas | `#f8f7f2` | Primary page background — warm cream that replaces pure white for the editorial feel |"
    info: "| 2 | Linen Card | `#edeae4` | Secondary card surface — one step above canvas for subtle depth |"
    info: "| 3 | Paper White | `#ffffff` | Elevated card, button fill, input field — the brightest interactive surface |"

  elevation:

    - "**Floating Product Card:** `rgb(237, 234, 228) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.04) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.04) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.04) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.02) 0px 12px 12px -6px`"
    - "**Content Card:** `oklch(0.958 0.007 98) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.02) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.02) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.02) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.01) 0px 12px 12px -6px`"
    - "**Hero Elevated Button:** `oklch(0.876 0.011 98) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.04) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.04) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.04) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.02) 0px 12px 12px -6px, oklch(0.23 0.002 98 / 0.02) 0px 24px 24px -12px`"

  imagery:

    info: "The visual language is dominated by 3D-rendered illustration rather than photography. A pink/coral blob-shaped mascot character (rounded body, small green leaf on top, large black eyes) appears as a brand anchor, peeking from the bottom-right of the hero and floating among clouds in secondary sections. Hero backgrounds feature a photorealistic purple-to-coral sunset sky with volumetric clouds and a starfield — this gradient sky is the primary atmospheric device, not a photograph of a real sky but a CGI/3D rendered environment. The clouds are bulbous, rounded, almost candy-like in their softness. Product screenshots are simulated through floating UI cards (metric cards, chart cards, AI input fields) rather than literal app captures, creating a 'product peek' composition. No human photography is present. The illustration style is warm, dreamy, slightly surreal — a children's-book-meets-tech aesthetic that signals approachability and creativity over corporate polish."

  layout:

    info: "The page uses a max-width 1200px centered content model with full-bleed atmospheric sections. The hero is full-viewport with a centered text composition (headline + subhead + dual-button row) layered over a twilight sky gradient, with floating product UI cards arranged in a loose 2-3 card cluster below the text and a 3D mascot character at the bottom-right. Section rhythm alternates: dark hero → cream canvas section with logo bar → another twilight illustration section → white card section (tab navigation + prompt input) → testimonial. The white card section (Meet Zest) uses a rounded white panel (16-24px radius) that sits ON TOP of the illustration, creating a paper-on-sky layering effect. Content within cards is centered. The logo bar is a single horizontal row with wide gaps. Tab interfaces use simple text-with-underline active states. Grid usage is minimal — most layouts are centered single-column or paired card compositions rather than multi-column grids. Navigation is a floating top bar (transparent over hero, solid cream over content) with brand left, nav center, CTA right."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #1d1d1c (Ink Black)"
    - "background: #f8f7f2 (Parchment Cream)"
    - "surface/elevated: #ffffff (Paper White)"
    - "border: #d8d6ce (Sand Gray)"
    - "muted text: #99978f (Ash Gray)"
    - "brand accent: #b26bf5 (Electric Violet)"
    - "primary action: #43423e (filled action)"

  example_component_prompts:
    - "**Hero headline block**: Background: twilight gradient (#190922 to #8200db). Headline: 64px new-kansas weight 400, white (#ffffff), letter-spacing -0.023em. Subhead: 18px Nunito Sans weight 400, #f8f7f2 at 80% opacity. Button row centered: 'Start for free' (white bg, #1d1d1c text, 12px radius, 10px 20px padding) + 'Watch the trailer' ghost button (transparent bg, white text, 12px radius)."

    - "**Metric card**: White background (#ffffff), 12px radius, 1px #d8d6ce border, padding 16px. Label: 'Total impressions' in 12px Nunito Sans #99978f. Value: '1.4M' in 20px Nunito Sans weight 500 #1d1d1c. Delta: '+54%' in 12px Nunito Sans weight 500 #00a63e. Layered shadow with warm oklch tints."

    - "**AI Prompt Input**: White background, 1px #d8d6ce border, 12px radius, padding 12px 16px. Placeholder text: 'How many people did our @Q1 Campaign reach?' in 14px Nunito Sans #99978f. Mention chip '@Q1 Campaign' with #f3e8ff background, #8200db text, 9999px radius, 4px 10px padding. Send button: 32px circle, #1d1d1c background, white arrow icon."

    - "**Tab Navigation**: Horizontal row, 8px gap. Active tab: 14px Nunito Sans weight 500, #1d1d1c, 2px #1d1d1c underline. Inactive: 14px Nunito Sans weight 400, #99978f, no underline. Pairs with prompt input below."

    - "**Accent Color Feature Card**: Full background fill from accent set (#b26bf5, #f788d2, #ff9147, #4ad5e8, #51b1fb, #ffe747, #58df8c — rotate). 12px radius, 20px padding. Title: 16px Nunito Sans weight 600 #1d1d1c. Body: 14px Nunito Sans weight 400 #1d1d1c at 85% opacity."

  similar_brands:

    - "**Linear** — Same compact 12px-radius cards, warm-toned layered shadows, and dark-to-light section transitions with floating product UI"
    - "**Notion** — Same playful mascot-as-brand-anchor approach, warm cream canvas with pastel accent palette, and editorial serif mixed with functional sans-serif"
    - "**Arc Browser** — Same dreamy atmospheric gradients, rainbow accent palette treated as joyful punctuation, and 3D illustration over flat UI"
    - "**Pitch** — Same warm parchment aesthetic, compact rounded components, and twilight/dusk atmospheric color stories in hero sections"
    - "**Framer** — Same serif-meets-sans-serif typographic pairing, floating product card compositions, and violet-dominant accent strategy"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #1d1d1c;
          --color-parchment-cream: #f8f7f2;
          --color-sand-gray: #d8d6ce;
          --color-linen-beige: #edeae4;
          --color-paper-white: #ffffff;
          --color-charcoal-stone: #43423e;
          --color-ash-gray: #99978f;
          --color-slate-warm: #7a7974;
          --color-electric-violet: #b26bf5;
          --color-twilight-indigo: #190922;
          --color-bubblegum-pink: #f788d2;
          --color-tangerine: #ff9147;
          --color-aqua-teal: #4ad5e8;
          --color-sky-blue: #51b1fb;
          --color-sunshine-yellow: #ffe747;
          --color-lavender-glow: #b977f8;
          --color-pale-violet: #dab2ff;
          --color-lilac-mist: #f3e8ff;
          --color-deep-violet: #8200db;
          --color-coral-red: #ee5968;
          --color-mint-green: #58df8c;
          --color-forest-green: #00a63e;
          --color-burnt-orange: #eb6928;
          --color-deep-teal: #2c91af;
          --color-magenta-bloom: #b036a4;
          --color-mint-wash: #dcfce7;
        
          /* Typography — Font Families */
          --font-new-kansas: 'new-kansas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nunito-sans: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.011px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.011px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.012px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.35;
          --tracking-heading-sm: -0.01px;
          --text-heading: 48px;
          --leading-heading: 1.2;
          --tracking-heading: -0.013px;
          --text-display: 64px;
          --leading-display: 1.2;
          --tracking-display: -0.023px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-73: 73px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-pills: 9999px;
          --radius-inputs: 12px;
          --radius-buttons: 12px;
          --radius-special: 24px;
          --radius-large-cards: 16px;
        
          /* Shadows */
          --shadow-subtle: rgb(237, 234, 228) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.04) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.04) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.04) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.02) 0px 12px 12px -6px;
          --shadow-subtle-2: oklch(0.958 0.007 98) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.02) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.02) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.02) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.00999999) 0px 12px 12px -6px;
          --shadow-subtle-3: oklch(0.876 0.011 98) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.04) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.04) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.04) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.02) 0px 12px 12px -6px, oklch(0.23 0.002 98 / 0.02) 0px 24px 24px -12px;
          --shadow-subtle-4: oklch(0.23 0.002 98 / 0.02) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.02) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.02) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.00999999) 0px 12px 12px -6px;
          --shadow-subtle-5: rgba(255, 255, 255, 0.2) 0px 0px 0px 3px, rgba(255, 255, 255, 0.3) 0px 0px 0px 1px;
          --shadow-subtle-6: rgba(255, 255, 255, 0.2) 0px 0px 0px 3px;
          --shadow-subtle-7: oklab(0.999994 0.0000455678 0.0000200868 / 0.07) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;
          --shadow-subtle-8: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px, rgba(255, 255, 255, 0.06) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.12) 0px 2px 6px 0px;
        
          /* Surfaces */
          --surface-twilight-sky: #190922;
          --surface-parchment-canvas: #f8f7f2;
          --surface-linen-card: #edeae4;
          --surface-paper-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #1d1d1c;
          --color-parchment-cream: #f8f7f2;
          --color-sand-gray: #d8d6ce;
          --color-linen-beige: #edeae4;
          --color-paper-white: #ffffff;
          --color-charcoal-stone: #43423e;
          --color-ash-gray: #99978f;
          --color-slate-warm: #7a7974;
          --color-electric-violet: #b26bf5;
          --color-twilight-indigo: #190922;
          --color-bubblegum-pink: #f788d2;
          --color-tangerine: #ff9147;
          --color-aqua-teal: #4ad5e8;
          --color-sky-blue: #51b1fb;
          --color-sunshine-yellow: #ffe747;
          --color-lavender-glow: #b977f8;
          --color-pale-violet: #dab2ff;
          --color-lilac-mist: #f3e8ff;
          --color-deep-violet: #8200db;
          --color-coral-red: #ee5968;
          --color-mint-green: #58df8c;
          --color-forest-green: #00a63e;
          --color-burnt-orange: #eb6928;
          --color-deep-teal: #2c91af;
          --color-magenta-bloom: #b036a4;
          --color-mint-wash: #dcfce7;
        
          /* Typography */
          --font-new-kansas: 'new-kansas', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-nunito-sans: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.011px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.011px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: -0.012px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.35;
          --tracking-heading-sm: -0.01px;
          --text-heading: 48px;
          --leading-heading: 1.2;
          --tracking-heading: -0.013px;
          --text-display: 64px;
          --leading-display: 1.2;
          --tracking-display: -0.023px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-73: 73px;
          --spacing-80: 80px;
          --spacing-96: 96px;
        
          /* Border Radius */
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgb(237, 234, 228) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.04) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.04) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.04) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.02) 0px 12px 12px -6px;
          --shadow-subtle-2: oklch(0.958 0.007 98) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.02) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.02) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.02) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.00999999) 0px 12px 12px -6px;
          --shadow-subtle-3: oklch(0.876 0.011 98) 0px 0px 0px 1px, oklch(0.23 0.002 98 / 0.04) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.04) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.04) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.02) 0px 12px 12px -6px, oklch(0.23 0.002 98 / 0.02) 0px 24px 24px -12px;
          --shadow-subtle-4: oklch(0.23 0.002 98 / 0.02) 0px 1px 1px -0.5px, oklch(0.23 0.002 98 / 0.02) 0px 3px 3px -1.5px, oklch(0.23 0.002 98 / 0.02) 0px 6px 6px -3px, oklch(0.23 0.002 98 / 0.00999999) 0px 12px 12px -6px;
          --shadow-subtle-5: rgba(255, 255, 255, 0.2) 0px 0px 0px 3px, rgba(255, 255, 255, 0.3) 0px 0px 0px 1px;
          --shadow-subtle-6: rgba(255, 255, 255, 0.2) 0px 0px 0px 3px;
          --shadow-subtle-7: oklab(0.999994 0.0000455678 0.0000200868 / 0.07) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;
          --shadow-subtle-8: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px, rgba(255, 255, 255, 0.06) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.12) 0px 2px 6px 0px;
        }