tilda___style_reference:
  info: "> Paper sketchbook with coral crayon"

  theme: "light"

  info: "Tilda operates on a near-monochrome canvas with a single vivid coral accent doing all the emotional work. The aesthetic is editorial-illustration-meets-builder-tool: flat, hand-drawn line art fills the left side of heroes, generous whitespace breathes around light-weight headlines, and one orange-coral button is the only spot of color in an otherwise achromatic interface. Typography carries the personality — TildaSans at weight 300 whispers across 60-78px hero headlines, while the coral accent is rationed for primary actions, illustration fills, and icon highlights. Components are confident and pill-shaped: 100px radius buttons, flat surfaces with no shadows, thin black borders instead of elevation. The system should feel like a design magazine that accidentally became a product page."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Coral Signal | `#fa8669` | `--color-coral-signal` | Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, button strokes, dark mode contrast pairs, icon outlines |"
    info: "| Carbon | `#222222` | `--color-carbon` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Graphite Deep | `#171717` | `--color-graphite-deep` | Dark surface blocks, footer regions, inverted section backgrounds |"
    info: "| Plum Ink | `#2a2a2a` | `--color-plum-ink` | Secondary dark surface, hover states on dark backgrounds |"
    info: "| Smoke | `#7f7f7f` | `--color-smoke` | Muted helper text, placeholder text, disabled icon outlines |"
    info: "| Silver | `#cccccc` | `--color-silver` | Button hover backgrounds, disabled controls, subtle surface tints |"
    info: "| Bone | `#efefef` | `--color-bone` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card elevation, button text on dark fills, content surface |"

  tokens___typography:

    times___times___detected_in_extracted_data_but_not_described_by_ai____font_times:
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.2"
      - "**Role:** Times — detected in extracted data but not described by AI"

    tildasans___primary_brand_typeface_for_all_interface_text___display_headlines_at_60_78px_use_weight_300_whisper_weight_creates_editorial_calm__section_headings_at_34_48px_use_weight_400__body_sits_at_16_20px_weight_400__micro_labels_and_nav_use_weight_500_600__the_wide_weight_range_100_700_and_tracking_ladder_allow_the_same_family_to_serve_everything_from_super_light_hero_whispers_to_crisp_button_labels_____font_tildasans:
      - "**Substitute:** Inter, Manrope, or DM Sans"
      - "**Weights:** 100, 300, 400, 500, 600, 700"
      - "**Sizes:** 13, 14, 15, 16, 18, 19, 20, 22, 24, 26, 28, 34, 36, 42, 44, 46, 48, 60, 72, 78"
      - "**Line height:** 1.13-2.00"
      - "**Letter spacing:** 0.0380em, 0.0630em, 0.0710em, 0.1790em"
      - "**Role:** Primary brand typeface for all interface text — display headlines at 60-78px use weight 300 (whisper-weight creates editorial calm), section headings at 34-48px use weight 400, body sits at 16-20px weight 400, micro-labels and nav use weight 500-600. The wide weight range (100-700) and tracking ladder allow the same family to serve everything from super-light hero whispers to crisp button labels."

    arial___system_fallback_for_small_ui_metadata__icon_labels__and_micro_text_where_tildasans_might_not_load____font_arial:
      - "**Substitute:** system-ui"
      - "**Weights:** 100, 300, 400, 500"
      - "**Sizes:** 11, 13, 14"
      - "**Line height:** 1.20, 2.00"
      - "**Role:** System fallback for small UI metadata, icon labels, and micro-text where TildaSans might not load"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.4 | 0.071px | `--text-caption` |"
      info: "| body-sm | 15px | 1.45 | — | `--text-body-sm` |"
      info: "| subheading | 20px | 1.45 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.4 | — | `--text-heading-sm` |"
      info: "| heading | 34px | 1.35 | 0.038px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.23 | — | `--text-heading-lg` |"
      info: "| display | 72px | 1.17 | 0.063px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 44 | 44px | `--spacing-44` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"
      info: "| 152 | 152px | `--spacing-152` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 100px |"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| inputs | 100px |"
      info: "| buttons | 100px |"

    layout:

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

  components:

    coral_primary_button:
      role: "The single most important interactive element — the only chromatic button in the system"

      info: "Filled pill button, #fa8669 background, #ffffff text, 100px border-radius, 14-16px vertical padding, 28-32px horizontal padding, TildaSans weight 500-600 at 14-16px. Used for 'Create a website for free' and all primary conversion actions."

    ghost_outline_button:
      role: "Secondary action paired with the coral CTA"

      info: "Transparent or #ffffff background, 1px #000000 border, #000000 text, 100px radius, 14px 28px padding, TildaSans weight 500 at 14-16px. Pairs alongside the coral CTA as the lower-commitment option ('Overview')."

    inverted_dark_button:
      role: "Account/auth actions in navigation"

      info: "Solid #000000 or #222222 background, #ffffff text, 100px radius, 10px 20px padding, TildaSans weight 500 at 14px. Used for 'Sign Up' and 'Log In' in the top nav to contrast against ghost/primary buttons."

    top_navigation_bar:
      role: "Persistent site navigation"

      info: "White background, #ffffff, 1px #efefef or transparent bottom border, horizontally aligned with brand wordmark left and nav links right. Nav links in TildaSans 14px weight 500, #000000. Height ~60px, max-width 1200px centered with 24-32px horizontal padding."

    hero_split_section:
      role: "Above-the-fold introduction"

      two_column_layout_at_1200px_max_width: "left column holds flat illustration (black line art with coral fills), right column holds TildaSans 48-60px weight 300 headline, 16-18px weight 400 subtext in #222222, and CTA pair. Section gap 96-120px from nav and from next section."

    centered_editorial_section:
      role: "Narrative content between features"

      centered_stack_within_1200px_max_width: "eyebrow label in TildaSans 13px weight 500 with 0.071em tracking, 48-60px weight 300 headline, 18-20px body paragraph in #222222 at max-width ~600px. No background change — pure white."

    feature_card:
      role: "Product feature presentation"

      info: "Flat #ffffff or #efefef surface, no border, no shadow, 32-48px padding. Contains illustration left and copy right. Corner radius is 0 — cards are sharp-edged to contrast with pill buttons. Often uses a thin black rule beneath."

    brand_illustration_block:
      role: "Atmospheric visual identity"

      info: "Full-height illustration on white or #efefef background. Black line art at 1.5-2px stroke weight, with selective coral (#fa8669) fills on key objects (hearts, characters' clothing, icons). No gradients, no shadows — pure flat graphic style."

    pill_badge___tag:
      role: "Category labels, section eyebrows, metadata"

      info: "100px radius, 4px 12px padding, TildaSans 13px weight 500 with 0.071em tracking. Background #efefef with #000000 text, or #000000 with #ffffff text. All-caps or sentence case."

    hairline_divider:
      role: "Section separation without visual weight"

      info: "1px #efefef or #cccccc horizontal line spanning the content width. Used instead of background color changes to separate sections while maintaining the all-white feel."

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

ffffff_or_171717_background__tildasans_14_16px_weight_400_text__links_at_weight_500__000000_or_ffffff_depending_on_background__96px_top_padding__generous_link_spacing_via_20_24px_row_gap:

    language_selector:
      role: "Locale picker, bottom-right floating"

      info: "Fixed-position pill in bottom-right, 100px radius, white background with 1px #efefef border, TildaSans 13px weight 500. Globe icon + language code."

  do_s_and_don_ts:

    do:
      - "Use 100px border-radius on all buttons, tags, badges, and language selectors — pill shape is the signature component geometry"
      - "Use TildaSans weight 300 for all headlines 48px and above; let the large size and light weight carry the editorial calm"
      - "Use #fa8669 sparingly — reserve for primary CTAs, illustration accents, and key icons; never for body text or borders"
      - "Default to #ffffff canvas; use #efefef only for distinct card surfaces or section breaks"
      - "Use 1px solid #efefef or #000000 borders for component separation instead of box-shadows"
      - "Keep illustrations flat with 1.5-2px black line work and selective coral fills — no gradients, no dimension"
      - "Maintain 96-120px section gaps to preserve the breathing, magazine-like vertical rhythm"

    don_t:
      - "Don't add box-shadows to any component — flat surfaces and hairline borders are the elevation language"
      - "Don't use #fa8669 for non-CTA elements: no coral borders, no coral body text, no coral card backgrounds"
      - "Don't set border-radius below 100px on buttons or tags — sharp or moderately rounded buttons break the pill system"
      - "Don't use weight 600+ for headlines — the whisper-weight contrast at 300-400 is the typographic signature"
      - "Don't introduce additional accent colors; the monochrome + coral binary is the entire palette"
      - "Don't apply heavy backgrounds to body sections — keep the dominant experience white/achromatic"
      - "Don't use gradient fills on illustrations or backgrounds — flat color is mandatory"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Page canvas, content backdrop |"
    info: "| 1 | Bone | `#efefef` | Card surface, secondary section backgrounds, ghost button fill |"
    info: "| 2 | Silver | `#cccccc` | Hover state, disabled surface |"
    info: "| -1 | Carbon | `#222222` | Inverted section, dark surface block |"

  elevation:

    info: "No shadows. The design system uses flat surfaces distinguished only by background color (white vs #efefef vs #cccccc) and 1px hairline borders. Elevation is communicated through spatial separation and surface tone, not shadow. This is a deliberate editorial choice — shadows would feel too 'SaaS dashboard' and undermine the magazine-like, hand-drawn aesthetic."

  imagery:

    info: "Hand-drawn flat illustrations dominate the visual language: black line art at 1.5-2px stroke weight with selective coral (#fa8669) fills on focal elements (hearts, character clothing, key objects). The illustration style is editorial and slightly whimsical — characters with simplified proportions, floating UI elements, dotted halftone textures. Illustrations are always contained, never full-bleed, and sit on the left side of hero/feature splits. No photography. No 3D renders. No gradients. The visual hierarchy relies on the contrast between the minimal coral-and-white UI and the busier illustrated moments."

  layout:

    info: "Max-width 1200px centered container with 24-32px horizontal padding. Hero follows a split pattern: 50/50 illustration-left + text-right, with the coral CTA and ghost button stacked horizontally. Subsequent sections alternate between centered editorial stacks (eyebrow → headline → paragraph) and split feature blocks (illustration-left, text-right). Sections are separated by 96-120px vertical gaps on a continuous white canvas. No alternating dark/light bands — the page stays achromatic throughout, with #efefef reserved for card surfaces and #171717 only in the footer. Navigation is a minimal top bar: brand left, links right, no mega-menu."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "card surface: #efefef"
    - "border: #efefef / #000000"
    - "accent: #fa8669"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "Create a feature card: #efefef background, 0px border-radius, 40px padding. TildaSans 24px weight 400 heading in #000000, body at 16px weight 400 in #222222. No shadow, no border. Flat coral (#fa8669) icon accent at 32px."

    - "Create a pill badge/tag: #efefef background, 100px radius, 6px 14px padding, TildaSans 13px weight 500 with 0.071em letter-spacing, #000000 text, all-caps."

    - "Create a navigation bar: #ffffff background, 1200px max-width, 60px height. Brand wordmark left in TildaSans 16px weight 600. Nav links right in TildaSans 14px weight 500, #000000, 24px gap. Inverted dark button ('Sign Up') at far right: #000000 fill, #ffffff text, 100px radius, 10px 20px padding."

    - "Create a centered editorial section: #ffffff background, max-width 600px for text block. Eyebrow at 13px TildaSans weight 500 with 0.071em tracking, #000000, all-caps. Headline at 48px TildaSans weight 300, #000000. Body at 18px TildaSans weight 400, #222222, 1.5 line-height."

  similar_brands:

    - "**Webflow** — Same no-code builder category, similar split-hero layout with illustration left + text right, pill-shaped CTAs, and light-weight display headlines"
    - "**Squarespace** — Editorial typography-first approach with extra-large light-weight headlines on white canvas, single accent color rationed for CTAs"
    - "**Framer** — Near-monochrome interface with one bold accent color, large display type, and illustration-driven hero sections"
    - "**Notion** — Flat surfaces, no shadows, hairline dividers as the primary separation mechanism, generous whitespace"
    - "**Figma** — Pill-shaped buttons with high border-radius, flat card surfaces, editorial weight contrast between display and body text"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-coral-signal: #fa8669;
          --color-ink-black: #000000;
          --color-carbon: #222222;
          --color-graphite-deep: #171717;
          --color-plum-ink: #2a2a2a;
          --color-smoke: #7f7f7f;
          --color-silver: #cccccc;
          --color-bone: #efefef;
          --color-paper-white: #ffffff;
        
          /* Typography — Font Families */
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tildasans: 'TildaSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --tracking-caption: 0.071px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.45;
          --text-subheading: 20px;
          --leading-subheading: 1.45;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.4;
          --text-heading: 34px;
          --leading-heading: 1.35;
          --tracking-heading: 0.038px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.23;
          --text-display: 72px;
          --leading-display: 1.17;
          --tracking-display: 0.063px;
        
          /* Typography — Weights */
          --font-weight-thin: 100;
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-152: 152px;
          --spacing-160: 160px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 96-120px;
          --card-padding: 32-48px;
          --element-gap: 16-24px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-3xl: 30px;
          --radius-full: 60px;
          --radius-full-2: 100px;
        
          /* Named Radii */
          --radius-tags: 100px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-inputs: 100px;
          --radius-buttons: 100px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-bone: #efefef;
          --surface-silver: #cccccc;
          --surface-carbon: #222222;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-coral-signal: #fa8669;
          --color-ink-black: #000000;
          --color-carbon: #222222;
          --color-graphite-deep: #171717;
          --color-plum-ink: #2a2a2a;
          --color-smoke: #7f7f7f;
          --color-silver: #cccccc;
          --color-bone: #efefef;
          --color-paper-white: #ffffff;
        
          /* Typography */
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tildasans: 'TildaSans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --tracking-caption: 0.071px;
          --text-body-sm: 15px;
          --leading-body-sm: 1.45;
          --text-subheading: 20px;
          --leading-subheading: 1.45;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.4;
          --text-heading: 34px;
          --leading-heading: 1.35;
          --tracking-heading: 0.038px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.23;
          --text-display: 72px;
          --leading-display: 1.17;
          --tracking-display: 0.063px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-44: 44px;
          --spacing-60: 60px;
          --spacing-80: 80px;
          --spacing-100: 100px;
          --spacing-120: 120px;
          --spacing-152: 152px;
          --spacing-160: 160px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-3xl: 30px;
          --radius-full: 60px;
          --radius-full-2: 100px;
        }