medium___style_reference:
  info: "> cream-colored broadsheet at golden hour"

  theme: "light"

  info: "Medium operates as a literary reading room translated to the web: a warm cream canvas (#f7f4ed) replaces the sterile white common to SaaS, making long-form prose feel like a printed page. The visual system is aggressively monochromatic — nearly every UI surface, text, and border sits in a narrow band of warm grays from #242424 to #6b6b6b — so the reader's attention goes entirely to content. The single brand gesture is the serif hero headline (GT Super at 120px, weight 400, tracking -0.055em), a deliberate anti-trend choice: a transitional book serif at display scale with whisper weight, not a bold geometric sans, signals 'we publish books, not software.' Buttons are full pills in near-black, the only solid ink on the page."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Newsprint Cream | `#f7f4ed` | `--color-newsprint-cream` | Page canvas, hero background, section backgrounds — the warm off-white that makes the entire interface feel printed rather than digital |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, elevated panels, form inputs, and any surface that needs to lift off the cream canvas |"
    info: "| Ink | `#242424` | `--color-ink` | Primary text, body copy, links, heading text — slightly warmer than pure black, sits comfortably on cream |"
    info: "| Body Gray | `#333333` | `--color-body-gray` | Secondary text and default body color where slightly lighter than Ink is needed without losing contrast |"
    info: "| Button Black | `#191919` | `--color-button-black` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Marginalia Gray | `#6b6b6b` | `--color-marginalia-gray` | Supporting neutral for secondary UI, dividers, and muted labels. |"

  tokens___typography:

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

    gt_super___display_headlines_and_hero___a_transitional_book_serif_at_extreme_scale_with_tight_tracking_and_0_83_line_height__the_choice_to_use_weight_400_not_bold_at_120px_is_the_signature__the_letterforms_do_the_work__not_the_weight__the_negative_tracking_pulls_the_optical_gaps_closed__making__human_stories___ideas__read_as_a_single_typographic_block_____font_gt_super:
      - "**Substitute:** Playfair Display, EB Garamond, or Libre Caslon Text"
      - "**Weights:** 400"
      - "**Sizes:** 120px"
      - "**Line height:** 0.83"
      - "**Letter spacing:** -0.055em"
      - "**OpenType features:** `\"lnum\" on, \"pnum\" on`"
      - "**Role:** Display headlines and hero — a transitional book serif at extreme scale with tight tracking and 0.83 line-height. The choice to use weight 400 (not bold) at 120px is the signature: the letterforms do the work, not the weight. The negative tracking pulls the optical gaps closed, making 'Human stories & ideas' read as a single typographic block."

    s_hne___ui_sans_serif_for_navigation__buttons__subheadings__and_small_headings__the_13_14px_range_handles_nav_and_button_labels__20_22px_covers_subheadings_and_secondary_hero_text__clean_grotesque_with_humanist_proportions___readable_at_small_sizes__unobtrusive_at_large_____font_shne:
      - "**Substitute:** Inter, Söhne (paid), or IBM Plex Sans"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.27–1.54"
      - "**Role:** UI sans-serif for navigation, buttons, subheadings, and small headings. The 13–14px range handles nav and button labels; 20–22px covers subheadings and secondary hero text. Clean grotesque with humanist proportions — readable at small sizes, unobtrusive at large."

    charter___georgia_stack___body_content_serif_for_reading_view___the_long_form_article_font__set_at_16px_with_tight_1_2_line_height__optimized_for_the_column_width_of_medium_s_reader_____font_charter_georgia_stack:
      - "**Substitute:** Charter, Georgia, or Source Serif Pro"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.20"
      - "**Role:** Body content serif for reading view — the long-form article font. Set at 16px with tight 1.2 line-height, optimized for the column width of Medium's reader."

    s_hne_extended___body_sans_serif_for_non_reading_contexts___descriptions__cards__inline_content__matches_the_content_serif_s_metrics_so_the_two_can_coexist_at_the_same_size_____font_shne_extended:
      - "**Substitute:** Inter or system-ui"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.20"
      - "**Role:** Body sans-serif for non-reading contexts — descriptions, cards, inline content. Matches the content serif's metrics so the two can coexist at the same size."

    sohne___sohne___detected_in_extracted_data_but_not_described_by_ai____font_sohne:
      - "**Weights:** 400"
      - "**Sizes:** 13px, 14px, 20px, 22px"
      - "**Line height:** 1.27, 1.4, 1.43, 1.54"
      - "**Role:** sohne — detected in extracted data but not described by AI"

    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"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.27 | — | `--text-caption` |"
      info: "| body | 16px | 1.2 | — | `--text-body` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 1.54 | — | `--text-heading-sm` |"
      info: "| display | 120px | 0.83 | -6.6px | `--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: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"

    border_radius:

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

    layout:

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

  components:

    pill_button_filled:
      role: "Primary action — 'Start reading', 'Get started'"

      info: "Background #191919, text #ffffff, Söhne 14px weight 400, padding 8px vertical × 16–20px horizontal, border-radius 9999px (extracted as 1386–1980px). No border, no shadow. The extreme radius is the signature — not rounded, fully pill-shaped. Centered text, tight hit area."

    wordmark_logo:
      role: "Brand identity in the top-left"

      info: "Text 'Medium' in Söhne weight 400 at ~22px, color #191919. No icon, no custom mark — the wordmark IS the logo, set in the same UI font as navigation, which is itself a brand decision (the product voice and the brand voice are the same)."

    top_navigation_bar:
      role: "Primary navigation"

      info: "Full-width bar on #f7f4ed canvas, ~64px tall, no border or shadow. Left: wordmark. Right: Söhne 14px links (#242424) — 'Our story', 'Membership', 'Write', 'Sign in' — followed by a filled pill button 'Get started'. Items separated by ~24px gap. No sticky behavior specified for homepage."

    hero_headline:
      role: "Page-level value proposition"

      info: "GT Super 120px, weight 400, line-height 0.83, letter-spacing -0.055em, color #242424. Renders as a tight 2-line block: 'Human' / 'stories & ideas'. The low line-height causes slight optical overlap between descenders and ascenders, reinforcing the book-print feel."

    hero_subtext:
      role: "Supporting description beneath hero headline"

      info: "Söhne 20px weight 400, color #6b6b6b, single line. Sized to read as a quiet footnote to the display headline — roughly 1/6 the headline size, creating a dramatic type contrast."

    hero_cta_button:
      role: "Primary call-to-action in the hero"

      info: "Identical to the Pill Button (Filled) component — #191919 background, #ffffff text, Söhne 14px, 8px × 16px padding, 9999px radius. Label 'Start reading'."

    hero_illustration_panel:
      role: "Decorative visual companion to hero text"

      info: "Right-side illustration occupying roughly 40% of the hero width. Contains a green flower and geometric hand/line elements. Note: the green is NOT a brand color — it exists only in editorial illustration and should not be used in UI."

    footer_link_bar:
      role: "Secondary navigation, legal, support"

      info: "Single horizontal row of Söhne 13px links in #6b6b6b, centered on the #f7f4ed canvas. Items: 'Help', 'Status', 'About', 'Careers', 'Press', 'Blog', 'Privacy', 'Rules', 'Terms', 'Text to speech'. Separated by ~16px gap. No dividers, no border above — the cream canvas flows seamlessly from content to footer."

    link_inline:
      role: "Text links within body content"

      info: "Söhne 16px or body-serif 16px, color #242424 (same as body text), underline on hover only. The lack of a distinct link color is intentional — links are typographic, not chromatic."

  do_s_and_don_ts:

    do:
      - "Use #f7f4ed as the page canvas on all full-width backgrounds and section bands"
      - "Use GT Super at 120px with letter-spacing -0.055em and line-height 0.83 for display headlines"
      - "Use Söhne weight 400 for all UI text (navigation, buttons, subheadings)"
      - "Use border-radius 9999px for all buttons and tags"
      - "Use #191919 as the only filled-button background color in the system"
      - "Use #ffffff for card and panel surfaces that need to lift off the cream canvas"
      - "Use 0px radius for all non-button containers (cards, inputs, images, modals)"

    don_t:
      - "Do not introduce any chromatic color in UI elements — no blue links, no green buttons, no red errors in the visual system"
      - "Do not use shadows or blur effects to separate surfaces — rely on color value shifts only"
      - "Do not use bold or semibold weights for the GT Super display headline — weight 400 is the signature"
      - "Do not set line-height above 1.0 for the display headline — the 0.83 overlap is intentional"
      - "Do not apply border-radius to cards, inputs, or containers — only buttons and tags get radius"
      - "Do not use the green from the hero illustration as a brand color — it is editorial art only"
      - "Do not use centered alignment for body text or long-form content — left-align to the reading axis"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Canvas | `#f7f4ed` | Page-level background, hero, section bands — the warm paper base |"
    info: "| 2 | Paper | `#ffffff` | Cards, modals, inputs — surfaces that need to read as distinct objects on the cream canvas |"
    info: "| 3 | Ink Surface | `#191919` | Filled buttons and the wordmark — the only dark surface, used sparingly as visual anchor |"

  elevation:

    info: "Medium uses no shadows or blur effects. Surfaces are separated by color value shifts alone (cream #f7f4ed → paper #ffffff → ink #191919), not by elevation. This flat-on-flat approach is deliberate: the interface should feel like printed paper lying on a desk, not a glass-and-shadow app."

  imagery:

    info: "Illustration is editorial and occasional, not systematic. The hero uses a single hand-drawn illustration (green flower, geometric hand, constellation lines) in a loose, slightly naive style. Illustrations appear to be commissioned artwork that changes seasonally rather than a fixed library. No photography is used on the homepage. Icons are not present on the hero page — the wordmark and text do all the work. The visual language is fundamentally text-first, with illustration as punctuation."

  layout:

    two_column_hero: "left ~55% holds the headline, subtext, and CTA stacked vertically with generous internal spacing; right ~45% holds the illustration panel. The left column is left-aligned (not centered), anchoring the page to a reading axis. Below the hero, the page flows as a single full-width cream band with centered footer links. No card grids, no feature sections, no alternating bands on the homepage — the hero IS the page. Content density is intentionally low: one headline, one sentence, one button, one image. The page is a cover, not a dashboard."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #242424"
    - "background: #f7f4ed"
    - "surface: #ffffff"
    - "border: #6b6b6b"
    - "accent: #191919 (button background, the only 'accent')"
    - "primary action: no distinct CTA color"

    example_component_prompts:
    - "**Hero headline**: GT Super 120px weight 400, line-height 0.83, letter-spacing -0.055em, color #242424. Left-aligned, no max-width constraint. Sits on #f7f4ed canvas."
    - "**Filled pill button**: Background #191919, text #ffffff, Söhne 14px weight 400, padding 8px 20px, border-radius 9999px, no border, no shadow."
    - "**Navigation link**: Söhne 14px weight 400, color #242424, no underline by default, underline on hover. Spacing 24px between items."
    - "**Footer link bar**: Söhne 13px weight 400, color #6b6b6b, items separated by 16px gap, centered horizontally on #f7f4ed canvas, no top border."
    - "**Card surface**: Background #ffffff (NOT cream), no border, no shadow, no radius, padding 16px. The color shift from cream to white is the only visual separator."

  color_philosophy:

    info: "The entire UI is warm-grayscale. There is no blue, no green, no red in the interface — the green in the hero illustration is editorial art, not a design token. The palette moves from #f7f4ed (warm cream) through #6b6b6b (cool gray text) to #191919 (near-black ink). The warmth comes from the canvas, not the text. Never introduce a chromatic accent in UI; the single dark surface (#191919) is the only 'color' moment."

  typography_philosophy:

    medium_uses_two_voices: "GT Super (a transitional book serif) for display, and Söhne (a humanist grotesque) for everything else. The display serif is weight 400, not bold — authority through letterform quality, not weight. The line-height of 0.83 is unusually tight for display type, creating overlap that reads as a printed headline block. Body text uses Charter/Georgia, a transitional serif optimized for screen reading. The system deliberately avoids geometric sans-serifs (no Helvetica, no Inter-as-display) to distance itself from generic SaaS aesthetics."

  radius_philosophy:

    info: "Buttons are fully pill-shaped (9999px), but everything else has zero radius. Cards, inputs, images, and containers are sharp-cornered. This high contrast — soft buttons on hard containers — makes the pill buttons feel like physical pills pressed onto the page, not rounded rectangles."

  similar_brands:

    - "**Substack** — Same warm cream canvas and book-serif display treatment for a reading-first publishing platform"
    - "**The New Yorker** — Same editorial restraint — warm off-white backgrounds, serif display type, no chromatic UI accents, illustration as the only color"
    - "**Are.na** — Same near-monochrome palette and anti-SaaS visual language with warm grays replacing pure black-and-white"
    - "**Read.cv** — Same reading-room aesthetic with serif display type and a muted, warm-neutral palette"
    - "**Pocket** — Same content-first minimalism with sharp-cornered cards on a warm off-white background and full-pill buttons"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-newsprint-cream: #f7f4ed;
          --color-paper-white: #ffffff;
          --color-ink: #242424;
          --color-body-gray: #333333;
          --color-button-black: #191919;
          --color-marginalia-gray: #6b6b6b;
        
          /* Typography — Font Families */
          --font-medium-content-sans-serif-font: 'medium-content-sans-serif-font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-super: 'GT Super', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne: 'Söhne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-charter-georgia-stack: 'Charter / Georgia stack', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne-extended: 'Söhne (extended)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sohne: 'sohne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.27;
          --text-body: 16px;
          --leading-body: 1.2;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.54;
          --text-display: 120px;
          --leading-display: 0.83;
          --tracking-display: -6.6px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 16px;
          --element-gap: 16-24px;
        
          /* Border Radius */
          --radius-full: 1386px;
          --radius-full-2: 1980px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-canvas: #f7f4ed;
          --surface-paper: #ffffff;
          --surface-ink-surface: #191919;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-newsprint-cream: #f7f4ed;
          --color-paper-white: #ffffff;
          --color-ink: #242424;
          --color-body-gray: #333333;
          --color-button-black: #191919;
          --color-marginalia-gray: #6b6b6b;
        
          /* Typography */
          --font-medium-content-sans-serif-font: 'medium-content-sans-serif-font', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-gt-super: 'GT Super', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne: 'Söhne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-charter-georgia-stack: 'Charter / Georgia stack', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-shne-extended: 'Söhne (extended)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sohne: 'sohne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.27;
          --text-body: 16px;
          --leading-body: 1.2;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 22px;
          --leading-heading-sm: 1.54;
          --text-display: 120px;
          --leading-display: 0.83;
          --tracking-display: -6.6px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-48: 48px;
          --spacing-64: 64px;
        
          /* Border Radius */
          --radius-full: 1386px;
          --radius-full-2: 1980px;
        }