fable___style_reference:
  info: "> a literary reading nook with cream paper and ink — the book is the art"

  theme: "mixed"

  info: "Fable reads like an editorial book club brought to life: generous cream surfaces, large warm serif headlines, and alternating full-bleed colored bands (forest green and sky blue) that frame colorful flat-illustration scenes. Typography is the loudest voice — Heldane Display at near-black weight with tight 0.86–0.94 line-heights produces a literary, slightly compressed headline look, while Inter handles every utility and body line at modest sizes with strong negative tracking. Buttons are stadium-pill shapes (60px radius) in two tones — dark on cream, white on color — and book covers themselves become the primary decorative motif, treated as editorial artwork rather than thumbnails. The overall rhythm is section-band driven: each full-bleed color block introduces a single concept with a headline, supporting copy, a single pill CTA, and an illustration or product preview on the right."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Fable Forest | `#064c37` | `--color-fable-forest` | Full-bleed dark section background, first-screen hero band — deep botanical green that makes the warm cream and orange illustration pop |"
    info: "| Storybook Sky | `#43a1d7` | `--color-storybook-sky` | Full-bleed mid section background — cerulean blue band that carries product-feature storytelling between cream and green sections |"
    info: "| Paper Cream | `#f7f4ee` | `--color-paper-cream` | Hairline borders, dividers, input outlines, and card edges on light surfaces. |"
    info: "| Ink | `#161015` | `--color-ink` | Primary heading and display text — near-black with a violet undertone that warms the editorial serif without losing contrast |"
    info: "| Charcoal Plum | `#292229` | `--color-charcoal-plum` | Filled pill button background, dark card surfaces, secondary heading color |"
    info: "| Graphite | `#3f383d` | `--color-graphite` | Body text, paragraph copy, secondary UI text — warm dark gray that reads softer than pure black on cream |"
    info: "| Char | `#070607` | `--color-char` | Footer background, darkest surface — reserved for terminal bands and footer chrome |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page background, reverse-mode button fill (on dark sections), text on dark surfaces |"
    info: "| Fog | `#ededed` | `--color-fog` | Subtle image placeholders, soft dividers, muted card backgrounds when a lighter neutral than cream is needed |"

  tokens___typography:

    inter___all_ui__body__button__link__and_supporting_text__negative_letter_spacing_across_the_scale_tightens_inter_into_an_editorial_companion_to_heldane___at_16px_body_the_tracking_reads_noticeably_tighter_than_default__weights_400_for_body__500_for_labels_buttons__600_700_reserved_for_emphasis_____font_inter:
      - "**Substitute:** Inter (already Google Fonts), or DM Sans"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 30px"
      - "**Line height:** 1.00–1.60 (1.50 typical body, 1.25 for tight UI rows, 1.00 for inline tags)"
      - "**Letter spacing:** -0.42px at 10px (-0.042em), -0.30px at 15px (-0.020em), -0.27px at 18px (-0.015em), -0.24px at 20px (-0.012em), -0.21px at 24px (-0.012em equivalent), tightening as size increases"
      - "**OpenType features:** `\"ss01\" on, \"cv11\" on`"
      - "**Role:** All UI, body, button, link, and supporting text. Negative letter-spacing across the scale tightens Inter into an editorial companion to Heldane — at 16px body the tracking reads noticeably tighter than default. Weights 400 for body, 500 for labels/buttons, 600–700 reserved for emphasis."

    heldane_display___editorial_display_headlines_at_48_80px__near_regular_weight_400_with_tight_tracking_and_compressed_line_heights_creates_a_literary__magazine_cover_feel___the_headline_is_the_hero__not_a_shout__the_22_26px_usage_at_weight_500_handles_mid_size_editorial_subtitles_____font_heldane_display:
      - "**Substitute:** Fraunces, Lora, or Playfair Display"
      - "**Weights:** 400, 500"
      - "**Sizes:** 22px, 26px, 48px, 72px, 80px"
      - "**Line height:** 0.86–1.09 (extremely tight on display: 0.86 at 80px, 0.88 at 72px, 0.94 at 48px, 1.08–1.09 at 22–26px)"
      - "**Role:** Editorial display headlines at 48–80px. Near-regular weight (400) with tight tracking and compressed line-heights creates a literary, magazine-cover feel — the headline is the hero, not a shout. The 22–26px usage at weight 500 handles mid-size editorial subtitles."

    aktiv_grotesk___aktiv_grotesk___detected_in_extracted_data_but_not_described_by_ai____font_aktiv_grotesk:
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.5"
      - "**Role:** Aktiv Grotesk — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.2px | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | -0.25px | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | -0.32px | `--text-body` |"
      info: "| subheading | 20px | 1.33 | -0.4px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.42 | -0.48px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.25 | -0.66px | `--text-heading` |"
      info: "| heading-lg | 48px | 0.94 | — | `--text-heading-lg` |"
      info: "| display | 72px | 0.88 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 52 | 52px | `--spacing-52` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 12px |"
      info: "| buttons | 60px |"
      info: "| largeCards | 48px |"
      info: "| smallChips | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(0, 0, 0, 0.4) 0px 4px 20px 0px` | `--shadow-lg` |"
      info: "| lg-2 | `rgba(0, 0, 0, 0.6) 0px 4px 20px 0px` | `--shadow-lg-2` |"

    layout:

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

  components:

    filled_pill_button___dark:
      role: "Primary CTA on cream and white sections"

      info: "Stadium-pill (60px radius), background #292229, white Inter text at 16px weight 500, padding 16px 28px, no border. Subtle shadow rgba(0,0,0,0.4) 0 4px 20px. Letter-spacing follows body tracking (~-0.32px)."

    filled_pill_button___white:
      role: "Primary CTA on colored bands (forest green, sky blue)"

      info: "Stadium-pill (60px radius), background #ffffff, Ink (#161015) text at 16px weight 500, padding 16px 28px, no border. Same 60px radius and shadow as dark variant — only fill and text color invert."

    ghost_text_link:
      role: "Secondary inline actions in nav and body copy"

      info: "No background, 1px underline, Inter 16px weight 500, color #161015, no padding. Used for nav items and inline editorial links."

    display_headline_section:
      role: "Hero and feature section headline block"

      two_column_layout: "left column holds Heldane Display headline at 48–80px weight 400, line-height 0.86–0.94, color #161015 (on light) or #ffffff (on dark bands), max-width ~520px. Right column holds a 1:1 illustration or product mockup with generous negative space. 80px vertical padding top/bottom."

    book_cover_tile:
      role: "Primary content unit — book cover grid items"

      info: "No card chrome — book covers sit directly on the section background (cream or dark green). Slight 2–4px bottom shadow rgba(0,0,0,0.2) to lift covers off the page. 8–12px gap between covers. Arranged in a horizontally-scrolling row or 6-column grid."

    cream_card:
      role: "General content card on white or colored backgrounds"

      info: "Background #f7f4ee, radius 12px, padding 24px, no border. Optional lift shadow rgba(0,0,0,0.6) 0 4px 20px for elevated cards. Internal spacing: 16px between heading and body, 24px between card sections."

    elevated_feature_card:
      role: "Phone mockup container and large feature blocks"

      info: "Background #ffffff, radius 48px (large rounded card), padding 32–40px, shadow rgba(0,0,0,0.6) 0 4px 20px. Used to frame device mockups and product previews on colored section bands."

    navigation_bar:
      role: "Top-of-page site navigation"

      info: "Transparent or solid section-color background, no border, horizontal layout with logo left, center links, account/cart icons right. Nav links in Inter 14–16px weight 500. Logo is a small mark with the wordmark — minimal, no background fill."

    section_band:
      role: "Full-bleed colored content section"

      info: "Edge-to-edge background color (forest green, sky blue, or cream), internal max-width 1200px centered, vertical padding 80–120px. Contains a Display Headline Section or book grid. No visible borders between bands — the color change is the divider."

    book_cover_grid_row:
      role: "Horizontal strip of book covers"

      info: "Single row of 6–8 book covers, 12px gaps, no card frames, slight scale-on-hover. Sits inside a cream or dark-green Section Band. Overhangs the max-width slightly to imply the row scrolls or continues."

    illustration_scene:
      role: "Brand artwork in hero and feature sections"

      info: "Flat, dimensional illustration of a person with bold solid color blocks (orange, teal, pink, white). Placed in the right column of a Display Headline Section, roughly 1:1 aspect ratio, with floating geometric accents (stars, circles) in brand colors. No stroke outlines — color blocks define the form."

    phone_mockup_frame:
      role: "Product screenshot container on feature bands"

      info: "White phone bezel with rounded corners (radius 36px), screen content visible at 9:16 aspect, floats inside an Elevated Feature Card. Subtle drop shadow lifts it above the blue section background."

  do_s_and_don_ts:

    do:
      - "Use Heldane Display at weight 400 (never 500+) for all headlines 48px and above — the near-regular weight is the editorial signature"
      - "Use the stadium-pill 60px radius for every button — filled dark on cream, filled white on colored bands, never square or small-radius"
      - "Alternate full-bleed section bands: Fable Forest → cream → Storybook Sky → cream, using color as the primary section divider instead of hairlines or spacing"
      - "Set Inter body text with negative letter-spacing matching the scale (-0.32px at 16px, -0.66px at 30px) — default Inter tracking breaks the editorial feel"
      - "Use Paper Cream (#f7f4ee) as the default card and page surface over pure white — the warm off-white is the brand's \"page\""
      - "Let book covers speak for themselves: no card frames, no overlays, no badges — just the cover on a clean surface with 8–12px gaps"
      - "Tighten display headline line-height to 0.86–0.94 at sizes 48–80px so lines lock together visually like editorial print"

    don_t:
      - "Don't use square or 4–8px radius buttons — the 60px pill is non-negotiable and defines the brand voice"
      - "Don't place headlines on pure white over 24px — pair every display headline with either a cream, forest, or sky background"
      - "Don't use chromatic color for CTAs — buttons are always dark or white; #43a1d7 and #064c37 are backgrounds only, never fills"
      - "Don't introduce gradients, glows, or colored shadows — the only shadow allowed is the simple 0 4px 20px black drop"
      - "Don't use Heldane Display for body, captions, or UI labels — it is headline-only at 22px+; everything else is Inter"
      - "Don't add card borders or hairline dividers inside Section Bands — let the color contrast do the structural work"
      - "Don't use 100% black for body or heading text — Ink (#161015) and Charcoal Plum (#292229) keep the warm editorial tone"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Base page background between colored section bands |"
    info: "| 1 | Paper Cream | `#f7f4ee` | Warm card surface, light section bands, signature brand surface |"
    info: "| 2 | Soft Fog | `#ededed` | Image placeholders, muted inset surfaces |"
    info: "| 3 | Storybook Sky | `#43a1d7` | Full-bleed mid-page blue band for feature storytelling |"
    info: "| 4 | Fable Forest | `#064c37` | Full-bleed dark hero band — primary brand color moment |"
    info: "| 5 | Char Footer | `#070607` | Darkest terminal surface for footer chrome |"

  elevation:

    - "**Filled Pill Button:** `0 4px 20px 0 rgba(0, 0, 0, 0.4)`"
    - "**Cream Card / Elevated Feature Card:** `0 4px 20px 0 rgba(0, 0, 0, 0.6)`"
    - "**Book Cover Tile:** `0 2px 8px 0 rgba(0, 0, 0, 0.2)`"

  imagery:

    illustration_is_the_hero_imagery_style: "flat, dimensional, color-block figures of people reading or interacting with books, painted in bold solids — burnt orange clothing, teal trousers, warm skin tones, pink and white accents. Scenes include floating geometric confetti (stars, circles, plus signs) in brand yellow/blue. The illustrations are roughly 1:1, sit in the right column of two-column sections, and are unsigned editorial-feeling. Photography is almost entirely book cover artwork, treated as editorial content — no lifestyle photography, no people photography outside the illustrations. The visual density is illustration-and-type-forward with very little photographic surface."

  layout:

    info: "Max-width 1200px centered, but section bands break to full-bleed edge-to-edge. Hero and feature sections are always two-column: left text block (max-width ~520px) with headline + sub + single pill CTA, right illustration or phone mockup. After every Display Headline Section, a full-width Book Cover Grid Row runs edge-to-edge with slight overhang, implying a horizontal scroll. Section rhythm alternates: dark green band → cream band → blue band → cream band → dark footer. Navigation is a minimal transparent top bar with logo left, two center links, and two right-side icons (account, cart). No sidebar, no mega-menu, no sticky header behavior — the sections themselves carry the eye through the page."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #161015"
    - "text (body): #3f383d"
    - "background (page): #ffffff"
    - "background (card/surface): #f7f4ee"
    - "border: none (use color bands instead)"
    - "accent (decorative): #43a1d7"
    - "primary action: #292229 (filled action)"

    example_component_prompts:
    - "*Create a hero section on Fable Forest (#064c37) full-bleed background, 80px vertical padding, max-width 1200px centered. Left column: headline in Heldane Display 72px weight 400, color #ffffff, line-height 0.88. Subtext in Inter 18px weight 400, color #ffffff, line-height 1.5, max-width 460px. Filled Pill Button — White: #ffffff background, Ink (#161015) text, 60px radius, padding 16px 28px, Inter 16px weight 500. Right column: 1:1 illustration of a reader with a bird, floating orange and yellow geometric accents.*"

    - "*Create a Cream Card on a white page: background #f7f4ee, radius 12px, padding 24px, shadow 0 4px 20px rgba(0,0,0,0.6). Heading in Inter 24px weight 600, color #161015, letter-spacing -0.48px. Body in Inter 16px weight 400, color #3f383d, letter-spacing -0.32px, line-height 1.5. 16px gap between heading and body.*"

    - "*Create a Book Cover Grid Row: horizontal row of 6 book covers, 12px gap, no card frames, covers sit directly on a Storybook Sky (#43a1d7) section background. Each cover has a subtle 0 2px 8px rgba(0,0,0,0.2) shadow. Row slightly overhangs the 1200px max-width to imply a scrollable strip.*"

    - "*Create a Display Headline on a cream section: Heldane Display 80px weight 400, color #161015, line-height 0.86, max-width 560px, letter-spacing 0. Below it a sub in Heldane Display 26px weight 500, line-height 1.08, color #3f383d. No underline, no italic.*"

    - "*Create a phone mockup in an Elevated Feature Card on a Storybook Sky (#43a1d7) section: card background #ffffff, radius 48px, padding 40px, shadow 0 4px 20px rgba(0,0,0,0.6). Inside, a phone with 36px corner-radius bezel, screen showing a book list UI in Inter. Card sits in the right half of the section, left half holds a Display Headline Section in Ink color.*"

  section_band_system:

    info: "Sections are the primary structural device, not cards or dividers. Use this sequence for any new page:"

    - "**Fable Forest (#064c37)** — opening hero or brand-moment section, white text, white pill CTA, large illustration right"
    - "**Paper Cream (#f7f4ee)** — explanatory or community section, dark Ink text, dark pill CTA"
    - "**Storybook Sky (#43a1d7)** — product feature section, dark Ink text, dark pill CTA, phone mockup or illustration right"
    - "**Paper Cream (#f7f4ee)** — secondary feature or social-proof section"
    - "**Char (#070607)** — terminal footer band"

    info: "Never put two bands of the same color adjacent. Never introduce a third chromatic background — the two-color (green + blue) rotation is the system."

  similar_brands:

    - "**Bookshop.org** — Same editorial serif-headline + cream-surface approach with book covers as primary content units"
    - "**The New Yorker digital** — Same tight-line-height display serif and warm off-white reading surface for literary content"
    - "**Substack homepage** — Same full-bleed color-band section structure with left-text/right-illustration split and pill CTAs"
    - "**Headspace** — Same flat-illustration character art with bold color-block clothing floating against solid color backgrounds"
    - "**MagicLinks / Literati** — Same book-discovery grid pattern with covers as the dominant visual, cream and dark contrast"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-fable-forest: #064c37;
          --color-storybook-sky: #43a1d7;
          --color-paper-cream: #f7f4ee;
          --color-ink: #161015;
          --color-charcoal-plum: #292229;
          --color-graphite: #3f383d;
          --color-char: #070607;
          --color-pure-white: #ffffff;
          --color-fog: #ededed;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-heldane-display: 'Heldane Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aktiv-grotesk: 'Aktiv Grotesk', 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.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.25px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.42;
          --tracking-heading-sm: -0.48px;
          --text-heading: 30px;
          --leading-heading: 1.25;
          --tracking-heading: -0.66px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 0.94;
          --text-display: 72px;
          --leading-display: 0.88;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-52: 52px;
          --spacing-80: 80px;
          --spacing-100: 100px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-full: 48px;
          --radius-full-2: 60px;
        
          /* Named Radii */
          --radius-cards: 12px;
          --radius-buttons: 60px;
          --radius-largecards: 48px;
          --radius-smallchips: 8px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.4) 0px 4px 20px 0px;
          --shadow-lg-2: rgba(0, 0, 0, 0.6) 0px 4px 20px 0px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-paper-cream: #f7f4ee;
          --surface-soft-fog: #ededed;
          --surface-storybook-sky: #43a1d7;
          --surface-fable-forest: #064c37;
          --surface-char-footer: #070607;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-fable-forest: #064c37;
          --color-storybook-sky: #43a1d7;
          --color-paper-cream: #f7f4ee;
          --color-ink: #161015;
          --color-charcoal-plum: #292229;
          --color-graphite: #3f383d;
          --color-char: #070607;
          --color-pure-white: #ffffff;
          --color-fog: #ededed;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-heldane-display: 'Heldane Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-aktiv-grotesk: 'Aktiv Grotesk', 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.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --tracking-body-sm: -0.25px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: -0.32px;
          --text-subheading: 20px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.4px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.42;
          --tracking-heading-sm: -0.48px;
          --text-heading: 30px;
          --leading-heading: 1.25;
          --tracking-heading: -0.66px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 0.94;
          --text-display: 72px;
          --leading-display: 0.88;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-52: 52px;
          --spacing-80: 80px;
          --spacing-100: 100px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-3xl: 24px;
          --radius-full: 48px;
          --radius-full-2: 60px;
        
          /* Shadows */
          --shadow-lg: rgba(0, 0, 0, 0.4) 0px 4px 20px 0px;
          --shadow-lg-2: rgba(0, 0, 0, 0.6) 0px 4px 20px 0px;
        }