frontify___style_reference:
  info: "> Warm atelier with orange punctuation — a museum catalog rendered in cream and ink, where a single warm orange acts as the only raised voice in an otherwise hushed room."

  theme: "light"

  info: "Frontify operates as an editorial brand-management workspace: a warm cream canvas (#f0f0eb) holds white card surfaces and dark teal hero moments, with a single vivid orange (#ff3b00) acting as functional punctuation rather than decorative color. Typography carries the identity — a high-contrast serif display face (Cranny) sets an editorial, near-print tone at 40–96px, while a clean grotesque (ABC Diatype) handles all interface text at 14–18px with positive tracking. The system avoids heavy shadows and gradients, relying on warm neutrals, hairline borders, and comfortable 8px-base spacing to create a calm, considered density. Components feel lightweight: 8px card radii, pill buttons at 24–40px, ghost controls, and image-forward compositions where brand assets become the hero content."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Warm Parchment | `#f0f0eb` | `--color-warm-parchment` | Page canvas, hero section dividers, large surface fills — warm cream replaces stark white to soften the entire interface |"
    info: "| Gallery White | `#ffffff` | `--color-gallery-white` | Card surfaces, elevated panels, button text on dark fills — pure white reserved for objects sitting on the cream canvas |"
    info: "| Soft Linen | `#e1e1db` | `--color-soft-linen` | Secondary card surface, subtle background fills behind grouped content |"
    info: "| Mist Gray | `#d7d7cf` | `--color-mist-gray` | Subtle background fills, body section dividers |"
    info: "| Pale Stone | `#cbcbc5` | `--color-pale-stone` | Light hairline borders on neutral surfaces |"
    info: "| Ash Gray | `#bfbfb8` | `--color-ash-gray` | Icon strokes, secondary borders, muted decorative elements |"
    info: "| Graphite Warm | `#575753` | `--color-graphite-warm` | Secondary card text, muted card labels |"
    info: "| Charcoal Warm | `#464643` | `--color-charcoal-warm` | Body-level borders, secondary text on warm surfaces |"
    info: "| Ink | `#111110` | `--color-ink` | Primary text, hairline borders across all surfaces, filled button background — the structural neutral that carries nearly all interface weight |"
    info: "| Signal Orange | `#ff3b00` | `--color-signal-orange` | Sole chromatic accent — highlights, active tags, icon fills, decorative punctuation. Used sparingly to make functional moments feel switched on against the warm monochrome |"
    info: "| Deep Teal | `#042a2b` | `--color-deep-teal` | Gray outline accent for tags, dividers, and focused UI edges. |"

  tokens___typography:

    cranny___display_and_editorial_heading_face___high_contrast_serif_used_for_hero_headlines_and_section_titles_at_40_96px__weight_300_at_display_sizes_creates_a_whisper_soft_authority__weight_400_carries_through_subheadings__this_is_the_brand_s_typographic_signature__an_editorial_serif_in_a_sea_of_saas_grotesques_____font_cranny:
      - "**Substitute:** Fraunces, Playfair Display, or DM Serif Display"
      - "**Weights:** 300, 400"
      - "**Sizes:** 16, 18, 20, 24, 28, 32, 40, 61, 80, 96px"
      - "**Line height:** 0.91, 1.00, 1.10, 1.30, 1.50"
      - "**Letter spacing:** -0.0070em at display (80–96px), 0.0100em at small sizes"
      - "**Role:** Display and editorial heading face — high-contrast serif used for hero headlines and section titles at 40–96px. Weight 300 at display sizes creates a whisper-soft authority; weight 400 carries through subheadings. This is the brand's typographic signature: an editorial serif in a sea of SaaS grotesques."

    abc_diatype___primary_interface_and_body_text___neutral_grotesque_handling_nav__buttons__inputs__body_copy__and_card_labels__the__0_01em_positive_tracking_is_unusually_generous_for_a_grotesque_and_creates_a_calm__considered_rhythm_in_body_text_____font_abc_diatype:
      - "**Substitute:** Inter, Söhne, or GT America"
      - "**Weights:** 400, 500"
      - "**Sizes:** 14, 18px"
      - "**Line height:** 1.00, 1.30, 1.35, 1.50"
      - "**Letter spacing:** 0.0100em (0.14px at 14px, 0.18px at 18px)"
      - "**Role:** Primary interface and body text — neutral grotesque handling nav, buttons, inputs, body copy, and card labels. The +0.01em positive tracking is unusually generous for a grotesque and creates a calm, considered rhythm in body text."

    satoshi___secondary_body_fallback_for_specific_micro_copy_contexts____font_satoshi:
      - "**Substitute:** DM Sans or Manrope"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.30"
      - "**Letter spacing:** 0.0100em"
      - "**Role:** Secondary body fallback for specific micro-copy contexts"

    cabinetgrotesk___bold_display_variant_for_emphasis_and_large_numerals___tighter__heavier_counterpoint_to_the_editorial_cranny____font_cabinetgrotesk:
      - "**Substitute:** Cabinet Grotesk (Indus Type) or General Sans Bold"
      - "**Weights:** 500, 700"
      - "**Sizes:** 16, 40px"
      - "**Line height:** 1.00, 1.20"
      - "**Letter spacing:** 0.0100em"
      - "**Role:** Bold display variant for emphasis and large numerals — tighter, heavier counterpoint to the editorial Cranny"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.3 | 0.14px | `--text-caption` |"
      info: "| body | 18px | 1.35 | 0.18px | `--text-body` |"
      info: "| subheading | 24px | 1.3 | 0.24px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.2 | 0.32px | `--text-heading-sm` |"
      info: "| heading | 40px | 1.1 | 0.4px | `--text-heading` |"
      info: "| heading-lg | 61px | 1 | -0.43px | `--text-heading-lg` |"
      info: "| display | 80px | 0.95 | -0.56px | `--text-display` |"
      info: "| display-xl | 96px | 0.91 | -0.67px | `--text-display-xl` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 8px |"
      info: "| images | 18px |"
      info: "| nav-pills | 32px |"
      info: "| buttons-lg | 40px |"
      info: "| buttons-sm | 24px |"

    layout:

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

  components:

    top_navigation_bar:
      role: "Persistent site navigation"

      info: "Horizontal bar on #f0f0eb background. Left: logo + dropdown menu items (Platform, Customers, Partnerships, Resources). Right: text link (Pricing), language selector (EN), ghost Login button (outlined pill, 32px radius), and filled Demo button (Ink #111110, white text, 32px radius, 12px 20px padding). Height ~64px."

    dark_hero_section:
      role: "Primary landing section"

      info: "Full-bleed #042a2b background with centered content. Display heading at 80–96px Cranny weight 300, white text, -0.67px letter-spacing. Subtext at 18px ABC Diatype weight 400, white at ~80% opacity. Button row below with 16px gap. Optional centered product preview image with 18px radius and 80% width constraint."

    filled_dark_button:
      role: "Primary action"

      info: "Ink (#111110) background, white text, ABC Diatype 14px weight 500, 0.14px letter-spacing. Padding 12px 20px, border-radius 24px (compact) or 40px (large). No border, no shadow. Used for 'Book demo' and 'Demo' CTAs."

    ghost_button:
      role: "Secondary action"

      info: "Transparent background with 1px border in white (on dark hero) or Ink (on light sections). ABC Diatype 14px weight 400, 0.14px letter-spacing. Padding 12px 20px, border-radius 24px. Includes optional arrow icon (▷) after label. Used for 'See the platform', 'Login'."

    logo_bar:
      role: "Social proof / partner display"

      info: "Horizontal row of partner logos on cream canvas, evenly distributed. Logos in black or grayscale, no color treatment. Comfortable spacing between logos, sits as a full-width strip between hero and feature sections."

    feature_heading_block:
      role: "Section introduction"

      info: "Centered text stack on cream canvas. Heading at 40–61px Cranny weight 300–400, Ink color. Subtext at 18px ABC Diatype weight 400, Graphite (#575753). Gap between heading and subtext: 16–24px. Section padding: 80px vertical."

    upload_drop_zone:
      role: "File interaction surface"

      info: "Dashed border (1px, #cbcbc5), cream background, 8px radius. Centered icon + label stack. ABC Diatype 18px weight 400 for label, Graphite color. Minimum height ~320px."

    media_library_card:
      role: "Content container for image grid"

      info: "White (#ffffff) surface, 8px radius, 32px internal padding. Contains breadcrumb header (Nobrand > Libraries > Media in 14px ABC Diatype, #575753 with chevron separators) and 4×2 image grid below."

    overlapping_image_tile:
      role: "Gallery thumbnail"

      info: "18px border-radius, no border. Arranged in grid with 2–3° random rotation and ~8px overlap between adjacent tiles. Creates a casual, editorial scrapbook feel rather than a rigid grid."

    pill_tag:
      role: "Filter or metadata label"

      info: "White background, 1px border in Pale Stone (#cbcbc5), ABC Diatype 12–14px weight 400, Ink text. Fully rounded (9999px radius). Padding 6px 12px. Used for format tags (PNG) and action labels (Magic hour)."

    breadcrumb:
      role: "Navigation path indicator"

      info: "Inline horizontal list, 14px ABC Diatype weight 400. Items in Graphite (#575753) separated by chevron (›) in Ash Gray (#bfbfb8). First item preceded by small logo icon. No background, sits at top of content cards."

    cta_card_with_glass_overlay:
      role: "Action prompt on image"

      info: "Semi-transparent panel (rgba(255,255,255,0.85)) with 18px radius overlaid on hero photography. Contains pill tags and a Signal Orange action button. The orange button is a small square with rounded corners (8px) and a white sparkle/star icon — the only place where orange carries visual weight."

  do_s_and_don_ts:

    do:
      - "Use Cranny weight 300 for all display headlines — the whisper-soft serif is the brand's typographic signature"
      - "Set all interface text in ABC Diatype with 0.0100em positive tracking (0.14px at 14px, 0.18px at 18px)"
      - "Use #f0f0eb Warm Parchment as the page canvas; reserve #ffffff Gallery White exclusively for cards sitting on the canvas"
      - "Apply 8px radius to all content cards, 24–40px radius to buttons (24px compact, 40px hero-scale)"
      - "Use #ff3b00 Signal Orange only for small functional moments (active tags, icon accents, single CTA button) — never for large fills or backgrounds"
      - "Maintain 80px section gaps on the cream canvas; use the dark #042a2b surface sparingly for full-bleed editorial moments"
      - "Separate components with 1px hairline borders in Ink (#111110) rather than drop shadows"

    don_t:
      - "Don't use drop shadows or elevation stacks — depth comes from warm neutral layering and hairline borders only"
      - "Don't use Cranny for body text or interface labels — it is a display face only; pair with ABC Diatype"
      - "Don't apply Signal Orange to large fills, page sections, or text — it loses meaning when used at scale"
      - "Don't use pure #000000 for text or borders — Ink (#111110) is the structural black; reserve #000000 for SVG fills only"
      - "Don't center-align body copy or multi-line text longer than 60 characters — display headlines and short labels only"
      - "Don't use standard 4px or 6px radii on cards — the system uses 8px minimum for content surfaces"
      - "Don't introduce additional chromatic accents; the system is warm-monochrome with one orange voice"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f0f0eb` | Base page background — warm cream replaces stark white |"
    info: "| 1 | Card | `#ffffff` | Content cards, feature panels sitting on the canvas |"
    info: "| 2 | Elevated Card | `#e1e1db` | Secondary grouped content, subtle background variation |"
    info: "| 3 | Dark Surface | `#042a2b` | Hero sections and editorial dark moments |"

  elevation:

    info: "The system deliberately avoids drop shadows as a structural tool. Depth is communicated through warm neutral layering (#f0f0eb → #ffffff → #e1e1db), hairline borders in #111110, and the occasional dark-teal surface (#042a2b) for dramatic contrast. Components sit on flat planes separated by 1px borders rather than lifted by shadow."

  imagery:

    image_forward_and_editorial: "full-bleed cinematic photography in dark hero sections (lifestyle, atmospheric, often silhouetted figures against skies), contained 18px-radius image grids with slight rotation and overlap (2 rows of 4 in the media library view), and brand-asset thumbnails presented as gallery objects. Photography is warm-toned, high-contrast, and treated as content rather than decoration — the images ARE the page, not illustrations of it. No flat illustration system; visuals are either photographic or absent."

  layout:

    info: "Max-width 1200px centered content on a warm cream canvas. The page opens with a full-bleed dark hero (#042a2b background) containing a centered serif headline at 80–96px, a subtext line, and two buttons (filled + ghost). Below, sections alternate on the cream canvas with generous 80px vertical gaps. Logo bars sit as horizontal strips with comfortable spacing. Feature sections use centered headline → subtext → visual stack. The media library view shows a 4×2 image grid with intentional 2–3° rotation and overlap between tiles, framed by a single rounded card container."

  agent_prompt_guide:

  quick_color_reference:
    - "Canvas/page background: #f0f0eb (Warm Parchment)"
    - "Card surface: #ffffff (Gallery White)"
    - "Primary text & borders: #111110 (Ink)"
    - "Secondary text: #575753 (Graphite Warm)"
    - "Dark hero surface: #042a2b (Deep Teal)"
    - "Accent (small functional moments only): #ff3b00 (Signal Orange)"
    - "primary action: #111110 (filled action)"

  example_component_prompts:

    - "**Dark Hero Section**: Full-bleed #042a2b background, centered. Display headline at 80px Cranny weight 300, #ffffff, letter-spacing -0.56px. Subtext at 18px ABC Diatype weight 400, white at 85% opacity. Two buttons below with 16px gap: filled Ink (#111110, white text, 24px radius, 12px 20px padding) and ghost (transparent, 1px white border, white text, 24px radius, 12px 20px padding)."

    - "**Feature Section Block**: Cream #f0f0eb background, 80px vertical padding. Centered heading at 40px Cranny weight 400, #111110, 0.40px letter-spacing. Subtext at 18px ABC Diatype weight 400, #575753, 16px gap below heading. Max content width 640px."

    - "**Media Library Card**: White #ffffff surface, 8px radius, 32px padding. Breadcrumb at top in 14px ABC Diatype #575753 separated by › in #bfbfb8. Below: 4-column image grid with 18px-radius tiles, 8px gaps, optional 2–3° rotation on each tile."

    - "**Top Navigation Bar**: #f0f0eb background, 64px height. Left cluster: logo + ABC Diatype 14px weight 500 nav items in #111110 with 24px gaps. Right cluster: text link (Pricing), language selector, ghost Login button (1px #111110 border, 32px radius, 12px 16px padding), filled Demo button (#111110 bg, white text, 32px radius, 12px 16px padding)."

    - "**Pill Tag Filter**: White background, 1px border in #cbcbc5, 9999px radius, 6px 12px padding. ABC Diatype 14px weight 400 in #111110. For the orange variant: #ff3b00 background, white text, no border, 8px radius (square-ish, not pill) with a small white sparkle icon."

  similar_brands:

    - "**Webflow** — Same dark-hero-into-light-sections rhythm with large editorial display type and warm neutrals"
    - "**Linear** — Comfortable 8px-base density, hairline borders on flat surfaces, and restraint around color"
    - "**Pitch** — Editorial serif headlines paired with a single warm accent color and image-forward presentations"
    - "**Arc Browser** — Warm cream canvas with deep dark contrast sections and oversized editorial typography"
    - "**Notion** — Comfortable spacing, soft card radii, and a calm near-monochrome palette with minimal elevation"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-warm-parchment: #f0f0eb;
          --color-gallery-white: #ffffff;
          --color-soft-linen: #e1e1db;
          --color-mist-gray: #d7d7cf;
          --color-pale-stone: #cbcbc5;
          --color-ash-gray: #bfbfb8;
          --color-graphite-warm: #575753;
          --color-charcoal-warm: #464643;
          --color-ink: #111110;
          --color-signal-orange: #ff3b00;
          --color-deep-teal: #042a2b;
        
          /* Typography — Font Families */
          --font-cranny: 'Cranny', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cabinetgrotesk: 'Cabinetgrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.3;
          --tracking-caption: 0.14px;
          --text-body: 18px;
          --leading-body: 1.35;
          --tracking-body: 0.18px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: 0.24px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 0.32px;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --tracking-heading: 0.4px;
          --text-heading-lg: 61px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.43px;
          --text-display: 80px;
          --leading-display: 0.95;
          --tracking-display: -0.56px;
          --text-display-xl: 96px;
          --leading-display-xl: 0.91;
          --tracking-display-xl: -0.67px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 32px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 8px;
          --radius-images: 18px;
          --radius-nav-pills: 32px;
          --radius-buttons-lg: 40px;
          --radius-buttons-sm: 24px;
        
          /* Surfaces */
          --surface-canvas: #f0f0eb;
          --surface-card: #ffffff;
          --surface-elevated-card: #e1e1db;
          --surface-dark-surface: #042a2b;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-warm-parchment: #f0f0eb;
          --color-gallery-white: #ffffff;
          --color-soft-linen: #e1e1db;
          --color-mist-gray: #d7d7cf;
          --color-pale-stone: #cbcbc5;
          --color-ash-gray: #bfbfb8;
          --color-graphite-warm: #575753;
          --color-charcoal-warm: #464643;
          --color-ink: #111110;
          --color-signal-orange: #ff3b00;
          --color-deep-teal: #042a2b;
        
          /* Typography */
          --font-cranny: 'Cranny', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-abc-diatype: 'ABC Diatype', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-cabinetgrotesk: 'Cabinetgrotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.3;
          --tracking-caption: 0.14px;
          --text-body: 18px;
          --leading-body: 1.35;
          --tracking-body: 0.18px;
          --text-subheading: 24px;
          --leading-subheading: 1.3;
          --tracking-subheading: 0.24px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: 0.32px;
          --text-heading: 40px;
          --leading-heading: 1.1;
          --tracking-heading: 0.4px;
          --text-heading-lg: 61px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -0.43px;
          --text-display: 80px;
          --leading-display: 0.95;
          --tracking-display: -0.56px;
          --text-display-xl: 96px;
          --leading-display-xl: 0.91;
          --tracking-display-xl: -0.67px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-128: 128px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-3xl: 24px;
          --radius-3xl-2: 32px;
          --radius-3xl-3: 40px;
        }