freshman___style_reference:
  info: "> cinema title card on black velvet"

  theme: "dark"

  info: "Freshman runs a near-black canvas with almost no color noise — the white type and the lone red accent do all the heavy lifting. The visual language borrows from high-end print and cinema: a massive italicized wordmark anchors every screen, type is set ultra-light (weight 200) in Editorial New and tight in Altform, and a thin horizontal project ticker acts as the page's spine. Surfaces are flat with no shadows or gradients; hierarchy comes from scale and weight contrast, not elevation. Interaction is restrained — a single + MENU trigger, bracket-wrapped editorial labels, and a project reel that feels like a film festival credit roll rather than a SaaS nav."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Primary text, logotype fill, border strokes, and the dominant foreground on the dark canvas — carries 92% of all color instances |"
    info: "| Carbon Black | `#000000` | `--color-carbon-black` | Base canvas and primary background — the default surface for every page |"
    info: "| Charcoal Shale | `#101010` | `--color-charcoal-shale` | Secondary surface for icon wells, sub-panels, and slight tonal lift above the pure-black canvas |"
    info: "| Signal Red | `#ff2936` | `--color-signal-red` | Sparingly-applied accent for active states, marquee highlights, and high-emphasis punctuation — used as a single saturated note against the monochrome system |"

  tokens___typography:

    editorial_new___hero_and_headline_display___the_ultralight_weight_200_is_anti_convention__combined_with_the_20px_breakpoint_it_reads_as_editorial_print_rather_than_web_ui____font_editorial_new:
      - "**Substitute:** Cormorant Garamond, Playfair Display"
      - "**Weights:** 200"
      - "**Sizes:** 16px, 20px"
      - "**Line height:** 1.00, 1.25"
      - "**Letter spacing:** -0.01em"
      - "**Role:** Hero and headline display — the ultralight weight 200 is anti-convention; combined with the 20px breakpoint it reads as editorial print rather than web UI"

    tt_firs_neue___workhorse_ui_and_body_sans___the_only_geometric_grotesque_in_the_system__anchors_the_project_ticker_labels__menu_trigger__and_utility_text____font_tt_firs_neue:
      - "**Substitute:** Inter, Neue Haas Grotesk, Söhne"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.00"
      - "**Role:** Workhorse UI and body sans — the only geometric grotesque in the system, anchors the project ticker labels, menu trigger, and utility text"

    altform___compact_meta_and_condensed_labels___tight_0_86_0_88_line_height_and__0_03em_tracking_make_it_read_like_a_festival_credit_roll____font_altform:
      - "**Substitute:** Druk, Tungsten, Bebas Neue"
      - "**Weights:** 400, 700"
      - "**Sizes:** 14px, 16px"
      - "**Line height:** 0.86, 0.88"
      - "**Letter spacing:** -0.03em"
      - "**Role:** Compact meta and condensed labels — tight 0.86–0.88 line-height and -0.03em tracking make it read like a festival credit roll"

    wasted_year___signature_editorial_flourishes___bracket_wrapped_taglines_and_small_accent_phrases__its_hand_set_quality_is_used_for_personality__not_information_density____font_wasted_year:
      - "**Substitute:** Caveat, Reenie Beanie"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px, 17px, 20px"
      - "**Line height:** 0.86, 0.94, 1.00, 1.25"
      - "**Letter spacing:** -0.0100em"
      - "**Role:** Signature editorial flourishes — bracket-wrapped taglines and small accent phrases; its hand-set quality is used for personality, not information density"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1 | — | `--text-body-sm` |"
      info: "| body | 17px | 1 | — | `--text-body` |"
      info: "| body-lg | 20px | 1 | — | `--text-body-lg` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 7 | 7px | `--spacing-7` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"

    border_radius:

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

    layout:

      - "**Section gap:** 48-80px"
      - "**Card padding:** 12-20px"
      - "**Element gap:** 12px"

  components:

    hero_wordmark:
      role: "Brand identity anchor — the primary visual element on the dark canvas"

      info: "Full-bleed 'freshman' logotype, set ultra-large in italic Editorial New weight 200, white (#ffffff) fill on Carbon Black (#000000). Letter-spacing -0.01em. A small registered-trademark ® sits at the upper-right of the mark. No background, no border, no shadow — the wordmark is the only object on screen."

    project_reel_ticker:
      role: "Persistent bottom band showcasing latest work like a film festival credit roll"

      info: "Full-bleed horizontal bar anchored to the viewport bottom. Pure Black (#000000) background with a 1px top hairline in White (#ffffff). Items arranged in a single row with 12px column gaps; each item pairs a small thumbnail (Altform, condensed, weight 700) with a project title (TT Firs Neue, 14-16px, weight 400) and a secondary label (TT Firs Neue, 12px, 0.86 line-height, uppercase). 20px vertical padding, zero radius."

    menu_trigger:
      role: "Primary navigation entry point"

      info: "Top-right 'MENU' label prefixed by a + glyph, set in TT Firs Neue 16px weight 400 in White (#ffffff). No background, no border — a bare typographic control. Inherits the 'all type, no chrome' philosophy of the system."

    brand_glyph:
      role: "Persistent mark in the upper-left corner"

      info: "A small hash/cross-like symbol in White (#ffffff) on the Black canvas. Sits at the same cap height as the MENU trigger, anchoring the top bar in quiet symmetry. Likely set in TT Firs Neue or a custom icon font, ~16px."

    year_counter:
      role: "Cinematic page-position indicator"

      info: "Centered '2025' string set in Altform weight 400 at 14px with 0.88 line-height and -0.03em tracking in White (#ffffff). Reads as a chapter marker; updates per scroll position to mimic a film leader countdown."

    editorial_tagline_block:
      role: "Voice/mission statement with typographic personality"

      info: "Two stacked lines of body text in TT Firs Neue 16px weight 400, White (#ffffff), centered, max-width ~600px. Followed by a bracket-wrapped Wasted Year phrase at 14–17px — the handwritten font transforms the tagline into a signed autograph."

    cookie_consent_strip:
      role: "Bottom-right regulatory notice"

      info: "Minimal pill-less bar in Charcoal Shale (#101010) with 1px White (#ffffff) hairline border, ~12px text in TT Firs Neue, uppercase tracking. Rounded zero. Sits flush to the viewport edge, never centered — treated as utility, not design."

    project_item_cell:
      role: "Individual entry inside the project reel"

      three_line_vertical_stack: "uppercase project name (TT Firs Neue 16px, weight 400, White), short sub-label (TT Firs Neue 12px, Altform 0.88 line-height, White at ~70% perceived opacity), and optional thumbnail to the left at ~80px tall. No border, no background tile — text sits directly on the Black bar."

    thin_hairline_divider:
      role: "Section separator — the only structural chrome in the system"

      info: "1px horizontal line in White (#ffffff) at 70-100% opacity. Used between the hero and ticker, and between any stacked zones. Zero radius, zero shadow."

  do_s_and_don_ts:

    do:
      - "Set the wordmark at 200 weight italic in Editorial New — never bold, never regular; the ultralight is the signature"
      - "Use only #ffffff text on #000000 canvas; treat the 1px white hairline as the only structural divider allowed"
      - "Anchor the project reel to the viewport bottom on every page — it functions as the site's navigation spine"
      - "Pair the body description (TT Firs Neue 16px) with a bracket-wrapped Wasted Year tagline directly beneath it; the handwriting-font punctuation is non-optional"
      - "Use #ff2936 for at most one element per viewport — it is punctuation, not paint"
      - "Set compact UI labels (reel items, counters) in Altform with 0.86-0.88 line-height and -0.03em tracking for the festival-credit-roll rhythm"
      - "Keep the MENU trigger as a bare typographic label — no border, no background, no icon button chrome"

    don_t:
      - "Do not introduce shadows, gradients, or elevation of any kind — flatness is the system"
      - "Do not add card backgrounds or rounded corners; all surfaces are 0px radius on the black canvas"
      - "Do not use bold or semibold weights for headlines — the weight 200 Editorial New is the anti-convention that defines the brand"
      - "Do not use #ff2936 as a button fill or large background block — it loses all impact if used at scale"
      - "Do not add a secondary navigation, breadcrumbs, or page tabs — the MENU trigger and the reel are the entire IA"
      - "Do not set body copy above 16px or below 14px — the type scale is deliberately tight"
      - "Do not alternate between light and dark sections; the page is uniformly dark, depth comes from type scale not surface color"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Carbon Black | `#000000` | Primary page canvas — the dominant surface covering the viewport |"
    info: "| 2 | Charcoal Shale | `#101010` | Subtle elevation for utility elements like the cookie consent bar; barely perceptible shift above the canvas |"

  elevation:

    info: "The system intentionally avoids shadows and gradients. Depth is communicated exclusively through type scale, weight contrast, and the two-step surface stack (#000000 → #101010). This is a deliberate editorial-print decision — shadows would make the screen feel like software; flatness makes it feel like cinema."

  imagery:

    info: "Imagery is almost absent from the main canvas. Photography appears only as small horizontal thumbnails inside the project reel ticker — tight, cinematic crops around 80px tall with no rounded corners and no overlay treatments. The visual identity is driven entirely by the oversized italic wordmark, ultra-light editorial type, and the vertical rhythm of bracketed handwritten flourishes. No illustration, no 3D, no decorative gradients — the wordmark IS the imagery."

  agent_prompt_guide:

    quick_color_reference:
    - "canvas/background: #000000"
    - "primary text: #ffffff"
    - "secondary surface: #101010"
    - "hairline border: #ffffff (1px)"
    - "accent / active state: #ff2936"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "*Hero wordmark screen*: full-viewport Carbon Black (#000000) background. Center a single italic 'freshman' logotype in Editorial New weight 200, white (#ffffff), sized to fill ~60% of the viewport width, letter-spacing -0.01em. Below it, a two-line description in TT Firs Neue 16px weight 400 white, centered, max-width 600px. Beneath that, a bracket-wrapped tagline in Wasted Year 14px white."

    - "*Project reel ticker*: pinned bar at the viewport bottom, Carbon Black (#000000) background, 1px white (#ffffff) top border. Single row of project items, 12px column gaps, 20px vertical padding. Each item = uppercase project name (TT Firs Neue 16px weight 400 white) stacked over a sub-label (TT Firs Neue 12px, line-height 0.88, white at 70% perceived opacity). Zero radius on all elements."

    - "*Year counter*: centered horizontally, positioned in the lower third of the viewport. Set '2025' in Altform 14px weight 400 white, line-height 0.88, letter-spacing -0.03em. No background, no border."

    - "*Top navigation bar*: full-width, Carbon Black background, 20px vertical padding. Left: a small 16px white hash/cross glyph. Right: '+ MENU' in TT Firs Neue 16px weight 400 white. No borders, no background fills, no separators between left and right."

    - "*Cookie consent strip*: bottom-right corner, Charcoal Shale (#101010) background, 1px white (#ffffff) border, 12px text in TT Firs Neue weight 400, uppercase, white. ~12px padding. Zero radius. Flush to the viewport edge, never centered."

  similar_brands:

    - "**Hypebeast** — Same editorial-meets-streetwear sensibility with oversized italic wordmarks on a near-black canvas and a ticker-like feed of content at the bottom"
    - "**A24 Films** — Cinema-title-card aesthetic — white type on pure black, ultralight editorial headlines, minimal chrome, and the feeling that the brand IS the logotype"
    - "**Bureau Cool** — Indie creative agencies that use editorial type, custom serifs at weight 200, and near-zero decoration; both treat the homepage as a statement rather than a product page"
    - "**Buck (studio)** — Production/creative studios with full-bleed dark canvases, restrained type, and project reels that double as the primary navigation rhythm"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-carbon-black: #000000;
          --color-charcoal-shale: #101010;
          --color-signal-red: #ff2936;
        
          /* Typography — Font Families */
          --font-editorial-new: 'Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tt-firs-neue: 'TT Firs Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-altform: 'Altform', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wasted-year: 'Wasted Year', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1;
          --text-body-sm: 14px;
          --leading-body-sm: 1;
          --text-body: 17px;
          --leading-body: 1;
          --text-body-lg: 20px;
          --leading-body-lg: 1;
        
          /* Typography — Weights */
          --font-weight-extralight: 200;
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
        
          /* Layout */
          --section-gap: 48-80px;
          --card-padding: 12-20px;
          --element-gap: 12px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-carbon-black: #000000;
          --surface-charcoal-shale: #101010;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-pure-white: #ffffff;
          --color-carbon-black: #000000;
          --color-charcoal-shale: #101010;
          --color-signal-red: #ff2936;
        
          /* Typography */
          --font-editorial-new: 'Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tt-firs-neue: 'TT Firs Neue', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-altform: 'Altform', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-wasted-year: 'Wasted Year', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1;
          --text-body-sm: 14px;
          --leading-body-sm: 1;
          --text-body: 17px;
          --leading-body: 1;
          --text-body-lg: 20px;
          --leading-body-lg: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
        }