ambrook___style_reference:
  info: "> harvest ledger on butcher paper"

  theme: "light"

  info: "Ambrook speaks in the visual dialect of American heartland: warm parchment canvas, ink-dark type, and a single harvest-amber accent that warms every primary action. The palette is deliberately desaturated — olive greens, wheat tans, bark browns — as if the interface itself were printed on recycled butcher paper and stamped with soy ink. Headlines use a custom display face with quiet authority (weight 500, not the expected 700), and every section opens with a small uppercase eyebrow that breathes across the page on wide tracking. Photography is documentary, not aspirational — welders, ranchers, truckers, unposed and full-sun. The result is an interface that feels rooted, not glossy: trustworthy through warmth rather than through chrome."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Parchment | `#fcfaf1` | `--color-parchment` | Page canvas and card surfaces — warm off-white replaces pure #ffffff to keep the system grounded in an agricultural, paper-like register |"
    info: "| Bone | `#efe9e0` | `--color-bone` | Secondary surface for footer, soft sections, and hairline borders that need separation from the parchment canvas without harsh contrast |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Elevated card and product-mockup surface — used sparingly to lift specific panels (like the Ledger screenshot) above the parchment base |"
    info: "| Loam | `#c7bcaf` | `--color-loam` | Subtle dividers, card edges, and low-emphasis borders between the canvas and content blocks |"
    info: "| Bark | `#96897b` | `--color-bark` | Muted helper text, metadata, and supporting labels where a softer voice is needed than primary body copy |"
    info: "| Saddle | `#50463c` | `--color-saddle` | Secondary body text and subdued icon fills — a warm brown-gray that recedes without disappearing |"
    info: "| Ink | `#211b15` | `--color-ink` | Primary text, heading strokes, and the dominant border color across the system. Warm near-black with a hint of umber keeps the interface from feeling clinical |"
    info: "| Charcoal Olive | `#252a23` | `--color-charcoal-olive` | Dark mode–style panels, product UI containers, and high-emphasis icon fills — used when a section needs to invert the warm page into something product-focused |"
    info: "| Deep Olive | `#434f40` | `--color-deep-olive` | Navigation borders, icon strokes, and the most-used neutral divider in the system — a moss-toned dark that reads as organic rather than industrial |"
    info: "| Sage | `#7a9779` | `--color-sage` | Green accent for outlined action borders, linked labels, and lightweight interactive emphasis. Do not promote it to the primary CTA color |"
    info: "| Honey Amber | `#e8b672` | `--color-honey-amber` | Primary action button fill — the system's singular chromatic accent for CTAs, earning attention through warmth rather than saturation |"
    info: "| Wheat | `#f0c891` | `--color-wheat` | Lighter amber used for heading borders, icon accents, and subtle decorative strokes where honey would be too heavy |"

  tokens___typography:

    lateral___workhorse_sans_for_body__nav__buttons__inputs__and_secondary_headings__weight_400_for_running_text__500_for_buttons_and_emphasis__custom_letterforms_give_it_subtle_warmth_a_generic_sans_would_miss___slightly_humanist_proportions_rather_than_mechanical_geometric_____font_lateral:
      - "**Substitute:** Inter or Söhne"
      - "**Weights:** 400, 500"
      - "**Sizes:** 11px, 13px, 15px, 17px, 19px, 30px, 68px"
      - "**Line height:** 1.20–1.71"
      - "**Letter spacing:** -0.0110em for 19px and 30px; 0.0580em and 0.1070em for uppercase labels at 11px and 13px"
      - "**Role:** Workhorse sans for body, nav, buttons, inputs, and secondary headings. Weight 400 for running text, 500 for buttons and emphasis. Custom letterforms give it subtle warmth a generic sans would miss — slightly humanist proportions rather than mechanical geometric."

    lateral_narrow___condensed_variant_for_tighter_column_headings_and_subhead_text_where_horizontal_space_is_constrained_but_body_voice_is_still_wanted_____font_lateral_narrow:
      - "**Substitute:** Inter (condensed) or Söhne Buch"
      - "**Weights:** 400, 500"
      - "**Sizes:** 19px, 30px, 34px"
      - "**Line height:** 1.40, 1.50"
      - "**Letter spacing:** -0.0090em to -0.0100em"
      - "**Role:** Condensed variant for tighter column headings and subhead text where horizontal space is constrained but body voice is still wanted."

    lateral_display___hero_and_section_display_face__used_at_weight_500_not_the_default_700_for_major_headlines___this_restraint_is_signature__the_type_whispers_authority_instead_of_shouting__slight_serif_character_in_the_terminals_gives_it_an_editorial__almost_newspaper_headline_feel_that_matches_the_agricultural_brand_voice_____font_lateral_display:
      - "**Substitute:** Tiempos Text or Source Serif Pro"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 38px, 53px, 68px"
      - "**Line height:** 1.00, 1.10, 1.14"
      - "**Letter spacing:** -0.0110em at all sizes"
      - "**OpenType features:** `\"ss01\" on`"
      - "**Role:** Hero and section display face. Used at weight 500 (not the default 700) for major headlines — this restraint is signature: the type whispers authority instead of shouting. Slight serif character in the terminals gives it an editorial, almost newspaper-headline feel that matches the agricultural brand voice."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.5 | 0.107px | `--text-caption` |"
      info: "| eyebrow | 13px | 1.6 | 0.058px | `--text-eyebrow` |"
      info: "| body | 15px | 1.71 | — | `--text-body` |"
      info: "| body-lg | 17px | 1.6 | — | `--text-body-lg` |"
      info: "| subheading | 19px | 1.43 | -0.21px | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.33 | -0.33px | `--text-heading-sm` |"
      info: "| heading | 38px | 1.14 | -0.42px | `--text-heading` |"
      info: "| heading-lg | 53px | 1.1 | -0.58px | `--text-heading-lg` |"
      info: "| display | 68px | 1 | -0.75px | `--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: "| 40 | 40px | `--spacing-40` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 68 | 68px | `--spacing-68` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 7.5px |"
      info: "| pills | 9999px |"
      info: "| inputs | 3.75px |"
      info: "| buttons | 3.75px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 60-90px"
      - "**Card padding:** 30-45px"
      - "**Element gap:** 8-15px"

  components:

    primary_action_button:
      role: "Filled amber CTA for email signup, trial start, and get-started flows."

      info: "Background #e8b672, text #211b15, border-radius 3.75px, padding 15px 30px, Lateral weight 500 at 15px. No shadow. On hover, darkens to a deeper amber. Arrow character (→) after label is a signature detail — the button always points forward."

    ghost_outline_button:
      role: "Secondary action (Sign Up, Log In) where the primary amber is too loud."

      info: "Transparent background, 1px border in #211b15, text #211b15, border-radius 3.75px, padding 9px 15px. The thin, slightly rounded rectangle is the system's quiet counterpoint to the honey-amber CTA."

    email_capture_input:
      role: "Hero-level signup field with embedded submit button."

      info: "Container is a 1px #211b15 border with 3.75px radius. Left side: Lateral 15px placeholder \"Enter your email\" in #96897b. Right side: amber Primary Action Button embedded flush against the input edge. No focus ring color shift — border remains ink-dark on focus."

    section_eyebrow_label:
      role: "Small uppercase tag above every section heading (e.g. \"ACCOUNTING SOFTWARE\", \"WHO WE SERVE\")."

      info: "Lateral weight 400 at 13px, letter-spacing 0.058em, color #211b15, uppercase. Centered above the heading. Wide tracking gives it the cadence of a newspaper dateline — a quiet rhythm device across the page."

    section_heading:
      role: "Two-line editorial headline for each content section."

      info: "Lateral Display weight 500 at 38px or 53px, line-height 1.14, letter-spacing -0.42px to -0.58px, color #211b15, centered. Weight 500 (not 700) is the signature restraint — authority through quiet, not volume."

    trust_signal_row:
      role: "Horizontal bar of icon + label assurances below the hero CTA."

      info: "Flex row with 8px gap, Lateral 13px, color #211b15. Each item is a 14px outlined icon followed by label text (\"30-day free trial\", \"Live onboarding\", \"US-based support\", \"4.7 Trustpilot\"). Icons are thin-stroke, monochrome ink."

    brand_logo_strip:
      role: "Horizontal scroller of customer brand marks to build social proof."

      info: "Grayscale logos in oval/rounded containers on parchment background, centered around a headline \"Over 7,000 businesses rely on Ambrook\". Logos render in #50463c or #211b15 on parchment. No card backgrounds, no shadows — the logos sit directly on the page."

    industry_illustration_card:
      role: "3-column grid of industry categories (Farming, Ranching, Construction, Trucking, Property Management, Services)."

      info: "Each card is a 1px #efe9e0 divider grid cell, no card background, padding 45px 30px. Center: monochrome line-art illustration of the trade (tractor, cow, crane, truck, keys, newspaper) rendered in #211b15 stroke at ~1.5px weight. Below: industry name in Lateral weight 500 at 15px with a → arrow. Illustration style is hand-drawn line art, not filled or colorful."

    product_showcase_panel:
      role: "Dark inverted panel previewing the actual product UI (Ledger view)."

      info: "Background #252a23 (charcoal olive), border-radius 7.5px, padding 45px. Left column: section heading \"Bookkeeping that makes sense.\" in #fcfaf1 (inverted text). Right column: product screenshot (Ledger table) with light table UI on white, slightly overlapping or flush to the right edge of the dark panel."

    documentary_photo_collage:
      role: "Hero bottom strip — overlapping, slightly rotated documentary photographs of real workers."

      info: "Five to six photographs arranged in an overlapping row at the page break below the hero. Each photo has a thin 2-4px white or parchment border (polaroid-like), slight random rotation (-3° to +3°), no border-radius. Subjects are candid, full-sun, unposed — welding sparks, a rancher in a cowboy hat, a trucker, a mechanic. Photography is the emotional anchor of the brand."

    footer_link:
      role: "Underlined link in the footer area."

      info: "Lateral 13px, color #50463c, 1px underline in #efe9e0, 15px row gap between links. Underline is subtle — a warm bone-colored line, not ink — keeping the footer soft and scannable."

  do_s_and_don_ts:

    do:
      - "Use #fcfaf1 parchment as the page canvas for every section — never switch to pure #ffffff for a full page."
      - "Set primary action buttons to #e8b672 honey amber with #211b15 text and 3.75px radius."
      - "Open every section with an uppercase eyebrow label at 13px Lateral with 0.058em letter-spacing before the heading."
      - "Use Lateral Display at weight 500 (not 700) for headlines at 38px, 53px, and 68px."
      - "Render industry illustrations as monochrome line art in #211b15 stroke — no fills, no color."
      - "Apply 3.75px border-radius to buttons, inputs, and small surfaces; 7.5px to larger cards and panels."

    don_t:
      - "Don't use pure #ffffff as a page background — parchment #fcfaf1 is the canvas signature."
      - "Don't set headlines at weight 700 — the system's authority comes from 500 and restraint."
      - "Don't introduce blue, red, or other saturated primaries — the only chromatic accent is honey amber #e8b672."
      - "Don't use pill-shaped (9999px) buttons — the system is defined by subtle 3.75px rounding."
      - "Don't fill illustrations with color — they must remain monochrome line art in #211b15."
      - "Don't use stock-polished or studio photography — documentary, full-sun, candid subjects only."
      - "Don't add drop shadows to cards or panels — the system relies on border color and surface warmth for separation."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Parchment Canvas | `#fcfaf1` | Base page background — warm off-white as the default surface. |"
    info: "| 1 | Pure White Panel | `#ffffff` | Elevated cards and product-mockup containers that need to lift above the canvas. |"
    info: "| 2 | Bone Footer | `#efe9e0` | Section dividers and footer band — a step warmer than the canvas to signal section boundaries. |"
    info: "| 3 | Charcoal Olive Panel | `#252a23` | Inverted product UI panels that flip the warm page into a dark, focused work surface. |"

  elevation:

    info: "The system intentionally avoids drop shadows. Visual hierarchy is built through warm surface contrast (parchment → bone → white → charcoal olive) and hairline borders in #efe9e0 and #211b15. Elevation is communicated by color temperature shifts, not by shadow depth — a flat, paper-printed aesthetic that matches the agricultural brand voice."

  imagery:

    photography_is_documentary_and_full_sun: "real welders with sparks flying, ranchers in cowboy hats, truckers, farmers, mechanics — candid, unposed, golden-hour warm. Images are arranged in overlapping collage strips with slight rotation, giving a polaroid-scrapbook feel. Industry illustrations are hand-drawn monochrome line art — tractors, cattle, cranes, trucks, keys, newspapers — rendered in thin #211b15 stroke with no fills. No 3D renders, no abstract gradient art, no stock-polished lifestyle photography. The visual language is rooted in real American work, not aspirational gloss."

  layout:

    info: "Centered, max-width 1200px contained layout with generous vertical breathing room. The page opens with a full-bleed parchment canvas — a centered headline stack (eyebrow → display headline → subtext → email input → trust signals) with no side navigation. Below the hero, a documentary photo collage breaks the grid with overlapping, slightly rotated images. Sections alternate between centered text-only blocks and 3-column industry cards separated by hairline dividers. A dark inverted product showcase panel interrupts the warm cream rhythm to introduce the actual product UI. Navigation is a minimal top bar with the wordmark left, center links, and Log In / Sign Up right. The overall rhythm is: quiet centered text → warm collage → centered text → grid cards → centered text → dark product panel — a paced, editorial cadence rather than a dense feature grid."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #211b15"
    - "background: #fcfaf1"
    - "border: #efe9e0 (light) / #211b15 (strong)"
    - "accent: #e8b672 (honey amber)"
    - "brand green: #434f40"
    - "primary action: #e8b672 (filled action)"

    example_component_prompts:

    - "**Hero section**: Parchment #fcfaf1 background. Eyebrow label \"ACCOUNTING SOFTWARE\" in Lateral 13px weight 400, uppercase, letter-spacing 0.058em, color #211b15. Headline \"Financial tools worthy of your work.\" in Lateral Display 68px weight 500, line-height 1.0, letter-spacing -0.75px, color #211b15, centered. Subtext in Lateral 17px weight 400, color #50463c. Email input with 1px #211b15 border, 3.75px radius, Lateral 15px placeholder #96897b. Embedded amber submit button #e8b672 with #211b15 text, 3.75px radius, arrow → after label."

    - "**Industry category card**: 1px #efe9e0 divider on all sides, padding 45px 30px, no card background. Monochrome line-art illustration of a tractor in #211b15 stroke at 1.5px, centered, ~120px tall. Below: industry name \"Farming\" in Lateral 15px weight 500 #211b15, followed by → arrow character."

    - "**Dark product showcase panel**: Background #252a23, border-radius 7.5px, padding 45px. Left column: heading \"Bookkeeping that makes sense.\" in Lateral Display 38px weight 500, color #fcfaf1, letter-spacing -0.42px. Right column: product screenshot (Ledger table) on white #ffffff surface, slightly overlapping the dark panel's right edge."

    - "Create a Primary Action Button: #e8b672 background, #211b15 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "**Documentary photo collage**: Five overlapping photographs at the page break below the hero. Each photo has a 3px #fcfaf1 border, slight rotation (-3° to +3°), no border-radius. Subjects: welder, farmer, rancher, trucker, mechanic — candid, full-sun, documentary style."

  similar_brands:

    - "**Farmers Business Network** — Same agricultural audience and warm earthy palette, though Ambrook leans more editorial and less data-dense."
    - "**Indigo Agriculture** — Shared documentary-photography approach and warm, grounded brand voice targeting American growers."
    - "**Patagonia** — Same documentary portraiture of real working people, unposed and full-sun, paired with restrained editorial typography."
    - "**Mailchimp** — Same warm cream canvas, illustrative line-art category icons, and editorial headline restraint (weight 500, not 700)."
    - "**Square (Block)** — Similar accounting-fintech positioning with a warm, approachable palette instead of the typical blue corporate register."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment: #fcfaf1;
          --color-bone: #efe9e0;
          --color-pure-white: #ffffff;
          --color-loam: #c7bcaf;
          --color-bark: #96897b;
          --color-saddle: #50463c;
          --color-ink: #211b15;
          --color-charcoal-olive: #252a23;
          --color-deep-olive: #434f40;
          --color-sage: #7a9779;
          --color-honey-amber: #e8b672;
          --color-wheat: #f0c891;
        
          /* Typography — Font Families */
          --font-lateral: 'Lateral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lateral-narrow: 'Lateral Narrow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lateral-display: 'Lateral Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.5;
          --tracking-caption: 0.107px;
          --text-eyebrow: 13px;
          --leading-eyebrow: 1.6;
          --tracking-eyebrow: 0.058px;
          --text-body: 15px;
          --leading-body: 1.71;
          --text-body-lg: 17px;
          --leading-body-lg: 1.6;
          --text-subheading: 19px;
          --leading-subheading: 1.43;
          --tracking-subheading: -0.21px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.33px;
          --text-heading: 38px;
          --leading-heading: 1.14;
          --tracking-heading: -0.42px;
          --text-heading-lg: 53px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.58px;
          --text-display: 68px;
          --leading-display: 1;
          --tracking-display: -0.75px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-68: 68px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 60-90px;
          --card-padding: 30-45px;
          --element-gap: 8-15px;
        
          /* Border Radius */
          --radius-md: 3.75px;
          --radius-lg: 7.5px;
          --radius-xl: 11.25px;
        
          /* Named Radii */
          --radius-cards: 7.5px;
          --radius-pills: 9999px;
          --radius-inputs: 3.75px;
          --radius-buttons: 3.75px;
        
          /* Surfaces */
          --surface-parchment-canvas: #fcfaf1;
          --surface-pure-white-panel: #ffffff;
          --surface-bone-footer: #efe9e0;
          --surface-charcoal-olive-panel: #252a23;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment: #fcfaf1;
          --color-bone: #efe9e0;
          --color-pure-white: #ffffff;
          --color-loam: #c7bcaf;
          --color-bark: #96897b;
          --color-saddle: #50463c;
          --color-ink: #211b15;
          --color-charcoal-olive: #252a23;
          --color-deep-olive: #434f40;
          --color-sage: #7a9779;
          --color-honey-amber: #e8b672;
          --color-wheat: #f0c891;
        
          /* Typography */
          --font-lateral: 'Lateral', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lateral-narrow: 'Lateral Narrow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-lateral-display: 'Lateral Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.5;
          --tracking-caption: 0.107px;
          --text-eyebrow: 13px;
          --leading-eyebrow: 1.6;
          --tracking-eyebrow: 0.058px;
          --text-body: 15px;
          --leading-body: 1.71;
          --text-body-lg: 17px;
          --leading-body-lg: 1.6;
          --text-subheading: 19px;
          --leading-subheading: 1.43;
          --tracking-subheading: -0.21px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: -0.33px;
          --text-heading: 38px;
          --leading-heading: 1.14;
          --tracking-heading: -0.42px;
          --text-heading-lg: 53px;
          --leading-heading-lg: 1.1;
          --tracking-heading-lg: -0.58px;
          --text-display: 68px;
          --leading-display: 1;
          --tracking-display: -0.75px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-40: 40px;
          --spacing-60: 60px;
          --spacing-68: 68px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 3.75px;
          --radius-lg: 7.5px;
          --radius-xl: 11.25px;
        }