2020___style_reference:
  info: "> Solid color poster wall. A single saturated color fills the viewport like painted drywall, and massive black type sits on top as if stenciled."

  theme: "light"

  info: "Album Colors is a color-first editorial canvas: the entire viewport is a single saturated wash that changes on refresh, and everything else — type, images, UI — defers to it. The design language is brutally minimal: one custom geometric sans (Helvetica LT Pro) in a single weight, set at extraordinary sizes with aggressively tight leading, producing headline blocks that read as solid shapes rather than text. Color is the product, the navigation, and the identity — the only chrome is a small record-button icon in the corner and a rotated label urging the viewer to refresh. Album covers float on the colored field as unframed tiles; the page is closer to a poster than a website."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Signal Orange | `#e4822e` | `--color-signal-orange` | Primary canvas — the full-viewport page background that changes on refresh; this is the design system |"
    info: "| Olive Ink | `#4f503e` | `--color-olive-ink` | Primary text, headline color, and the only outlined action accent (outlined-button borders, link underlines) — warm dark green-brown that pairs with the orange field without competing chroma |"
    info: "| Oxblood | `#b13225` | `--color-oxblood` | Alternating surface variation — one of the page colors the background can take on refresh |"
    info: "| Burnt Sienna | `#c97f40` | `--color-burnt-sienna` | Alternating surface variation — secondary warm shade the canvas can adopt |"
    info: "| Near Black | `#081618` | `--color-near-black` | Alternating surface variation — deep cool surface the canvas can adopt, creates the darkest mode of the page |"
    info: "| Pearl | `#feccc0` | `--color-pearl` | Soft warm highlight — one of the lighter surface variations the canvas can adopt |"
    info: "| Sage Mist | `#99aa91` | `--color-sage-mist` | Soft cool surface variation — one of the muted color states the canvas cycles through |"
    info: "| Carbon | `#000000` | `--color-carbon` | Album cover backgrounds, deep text on light surface states |"
    info: "| Ink | `#161616` | `--color-ink` | Album cover backgrounds and heavy dark surface tone |"
    info: "| Charcoal | `#111111` | `--color-charcoal` | Album cover and card backgrounds within the grid |"
    info: "| Ash | `#8d8d8d` | `--color-ash` | Mid-neutral for muted helper text and secondary surface states |"
    info: "| Paper | `#ffffff` | `--color-paper` | Album cover backgrounds, text on dark surface states |"

  tokens___typography:

    helvetica_lt_pro___the_sole_typeface_across_all_text___display__heading__body__button__link__a_single_weight_400_regular_is_used_at_every_scale__which_is_the_most_distinctive_typographic_choice_on_the_site__the_whisper_regular_giant_size_headlines_are_anti_convention__most_poster_editorial_sites_use_700_900_for_display_type__and_using_the_book_weight_at_137px_makes_the_headline_feel_stamped_rather_than_shouted___authority_through_stillness_____font_helvetica_lt_pro:
      - "**Substitute:** Helvetica Neue, Inter, Neue Haas Grotesk"
      - "**Weights:** 400"
      - "**Sizes:** 16px, 21px, 75px, 137px"
      - "**Line height:** 0.79 (display), 0.80 (heading), 0.90 (heading), 1.20 (subheading/button), 1.60 (body)"
      - "**Letter spacing:** -0.0500em at every size (equates to -0.8px at 16px, -1.05px at 21px, -3.75px at 75px, -6.85px at 137px)"
      - "**Role:** The sole typeface across all text — display, heading, body, button, link. A single weight (400 regular) is used at every scale, which is the most distinctive typographic choice on the site. The whisper-regular giant-size headlines are anti-convention; most poster/editorial sites use 700–900 for display type, and using the book weight at 137px makes the headline feel stamped rather than shouted — authority through stillness."

    helvetica___helvetica___detected_in_extracted_data_but_not_described_by_ai____font_helvetica:
      - "**Weights:** 400"
      - "**Sizes:** 21px"
      - "**Line height:** 1.2"
      - "**Role:** Helvetica — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 16px | 1.6 | -0.8px | `--text-caption` |"
      info: "| subheading | 21px | 1.2 | -1.05px | `--text-subheading` |"
      info: "| heading | 75px | 0.8 | -3.75px | `--text-heading` |"
      info: "| display | 137px | 0.79 | -6.85px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 20 | 20px | `--spacing-20` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| page | 0px |"
      info: "| tags | 0px |"
      info: "| buttons | 0px |"
      info: "| album-tiles | 0px |"

    layout:

      - "**Section gap:** 20px"
      - "**Card padding:** 0px"
      - "**Element gap:** 20px"

  components:

    display_headline_block:
      role: "The page-defining typographic element — site title rendered as a monolithic shape"

      info: "Helvetica LT Pro 400 at 137px, line-height 0.79, letter-spacing -0.05em. Color is Olive Ink (#4f503e) — always dark regardless of canvas color. Text fills 2–4 lines of full-bleed width at the top of the page. No line breaks are manually constrained; the type wraps naturally to create a dense rectangular block. Padding: 0px from edges. This block is the visual signature."

    section_subtitle:
      role: "Short descriptive line that sits directly under the display headline"

      info: "Helvetica LT Pro 400 at 21px, line-height 1.2, letter-spacing -0.05em. Olive Ink (#4f503e). Set as a single sentence in all-caps, full-bleed or near-full-bleed width. Acts as the typographic period after the display headline."

    album_cover_tile:
      role: "Unframed square image in the content grid"

      1: "1 aspect ratio, 0px border-radius, 0px border, no padding, no shadow. Sits directly on the canvas with no gap treatment — the colored field bleeds between tiles. Sizing scales with viewport but tiles are uniform within a row."

    refresh_record_button:
      role: "The only interactive control — a small circular record/disc icon that triggers a full page color change"

      info: "Olive Ink (#4f503e) icon on the canvas background. Small, top-right corner. Functions as both the CTA and a visual metaphor (vinyl record). 0px border-radius (sharp) or true circle depending on icon shape — the icon itself is a simple disc with a center dot."

    rotated_side_label:
      role: "Vertical instructional text — tells the user the page mechanic"

      info: "Set in Helvetica LT Pro 400 at 16px, line-height 1.6, letter-spacing -0.05em. Olive Ink (#4f503e). Rotated 90° (reads bottom-to-top). Positioned flush to the right edge of the viewport. Acts as a micro-copy label rather than a control."

    outlined_action_border:
      role: "Chromatic border treatment for interactive elements (links, tags, light buttons)"

      info: "1px border in Olive Ink (#4f503e). No background fill. Padding ~20px. 0px border-radius. Pairs with Olive Ink text. This is the only 'button' variant — the site never uses filled buttons because the canvas color would clash with any solid fill."

    body_caption:
      role: "Small helper text used in metadata, tags, or footnotes"

      info: "Helvetica LT Pro 400 at 16px, line-height 1.6, letter-spacing -0.05em. Olive Ink (#4f503e) when on the orange canvas; Paper (#ffffff) when on dark album tiles or dark canvas states."

    subheading_link:
      role: "In-text or tag-style link element"

      info: "Helvetica LT Pro 400 at 21px, line-height 1.2, letter-spacing -0.05em. Olive Ink (#4f503e) with 1px Olive Ink underline. No hover state change beyond opacity reduction. Behaves like a static text label."

  do_s_and_don_ts:

    do:
      - "Set display headlines at 137px / line-height 0.79 / letter-spacing -0.05em in Helvetica LT Pro 400 — never bump the weight, the book weight is the signature"
      - "Use Olive Ink (#4f503e) for all text and borders regardless of canvas color — the text must always be the same dark warm tone so the changing background feels like a single identity expressing different moods"
      - "Let the page canvas fill 100% of the viewport edge-to-edge with no container, no max-width, no margin — full-bleed is non-negotiable"
      - "Use 20px as the only spacing unit — vertical rhythm between the headline, subtitle, and grid is always 20px"
      - "Keep all radii at 0px — album tiles, buttons, and tags are sharp-cornered; the colored field provides all the softness the page needs"
      - "Treat the canvas color as the primary navigation: the user changes the page by changing the background, not by clicking links"
      - "Set every text element in a single weight (400) — do not introduce bold, medium, or light variants"

    don_t:
      - "Do not use filled buttons — a solid fill would compete with the canvas color; all actions are outlined borders or pure icons"
      - "Do not add card frames, drop shadows, or elevation to album tiles — they sit directly on the canvas with no chrome"
      - "Do not introduce a second typeface — the entire site is set in one family at one weight"
      - "Do not center body text — copy aligns left, full-bleed, and wraps naturally"
      - "Do not use a max-width container — the layout is always edge-to-edge"
      - "Do not pair Olive Ink (#4f503e) text with a colored background outside the established palette (oxblood, sienna, near-black, sage, pearl) — the six surface colors are the only valid canvases"
      - "Do not add line-height above 1.0 for any size above 21px — the tight leading (0.79–0.80) on display text is what makes the headlines feel like solid shapes"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#e4822` | Full-viewport colored field that changes on refresh — the dominant surface |"
    info: "| 1 | Album Tile | `#ffffff` | Default album cover background within the grid |"
    info: "| 2 | Dark Album Tile | `#000000` | Dark album cover backgrounds for contrast within the grid |"

  imagery:

    info: "The site's only imagery is a uniform grid of 1:1 album cover thumbnails. The covers are user-submitted editorial objects — they are the content, not decoration. The grid is unframed, radius-less, and bleeds directly into the canvas color. There is no lifestyle photography, no illustration, no abstract graphics. The colored background functions as the visual atmosphere; the album covers are the products on display. Above the grid, a single magazine-cover-style layout positions the massive headline, subtitle, and one featured album hero — the visual hierarchy is editorial poster, not web page."

  layout:

    info: "Full-bleed single-screen-per-color layout. The viewport is divided into two horizontal bands: a top header zone (~40% height) containing the massive multi-line display headline spanning full width, a one-line subtitle beneath it, and one hero album cover image; and a content zone below containing a uniform grid of square album cover tiles. No sidebar, no max-width constraint, no centered column — everything is edge-to-edge. The only off-canvas element is a 90°-rotated label pinned to the right edge. Navigation is absent; the user is invited to refresh rather than click. The grid density scales with viewport but tile size stays large — this is a poster, not a feed."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #4f503e (Olive Ink)"
    - "background: #e4822e (Signal Orange) — changes on refresh"
    - "border: #4f503e (Olive Ink, 1px)"
    - "accent: #b13225 (Oxblood) / #c97f40 (Burnt Sienna) / #081618 (Near Black) — alternative canvas states"
    - "surface: #ffffff (Paper) for light album tiles, #000000 (Carbon) for dark album tiles"
    - "primary action: no distinct CTA color"

    example_component_prompts:
    - "Build the page hero: full-bleed Signal Orange (#e4822e) background, no padding, no container. Display headline 'ALBUM COLORS OF THE YEAR 2020' in Helvetica LT Pro 400 at 137px, line-height 0.79, letter-spacing -0.05em, color Olive Ink (#4f503e). Text fills width edge-to-edge, wrapping naturally. A 21px Olive Ink subtitle sits 20px below."
    - "Build a single album tile: 1:1 aspect ratio, 0px border-radius, no border, no shadow, no padding. Sits directly on the canvas with 20px gap to neighbors. Image fills the tile."
    - "Build the refresh button: top-right corner, 20px from edges, Olive Ink (#4f503e) disc icon on the orange canvas. No border, no background, icon only."
    - "Build the rotated side label: positioned flush to the right viewport edge, text rotated 90° reading bottom-to-top, Helvetica LT Pro 400 at 16px, line-height 1.6, letter-spacing -0.05em, color Olive Ink (#4f503e)."
    - "Build the album grid: uniform columns of square tiles, 20px gap, no outer padding, tiles bleed to the viewport edges. Mix of Paper (#ffffff) and Carbon (#000000) backgrounds depending on cover content."

  color_mechanic_philosophy:

    info: "The page background is the navigation system. There are no menus, no links to other pages, no categories — the only way to 'explore' the site is to refresh, which randomizes the entire canvas to a new color from a fixed six-color palette. This makes the background color a generated state, not a designed constant. When recreating this system, treat the canvas color as a variable token, not a fixed brand color: the brand is the mechanic of color change itself, and Olive Ink (#4f503e) is the one constant that anchors the identity across every color state."

  similar_brands:

    - "**Pantone Color of the Year** — Same single-color-canvas editorial treatment where the color itself is the subject — Pantone's year-of-color pages are also one saturated wash with minimal type on top"
    - "**It's Nice That** — Editorial curation site with full-bleed colored fields and oversized sans-serif headlines set tight to the edges — the poster-meets-web layout grammar"
    - "**Are.na** — Minimalist image-grid curation with zero chrome around tiles and a strong single-color identity — the no-frames, no-shadows, no-radius tile approach is shared"
    - "**Kiel Mutschelknaus / Swiss design editorial sites** — Same Helvetica-driven, tight-leading, single-weight, massive-scale typographic system — the headline-as-solid-shape aesthetic comes directly from this Swiss tradition"
    - "**The Browser Company / Frank Chimero** — Both treat a website as a poster rather than an app — one bold idea per page, the color is the story, the chrome is nearly absent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-signal-orange: #e4822e;
          --color-olive-ink: #4f503e;
          --color-oxblood: #b13225;
          --color-burnt-sienna: #c97f40;
          --color-near-black: #081618;
          --color-pearl: #feccc0;
          --color-sage-mist: #99aa91;
          --color-carbon: #000000;
          --color-ink: #161616;
          --color-charcoal: #111111;
          --color-ash: #8d8d8d;
          --color-paper: #ffffff;
        
          /* Typography — Font Families */
          --font-helvetica-lt-pro: 'Helvetica LT Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.6;
          --tracking-caption: -0.8px;
          --text-subheading: 21px;
          --leading-subheading: 1.2;
          --tracking-subheading: -1.05px;
          --text-heading: 75px;
          --leading-heading: 0.8;
          --tracking-heading: -3.75px;
          --text-display: 137px;
          --leading-display: 0.79;
          --tracking-display: -6.85px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-20: 20px;
        
          /* Layout */
          --section-gap: 20px;
          --card-padding: 0px;
          --element-gap: 20px;
        
          /* Named Radii */
          --radius-page: 0px;
          --radius-tags: 0px;
          --radius-buttons: 0px;
          --radius-album-tiles: 0px;
        
          /* Surfaces */
          --surface-canvas: #e4822;
          --surface-album-tile: #ffffff;
          --surface-dark-album-tile: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-signal-orange: #e4822e;
          --color-olive-ink: #4f503e;
          --color-oxblood: #b13225;
          --color-burnt-sienna: #c97f40;
          --color-near-black: #081618;
          --color-pearl: #feccc0;
          --color-sage-mist: #99aa91;
          --color-carbon: #000000;
          --color-ink: #161616;
          --color-charcoal: #111111;
          --color-ash: #8d8d8d;
          --color-paper: #ffffff;
        
          /* Typography */
          --font-helvetica-lt-pro: 'Helvetica LT Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-helvetica: 'Helvetica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 16px;
          --leading-caption: 1.6;
          --tracking-caption: -0.8px;
          --text-subheading: 21px;
          --leading-subheading: 1.2;
          --tracking-subheading: -1.05px;
          --text-heading: 75px;
          --leading-heading: 0.8;
          --tracking-heading: -3.75px;
          --text-display: 137px;
          --leading-display: 0.79;
          --tracking-display: -6.85px;
        
          /* Spacing */
          --spacing-20: 20px;
        }