--- version: alpha name: "Y Combinator" description: "Y Combinator is what design looks like when conviction outweighs polish. System fonts (Verlag display + Verdana / Helvetica body), pure white canvas, signature `#f26625` orange-red used as the primary action surface — and the entire site rendered with hard 0px corners, like a page printed in 1996. The orange-red is so canonical that the blocks themselves became the brand. Hacker News (`news.ycombinator.com`) shares the DNA: cream `#f6f6ef` paste-paper canvas, narrow column, default Verdana, classic `#000099` blue link / `#828282` visited-link pattern. The `#f26625` orange has been tuned across years from `#ff6600` to its current slightly-deeper shade — a more cinematic warm-orange that holds against modern displays without going red. The visual language reads as intentional anti-design — the site says \"the founders here ship products, not Figma frames\" and the audience that responds to that signal is exactly the audience YC wants. When the brand has 20 years of unicorn pedigree, restraint is the most expensive choice." colors: bg: "#ffffff" bg-paste: "#f6f6ef" bg-warm-tint: "#fff6f0" bg-cool: "#fafafa" surface: "#ffffff" surface-elevated: "#ffffff" text: "#000000" text-strong: "#000000" text-medium: "#404040" text-soft: "#525252" text-meta: "#828282" text-faint: "#a0a0a0" text-muted: "#cccccc" brand: "#f26625" brand-classic: "#ff6600" brand-hover: "#e85d00" brand-deep: "#cc4f00" brand-soft: "rgba(242, 102, 37, 0.10)" on-brand: "#ffffff" accent-startup-school: "#ff8c42" accent-warm-cream: "#fff6f0" link: "#000099" link-hover: "#000066" link-visited: "#828282" link-yc: "#000000" selected-bg: "#fff6f0" disabled: "#cccccc" cta-bg: "#f26625" cta-text: "#ffffff" ink-100: "#000000" ink-200: "#404040" ink-300: "#525252" ink-400: "#828282" ink-500: "#a0a0a0" ink-600: "#cccccc" ink-700: "#e6e6e6" ink-800: "#f6f6ef" border: "#cccccc" border-strong: "#828282" border-subtle: "#e6e6e6" border-orange: "rgba(242, 102, 37, 0.40)" shadow-color: "rgba(0, 0, 0, 0.06)" shadow-warm: "rgba(242, 102, 37, 0.15)" success-bg: "#e8f5e0" success-text: "#2d5016" warning-bg: "#fff4d6" warning-text: "#7a5e00" danger-bg: "#fde0d4" danger-text: "#8a2a0a" info-bg: "#e0e8f5" info-text: "#000099" typography: display: fontFamily: "Verlag" fontSize: "80px" lineHeight: 1.5 letterSpacing: "-0.03em" body: fontFamily: "Verdana" fontSize: "16px" lineHeight: 1.5 mono: fontFamily: "Monaco" rounded: button: "0px" card: "0px" pill: "0px" spacing: xs: "1px" sm: "2px" md: "6px" lg: "12px" xl: "20px" --- ## Overview ## Overview Y Combinator's marketing site is anti-design as design strategy. While the rest of SaaS chases gradient meshes, custom typefaces, and 16px radius glass-morphism, YC ships a site that could've been rendered in 2002: hard corners, pure white, signature orange-red `#f26625`. The system isn't lazy — it's *deliberately* restrained, and the restraint is the brand asset. Every founder who lands here understands the signal: this isn't a brand company, it's a portfolio company. And the portfolio is Stripe, Airbnb, Dropbox, OpenAI, Coinbase — there's nothing left to prove with a Figma frame. The defining geometric move is the **orange-red rectangle**. Every primary CTA — *Apply, Read more, Watch the announcement, Submit your application* — is the same hard `#f26625` block with white Verlag-or-Helvetica-Bold text, 0px radius, no border, no shadow. The sharpness is so unusual in 2026 that it functions as a signature: the moment you see a `#f26625` block with sharp corners and uppercase white type, you know which brand it is. There is no pill variant. There is no rounded twin. The system has one shape — the rectangle — and it holds the line absolutely. The orange itself has a history. The legacy YC orange `#ff6600` (still live on the Hacker News header) is the original web-1.0 saturated traffic-cone orange, set against pure white at maximum value contrast. The contemporary YC marketing site has subtly tuned the brand to a slightly deeper, more cinematic `#f26625` — warmer, less neon, holding better against modern wide-gamut displays without going red. Both shades coexist across the YC ecosystem. Use `#ff6600` on Hacker News surfaces and any retro-leaning context; use `#f26625` on the contemporary marketing site, Startup School, and Demo Day pages. The orange-red is so canonical that the blocks themselves became the brand — the colour stamps "Y Combinator" without any wordmark ever appearing. Below the orange CTAs, the system stack does the rest of the work. **Verlag** (Hoefler & Co.'s signature geometric sans) carries display headlines at heavy weights — 700, 800, 900 — frequently in uppercase with negative tracking; this is the typeface that makes the YC marketing register feel like a 1960s Demo Day poster reproduced at web scale. Body type is **Helvetica Neue** on the marketing site and **Verdana** on Hacker News (the latter chosen decades ago for screen-legibility at small sizes and never replaced). Mono is Monaco/Menlo. Everything is system-stack-or-licensed-classics; nothing is bespoke; the loadout is small and ergonomic. The atmospheric vocabulary: *paste-paper, classified-ad, founders-not-Figma, brutalist-startup-school, Verlag-poster, web-1.0-blue, hard-rectangle, orange-monolith, anti-luxury, 1996-print, conviction-over-polish.* Every surface lands as if someone made it in HTML by hand at 2am — and that read is the brand asset. When the brand has 20 years of unicorn pedigree, restraint is the most expensive choice. **Key Characteristics** - Pure white `#ffffff` canvas — zero tint, no warm-cream substitution - Signature orange-red `#f26625` (with legacy `#ff6600` on Hacker News) — the entire visual identity - Hard 0px corners on every interactive surface — buttons, cards, inputs, modals - **Verlag** display at 700–900 weight (often uppercase) for hero typography - Helvetica Neue body on YC; Verdana body on Hacker News - Web-1.0 link convention: `#000099` blue, `#828282` visited (HN tradition) - Paste-paper `#f6f6ef` cream as the only secondary surface — quotes Hacker News - No drop shadows, no gradients, no blur — flat is the entire elevation system - 1px `#cccccc` hairline borders — structural, not decorative - Sticky `64px` header with the orange brand block — no shadow, no blur, just the rectangle ## Colors ### Primary - **bg** `#ffffff` — pure white canvas, zero tint. The defining ground. - **text** `#000000` — pure black, full contrast. Display and body share this colour. - **bg-paste** `#f6f6ef` — Hacker News paste-paper cream; appears on YC marketing in tonal blocks and quote panels. - **brand-cta-bg** `#f26625` — primary CTA orange-red. - **on-cta** `#ffffff` — pure white label on the orange rectangle. ### Brand & Accent - **brand** `#f26625` — contemporary YC marketing orange-red. Slightly deeper than legacy `#ff6600`, holding better on wide-gamut displays. - **brand-classic** `#ff6600` — the original Hacker News header orange. Live on `news.ycombinator.com` to this day. Use for retro-leaning surfaces and HN-adjacent contexts. - **brand-hover** `#e85d00` — pressed/hover orange. - **brand-deep** `#cc4f00` — active state, deep cinder. - **brand-soft** `rgba(242, 102, 37, 0.10)` — translucent orange tint for hover overlays. - **accent-startup-school** `#ff8c42` — secondary warm-orange for Startup School branding bands. - **accent-warm-cream** `#fff6f0` — faintest orange-cream tint behind selected content. ### Interactive - **link-hn** `#000099` — classic web-1.0 blue. Used on Hacker News and on inline links across the YC marketing site for an explicit retro signal. - **link-yc** `#000000` — black-underlined links on the YC marketing site (the more contemporary register). - **link-hover** `#000066` — darker blue on hover. - **link-visited** `#828282` — Hacker News' signature grey-visited convention. Functional and elegant: visited stories visibly fade to grey. - **selected-bg** `#fff6f0` — selected nav state, active row highlight. - **disabled** `#cccccc` — grey-light disabled control text. ### Neutral Scale - **ink-100** `#000000` — primary text and full-contrast labels. - **ink-200** `#404040` — secondary heading colour, body emphasis. - **ink-300** `#525252` — supporting copy, captions, eyebrow text. - **ink-400** `#828282` — meta text, HN visited-link grey, secondary metadata. - **ink-500** `#a0a0a0` — eyebrows, helper text, faint metadata. - **ink-600** `#cccccc` — disabled labels, default border colour. - **ink-700** `#e6e6e6` — quietest division, decorative dividers. - **ink-800** `#f6f6ef` — paste-paper, the lightest "neutral" tier. ### Surface & Borders - **surface-0 (page)** — `#ffffff` white. - **surface-1 (panel)** — `#f6f6ef` paste-paper cream. - **surface-2 (warm-tint)** — `#fff6f0` faint orange-cream. - **border** `#cccccc` — default hairline. Structural — appears around cards, between rows, under headers. Never decorative. - **border-strong** `#828282` — emphasised rule for inputs and outlined buttons. - **border-subtle** `#e6e6e6` — quietest division; row separators inside dense lists. - **border-orange** `rgba(242, 102, 37, 0.40)` — rare orange-tinted border; used on focus rings and outlined batch tags. ### Shadow Colors YC's depth is **flat** by default. Shadows are an exception, not a system. When they appear (on Demo Day cards, the rare modal), they're tinted with low-opacity black `rgba(0, 0, 0, 0.04)` to `0.18`, never coloured, never blue, never orange. The brand reads as printed paper — and printed paper does not drop-shadow against printed paper. Hacker News uses **zero** shadows anywhere in its UI; the YC marketing site uses two or three across an entire scroll. ### Semantic - **success** — bg `#e8f5e0`, text `#2d5016`, border `rgba(60, 100, 40, 0.30)`. Conventional warm-green. - **warning** — bg `#fff4d6`, text `#7a5e00`, border `rgba(212, 162, 50, 0.40)`. Sunlight yellow. - **danger** — bg `#fde0d4`, text `#8a2a0a`, border `rgba(196, 80, 50, 0.30)`. Warm coral, sympathetic to the orange brand. - **info** — bg `#e0e8f5`, text `#000099`, border `rgba(0, 0, 153, 0.30)`. Info uses the classic HN blue — quiet but unmistakably YC-coded. The semantic palette is unusual only in that **info** explicitly inherits the Hacker News blue. That choice ties the entire ecosystem together: error/warning/success are conventional, but info-coloured callouts on the marketing site (form validation, helper banners) immediately read as "Hacker News blue" to anyone who's used the sister site. ## Typography ### Font Family - **Display**: `"Verlag", "Verlag Bold", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif` — Verlag Heavy/Black is the YC display signature, used at 700–900 weight, frequently uppercase. Hoefler & Co.'s geometric sans, originally cut for the Guggenheim wayfinding system. When Verlag is unavailable, Helvetica Neue Bold carries the load. - **Body (YC marketing)**: `"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif` — slightly more refined than Verdana for marketing prose. - **Body (Hacker News)**: `Verdana, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif` — Matthew Carter's Verdana, designed for screen-legibility at small sizes, used on HN since launch and never replaced. - **Mono**: `Monaco, Menlo, Consolas, "Courier New", monospace` — system stack for code excerpts in essays and the occasional terminal block in Startup School content. - **OpenType features**: `kern` and `liga` always on; `tnum` and `zero` enabled in mono. No stylistic sets — the brand register depends on the absence of typographic ornament. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | Verlag | 80px | 900 | 1.0 | -0.03em | uppercase | Startup School / Demo Day banner — the brand's loudest moment | | Display | Verlag | 64px | 800 | 1.05 | -0.025em | uppercase | Section intro at scale | | H1 | Verlag | 48px | 800 | 1.10 | -0.02em | uppercase | YC marketing page hero | | H2 | Verlag | 32px | 700 | 1.15 | -0.015em | kern | Major section | | H3 | Verlag | 24px | 700 | 1.25 | -0.01em | kern | Sub-section | | H4 | Verlag | 20px | 700 | 1.30 | normal | kern | Card heading | | H5 | Helvetica Neue | 16px | 700 | 1.35 | normal | kern | Inline emphasis | | Eyebrow | Helvetica Neue | 12px | 700 | 1.30 | 0.08em | uppercase | Section pre-label | | Body Large | Helvetica Neue | 18px | 400 | 1.55 | normal | kern | Lede paragraph on essays | | Body | Helvetica Neue | 16px | 400 | 1.50 | normal | kern | Default YC marketing body | | Body Small | Helvetica Neue | 14px | 400 | 1.45 | normal | kern | Secondary text | | Body HN | Verdana | 13px | 400 | 1.40 | normal | kern | Hacker News body — the reference reading register | | Caption | Helvetica Neue | 13px | 400 | 1.40 | normal | kern | Image captions, helper text | | Caption Tabular | Monaco | 13px | 500 | 1.40 | normal | tnum | Stats, batch numbers, version stamps | | Label | Helvetica Neue | 11px | 700 | 1.30 | 0.05em | uppercase | UI labels, batch tags | | Code | Monaco | 14px | 400 | 1.55 | normal | tnum zero | Inline + block code | | Code Micro | Monaco | 11px | 400 | 1.40 | normal | — | Footnote refs | | Link HN | Verdana | 13px | 400 | 1.40 | normal | kern | Hacker News link — underlined, blue-or-grey | | Button Label | Helvetica Neue | 16px | 700 | 1.0 | normal | kern | CTA rectangle label | ### Principles - **Verlag display is the YC marketing voice.** Hero headlines run 700–900 weight, frequently uppercase, with negative tracking. The geometric heaviness reads as "1960s Demo Day poster" — the visual register YC self-references. - **Verdana on Hacker News, Helvetica Neue on YC marketing.** The split is intentional and historical: Verdana's screen-legibility at 13px is unmatched and HN has never had reason to migrate. The marketing site uses Helvetica Neue for slightly more refined long-form prose. - **Body weight stays 400.** Hierarchy comes from size and family, not from weight on body type. The brand never asks weight to do shouting work outside of display. - **Negative tracking scales with size.** -0.03em at 80px, -0.025em at 64px, -0.02em at 48px, -0.015em at 32px, -0.01em at 24px, normal at 20px and below. Compression mirrors poster typography. - **Uppercase is reserved for display and tags.** H1–H3 and badge labels run uppercase; H4 and below stay sentence-case. The 80px / Verlag 900 / uppercase combination is the brand's loudest typographic move and is used sparingly — once or twice per page maximum. - **Hacker News at 13px / Verdana / 1.4 line-height** is the reference reading metric. When YC marketing wants to feel HN-coded (essay archives, batch lists), it switches body to Verdana 13. - **OpenType discipline**: `kern` and `liga` always; `tnum` and `zero` only in mono. Display fonts don't ship stylistic sets and the brand doesn't need them. - **No italic on display.** Italics appear only in body copy, used sparingly for quoted titles. - **System-stack ergonomics.** Verdana, Helvetica Neue, Monaco — all available without web-font requests on most platforms. The performance is part of the brand story. ## Layout ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 16, 24, 32, 48, 64, 80, 96, 128 — denser than Anthropic's editorial whitespace, sparser than Are.na's information-density. - **Density observation**: YC marketing is *moderate density*. Hacker News is *high density* — short rows, narrow gutters, content-as-text-on-paper. The marketing site loosens to 64–96px section gutters; HN rows sit on 6–8px vertical spacing. ### Grid & Container - **Page max width (YC marketing)**: `1280px` — generous edges with a 760px reading column for essays. - **Page max width (Hacker News)**: `800px` — intentionally narrow, zero responsive scaling above this width. The narrow column is part of HN's identity. - **Site gutter**: `clamp(16px, 3vw, 48px)` on YC marketing; `8px` minimum on HN. - **Grid**: 12 columns with 24px gutters on YC marketing. HN uses no grid — it's a single-column document layout. - **Hero treatment**: full-bleed white or full-bleed `#f26625` orange band, 48–80px Verlag headline, single primary orange CTA below. ### Whitespace Philosophy YC's whitespace philosophy is *content-first, chrome-last*. The marketing site lets headlines breathe at 64–96px section gutters but doesn't waste space the way an editorial publication would. Hacker News goes the opposite direction — content density is the brand. Both reads share a discipline: spacing is functional, never decorative. There are no empty hero sections, no oversized illustration vignettes, no breathing-room-for-its-own-sake. Whitespace is allocated where it makes content readable, and nowhere else. ### Section Cadence - **YC marketing**: Hero (white or orange-banner) → Capability Rail (white cards on white with hairline border) → Editorial Essay (paste-paper background, 760px column) → Stats Block (white, large Verlag numbers) → Footer (paste-paper). - **Hacker News**: Header (`#ff6600` orange strip 24px tall) → Story List (paste-paper background, narrow column, dense rows) → Footer (single line of links). - The orange band — appearing as the HN header, the YC site nav strip on certain pages, or a full-bleed CTA section — is the chromatic event. Used once or twice per scroll-stop maximum. ### Breakpoints | Name | Width | Use | |---|---|---| | Mobile | < 640px | Single column, full-bleed sections, stacked CTAs | | Tablet | 640–1024px | 2-column rails, narrower gutters | | Desktop | 1024–1280px | Full 12-col grid, 760px prose, hero at 80px | | Wide | > 1280px | Page locks to 1280px, gutters expand | **Hacker News** is famously near-non-responsive: the site is fixed-width at 800px maximum and degrades to fluid below. A separate `m.ycombinator.com` historically existed; modern browsers handle the desktop site adequately at mobile widths. ### Touch Targets - Minimum tap target: 44×44px (WCAG AAA). - Buttons: 48px minimum height on mobile (12px vertical padding × 2 + 16px line-height + buffer). - Hero orange block: 64px minimum height — generous touch surface. - Nav link tap area: 44×44px even when visual padding is smaller. ### Collapsing Strategy - **Header**: full nav at ≥1024px; hamburger sheet below — sheet slides from right, full-screen white, 24px / 700 stacked links. - **Hero**: 80px Verlag display → 56px → 36px across desktop/tablet/mobile. - **Capability grid**: 4-up at desktop, 2-up at tablet, 1-up at mobile. - **Body width**: 760px → fluid 90vw at mobile. - **Section spacing**: 96px → 64px → 48px across sizes. - **Hacker News**: stays narrow on all viewports; the brand identity *is* the narrow column. ### Image Behavior - Founder photos use `srcset` with 1x/2x for crisp rendering on Retina displays. - Batch company logos render as inline SVG when possible for crisp scaling. - Hero illustrations (rare on YC) use `aspect-ratio` to prevent layout shift. - Hacker News uses zero images apart from the small wordmark in the header — the entire site is text. ### Container Queries Used on YC marketing inside batch-company tiles to switch layout at 280px width (logo-left vs. logo-top). Not used on Hacker News. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections, every flat block on HN, 95% of the marketing site | | 1 | 1px hairline border | Cards, inputs, table rows — structure via line, not depth | | 2 | `rgba(0, 0, 0, 0.04) 0 1px 2px` | Sticky nav background on scroll (rare) | | 3 | `rgba(0, 0, 0, 0.06) 0 2px 4px` | Hover-lifted Demo Day cards (rare) | | 4 | `rgba(0, 0, 0, 0.10) 0 8px 16px -4px` | Dropdown menus, popovers | | 5 | `rgba(0, 0, 0, 0.18) 0 24px 48px -12px` | Modals, dialogs (rare) | ### Shadow Philosophy YC's depth is **flat by default**. Hacker News uses zero shadows across its entire UI. The YC marketing site uses two or three across an entire scroll — only on overlay UI (modals, dropdowns) where shadow is functionally necessary to disambiguate layering. Cards lift off white by **hairline border alone** — `1px #cccccc` provides separation without explicit shadow. When shadows do appear, they're tinted with low-opacity neutral black `rgba(0, 0, 0, 0.04)` to `0.18`, never coloured, never blue, never orange. The brand reads as printed paper — and printed paper does not drop-shadow against printed paper. The orange `#f26625` block never carries a shadow — its colour and weight are the elevation. ## Shapes | Tier | Value | Use | |---|---|---| | Micro | 0px | All micro surfaces — there is no micro radius | | Standard (sm) | 0px | All chips, status pills, batch tags | | Comfortable (md) | 0px | All buttons, inputs, dropdowns | | Relaxed (lg) | 0px | All modals, code blocks, callouts | | Featured (xl) | 0px | All cards, hero blocks, editorial pull-boxes | | Pill | 0px | The system has no pill | The radii ladder is `0` everywhere. Every interactive surface is a hard rectangle. The discipline is total — a single rounded surface anywhere on the YC ecosystem (marketing, HN, Demo Day, Startup School) would crack the manifesto. There are no compound radii. There are no per-corner asymmetries. There is the rectangle, and there is nothing else. This is the most aggressive single design decision in the YC system — and it functions as the brand's most recognisable signature. ## Components ### Buttons **Primary (Orange Block)** - Background: `#f26625` orange-red. - Text: `#ffffff` pure white, Helvetica Neue 700 / 16px. - Padding: `12px 24px`. Radius: `0`. Border: none. - Hover: bg → `#e85d00`; transition `180ms ease-standard`. - Active: bg → `#cc4f00` (deep cinder). - Use: Primary action — *Apply, Submit, Read More, Watch the announcement.* The canonical YC block. **Hero Orange Block** - Background: `#f26625`. Text: `#ffffff`. Padding: `20px 40px`. Radius: `0`. - Font: Verlag 800 / 20px / uppercase / 0.05em tracking. - Hover: bg → `#e85d00`. - Use: Hero CTA on Startup School, Demo Day, Apply pages — oversized, uppercase, the entire identity. **Secondary (Outlined Black)** - Background: `#ffffff`. Text: `#000000`. Border: `1px solid #000000`. - Same padding, radius, font as primary. - Hover: bg → `#f6f6ef` (paste-paper). - Use: Twin to primary — *Read more, Watch the keynote.* **Tertiary (Hairline)** - Background: transparent. Text: `#000000`. Border: `1px solid #cccccc`. - Same padding and radius. - Hover: bg → `#f6f6ef`. - Use: Quietest third action — repeated CTAs, footer links. ### Cards **White Card with Hairline** - Background: `#ffffff`. Border: `1px solid #cccccc`. Radius: `0`. Padding: `24px`. - Shadow: none — value-contrast and the hairline border alone separate the card from the page. - Hover: border → `#828282`; transition `180ms`. - Use: Founder profile, news entry, batch company tile, Startup School lecture card. **Paste-Paper Block** - Background: `#f6f6ef`. Border: none. Radius: `0`. Padding: `24px`. - Use: Paste-paper tonal block — quotes Hacker News canvas inside YC marketing for editorial rhythm. ### Badges, Tags, Pills **Eyebrow Label** — no chrome, just type. Helvetica Neue 700 / 12px / uppercase / 0.08em tracking, colour `#525252`. Sits above section headlines. **Orange Stamp** — bg `#f26625`, text `#ffffff`, padding `4px 8px`, radius `0`, font Helvetica Neue 700 / 11px / uppercase / 0.05em tracking. Marks "FEATURED", "NEW", "BATCH X". **Outlined Batch Tag** — bg `#ffffff`, text `#f26625`, border `1px solid #f26625`, padding `2px 6px`, radius `0`. Marks batch number ("S24", "W25"). **Black Tag** — bg `#000000`, text `#ffffff`, padding `4px 8px`, radius `0`. Used on category filters in essay archives. There is no pill anywhere. The system has one shape and the badges hold the line. ### Inputs / Forms - Background: `#ffffff`. Border: `1px solid #828282`. Radius: `0`. Padding: `10px 12px`. - Font: Helvetica Neue 400 / 16px. Placeholder: `#a0a0a0`. - Focus: border → `#f26625`; ring → `0 0 0 2px rgba(242, 102, 37, 0.40)`. - Error: border → `#8a2a0a`, ring → `rgba(196, 80, 50, 0.30)`, helper text in `#8a2a0a`. - Helper: caption 13px in `#525252` below. - Application forms (`/apply`) use larger padding (`14px 16px`) and tighter labels (uppercase 11px / 700 above each input). ### Navigation - Header height `64px`. Background `#ffffff` (transparent on hero, solid on scroll). - Logo: YC orange wordmark on white, or white wordmark on a `#f26625` orange strip on certain pages. - Nav links: Helvetica Neue 600 / 15px, colour `#000000`, padding `8px 12px`. Hover → `#f26625` orange; active gets `2px` orange underline. - Right-side CTA pair: tertiary "Log in" + primary orange "Apply" rectangle. - Mobile: full-screen sheet from the right, links stack at 24px / 700, background `#ffffff`, hairline dividers between rows. ### Hacker News-Specific **HN Header Strip** — full-width band of `#ff6600` (legacy orange) at 24px height, white wordmark left, navigation links right. The single most recognisable web header in tech. **HN Story Row** — white background, Verdana 13px black title with `#000099` link colour, `#828282` meta line below ("47 points by user 3 hours ago | flag | 18 comments"). Visited links fade to `#828282` grey. No hover state beyond the underline being already present. **HN Comment Block** — same Verdana 13 typography, indented by `40px` per nesting level, faint grey `#cccccc` left rule on each level, no card chrome. ### Optional Components **Modal** — bg `#ffffff`, radius `0`, shadow `rgba(0,0,0,0.18) 0 24px 48px -12px`, max-width `560px`, white backdrop overlay at 70% opacity. **Tooltip** — bg `#000000`, text `#ffffff`, radius `0`, padding `6px 10px`, font Helvetica Neue 13px / 500. No arrow caret. **Code Block** — Monaco 14px on `#f6f6ef` paste-paper ground, padding `12px 16px`, border `1px solid #cccccc`, radius `0`. **Quote Block** — Helvetica Neue 18px italic, indent `24px` from left, 2px solid `#f26625` left rule. ### Easing Curves - `ease-standard`: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, colour transitions. - `ease-emphasized`: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; used on the rare modal enter and dropdown reveal. - `ease-linear`: `linear` — for instant-feeling colour swaps where curve smoothing reads as too soft. ### Duration Buckets - **Instant (0ms)** — Hacker News interactions are mostly server-rendered page reloads, not client transitions. The site is a document, not an app, and behaves like one. - **Fast (100ms)** — colour transitions, focus rings, link hovers on the YC marketing site. - **Standard (180ms)** — button hover, card hover, dropdown reveal. - **Slow (280ms)** — modal enter/exit, full-screen mobile nav sheet. ### Per-Component Micro-States - **Primary button hover**: bg colour shift `#f26625` → `#e85d00` only — no lift, no scale, no shadow change. `transition: background-color 180ms ease-standard`. - **Card hover**: border deepens from `#cccccc` to `#828282`; no lift, no shadow change. - **Link hover (YC marketing)**: colour `#000000` → `#f26625` over 100ms; underline already present, doesn't change. - **Link hover (HN)**: zero hover effect — links are already underlined and the visited-grey state carries the only colour change. - **Input focus**: 2px orange ring fades in over 100ms; border darkens to `#f26625`. - **Nav link active**: 2px orange underline animates in left-to-right over 180ms. - **Demo Day card hover (rare)**: border darkens + 1px upward translate over 180ms — the only "lift" in the entire system, used sparingly on YC's batch-listing pages. ### Page Transitions YC marketing: zero client-side route transitions. Pages reload server-side. The hero text appears with a single 280ms fade from white — no translate, no choreographed reveal sequence. Hacker News: zero transitions of any kind. Pages reload, content renders, done. The site is intentionally instant and document-like. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. Most of the YC ecosystem already meets the reduced-motion bar by default; the only motion to suppress is the rare hover-lift on Demo Day cards (which becomes a colour-only state) and the mobile nav sheet (which becomes an instant fade rather than a slide). ### Contrast Pairs - **`#000000` text on `#ffffff` bg**: 21.0:1 — AAA at all sizes (the maximum contrast available). - **`#525252` text on `#ffffff` bg**: 8.4:1 — AAA at all sizes. - **`#828282` meta on `#ffffff` bg**: 4.5:1 — AA at large sizes only (≥18px). - **`#000099` link on `#ffffff` bg**: 12.6:1 — AAA. - **`#ffffff` text on `#f26625` orange button**: 4.6:1 — AA at body sizes, safe for buttons. Brand-honest at the edge of compliance. - **`#000000` text on `#f6f6ef` paste-paper**: 19.2:1 — AAA. - **`#000000` text on `#fff6f0` warm-tint**: 20.0:1 — AAA. The white-canvas + black-text combination is the highest-contrast pairing available on the modern web. Accessibility is an emergent property of the brand discipline. The single contrast risk is white-on-orange button labels, which sits at AA (4.6:1) — comfortable for buttons and ≥18px text but not large enough for body copy on orange grounds. This is honoured: the orange surface only carries button labels, never long-form text. ### Focus Indicators - Default focus ring: `0 0 0 2px rgba(242, 102, 37, 0.40)` with 2px offset on white pages. - On orange surfaces (white-on-orange buttons): `0 0 0 2px rgba(0, 0, 153, 0.40)` — classic HN blue ring as the only blue appearance on UI surfaces. - All interactive surfaces must have a visible focus state — no `outline: none` without a replacement. Hacker News inherits the browser default focus ring entirely (which is acceptable and historically appropriate). ### ARIA Patterns - **Navigation**: `