home___style_reference:
  info: "> Botanical specimen on vellum — an oxblood-stamped plate of golden fat, edges sharp, paper warm, nothing rounded."

  theme: "light"

  info: "Savor uses a warm editorial-ingredient-archive language: cream-paper canvases, full-bleed macro photographs of fats and oils as the dominant visual, and a single deep oxblood accent that replaces shadows with hairline 1px borders. Typography carries a deliberate weight contrast — Roslindale Display Condensed whispers at weight 300 across 120–140px display lines, while Suisse Intl handles body, nav, and UI chrome at 400/700. Components stay thin and outlined rather than filled: a uniform 5px corner radius across buttons, cards, and badges, generous warm-cream negative space, and a palette of essentially three tones — cream, oxblood, and ink. The site reads less like a product page and more like a botanical plate or a science monograph photographed in late-afternoon light."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Vellum Cream | `#fff9eb` | `--color-vellum-cream` | Page canvas, card surfaces, text on dark — the dominant warm-paper background that sets the entire temperature of the interface |"
    info: "| Linen | `#f0e7d7` | `--color-linen` | Secondary surface for elevated cards, button fills, and body borders — slightly warmer and denser than vellum, creates a cream-on-cream layering without leaving the neutral family |"
    info: "| Buttered Gold | `#f8e47d` | `--color-buttered-gold` | Accent wash for highlights, badge fills, and tonal surface variation — a saturated warm gold used sparingly to suggest the ingredient palette without competing with photography |"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, logo mark, and high-contrast accents — appears in nav fills and select UI chrome where absolute blackness is needed |"
    info: "| Warm Graphite | `#4d4b47` | `--color-warm-graphite` | Muted text, secondary metadata, and low-emphasis borders — a warm dark gray that softens the otherwise stark black |"
    info: "| Oxblood | `#370808` | `--color-oxblood` | Primary action borders, nav borders, card outlines, badge text, and the single chromatic brand color — a deep wine red that reads almost as a darker cousin of the cream rather than a competing hue, functioning as ink-with-a-pulse |"

  tokens___typography:

    roslindale_display_condensed___hero_display_only___used_at_light_weight_300_in_tightly_leaded_0_86_display_lines_up_to_140px__the_condensed_proportions_and_thin_weight_make_the_type_feel_like_an_etched_caption_on_a_botanical_print_rather_than_a_saas_headline____font_roslindale_display_condensed:
      - "**Substitute:** GT Sectra Display, Migra Display, editorial condensed serifs"
      - "**Weights:** 300"
      - "**Sizes:** 120px, 140px"
      - "**Line height:** 0.86–0.90"
      - "**Letter spacing:** -0.01em (≈ -1.2 to -1.4px at display sizes)"
      - "**Role:** Hero display only — used at light weight 300 in tightly-leaded (0.86) display lines up to 140px; the condensed proportions and thin weight make the type feel like an etched caption on a botanical print rather than a SaaS headline"

    suisse_intl___universal_workhorse___nav__body__buttons__badges__cards__footer__and_all_subheading_levels_from_14px_caption_up_to_40px_section_headings__weight_400_for_body__700_for_nav_labels_and_emphasis____font_suisse_intl:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 400, 700"
      - "**Sizes:** 14px, 16px, 18px, 21px, 22px, 28px, 40px"
      - "**Line height:** 1.24–1.45"
      - "**Letter spacing:** -0.009em to -0.01em across all sizes (≈ -0.13 to -0.4px)"
      - "**Role:** Universal workhorse — nav, body, buttons, badges, cards, footer, and all subheading levels from 14px caption up to 40px section headings; weight 400 for body, 700 for nav labels and emphasis"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.45 | -0.13px | `--text-caption` |"
      info: "| body-sm | 16px | 1.45 | -0.14px | `--text-body-sm` |"
      info: "| body | 18px | 1.35 | -0.18px | `--text-body` |"
      info: "| heading-sm | 22px | 1.35 | -0.22px | `--text-heading-sm` |"
      info: "| subheading | 28px | 1.25 | -0.28px | `--text-subheading` |"
      info: "| heading | 40px | 1.24 | -0.4px | `--text-heading` |"
      info: "| display | 120px | 0.9 | -1.2px | `--text-display` |"
      info: "| display-xl | 140px | 0.86 | -1.4px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| all | 5px |"
      info: "| cards | 5px |"
      info: "| badges | 5px |"
      info: "| inputs | 5px |"
      info: "| buttons | 5px |"

    layout:

      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    outlined_action_button:
      role: "Primary CTA across the site"

      info: "Ghost/outlined variant — 1px solid oxblood (#370808) border, vellum (#fff9eb) background, oxblood text, 5px radius, 16px vertical × 20px horizontal padding. Suisse Intl 16px weight 400. The outlined treatment is the dominant button style; filled buttons appear only 1× in the data."

    filled_linen_button:
      role: "Secondary or default state button"

      info: "Linen (#f0e7d7) fill, 1px oxblood border, 5px radius, 16px × 20px padding, 16px Suisse Intl 400. Reads as a paper-on-paper button — no shadow, no gradient."

    ghost_text_button:
      role: "Tertiary / nav-style action"

      info: "No background, no border, 16px Suisse Intl 400 in oxblood or ink, 5px radius (invisible), used inline with body copy."

    oxblood_bordered_card:
      role: "Content card for features, recipes, or product highlights"

      info: "Vellum (#fff9eb) fill, 1px solid oxblood (#370808) border, 5px radius, 20px padding. No drop shadow. Optional buttered-gold (#f8e47d) accent strip on the top edge in some variants. Cards stack on the vellum canvas with only the border distinguishing them — the page already feels layered because of the warm cream."

    linen_elevated_card:
      role: "Variant card for warmer emphasis"

      info: "Linen (#f0e7d7) fill, 1px oxblood border, 5px radius, 20px padding. Used when a card needs to step forward from the vellum canvas without darkening."

    pill_tag_badge_5px:
      role: "Category labels, ingredient tags, status pills"

      info: "Vellum or transparent background, 1px oxblood border, 5px radius (not pill-shaped despite the name — the radius is shared with everything), 4px × 12px padding, 14px Suisse Intl 400 oxblood text. Tight horizontal pill with squared-ish corners."

    buttered_gold_fill_badge:
      role: "Highlight or featured-state badge"

      info: "Buttered-gold (#f8e47d) fill, oxblood text, 5px radius, 4px × 12px padding, 14px weight 700. The rare chromatic badge variant — appears as a warm punctuation mark against the otherwise monochrome UI."

    nav_link:
      role: "Primary site navigation"

      info: "Transparent background, 1px oxblood bottom border (308 occurrences — the defining nav treatment), 16–18px Suisse Intl 400 ink text. The bottom border IS the active-state indicator; no background fill change on hover."

    full_bleed_image_plate:
      role: "Section dividers, ingredient photography, hero backgrounds"

      info: "Edge-to-edge macro photograph with no border, no radius (sharp corners even at viewport edges), vellum caption overlay. The photograph itself carries the section — no frame, no rounded corner, no shadow. The image bleeds fully into the next cream section."

    image_caption_overlay:
      role: "Inline labels on full-bleed photography"

      info: "Suisse Intl 14–18px weight 400 in vellum, placed on top of photography with generous padding. A thin oxblood em-dash or divider line separates caption fragments (e.g. 'From butter — to palm oil'). The caption is the only typography sitting on the photograph."

    footer_block:
      role: "Site footer with links and legal"

      info: "Linen (#f0e7d7) or vellum background, 1px oxblood top border, 36px padding, two- or three-column link grid with 20px row gaps. Footer text in 14–16px Suisse Intl 400 ink or warm graphite."

    section_divider:
      role: "Between editorial sections"

      info: "No visible line — sections flow into each other on the same vellum canvas. The 80px vertical gap is the only divider."

  do_s_and_don_ts:

    do:
      - "Use 5px border-radius for every interactive element — buttons, cards, badges, inputs. Do not introduce pills, fully rounded corners, or any other radius value."
      - "Use 1px solid #370808 (Oxblood) as the default border on cards, buttons, and nav. The border is the elevation system; never pair it with a drop shadow."
      - "Pair Roslindale Display Condensed 300 at 120–140px with line-height 0.86–0.90 for hero display only. Do not use it for subheadings, body, or UI chrome."
      - "Use Suisse Intl at weight 400 for body (18–21px) and weight 700 for nav, badges, and emphasis. Keep letter-spacing between -0.009em and -0.01em across all sizes."
      - "Build sections on #fff9eb (Vellum) as the base canvas; use #f0e7d7 (Linen) only when a card or surface needs a one-step elevation. Never use a card background lighter than the page."
      - "Treat the macro photograph as a full-bleed section with sharp corners and no frame. Place a 14–18px vellum caption directly on the image — never inside a bordered card overlaid on the photo."
      - "Let Oxblood (#370808) carry structural weight — borders, outlines, nav rules, and badge text. Avoid using it as a large filled area unless it is a deliberate inverted section."

    don_t:
      - "Do not add drop shadows, blurs, or glow effects. The system expresses depth through 1px borders and 1–2% tonal shifts between Vellum and Linen."
      - "Do not use rounded corners larger than 5px. No pill buttons, no circular avatars, no 12–16px card radii — those belong to a different design language."
      - "Do not introduce saturated blue, green, or other chromatic accents outside the cream/oxblood/gold family. The palette is intentionally narrow."
      - "Do not set Roslindale Display Condensed at body sizes. It is a 120px+ display face; using it at 22–28px collapses its distinctive condensed proportions."
      - "Do not center the display headline. Display type in this system anchors to the left or sits with a small caption offset — not dead-centered like a SaaS hero."
      - "Do not add gradients, glassmorphism, or texture overlays to UI surfaces. The cream paper is the texture; layering on top of it breaks the analog feel."
      - "Do not use filled oxblood buttons as the default CTA. The outlined variant (1px oxblood border, vellum fill) is the system default — a filled oxblood button would compete with the section photography."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Vellum Page | `#fff9eb` | Dominant canvas — every section, hero, and footer sits on this warm cream paper tone |"
    info: "| 1 | Linen Card | `#f0e7d7` | Elevated card surface, button fill, and secondary background — the one step warmer than vellum for subtle layering |"
    info: "| 2 | Buttered Gold Wash | `#f8e47d` | Tonal accent surface and badge fill — used very sparingly for warmth punctuation |"
    info: "| 3 | Warm Graphite | `#4d4b47` | Dark muted surface for inverted sections or dense metadata blocks |"
    info: "| 4 | Oxblood Inset | `#370808` | Deepest brand surface — reserved for inverted footers or hero overlays where the wine tone needs to feel solid, not just a line |"

  elevation:

    info: "Shadows are absent by design. Elevation is expressed entirely through 1px oxblood (#370808) hairlines on the vellum background — borders are the shadow system. Where stacking is needed, a card on vellum uses a single oxblood 1px border; a button on a card adds no additional shadow. The visual depth comes from the 1–2% tonal shift between vellum and linen surfaces, not from blur or offset. The only exception is full-bleed photography, which provides the real sense of depth by replacing flat color with texture."

  imagery:

    info: "Macro photography is the design system. Every section is either a full-bleed photograph of an ingredient at extreme close-up — oils, fats, butter, palm — or a calm cream canvas with a single small caption. The photographs have warm amber/gold tones, natural light, and no human subjects. Images are sharp-cornered and edge-to-edge, never framed, never rounded, never inside a card. There are no illustrations, no product mockups, no abstract graphics, no icons in the traditional sense — the ingredient itself is the visual. Photography density is high: roughly one full-bleed image per editorial section, with the text acting as a caption to the photograph rather than the other way around."

  layout:

    info: "Full-bleed editorial layout with no fixed max-width. Sections flow vertically as alternating bands of full-bleed photography and quiet cream text blocks. The hero is a display headline (Roslindale 120–140px) on vellum, followed by a full-bleed macro photograph with a small left-aligned caption. Section rhythm is spacious: 80px between sections, with photography sections feeling like page turns. Content is left-aligned, not centered, and the display headline sets the left margin that body text follows. Navigation is a single thin top bar with a 1px oxblood bottom rule — no sticky mega-menu, no sidebar. Two-column layouts (text + image) appear in mid-page sections, but the overall impression is vertical and cinematic rather than grid-dense."

  agent_prompt_guide:

  quick_color_reference:
    - "Page background: #fff9eb (Vellum)"
    - "Card surface: #f0e7d7 (Linen)"
    - "Primary border / nav rule: #370808 (Oxblood)"
    - "Body text: #000000 (Ink) or #4d4b47 (Warm Graphite)"
    - "Accent surface: #f8e47d (Buttered Gold)"
    - "primary action: #370808 (filled action)"

  3_5_example_component_prompts:

    - "**Outlined Action Button**: \"Create a 5px-radius button with 1px solid #370808 border, #fff9eb background, #370808 text, 16px top/bottom × 20px left/right padding, Suisse Intl 16px weight 400. No shadow.\""

    - "**Oxblood-Bordered Card**: \"Build a card on #fff9eb page background: #fff9eb fill, 1px solid #370808 border, 5px radius, 20px padding, no shadow. Headline at 22px Suisse Intl 400 #000000, body at 18px weight 400 #4d4b47.\""

    - "**Full-Bleed Ingredient Photograph**: \"Place a full-bleed macro photograph (no border, no radius, no frame) covering 100vw × ~70vh. Overlay a 14px Suisse Intl 400 #fff9eb caption 32px from the left edge, with a thin #370808 em-dash separating the two phrases.\""

    - "**Display Headline Section**: \"Left-align a Roslindale Display Condensed 300 headline at 140px, line-height 0.86, letter-spacing -1.4px, color #000000 on #fff9eb. Below it, 40px of vertical space, then a 18px Suisse Intl 400 #4d4b47 subhead at 60% width.\""

    - "**Nav Bar with Oxblood Rule**: \"Top nav with transparent background, 16px Suisse Intl 400 #000000 links left-aligned, 9px gap between items, 1px solid #370808 bottom border spanning full width. 20px vertical padding.\""

  color___material_logic:

    info: "The palette is a temperature study, not a color story. Vellum is warm because it carries the yellow undertone of aged paper; Linen is a 4% step warmer. Oxblood is the only chromatic color and it reads as a near-neutral dark because its chroma is so low — it behaves like ink that happens to be wine-red. Buttered Gold is a rare surface accent that should appear once per page at most, never in gradients. The absence of pure white (#ffffff) and pure black at the same time is deliberate: the cream-to-wine axis keeps every surface inside the same warm temperature, so the photographs' amber tones feel native to the UI rather than imposed on it. Materials: paper, hairlines, oil. Never glass, never plastic, never glow."

  similar_brands:

    - "**Brightland** — Same warm cream canvas with full-bleed ingredient photography and a single deep accent — though Brightland leans black instead of oxblood"
    - "**Graza** — Same food-ingredient brand tone with bold condensed display type and a restrained cream + dark accent palette"
    - "**Omsom** — Editorial CPG layout language: oversized serif/sans display contrast, generous cream space, and macro ingredient imagery as the primary visual"
    - "**Aesop** — Same warm-paper editorial restraint with hairline 1px borders replacing shadows and a near-monochrome warm palette"
    - "**Farmacy** — Same botanical-archive aesthetic with left-aligned display type, cream backgrounds, and ingredient-as-specimen photography"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-vellum-cream: #fff9eb;
          --color-linen: #f0e7d7;
          --color-buttered-gold: #f8e47d;
          --color-ink: #000000;
          --color-warm-graphite: #4d4b47;
          --color-oxblood: #370808;
        
          /* Typography — Font Families */
          --font-roslindale-display-condensed: 'Roslindale Display Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.45;
          --tracking-caption: -0.13px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.45;
          --tracking-body-sm: -0.14px;
          --text-body: 18px;
          --leading-body: 1.35;
          --tracking-body: -0.18px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.35;
          --tracking-heading-sm: -0.22px;
          --text-subheading: 28px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.28px;
          --text-heading: 40px;
          --leading-heading: 1.24;
          --tracking-heading: -0.4px;
          --text-display: 120px;
          --leading-display: 0.9;
          --tracking-display: -1.2px;
          --text-display-xl: 140px;
          --leading-display-xl: 0.86;
          --tracking-display-xl: -1.4px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-36: 36px;
          --spacing-40: 40px;
        
          /* Layout */
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Border Radius */
          --radius-md: 5px;
        
          /* Named Radii */
          --radius-all: 5px;
          --radius-cards: 5px;
          --radius-badges: 5px;
          --radius-inputs: 5px;
          --radius-buttons: 5px;
        
          /* Surfaces */
          --surface-vellum-page: #fff9eb;
          --surface-linen-card: #f0e7d7;
          --surface-buttered-gold-wash: #f8e47d;
          --surface-warm-graphite: #4d4b47;
          --surface-oxblood-inset: #370808;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-vellum-cream: #fff9eb;
          --color-linen: #f0e7d7;
          --color-buttered-gold: #f8e47d;
          --color-ink: #000000;
          --color-warm-graphite: #4d4b47;
          --color-oxblood: #370808;
        
          /* Typography */
          --font-roslindale-display-condensed: 'Roslindale Display Condensed', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Intl', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.45;
          --tracking-caption: -0.13px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.45;
          --tracking-body-sm: -0.14px;
          --text-body: 18px;
          --leading-body: 1.35;
          --tracking-body: -0.18px;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.35;
          --tracking-heading-sm: -0.22px;
          --text-subheading: 28px;
          --leading-subheading: 1.25;
          --tracking-subheading: -0.28px;
          --text-heading: 40px;
          --leading-heading: 1.24;
          --tracking-heading: -0.4px;
          --text-display: 120px;
          --leading-display: 0.9;
          --tracking-display: -1.2px;
          --text-display-xl: 140px;
          --leading-display-xl: 0.86;
          --tracking-display-xl: -1.4px;
        
          /* Spacing */
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-36: 36px;
          --spacing-40: 40px;
        
          /* Border Radius */
          --radius-md: 5px;
        }