typewolf___style_reference:
  info: "> Warm parchment typography atelier. Every element is a brownish-ink stamp on dusty rose paper, with no color allowed to compete with the type."

  theme: "light"

  info: "Typewolf reads as a warm, editorial type specimen magazine pressed into a website: a dusty rose canvas (#f8f5f5) supports white rectangular cards in a two-column grid, all anchored by brownish-ink text rather than any chromatic accent system. The palette is deliberately near-monochromatic — a dark warm brown (#443235) for body copy and headlines, a slightly lighter brown (#654a4e) for nav and secondary links, and a single muted dusty rose (#916a70) reserved for borders and quiet emphasis. Typography carries the entire identity: a transitional serif (Domaine Text) for body, an ultra-heavy condensed sans (Dia) for ALL-CAPS micro-labels with -0.03em tracking, and a high-contrast display serif (Domaine Display Narrow) for editorial headlines. Surfaces are sharp-cornered, elevated only by a warm-tinted diffuse shadow (rgba(145,106,112,0.15) 0 6px 24px) that ties the elevation back to the brand palette. The result is a site that feels more like a printed specimen catalog than a web product — restrained, content-first, and quietly opinionated."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Parchment Rose | `#f8f5f5` | `--color-parchment-rose` | Page canvas and section backgrounds — the warm off-white ground that gives the whole system its dusty, paper-like atmosphere |"
    info: "| Specimen White | `#ffffff` | `--color-specimen-white` | Card surfaces and image wells — clean white plates that sit on the parchment canvas, carrying typographic specimens and editorial imagery |"
    info: "| Ink Brown | `#443235` | `--color-ink-brown` | Primary text, headlines, and dominant body copy — the warm near-black that reads as ink rather than pure black against the rose canvas |"
    info: "| Walnut | `#654a4e` | `--color-walnut` | Navigation text, secondary links, and muted metadata — one step lighter than Ink Brown for hierarchy without leaving the brown family |"
    info: "| Charcoal | `#2e2c2c` | `--color-charcoal` | Deepest neutral for in-image text and high-contrast moments where Ink Brown isn't dark enough |"
    info: "| Hairline Ash | `#cfc6c7` | `--color-hairline-ash` | Subtle border on form inputs and fine dividers — a warm gray that stays in the brown family |"
    info: "| Dusty Rose | `#916a70` | `--color-dusty-rose` | Red supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"

  tokens___typography:

    domainetext___body_text__navigation__links__and_all_running_copy___a_transitional_serif_that_carries_the_editorial__printed_specimen_feel__its_old_style_figures_onum_and_standard_ligatures_give_body_text_a_bookish_quality_____font_domainetext:
      - "**Substitute:** Source Serif 4 or PT Serif"
      - "**Weights:** 400"
      - "**Sizes:** 14, 16, 18, 24, 28px"
      - "**Line height:** 1.2–1.5"
      - "**OpenType features:** `\"calt\", \"clig\", \"kern\", \"liga\", \"onum\"`"
      - "**Role:** Body text, navigation, links, and all running copy — a transitional serif that carries the editorial, printed-specimen feel. Its old-style figures (onum) and standard ligatures give body text a bookish quality."

    dia___all_caps_micro_labels__nav_items__category_badges__dates__font_attributions__and_section_tags__the_ultra_heavy_weight_plus_tight_tracking_creates_a_compact__industrial_counterpoint_to_the_serif_body___a_signature_pairing_that_makes_even_a_date_stamp_feel_designed_____font_dia:
      - "**Substitute:** Bebas Neue or Oswald (700–800 weight)"
      - "**Weights:** 900"
      - "**Sizes:** 12, 13, 14, 15px"
      - "**Line height:** 1.2–2.2"
      - "**Letter spacing:** -0.03em"
      - "**OpenType features:** `\"calt\", \"clig\", \"kern\", \"liga\", \"smcp\"`"
      - "**Role:** ALL-CAPS micro-labels: nav items, category badges, dates, font attributions, and section tags. The ultra-heavy weight plus tight tracking creates a compact, industrial counterpoint to the serif body — a signature pairing that makes even a date stamp feel designed."

    domainedisplaynarrow___editorial_headlines__article_titles__and_the_site_wordmark__the_narrow_proportions_and_high_contrast_give_display_type_a_fashion_magazine_authority___it_is_the_voice_that_announces__never_explains_____font_domainedisplaynarrow:
      - "**Substitute:** Playfair Display or Bodoni Moda (narrow variant)"
      - "**Weights:** 700"
      - "**Sizes:** 26, 42, 46px"
      - "**Line height:** 1.2"
      - "**OpenType features:** `\"calt\", \"clig\", \"kern\", \"liga\", \"onum\"`"
      - "**Role:** Editorial headlines, article titles, and the site wordmark. The narrow proportions and high contrast give display type a fashion-magazine authority — it is the voice that announces, never explains."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.3 | -0.36px | `--text-caption` |"
      info: "| body-sm | 14px | 1.45 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| subheading | 18px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 28px | 1.25 | — | `--text-heading` |"
      info: "| heading-lg | 42px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 46px | 1.2 | — | `--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: "| 36 | 36px | `--spacing-36` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 188 | 188px | `--spacing-188` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 0px |"
      info: "| inputs | 4px |"
      info: "| buttons | 0px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| lg | `rgba(145, 106, 112, 0.15) 0px 6px 24px 0px` | `--shadow-lg` |"
      info: "| subtle | `rgb(245, 241, 242) 0px -3px 0px 0px inset` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 960px"
      - "**Section gap:** 80px"
      - "**Card padding:** 0px"
      - "**Element gap:** 12px"

  components:

    site_wordmark:
      role: "Centered brand identity in the header"

      info: "Centered 'Typewolf' set in DomaineDisplayNarrow 700 at 46px in Ink Brown (#443235), followed by a DomaineText 400 tagline ('What's Trending in Type') at ~18px in Walnut (#654a4e). Sits on the Parchment Rose canvas with generous vertical padding above and below."

    primary_navigation:
      role: "Horizontal site navigation below the wordmark"

      info: "Centered horizontal list of section links (FONT LISTS, LOOKBOOKS, CHECKLIST, FREE FONTS, LEARNING RESOURCES). Each item is Dia 900 at 13px in Walnut (#654a4e), ALL-CAPS with -0.03em letter-spacing, separated by generous horizontal padding (~19px). No background, no border — just text on the canvas, divided from content by a 1px rule with an inner shadow."

    article_card___image_specimen:
      role: "Two-column grid card showcasing a typographic composition"

      info: "White (#ffffff) rectangular surface, 0px border-radius, no internal padding. Contains a full-bleed image (photographic, illustrated, or type-on-color background). Below the image: article title in DomaineDisplayNarrow 700 at 42px in Ink Brown; metadata row with category (Dia 900 12px, ALL-CAPS, Walnut) on the left, date stamp (Dia 900 12px, Walnut) on the right, separated from the next line by the font attribution (DomaineText 400 14px, Walnut). Elevated with the warm-tinted diffuse shadow."

    article_card___text_specimen:
      role: "Card variant with large type in the body rather than an image"

      info: "Same white plate and shadow as the image card, but the content area is filled with oversized type in a display serif (DomaineDisplayNarrow or similar specimen font) at 42–46px, often with a small label like 'THE AUTHOR' in Dia 900 12px ALL-CAPS above. Functions as a typography sample first, article preview second."

    category_label:
      role: "Small ALL-CAPS tag above article metadata"

      info: "Dia 900 at 12px in Walnut (#654a4e), ALL-CAPS, -0.03em letter-spacing, no background or border. A pure typographic label — the visual weight does the work, not a pill or chip."

    date_stamp:
      role: "Right-aligned publication date on article cards"

      info: "Dia 900 at 12px in Walnut (#654a4e), ALL-CAPS, -0.03em letter-spacing. Right-aligned to the card edge with ~11px right padding. Matches the Category Label in size and weight for a balanced metadata row."

    font_attribution:
      role: "Credits the typefaces featured in the specimen below the article title"

      info: "DomaineText 400 at 14px in Walnut (#654a4e), sentence case. Format: 'FONTS — [Font Name], [Font Name]'. Functions as both credit and curiosity hook."

    text_input:
      role: "Form field for search or subscription"

      info: "White (#ffffff) background, 1px Hairline Ash (#cfc6c7) border, 4px border-radius, ~12px padding. Placeholder and entered text in DomaineText 400 14px in Walnut."

    nav_divider:
      role: "Hairline rule separating navigation from content"

      info: "A 1px line rendered via inset top shadow rgb(245, 241, 242) 0px -3px 0px 0px inset, matching the Parchment Rose. Full-width across the canvas, positioned directly below the nav row."

  do_s_and_don_ts:

    do:
      - "Use DomaineText 400 for all body, paragraph, and link text — never a sans-serif body face"
      - "Use Dia 900 ALL-CAPS with -0.03em letter-spacing for every label, tag, date, and nav item; the condensed ultra-bold weight is the system's identifying texture"
      - "Use DomaineDisplayNarrow 700 for headlines and the wordmark; never set display type in DomaineText or Dia"
      - "Keep card and container radius at 0px — the system is built on sharp, printed-page edges"
      - "Let the warm-tinted shadow (rgba(145, 106, 112, 0.15) 0 6px 24px) be the only elevation cue; no hard borders, no multiple shadow layers"
      - "Set body text in Ink Brown (#443235) on Parchment Rose (#f8f5f5) — never pure black, never pure white background"
      - "Maintain a 2-column card grid for editorial content; the two-up rhythm mirrors a magazine spread"

    don_t:
      - "Do not introduce a filled button or chromatic CTA — the system has no action color; interactions are typographic or ghost-level"
      - "Do not add border-radius to cards, badges, or nav items — sharpness is a signature"
      - "Do not use a sans-serif for body copy or headlines; the serif/condensed-sans pairing is the identity"
      - "Do not set body text at pure #000 or headlines at less than 26px in DomaineDisplayNarrow"
      - "Do not apply multiple shadow layers or gray (non-tinted) shadows; the rose-tinted diffuse shadow is the only acceptable elevation"
      - "Do not use #916a70 (Dusty Rose) for buttons or large fills — it is a border/inset accent only"
      - "Do not center body paragraphs or break the 2-column editorial grid without deliberate reason"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#f8f5f5` | Full-page background — the warm rose paper ground. |"
    info: "| 2 | Card Plate | `#ffffff` | White rectangular cards and image containers elevated on the canvas. |"

  elevation:

    - "**Article card:** `rgba(145, 106, 112, 0.15) 0px 6px 24px 0px`"
    - "**Header divider:** `rgb(245, 241, 242) 0px -3px 0px 0px inset`"

  imagery:

    every_card_is_a_typographic_specimen: "photographs, flat illustrations, scanned type prints, type-on-color blocks, and editorial compositions. Imagery is always contained within the card frame (never full-bleed beyond the grid), always sharp-cornered (0px radius), and always at 2:1 or similar landscape ratio. No lifestyle photography, no people — the subject is always type itself, staged on flat color or photographic backgrounds. Iconography is absent from the interface; Dia's letterforms do the labeling work."

  layout:

    info: "Centered single-column page (max-width ~960px) with a centered wordmark, centered horizontal nav, and a 2-column card grid for the main content stream. The hero is not a full-bleed image but a tight typographic lockup: large wordmark + tagline + nav, all centered on the warm canvas. Sections flow seamlessly with ~80px vertical gaps and no alternating bands. The card grid is the only recurring layout motif; there are no sidebars, no split text+image rows, no feature blocks — just a steady, magazine-like cascade of typographic specimens."

  agent_prompt_guide:

    quick_color_reference:
    - "text (primary): #443235 Ink Brown"
    - "text (secondary/nav/links): #654a4e Walnut"
    - "background (page canvas): #f8f5f5 Parchment Rose"
    - "surface (cards): #ffffff Specimen White"
    - "border (accent / shadow tint): #916a70 Dusty Rose"
    - "border (hairline): #cfc6c7 Hairline Ash"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "*Article card (image specimen)*: White (#ffffff) rectangular surface, 0px radius, warm-tinted shadow (rgba(145,106,112,0.15) 0 6px 24px). Full-bleed image fills the top. Below: article title in DomaineDisplayNarrow 700 at 42px in #443235, then a metadata row with category label (Dia 900 12px ALL-CAPS, -0.03em tracking, #654a4e) left-aligned, date stamp (same Dia spec, right-aligned), and font attribution (DomaineText 400 14px, #654a4e) below."

    - "*Text specimen card*: White (#ffffff) plate, 0px radius, same warm shadow. Small ALL-CAPS label 'THE AUTHOR' in Dia 900 12px #654a4e at the top. Body of oversized display type in DomaineDisplayNarrow 700 at 42–46px in #443235, filling the card."

    - "*Primary navigation row*: Centered horizontal list on Parchment Rose (#f8f5f5) canvas. Each link in Dia 900 13px ALL-CAPS, -0.03em letter-spacing, #654a4e. ~19px horizontal gap between items. No backgrounds or borders. A 1px hairline rule with inner shadow rgb(245,241,242) 0 -3px 0 inset divides the nav from content below."

    - "*Site wordmark + tagline*: Centered lockup on #f8f5f5. 'Typewolf' in DomaineDisplayNarrow 700 at 46px in #443235, followed by 'What's Trending in Type' in DomaineText 400 at 18px in #654a4e, ~12px below."

    - "*Text input field*: White (#ffffff) background, 1px #cfc6c7 border, 4px radius, 12px padding. Placeholder and entered text in DomaineText 400 14px in #654a4e. No visible focus ring color needed beyond a 1px #916a70 border on focus."

  similar_brands:

    - "**Fonts In Use** — Same editorial typographic-specimen model: centered serif-led layout, brownish-neutral palette, and cards that are type-first compositions rather than conventional blog thumbnails"
    - "**Typography by Hoefler & Co.** — Same warm, restrained type-presentation language — serif display headlines, generous whitespace, and a muted warm canvas that lets the specimens do the talking"
    - "**It's Nice That** — Same editorial-grid feel with a centered masthead and two-column article stream, though Typewolf pushes further into the dusty-rose warm palette"
    - "**Muzli by InVision** — Similar center-aligned content stream with typographic masthead, though Typewolf is sharper-cornered and warmer-toned"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-parchment-rose: #f8f5f5;
          --color-specimen-white: #ffffff;
          --color-ink-brown: #443235;
          --color-walnut: #654a4e;
          --color-charcoal: #2e2c2c;
          --color-hairline-ash: #cfc6c7;
          --color-dusty-rose: #916a70;
        
          /* Typography — Font Families */
          --font-domainetext: 'DomaineText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dia: 'Dia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-domainedisplaynarrow: 'DomaineDisplayNarrow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --tracking-caption: -0.36px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.45;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 28px;
          --leading-heading: 1.25;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.2;
          --text-display: 46px;
          --leading-display: 1.2;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
          --font-weight-black: 900;
        
          /* 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-36: 36px;
          --spacing-48: 48px;
          --spacing-188: 188px;
        
          /* Layout */
          --page-max-width: 960px;
          --section-gap: 80px;
          --card-padding: 0px;
          --element-gap: 12px;
        
          /* Border Radius */
          --radius-md: 4px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-inputs: 4px;
          --radius-buttons: 0px;
        
          /* Shadows */
          --shadow-lg: rgba(145, 106, 112, 0.15) 0px 6px 24px 0px;
          --shadow-subtle: rgb(245, 241, 242) 0px -3px 0px 0px inset;
        
          /* Surfaces */
          --surface-canvas: #f8f5f5;
          --surface-card-plate: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-parchment-rose: #f8f5f5;
          --color-specimen-white: #ffffff;
          --color-ink-brown: #443235;
          --color-walnut: #654a4e;
          --color-charcoal: #2e2c2c;
          --color-hairline-ash: #cfc6c7;
          --color-dusty-rose: #916a70;
        
          /* Typography */
          --font-domainetext: 'DomaineText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-dia: 'Dia', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-domainedisplaynarrow: 'DomaineDisplayNarrow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.3;
          --tracking-caption: -0.36px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.45;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-subheading: 18px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 28px;
          --leading-heading: 1.25;
          --text-heading-lg: 42px;
          --leading-heading-lg: 1.2;
          --text-display: 46px;
          --leading-display: 1.2;
        
          /* 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-36: 36px;
          --spacing-48: 48px;
          --spacing-188: 188px;
        
          /* Border Radius */
          --radius-md: 4px;
        
          /* Shadows */
          --shadow-lg: rgba(145, 106, 112, 0.15) 0px 6px 24px 0px;
          --shadow-subtle: rgb(245, 241, 242) 0px -3px 0px 0px inset;
        }