handhold___style_reference:
  info: "> warm parchment under whispered serifs — a hand-set editorial spread with zero chromatic noise, where a hairline serif at weight 200 carries all the voice."

  theme: "light"

  info: "Handhold operates in an almost purely editorial register: a warm cream canvas (#f2f1ed) replaces the SaaS-standard pure white, and a custom serif at weight 200 does all the headline work while Inter at a single weight (400) handles everything else. The palette is strictly monochrome — 0% colorfulness detected — so hierarchy is built entirely through scale, tracking, and the serif/sans contrast rather than color. Surfaces are flat with no shadows; structure comes from generous border-radius (24-32px on cards, fully pill-shaped buttons) and tight tracking on the serif. The result reads like a design studio monograph or a luxury print catalog, not a typical B2B SaaS landing page. Density stays comfortable — 4px base, 48px section gaps, 28-32px card padding — with one centered column hero that breathes."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, heading strokes, card borders, filled CTA backgrounds — the sole carrier of visual weight in an otherwise empty palette |"
    info: "| Paper Cream | `#f2f1ed` | `--color-paper-cream` | Page canvas, card surfaces, and the default background — warm off-white that distinguishes the brand from clinical SaaS whites |"
    info: "| Warm Border | `#dbd7cd` | `--color-warm-border` | Elevated surface, hairline dividers, and card-on-card separation — one shade deeper than the canvas to create structure without contrast |"
    info: "| Stone Gray | `#737373` | `--color-stone-gray` | Secondary body text, muted labels, subtle borders — never used for primary copy |"
    info: "| Ash Gray | `#999999` | `--color-ash-gray` | Tertiary text, helper copy, disabled states — the quietest voice in the type stack |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Text on dark filled CTAs, occasional card surface where higher contrast is needed against the cream canvas |"

  tokens___typography:

    bureauserif___all_headlines_and_display_text__weight_200_is_anti_convention___most_editorial_sites_use_300_400_for_serif_headlines__the_extra_light_whisper_forces_the_serif_to_feel_like_quiet_authority_rather_than_declaration__line_height_pinned_to_1_0_creates_tight__overlapping_baselines_that_read_as_deliberately_set_rather_than_browser_default__tracking_locked_at__0_03em_across_every_size__tightening_the_letterforms_into_a_cohesive_display_voice_____font_bureauserif:
      - "**Substitute:** Cormorant Garamond (weight 300) or EB Garamond (weight 400) — no Google Font matches weight 200 exactly; Cormorant at 300 is the closest whisper-weight serif"
      - "**Weights:** 200"
      - "**Sizes:** 20px, 28px, 40px, 72px"
      - "**Line height:** 1.00"
      - "**Letter spacing:** -0.03em uniformly across all sizes"
      - "**OpenType features:** `\"liga\" on, \"kern\" on`"
      - "**Role:** All headlines and display text. Weight 200 is anti-convention — most editorial sites use 300-400 for serif headlines; the extra-light whisper forces the serif to feel like quiet authority rather than declaration. Line-height pinned to 1.0 creates tight, overlapping baselines that read as deliberately set rather than browser-default. Tracking locked at -0.03em across every size, tightening the letterforms into a cohesive display voice."

    inter___body_text__nav_items__buttons__labels__metadata___the_entire_non_display_ui__a_single_weight_400_with_no_bold_variant_keeps_the_sans_side_neutral_so_the_serif_can_dominate__tracking_is_slightly_negative_on_body__0_011em_at_16px_and_near_zero_on_small_text__giving_inter_a_set__editorial_feel_rather_than_a_default_web_feel_____font_inter:
      - "**Substitute:** Inter (Google Font exact match)"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px, 16px"
      - "**Line height:** 1.33, 1.43, 1.50"
      - "**Letter spacing:** -0.013em at 12px, -0.011em at 14px, -0.009em at 16px, 0em at 16px+"
      - "**Role:** Body text, nav items, buttons, labels, metadata — the entire non-display UI. A single weight (400) with no bold variant keeps the sans side neutral so the serif can dominate. Tracking is slightly negative on body (-0.011em at 16px) and near-zero on small text, giving Inter a set, editorial feel rather than a default web feel."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 16 | -0.01px | `--text-caption` |"
      info: "| body-sm | 14px | 20 | -0.11px | `--text-body-sm` |"
      info: "| body | 16px | 24 | -0.18px | `--text-body` |"
      info: "| subheading | 20px | 20 | -0.6px | `--text-subheading` |"
      info: "| heading-sm | 28px | 28 | -0.84px | `--text-heading-sm` |"
      info: "| heading | 40px | 40 | -1.2px | `--text-heading` |"
      info: "| display | 72px | 72 | -2.16px | `--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: "| 48 | 48px | `--spacing-48` |"
      info: "| 72 | 72px | `--spacing-72` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 24-32px |"
      info: "| inputs | 8px |"
      info: "| buttons | 9999px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48px"
      - "**Card padding:** 28-32px"
      - "**Element gap:** 16px"

  components:

    primary_filled_cta_button:
      role: "The only high-contrast action element in the system"

      info: "Black (#000000) background, white (#ffffff) text in Inter 14px weight 400, fully pill-shaped radius (9999px), padding 10px 18px. No border, no shadow. The rounded-pill geometry on a monochrome button is the signature action style — it feels like a physical stamp pressed onto the cream page."

    ghost_navigation_link:
      role: "Top-level nav items and inline links"

      info: "Inter 14px weight 400, text color #000000, no underline by default. The 8px radius from the border-radius data applies to any underline or indicator treatment. Sits directly on the cream canvas with no background."

    top_announcement_bar:
      role: "Slim system message across the page top"

      info: "Full-width strip, Inter 12-14px weight 400, #000000 text, no background fill (transparent over canvas). Tight vertical padding (~8px). The bar is flush with the page edges — no inset, no separation from the cream canvas."

    editorial_display_headline:
      role: "Hero and section titles"

      info: "bureauSerif weight 200, sizes 40-72px, line-height 1.0, letter-spacing -0.03em. Centered alignment. The extra-light weight at large sizes with tight tracking creates a whisper-quiet, hand-set feel that is the system's defining visual choice."

    body_subtitle:
      role: "Supporting copy under headlines"

      info: "Inter 16px weight 400, color #000000, line-height 1.5, letter-spacing -0.009em. Centered beneath display headlines. No muted color — even subtitle copy stays full black, letting the serif/sans contrast and size do the hierarchy work."

    partner_logo_strip:
      role: "Social proof row beneath hero"

      info: "Horizontal row of monochrome brand logos (aikido, Parim, LIVEFORCE, finbite, ParcelTracker), Inter 16px wordmarks or grayscale SVG marks. Even spacing (~32-40px column gap), centered on the cream canvas. Logos are rendered in #000000 — no color treatment."

    card_surface:
      role: "Content cards and feature blocks"

      info: "Background #ffffff (one step up from the cream canvas), border-radius 24-32px, padding 28-32px. No shadow, no border. The large radius is a signature choice — cards read as soft, rounded slabs rather than sharp panels."

    navigation_bar:
      role: "Persistent top navigation"

      info: "Transparent background over the cream canvas. Logo left, nav links and sign-in right. Inter 14px weight 400, #000000. Minimal height (~56-64px), no bottom border, no background fill — it floats on the canvas."

    sign_in_link:
      role: "Secondary nav action"

      info: "Inter 14px weight 400, #000000 text, no background, no border. Positioned right-aligned in the nav bar. Visual weight equal to a nav link — there is no separate 'button' treatment for sign-in."

  do_s_and_don_ts:

    do:
      - "Use bureauSerif weight 200 for all headlines — never substitute a heavier serif weight; the whisper is the identity"
      - "Use Inter weight 400 exclusively for all non-display text — do not introduce bold, medium, or semibold variants"
      - "Set serif headline line-height to exactly 1.0 — this creates the tight, overlapping editorial baseline that defines the display voice"
      - "Apply -0.03em letter-spacing to all serif text regardless of size — the uniform tracking is what makes the serif feel cohesive across the scale"
      - "Use #f2f1ed as the page canvas — never pure white #ffffff for page backgrounds; the warm cream is the brand's foundation"
      - "Build component separation through radius (24-32px) and whitespace, not shadows or borders — the system is deliberately shadow-free"
      - "Use pill-shaped (9999px radius) buttons for all actions — no sharp or subtly-rounded buttons exist in this system"

    don_t:
      - "Do not introduce any chromatic color — the palette is 0% colorful by design; adding blue, red, or green breaks the editorial register"
      - "Do not use bold or semibold weights in either font family — the system speaks at exactly one weight per family"
      - "Do not set serif line-height above 1.0 — relaxed leading destroys the tight editorial feel"
      - "Do not use #ffffff as a page or section background — the warm cream is non-negotiable; white is reserved for card surfaces and button text"
      - "Do not add drop shadows, glows, or any elevation effects — the flat surface treatment is a core principle"
      - "Do not use borders thinner than 1px or lighter than #dbd7cd for structural separation — rely on radius and whitespace instead"
      - "Do not mix serif and sans within a single text block — headings are serif, body is sans, and the boundary between them should be absolute"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f2f1ed` | Full page background — warm cream base |"
    info: "| 1 | Card | `#ffffff` | Cards and elevated panels that need a clean white against the cream |"
    info: "| 2 | Ink Surface | `#000000` | Filled CTA buttons and dark UI blocks |"

  elevation:

    info: "No shadows anywhere. Structure is built entirely through color contrast between the cream canvas, white card surfaces, and black ink. Borders are used sparingly — the design relies on generous radius (24-32px) and whitespace to define component boundaries rather than elevation or drop shadows."

  imagery:

    info: "Visuals are minimal and decorative rather than informational. The hero is anchored by a flowing blue-and-gold ribbon/wave illustration that spans the full width — it is the only chromatic element on the page and reads as a brand signature rather than a product screenshot. Below the hero, a single row of monochrome partner logos provides social proof. There is no product photography, no UI screenshots, and no lifestyle imagery on the visible page. The system defaults to pure typography on a cream canvas, with the wave illustration serving as the single expressive accent."

  layout:

    info: "Centered single-column hero with a serif display headline, Inter subtitle, and a single filled CTA button — all stacked and center-aligned with generous vertical breathing room. The hero sits on a full-width cream canvas with no visual frame. Below, a decorative blue/gold wave illustration spans edge-to-edge as a section divider. Content then flows in alternating centered bands: a partner logo strip, likely followed by feature sections in stacked or two-column layouts. The overall rhythm is spacious and editorial — wide section gaps (48px+), no sidebars, no multi-column grids in the visible region. Navigation is a minimal top bar with logo left, links right, transparent over the cream canvas."

  agent_prompt_guide:

    quick_color_reference:
    - "Text: #000000"
    - "Background: #f2f1ed"
    - "Card surface: #ffffff"
    - "Border: #dbd7cd"
    - "Muted text: #737373"
    - "primary action: #000000 (filled action)"

    3_example_component_prompts:

    - "Create a hero section: #f2f1ed canvas, centered layout. Display headline at 72px bureauSerif weight 200, #000000, line-height 1.0, letter-spacing -2.16px. Subtitle at 16px Inter weight 400, #000000, centered. Primary CTA button: #000000 background, #ffffff text at 14px Inter weight 400, 9999px radius, 10px 18px padding, no shadow."

    - "Create a feature card: #ffffff background, 32px border-radius, 32px padding. No shadow, no border. Headline at 28px bureauSerif weight 200, #000000, line-height 1.0, letter-spacing -0.84px. Body text at 16px Inter weight 400, #000000, line-height 1.5. A 24px gap between the headline and body."

    - "Create a partner logo strip: full-width row on #f2f1ed canvas, 5 monochrome #000000 logos, centered with 40px gap between each, no labels, 48px vertical padding above and below."

  typographic_philosophy:

    info: "The system enforces a strict two-font, two-weight contract: bureauSerif at 200 for display, Inter at 400 for everything else. This is not a limitation — it is a design statement. By refusing to add weight variants, the serif's whisper-weight becomes the loudest thing on the page, and the sans's neutrality becomes invisible. An AI agent building new pages must not introduce 500/600/700 weights to create emphasis — emphasis comes from font family switching, size stepping, and tracking adjustment only."

  similar_brands:

    - "**Linear** — Same monochrome restraint with a single warm-tinted surface and serif/sans typographic contrast — though Linear leans darker"
    - "**Pitch** — Editorial typography with custom serif headlines over a neutral canvas, comfortable density, and rounded card geometry"
    - "**Vercel** — Extreme minimalism with near-zero color palette, generous whitespace, and large display typography as the primary visual element"
    - "**Stripe** — Comfortable spacing rhythm, centered hero patterns, and the use of subtle warm neutrals instead of pure black/white"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-cream: #f2f1ed;
          --color-warm-border: #dbd7cd;
          --color-stone-gray: #737373;
          --color-ash-gray: #999999;
          --color-pure-white: #ffffff;
        
          /* Typography — Font Families */
          --font-bureauserif: 'bureauSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.11px;
          --text-body: 16px;
          --leading-body: 24;
          --tracking-body: -0.18px;
          --text-subheading: 20px;
          --leading-subheading: 20;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 28;
          --tracking-heading-sm: -0.84px;
          --text-heading: 40px;
          --leading-heading: 40;
          --tracking-heading: -1.2px;
          --text-display: 72px;
          --leading-display: 72;
          --tracking-display: -2.16px;
        
          /* Typography — Weights */
          --font-weight-extralight: 200;
          --font-weight-regular: 400;
        
          /* 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-48: 48px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 28-32px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 24-32px;
          --radius-inputs: 8px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-canvas: #f2f1ed;
          --surface-card: #ffffff;
          --surface-ink-surface: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-cream: #f2f1ed;
          --color-warm-border: #dbd7cd;
          --color-stone-gray: #737373;
          --color-ash-gray: #999999;
          --color-pure-white: #ffffff;
        
          /* Typography */
          --font-bureauserif: 'bureauSerif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: -0.01px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --tracking-body-sm: -0.11px;
          --text-body: 16px;
          --leading-body: 24;
          --tracking-body: -0.18px;
          --text-subheading: 20px;
          --leading-subheading: 20;
          --tracking-subheading: -0.6px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 28;
          --tracking-heading-sm: -0.84px;
          --text-heading: 40px;
          --leading-heading: 40;
          --tracking-heading: -1.2px;
          --text-display: 72px;
          --leading-display: 72;
          --tracking-display: -2.16px;
        
          /* 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-48: 48px;
          --spacing-72: 72px;
          --spacing-80: 80px;
          --spacing-128: 128px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
        }