contractbook___style_reference:
  info: "> \"Warm cream atelier with electric violet punctuation and a single yellow spark\" — a designer-friendly contract workspace that feels like a Scandinavian studio more than a law firm."

  theme: "light"

  info: "Contractbook operates as an editorial SaaS canvas: a warm linen-cream base (#f0f0ec) flooded with off-white surface cards, anchored by a single electric violet (#1009f6) that powers primary action and geometric hero atmosphere. A solar yellow (#ffba09) acts as a warm secondary accent for the most desirable 'Request a demo' entry point, creating a two-button hierarchy where yellow owns intimacy and violet owns enterprise. The system pairs confident 700-weight display type at 40-48px with airy 400-weight body, using a custom geometric sans (Abcwhyte) that gives the interface a designer-publication feel rather than a typical dashboard. Playful hand-drawn illustrations (eye, dartboard, scribbles) in the brand palette inject humanity between functional blocks. Components favor generous 24-40px radii, pill-shaped controls (999px), and minimal elevation — the cream surface itself does the work that shadows do elsewhere."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Violet | `#1009f6` | `--color-electric-violet` | Primary brand color — hero backgrounds, geometric panels, primary action buttons, active nav — vivid blue-violet that reads as both trustworthy and unconventional against the warm cream canvas |"
    info: "| Solar Yellow | `#ffba09` | `--color-solar-yellow` | Yellow action color for filled buttons, selected navigation states, and focused conversion moments. |"
    info: "| Ink Black | `#1a1a1a` | `--color-ink-black` | Primary text, icon strokes, dark buttons, default borders — near-black with a whisper of warmth to harmonize with the cream surface |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Card surfaces, input fills, button text on dark fills — the elevated layer floating above the cream base |"
    info: "| Linen Cream | `#f0f0ec` | `--color-linen-cream` | Page canvas, section backgrounds, card rests, muted surfaces — the warm off-white that defines the entire system's atmosphere |"
    info: "| Charcoal | `#222222` | `--color-charcoal` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |"
    info: "| Stone Gray | `#d4d4d0` | `--color-stone-gray` | Hairline dividers, subtle borders, inactive controls — quiet structural lines |"
    info: "| Silver Gray | `#b3b3b3` | `--color-silver-gray` | Input field borders in resting state, placeholder-adjacent neutrals |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Maximum contrast text on light surfaces, sharp divider accents |"
    info: "| Sky Mist | `#add3e5` | `--color-sky-mist` | Decorative card washes, illustration fills, soft section tints — cool pastel that balances the yellow accent |"
    info: "| Blossom Pink | `#e3c7de` | `--color-blossom-pink` | Decorative illustration fills, soft section tints, playful highlights — warm pastel paired with the yellow to create a friendly duo |"
    info: "| Forest Dark | `#304801` | `--color-forest-dark` | Rare decorative deep accent in illustrations only — use sparingly, never as text or background fill |"

  tokens___typography:

    abcwhyte___single_typeface_system___custom_geometric_sans_with_humanist_warmth__weight_700_for_headlines_40_48px_carries_the_editorial_confidence__weight_400_for_body_16px_and_ui_14px_keeps_blocks_readable_without_shouting__substitutes__inter__s_hne__or_general_sans___avoid_sf_pro_and_system_defaults_which_lack_the_geometric_personality_____font_abcwhyte:
      - "**Substitute:** Inter or General Sans"
      - "**Weights:** 400, 700"
      - "**Sizes:** 11px, 12px, 14px, 16px, 25px, 28px, 32px, 40px, 48px"
      - "**Line height:** 1.00-1.87"
      - "**Letter spacing:** normal"
      - "**Role:** Single typeface system — custom geometric sans with humanist warmth. Weight 700 for headlines (40-48px) carries the editorial confidence; weight 400 for body (16px) and UI (14px) keeps blocks readable without shouting. Substitutes: Inter, Söhne, or General Sans — avoid SF Pro and system defaults which lack the geometric personality."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.4 | — | `--text-caption` |"
      info: "| body | 14px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.6 | — | `--text-body-lg` |"
      info: "| subheading | 25px | 1.25 | — | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 32px | 1.24 | — | `--text-heading` |"
      info: "| heading-lg | 40px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1.2 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 9 | 9px | `--spacing-9` |"
      info: "| 11 | 11px | `--spacing-11` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 22 | 22px | `--spacing-22` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 60 | 60px | `--spacing-60` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| pills | 999px |"
      info: "| small | 10-16px |"
      info: "| images | 40px |"
      info: "| inputs | 4px |"
      info: "| buttons | 24px |"

    layout:

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

  components:

    solar_yellow_cta_button:
      role: "Primary warm call-to-action — the 'Request a demo' entry point"

      info: "Filled with #ffba09, Ink Black (#1a1a1a) text at 14px weight 700, padding 11px 24px, radius 24px or full pill 999px, no shadow. Sits on the cream canvas where the yellow-on-cream contrast creates an inviting, low-pressure action. The warm yellow differentiates this from enterprise-primary actions."

    violet_primary_action_button:
      role: "Enterprise-grade primary action — form submissions, account actions"

      info: "Filled with #1009f6, white text at 14px weight 700, padding 11px 24px, radius 24px. Appears inside forms and critical conversion moments. Full-bleed width when inside multi-field forms."

    outlined_dark_button:
      role: "Secondary action — 'Start free trial', low-commitment alternative"

      info: "Transparent fill, 1px Ink Black (#1a1a1a) border, Ink Black text at 14px weight 700, padding 11px 24px, radius 24px. Pairs directly beside the yellow CTA to create a two-step commitment ladder."

    ghost_pill_button:
      role: "Tertiary navigation actions — 'Book demo', 'Login'"

      info: "Transparent fill, 1px Ink Black border at 999px radius, Ink Black text at 14px weight 400, padding 7px 18px. The full pill radius signals lightweight navigation, not commitment."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Cream (#f0f0ec) background, logo + 5-6 nav links in Ink Black 14px weight 400, with a pill 'Book demo' button on the far right. Subtle bottom border in Stone Gray (#d4d4d0) or none — floats cleanly on the warm canvas."

    text_input_field:
      role: "Standard form input — names, email, company"

      info: "White (#ffffff) background, 1px Silver Gray (#b3b3b3) border, radius 4px, padding 9-11px vertical, 14px Ink Black text weight 400. Placeholder text in muted gray. Focus state should darken the border to Ink Black — no glow rings."

    select_input_with_flag:
      role: "Country/phone selector with country flag prefix"

      info: "White background with embedded flag emoji + country code (e.g. 🇪🇸 +34) in a left-aligned zone, Silver Gray border, 4px radius, 14px text. Country name as placeholder."

    textarea:
      role: "Multi-line message input"

      info: "Same input styling as Text Input Field — white background, 1px Silver Gray border, 4px radius, 14px text. Generous min-height (100-120px) to invite full sentences."

    feature_highlight_card:
      role: "Content card with illustration and copy"

      info: "White surface on cream canvas, 24px radius, 24-40px internal padding, optional illustration on top. Headline at 25-32px weight 700 Ink Black, body at 16px weight 400. No drop shadows — the white-on-cream contrast defines the card."

    decorative_accent_card:
      role: "Editorial section break with colored fill and illustration"

      info: "Solid fill in Sky Mist (#add3e5), Blossom Pink (#e3c7de), or Solar Yellow (#ffba09), 40px radius, contains a hand-drawn illustration + short copy. Used to break up text-heavy sections and add visual rhythm."

    video_preview_card:
      role: "Hero video or product demo container"

      info: "Large rounded container at 40px radius, contains a video thumbnail with a circular dark play button overlay (play triangle in white). Often splits two colors — e.g. one half photographic, one half a brand-color panel with text."

    rating_trust_badge:
      role: "Third-party social proof — G2, Capterra"

      info: "Compact pill or rectangle with the rating platform's brand color dot/icon, 'X.X rating' text at 12-14px Ink Black, and a small star row. No background fill, sits inline with other hero elements."

    checkmark_list_item:
      role: "Feature bulleting in form/sales pages"

      info: "Violet (#1009f6) checkmark icon (or simple tick stroke) at 16px, followed by 14-16px Ink Black body text at 1.5-1.6 line height. No bullet dots — the violet tick is the entire marker."

    hero_geometric_panel:
      role: "Full-bleed brand background for hero sections"

      info: "Electric Violet (#1009f6) fill spanning the full viewport, overlaid with angled geometric shapes in lighter and darker violet/blue tones creating a faceted, architectural atmosphere. White card with 24px radius sits centered or left-aligned, holding the headline and CTAs."

    section_header_block:
      role: "Centered editorial section title"

      info: "Centered on cream canvas, small centered illustration (40-60px) on top, headline at 32-40px weight 700 Ink Black with 1.24-1.3 line height, body copy at 16px weight 400 in Charcoal (#222222) below, max-width ~600px."

  do_s_and_don_ts:

    do:
      - "Use Linen Cream (#f0f0ec) as the default page background — never pure white at the page level, only on elevated cards and inputs"
      - "Pair Solar Yellow (#ffba09) for warm/intimate CTAs and Electric Violet (#1009f6) for enterprise/form submissions — they are not interchangeable"
      - "Set headline type at 40-48px weight 700 in Abcwhyte — the bold geometric form is the brand's editorial voice"
      - "Use 24px radius for cards and standard buttons, 999px for pill-shaped nav/login actions, 4px for form inputs — radius carries meaning"
      - "Maintain two-button CTA pairs: filled yellow 'Request a demo' + outlined 'Start free trial' on hero sections, filled violet on form submissions"
      - "Place hand-drawn brand-color illustrations (Sky Mist, Blossom Pink, Solar Yellow) between text sections to create visual rhythm and humanize the page"
      - "Keep section gaps at 64-80px vertical — the cream canvas needs breathing room to feel editorial, not dashboard-dense"

    don_t:
      - "Do not use Electric Violet (#1009f6) as a text color on the cream canvas — reserve it for backgrounds, buttons, and checkmark icons"
      - "Do not use Solar Yellow (#ffba09) for body text or large fills — it is an accent only, never a page background"
      - "Do not add drop shadows to cards — the white-on-cream contrast is the entire elevation system, shadows would break the editorial feel"
      - "Do not use the 4px input radius for cards or buttons — mixing small radii on large components looks like a form, not a product page"
      - "Do not use Forest Dark (#304801) outside of decorative illustrations — it is an artwork color, not a UI token"
      - "Do not use the 999px pill radius for primary CTAs — pills are for navigation (Login, Book demo), 24px is for commitments"
      - "Do not use Blossom Pink or Sky Mist as button fills — these are decorative washes for illustration zones, not interactive surfaces"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Linen Canvas | `#f0f0ec` | Page background — the warm off-white that sets the entire tone |"
    info: "| 2 | Pure Card | `#ffffff` | Cards, input fields, elevated content blocks sitting on the cream canvas |"
    info: "| 3 | Stone Surface | `#d4d4d0` | Muted sections, inactive states, secondary surfaces |"

  imagery:

    info: "Hand-drawn editorial illustrations dominate the visual language: loose line-art icons (eye, dartboard/target, abstract squiggles) rendered in Sky Mist (#add3e5), Blossom Pink (#e3c7de), and Solar Yellow (#ffba09) on white or cream surfaces. A photographic product shot of a person (founder/CEO type) appears once in a video card, tightly cropped and treated as a real-world anchor against the otherwise illustrated world. No stock photography lifestyle imagery, no 3D renders — the brand stays in the flat-illustration + editorial-photography world. Illustrations sit small and centered as section markers (40-80px) or large as decorative fills behind text blocks. The hero uses a bold geometric violet panel with faceted angular shapes rather than an image — architecture over photography."

  layout:

    info: "Max-width 1200px centered container with generous outer padding. Hero is full-bleed Electric Violet with a white floating card (max-width ~900px, 24px radius) holding the headline stack left-aligned and a small illustration on the right. Below the hero, content flows in a single centered column rhythm: centered text blocks (max-width ~600px) alternating with wide illustration zones, then a 2-column form section where copy/checklist sits left at 40% width and a white form card sits right at 55% width. Section vertical gaps are 64-80px. Navigation is a simple top bar with logo + 5 links left-aligned and a pill 'Book demo' button right-aligned, floating on the cream background without a heavy border."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #1a1a1a (primary), #222222 (secondary)"
    - "background: #f0f0ec (page), #ffffff (cards/inputs)"
    - "border: #d4d4d0 (dividers), #b3b3b3 (input borders)"
    - "accent: #ffba09 (solar yellow)"
    - "primary action: #ffba09 (filled action)"

    example_component_prompts:

    - "**Hero Section**: Full-bleed #1009f6 background with faceted geometric shapes in lighter/darker violet. Floating white card (900px max-width, 24px radius, 48px padding) centered, containing a 48px Abcwhyte weight 700 headline in #1a1a1a, 16px body in #222222, and two buttons side by side: a #ffba09 filled pill (14px weight 700, 11px 24px padding, 24px radius) reading 'Request a demo' in #1a1a1a, and an outlined button (1px #1a1a1a border, 24px radius, same padding) reading 'Start free trial'."

    - "**Editorial Section Break**: Centered on #f0f0ec canvas. A 60px hand-drawn target illustration in #add3e5 and #e3c7de sits at the top. Below it, a 32px Abcwhyte weight 700 headline in #1a1a1a at 1.24 line height, max-width 600px. Then a 16px Abcwhyte weight 400 body paragraph in #222222 at 1.6 line height, max-width 580px centered. No card, no shadow — type floats on cream."

    - "**Demo Request Form**: 2-column layout, left column holds a 32px weight 700 headline in #1a1a1a, a body paragraph at 16px weight 400 in #222222, and a checkmark list using #1009f6 tick icons with 14px text. Right column is a white card (24px radius, 32px padding) containing form fields: two side-by-side inputs for First/Last name, full-width Email, phone input with 🇪🇸 +34 prefix, Company name + Number of employees select side by side, Country select, full-width Message textarea. Submit button is a full-width #1009f6 filled button (white text, 14px weight 700, 24px radius, 11px 24px padding)."

    - "**Feature Highlight Card**: White surface (#ffffff) on cream (#f0f0ec) background, 24px radius, 32px padding. A 48px Sky Mist (#add3e5) illustration sits at the top. Below: a 25px Abcwhyte weight 700 headline in #1a1a1a, then a 16px body paragraph in #222222 at 1.5 line height. No shadow."

    - "**Navigation Bar**: #f0f0ec background, logo + 'Contractbook' wordmark on the left in #1a1a1a, 5 nav links (Product, Templates, Packages, Customers, Learn) in 14px Abcwhyte weight 400 #1a1a1a with 7px gaps. On the far right: 'Login' as plain text and 'Book demo' as a pill button (1px #1a1a1a border, 999px radius, 7px 18px padding, 14px weight 400). No heavy bottom border."

  elevation_philosophy:

    info: "The system intentionally avoids drop shadows as an elevation mechanism. The cream Linen (#f0f0ec) base layer and white (#ffffff) card layer create depth through color contrast alone — cards appear to lift off the canvas by being lighter, not by casting shadow. The only shadow-like effects used are hairline borders in Stone Gray (#d4d4d0) or Silver Gray (#b3b3b3) for form fields and dividers. This editorial approach keeps the interface feeling like a magazine layout rather than a typical SaaS dashboard, and prevents the visual noise that stack-of-cards interfaces accumulate."

  similar_brands:

    - "**Linear** — Same single-vivid-accent-on-warm-neutral philosophy — Linear's purple-on-near-white operates with the same confidence restraint, one bold hue doing all the chromatic work"
    - "**Framer** — Editorially-driven marketing site with a custom geometric sans, pill-shaped CTAs, and warm off-white canvas — the typographic attitude and component restraint match closely"
    - "**Notion** — Comfortable cream-toned canvas with quiet neutrals and a single brand accent that appears as functional punctuation rather than decoration"
    - "**Maze** — Playful hand-drawn illustrations paired with serious product UI — the eye/dartboard style illustrations bridge human warmth and functional clarity in the same way"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-violet: #1009f6;
          --color-solar-yellow: #ffba09;
          --color-ink-black: #1a1a1a;
          --color-pure-white: #ffffff;
          --color-linen-cream: #f0f0ec;
          --color-charcoal: #222222;
          --color-stone-gray: #d4d4d0;
          --color-silver-gray: #b3b3b3;
          --color-pure-black: #000000;
          --color-sky-mist: #add3e5;
          --color-blossom-pink: #e3c7de;
          --color-forest-dark: #304801;
        
          /* Typography — Font Families */
          --font-abcwhyte: 'Abcwhyte', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --text-subheading: 25px;
          --leading-subheading: 1.25;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.24;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-9: 9px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-21: 21px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64-80px;
          --card-padding: 24px;
          --element-gap: 14px;
        
          /* Border Radius */
          --radius-md: 4.375px;
          --radius-lg: 10.5px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 96px;
          --radius-full-2: 99px;
          --radius-full-3: 999px;
          --radius-full-4: 9999px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-pills: 999px;
          --radius-small: 10-16px;
          --radius-images: 40px;
          --radius-inputs: 4px;
          --radius-buttons: 24px;
        
          /* Surfaces */
          --surface-linen-canvas: #f0f0ec;
          --surface-pure-card: #ffffff;
          --surface-stone-surface: #d4d4d0;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-violet: #1009f6;
          --color-solar-yellow: #ffba09;
          --color-ink-black: #1a1a1a;
          --color-pure-white: #ffffff;
          --color-linen-cream: #f0f0ec;
          --color-charcoal: #222222;
          --color-stone-gray: #d4d4d0;
          --color-silver-gray: #b3b3b3;
          --color-pure-black: #000000;
          --color-sky-mist: #add3e5;
          --color-blossom-pink: #e3c7de;
          --color-forest-dark: #304801;
        
          /* Typography */
          --font-abcwhyte: 'Abcwhyte', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.4;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-body-lg: 16px;
          --leading-body-lg: 1.6;
          --text-subheading: 25px;
          --leading-subheading: 1.25;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.3;
          --text-heading: 32px;
          --leading-heading: 1.24;
          --text-heading-lg: 40px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.2;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-9: 9px;
          --spacing-11: 11px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-21: 21px;
          --spacing-22: 22px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-60: 60px;
        
          /* Border Radius */
          --radius-md: 4.375px;
          --radius-lg: 10.5px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
          --radius-full: 96px;
          --radius-full-2: 99px;
          --radius-full-3: 999px;
          --radius-full-4: 9999px;
        }