monotype____style_reference:
  info: "> Curated typography showcase on paper. Monotype's interface behaves like a gallery wall: white surfaces, hairline dividers, generous whitespace, and type itself as the only ornament."

  theme: "light"

  info: "Monotype's design is an editorial type museum on white: the type is the artifact, the chrome recedes. The interface is overwhelmingly monochrome — near-black ink (#1e242c) on paper-white, with hairline gray dividers and a single saturated blue reserved exclusively for conversion. Components are low-elevation and flat: thin 1px borders instead of shadows, modest 8px radii on controls, generous 16-24px internal padding. Typography is the hero: a custom HelveticaNow family handles body, nav, and display, with a -0.02em tracking on bold labels that signals the brand's typographic pedigree. Layout breathes — comfortable 8px base grid, 16px element gaps, wide section spacing — letting featured type specimens and photography carry visual weight without competition from the UI."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink | `#1e242c` | `--color-ink` | Primary text, nav borders, icon strokes, card borders — near-black with a barely-there cool tint reads as a refined alternative to pure black |"
    info: "| Steel | `#576579` | `--color-steel` | Secondary text, muted nav links, subtle borders — the workhorse mid-gray for everything that must be quieter than body copy |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, button text on filled controls — the dominant surface |"
    info: "| Mist | `#e7eaee` | `--color-mist` | Nav dividers, subtle section separators — the lightest functional border |"
    info: "| Fog | `#dbdfe5` | `--color-fog` | Card borders, content block outlines — slightly darker than Mist for card-level separation |"
    info: "| Ash | `#cfd5dd` | `--color-ash` | Button focus shadow, input hover rings — the mid-neutral for interaction feedback |"
    info: "| Signal Blue | `#1a73e8` | `--color-signal-blue` | Blue action color for filled buttons, selected navigation states, and focused conversion moments. |"
    info: "| Coal | `#000000` | `--color-coal` | Icon fills, SVG strokes — true black reserved for graphic assets only, not text |"

  tokens___typography:

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

    helveticanowmtdisplaymedium___display_headlines_page_titles_like__variable_fonts____the_largest_voice_on_the_page__57px_with_tight_1_12_line_height____font_helveticanowmtdisplaymedium:
      - "**Substitute:** Inter Tight, Helvetica Neue Display"
      - "**Weights:** 500"
      - "**Sizes:** 57px"
      - "**Line height:** 1.12"
      - "**Letter spacing:** normal"
      - "**Role:** Display headlines (page titles like 'Variable fonts') — the largest voice on the page, 57px with tight 1.12 line-height"

    helveticanowmttextregular___body_copy__nav_items__buttons__article_titles__card_descriptions___the_workhorse_text_family_across_13_14_16px_with_line_heights_that_scale_from_tight_nav_1_20_to_generous_article_body_1_50____font_helveticanowmttextregular:
      - "**Substitute:** Inter, Helvetica Neue"
      - "**Weights:** 400"
      - "**Sizes:** 13px, 14px, 16px"
      - "**Line height:** 1.20-1.50"
      - "**Role:** Body copy, nav items, buttons, article titles, card descriptions — the workhorse text family across 13/14/16px with line-heights that scale from tight nav (1.20) to generous article body (1.50)"

    helveticanowmttextbold___bold_labels__active_nav_states__emphasized_article_titles___the__0_02em_tracking_is_a_brand_signature__tight_enough_to_read_as_deliberate_typographic_craft____font_helveticanowmttextbold:
      - "**Substitute:** Inter Bold, Helvetica Neue Bold"
      - "**Weights:** 700"
      - "**Sizes:** 13px, 16px"
      - "**Line height:** 1.23-1.50"
      - "**Letter spacing:** -0.02em"
      - "**Role:** Bold labels, active nav states, emphasized article titles — the -0.02em tracking is a brand signature: tight enough to read as deliberate typographic craft"

    helveticanowmtmicroregular___micro_copy__metadata__breadcrumb_text__tag_labels___11px_with_2_55_line_height_for_very_fine_annotations__14px_version_for_small_ui_labels____font_helveticanowmtmicroregular:
      - "**Substitute:** Inter, system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 11px, 14px"
      - "**Line height:** 1.45-2.55"
      - "**Role:** Micro-copy, metadata, breadcrumb text, tag labels — 11px with 2.55 line-height for very fine annotations; 14px version for small UI labels"

    typecasevar___typecasevar___detected_in_extracted_data_but_not_described_by_ai____font_typecasevar:
      - "**Weights:** 400"
      - "**Sizes:** 26px"
      - "**Line height:** 1.2"
      - "**Role:** TypecaseVar — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| micro | 11px | 1.45 | — | `--text-micro` |"
      info: "| caption | 13px | 1.2 | — | `--text-caption` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 26px | 1.2 | — | `--text-subheading` |"
      info: "| display | 57px | 1.12 | — | `--text-display` |"

  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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 104 | 104px | `--spacing-104` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| badges | 8px |"
      info: "| images | 16px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.16) 0px 0px 2px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1280px"
      - "**Section gap:** 80-104px"
      - "**Card padding:** 16-24px"
      - "**Element gap:** 16px"

  components:

    primary_cta_button:
      role: "High-emphasis conversion action"

      info: "Filled #1a73e8 background, white text, 8px border-radius, 12px vertical / 24px horizontal padding. Uses HelveticaNowMTTextRegular at 16px weight 400. Single shadow: rgba(0,0,0,0.16) 0px 0px 2px 0px. Exclusively for 'Speak to sales' and similar conversion actions."

    secondary_nav_button:
      role: "Navigation link in top bar"

      info: "Transparent background, #1e242c text at 16px weight 400, no border, 12px horizontal padding. Hover/active states shift to #576579. Dropdown items use 8px radius container."

    article_card:
      role: "Content card in resource/article grids"

      info: "White surface, no shadow, 1px border in #dbdfe5 (Fog), 8px border-radius. 16px internal padding. Image at top with 16px border-radius. Title in HelveticaNowMTTextRegular 16px weight 400, #1e242c. No elevation — flat and editorial."

    announcement_bar:
      role: "Top-of-page promotional strip"

      info: "Full-width #1e242c background, white text at 14px, 8px vertical padding, centered. Used for Monotype Connect and similar announcements."

    search_bar:
      role: "Global font/foundry search"

      info: "White background, 1px border in #e7eaee, 8px radius, ~40px height. Placeholder text in #576579. No prominent focus ring — subtle interaction."

    breadcrumb:
      role: "Page hierarchy indicator"

      info: "11-14px HelveticaNowMTMicroRegular, #576579 text, separated by '/' delimiter. No background, sits above page title with minimal vertical padding."

    tab_navigation:
      role: "Secondary navigation under page title"

      info: "Horizontal row of text links in HelveticaNowMTTextRegular 16px, #576579 default, #1e242c active. No underline, no background — purely typographic state change. 8px vertical padding, 16-24px horizontal spacing."

    tag_label:
      role: "Content categorization badge"

      info: "Inline text label, 11-14px HelveticaNowMTMicroRegular, #576579. No background or border — just muted text reading 'Tag: Variable fonts' as a plain annotation."

    footer:
      role: "Site-wide footer"

      info: "Dark #1e242c background, white and #576579 text, 1px top border. Column-based link grid in HelveticaNowMTTextRegular at 14-16px."

    hero_image:
      role: "Featured article or type specimen image"

      info: "16px border-radius, no border, no shadow. Full-bleed within card padding. Images carry the visual weight — the UI around them stays invisible."

  do_s_and_don_ts:

    do:
      - "Use #1a73e8 (Signal Blue) only on primary conversion actions — never on links, icons, or decorative elements"
      - "Set body text in HelveticaNowMTTextRegular at 16px with line-height 1.50 for article-level readability"
      - "Use 8px border-radius for all controls (buttons, inputs, cards) and 16px for images"
      - "Apply -0.02em letter-spacing on all bold-weight text (13px and 16px) — this tracking is a brand signature"
      - "Use #1e242c (Ink) for all primary text and borders — avoid pure #000000 for text"
      - "Maintain 16px as the standard element gap; jump to 24px only for major control padding"
      - "Let images and type specimens carry visual weight — keep surrounding UI borderless or hairline-bordered"

    don_t:
      - "Never use Signal Blue for anything other than the primary CTA fill — it loses all impact if scattered across links and icons"
      - "Don't apply shadows beyond the single subtle button shadow (rgba(0,0,0,0.16) 0px 0px 2px 0px) — the design is intentionally flat"
      - "Don't use HelveticaNowMTDisplayMedium below 40px — the display family is calibrated for large sizes only"
      - "Don't add backgrounds to tab or nav states — use only color/weight changes to indicate active"
      - "Don't introduce additional border-radius values — the system is binary: 8px for UI, 16px for images"
      - "Don't use chromatic colors for status indicators, badges, or tags — everything meta stays in the gray scale"
      - "Don't compress section spacing below 80px — the editorial breathing room is part of the identity"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background — the dominant surface |"
    info: "| 1 | Card | `#ffffff` | Content cards and article tiles — same white, delineated only by 1px #dbdfe5 border |"
    info: "| 2 | Overlay | `#1a73e8` | Primary action button surface — the only filled control |"
    info: "| 3 | Inverted | `#1e242c` | Announcement bar and footer — dark inverted band |"

  elevation:

    - "**Primary CTA Button:** `0px 0px 2px 0px rgba(0, 0, 0, 0.16)`"

  imagery:

    info: "Photography and type specimens dominate visual space. Article cards feature bold, full-bleed images — close-up product shots, bold typographic compositions, video stills, and type specimens at large scale. Images are tightly cropped with no decorative framing, using 16px border-radius to soften without ornament. No illustrations, no abstract graphics, no icons-as-decoration. The imagery is documentary: it shows the work (fonts, branding projects, type in use) rather than illustrating concepts. Color within images is unrestricted — bright greens, bold yellows, dramatic blacks — but the UI chrome around them stays completely neutral, making the images feel like editorial photography in a design magazine."

  layout:

    info: "Max-width contained at ~1280px, centered. Top: full-width dark announcement bar, then white nav bar with logo left, search center, nav items and blue CTA right. Hero zone: large left-aligned display headline with breadcrumb above and horizontal tab navigation below — no full-bleed image hero. Content flows as a 3-column card grid for articles, with each card stacking image over title. Generous vertical rhythm: 80-104px between major sections. Navigation is a single top bar with dropdown menus, no sticky behavior visible. The page is text-and-image dominant, not dashboard-dense — the layout follows editorial magazine conventions, not product UI conventions."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #1e242c (Ink)"
    - "background: #ffffff (Paper)"
    - "border: #dbdfe5 (Fog) for cards, #e7eaee (Mist) for dividers"
    - "muted text: #576579 (Steel)"
    - "accent: N/A (no decorative accent color in the system)"
    - "primary action: #1a73e8 (filled action)"

  example_component_prompts:
    - "**Create a primary CTA button**: Filled #1a73e8 background, white text, HelveticaNowMTTextRegular 16px, 8px border-radius, 12px vertical / 24px horizontal padding, shadow 0px 0px 2px 0px rgba(0,0,0,0.16). Label: 'Speak to sales'."

    - "**Create an article card**: White background, 1px border #dbdfe5, 8px border-radius, 16px internal padding. Top: image at 16px border-radius, no border. Below: title in HelveticaNowMTTextRegular 16px #1e242c, line-height 1.50."

    - "**Create a page hero zone**: White background. Breadcrumb in HelveticaNowMTMicroRegular 11px #576579 above. Display headline 'Variable fonts' in HelveticaNowMTDisplayMedium 57px #1e242c, line-height 1.12, no letter-spacing. Tab row below in HelveticaNowMTTextRegular 16px, #576579 default, #1e242c active, 16-24px gap."

    - "**Create a tab nav row**: Transparent background, no borders. Items in HelveticaNowMTTextRegular 16px #576579, active item in #1e242c. 8px vertical padding, 20-24px horizontal gap. No underline, no background change."

    - "**Create an announcement bar**: Full-width #1e242c background, white text in HelveticaNowMTTextRegular 14px, centered, 8px vertical padding."

  similar_brands:

    - "**Google Fonts** — Same white-canvas editorial approach with a single blue accent for conversion; both treat type as the primary content"
    - "**Type foundry sites (Hoefler & Co, Commercial Type)** — Same flat, image-forward editorial layout where type specimens and project photography dominate over UI chrome"
    - "**It's Nice That** — Same magazine-style grid of editorial cards with generous whitespace and minimal UI ornamentation"
    - "**Framer** — Same clean white canvas with a single chromatic action color and low-elevation flat components"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink: #1e242c;
          --color-steel: #576579;
          --color-paper: #ffffff;
          --color-mist: #e7eaee;
          --color-fog: #dbdfe5;
          --color-ash: #cfd5dd;
          --color-signal-blue: #1a73e8;
          --color-coal: #000000;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticanowmtdisplaymedium: 'HelveticaNowMTDisplayMedium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticanowmttextregular: 'HelveticaNowMTTextRegular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticanowmttextbold: 'HelveticaNowMTTextBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticanowmtmicroregular: 'HelveticaNowMTMicroRegular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-typecasevar: 'TypecaseVar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 11px;
          --leading-micro: 1.45;
          --text-caption: 13px;
          --leading-caption: 1.2;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 26px;
          --leading-subheading: 1.2;
          --text-display: 57px;
          --leading-display: 1.12;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-104: 104px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80-104px;
          --card-padding: 16-24px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-badges: 8px;
          --radius-images: 16px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.16) 0px 0px 2px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-card: #ffffff;
          --surface-overlay: #1a73e8;
          --surface-inverted: #1e242c;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink: #1e242c;
          --color-steel: #576579;
          --color-paper: #ffffff;
          --color-mist: #e7eaee;
          --color-fog: #dbdfe5;
          --color-ash: #cfd5dd;
          --color-signal-blue: #1a73e8;
          --color-coal: #000000;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticanowmtdisplaymedium: 'HelveticaNowMTDisplayMedium', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticanowmttextregular: 'HelveticaNowMTTextRegular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticanowmttextbold: 'HelveticaNowMTTextBold', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helveticanowmtmicroregular: 'HelveticaNowMTMicroRegular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-typecasevar: 'TypecaseVar', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-micro: 11px;
          --leading-micro: 1.45;
          --text-caption: 13px;
          --leading-caption: 1.2;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 26px;
          --leading-subheading: 1.2;
          --text-display: 57px;
          --leading-display: 1.12;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-104: 104px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.16) 0px 0px 2px 0px;
        }