---
version: alpha
name: Y Combinator
description: Startup-institutional clarity — the unmistakable YC Orange (#ff6600) as a single decisive accent over a pure-white canvas, near-black sans-serif text, square-cornered buttons, and a no-nonsense Helvetica-grade type voice that reads like a term sheet.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f7f7"
  surface-orange: "#fff3e9"   # tinted orange wash for highlight blocks
  ink: "#1a1a1a"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8a8a8a"

  # Brand accent — YC Orange, the entire identity
  primary: "#ff6600"
  primary-hover: "#e65c00"
  primary-soft: "#ff8533"

  # Interactive
  link: "#ff6600"
  link-hover: "#e65c00"
  focus-ring: "#ff6600"

  # Neutral scale
  gray-900: "#1a1a1a"
  gray-700: "#3d3d3d"
  gray-600: "#5c5c5c"
  gray-400: "#8a8a8a"
  gray-200: "#e0e0e0"
  gray-100: "#ebebeb"
  gray-50: "#f7f7f7"

  # Borders
  border: "#e0e0e0"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1.04px
  section-heading:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.72px
  sub-heading:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.48px
  card-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.55
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  label-mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

components:
  # Primary CTA — YC Orange, square corners
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px

  # Secondary — outlined
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    borderColor: "{colors.ink}"

  # Tinted badge / tag
  badge:
    backgroundColor: "{colors.surface-orange}"
    textColor: "{colors.primary-hover}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 2px 8px

  # Standard card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    borderColor: "{colors.primary}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  # Link
  link:
    textColor: "{colors.link}"
    typography: "{typography.body-medium}"
---

# Y Combinator Design System

## Overview

Y Combinator's website is a study in institutional confidence — the design equivalent of a one-page term sheet. There is exactly one brand color, the famous YC Orange (`{colors.primary}`, `#ff6600`), and it does an enormous amount of work: logo, links, primary buttons, and the occasional highlight. Everything else is a near-black-on-white sans-serif system that prioritizes legibility and authority over decoration. The result feels less like a startup marketing site and more like the masthead of a respected publication.

The typography is unfussy and direct. YC has long leaned on a Helvetica-grade neutral sans (rendered here in Inter, its closest widely-available cousin), with bold weights at display sizes carrying a modest negative tracking that keeps headlines tight without feeling compressed. Body copy stays at a comfortable reading size with generous line-height. The voice is plain: short declarative headlines, no ornamental flourishes, the kind of typesetting that signals "we don't need to dress this up."

What distinguishes YC from other minimal systems is the squareness. Corners are nearly sharp — buttons and inputs use a tiny `{rounded.sm}` (4px) radius, cards a restrained `{rounded.lg}` (8px). There are no pills on action buttons, no soft rounded blobs, no gradients. Borders are thin, light gray (`{colors.border}`), and structural rather than decorative. The orange is never diluted into a gradient or a glow — it appears at full saturation or as a single pale tint (`{colors.surface-orange}`) for highlight blocks, and nowhere in between.

**Key Characteristics:**
- One brand color, used decisively: YC Orange (`{colors.primary}`) for logo, links, and primary CTAs
- Pure white canvas (`{colors.background}`) with near-black text (`{colors.ink}`)
- Neutral Helvetica-grade sans (Inter) — plain, legible, authoritative
- Near-square corners — `{rounded.sm}` on buttons/inputs, no pills on actions
- Thin light-gray borders (`{colors.border}`) for structure, not decoration
- No gradients, no glow, no shadow theatrics — flat and direct
- A single pale orange tint (`{colors.surface-orange}`) for highlight blocks only

## Colors

### Primary
- **YC Orange** (`{colors.primary}`): The entire brand identity — logo, links, primary buttons. Used at full saturation.
- **Orange Hover** (`{colors.primary-hover}`): Darkened orange for interactive hover states.
- **Pure White** (`{colors.background}`): Page background, card surfaces, button text on orange.
- **YC Black** (`{colors.ink}`): Primary text and headings — near-black, not pure black.

### Ink Scale
- **Ink** (`{colors.ink}`): Headings, primary body text.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, captions, disabled text.

### Interactive
- **Link** (`{colors.link}`): Orange links throughout the site.
- **Link Hover** (`{colors.link-hover}`): Darkened orange on link hover.
- **Focus Ring** (`{colors.focus-ring}`): Orange keyboard-focus outline.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text.
- **Gray 600** (`{colors.gray-600}`): Secondary text.
- **Gray 400** (`{colors.gray-400}`): Muted text, placeholders.
- **Gray 200** (`{colors.gray-200}`): Borders, dividers.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

### Surface & Tint
- **Surface Soft** (`{colors.surface-soft}`): Alternating section background.
- **Surface Orange** (`{colors.surface-orange}`): Pale orange highlight blocks and badges.
- **Border** (`{colors.border}`): The standard thin light-gray border.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica, Arial, sans-serif` — a neutral Helvetica-grade sans
- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, monospace` for technical labels

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 52px hero headlines |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections |
| `card-title` | Card and feature headings |
| `body-large` | Introductions, lead copy |
| `body` | Standard reading text |
| `body-medium` | Emphasized text, links |
| `button-ui` | Buttons |
| `caption` | Metadata, tags |
| `label-mono` | Technical / numeric labels |

### Principles
- **Plainness as authority**: Neutral sans, bold headlines, no decorative type. The typesetting signals confidence.
- **Tight but not compressed headlines**: Modest negative tracking (-1.04px at 52px) keeps display type crisp.
- **Two-weight body system**: 400 for reading, 500–600 for emphasis and UI.
- **Orange for links only**: Inline links adopt the brand orange; running text stays near-black.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px micro step.

### Grid & Container
- Max content width: approximately 1180px
- Hero: left-aligned or centered single column with generous vertical padding
- Content: 2–3 column grids for company logos, batch listings, and resources
- Full-width section dividers using thin `{colors.border}` rules

### Whitespace Philosophy
- **Editorial breathing room**: Sections separated by `{spacing.3xl}`–`{spacing.4xl}` vertical padding.
- **Structure over ornament**: Separation comes from thin borders and whitespace, never from heavy shadows.
- **One accent, lots of neutral**: The orange punctuates an otherwise quiet, black-and-white grid.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, dividers |
| `xs` | 2px | Badges, tags |
| `sm` | 4px | Buttons, inputs — the signature near-square corner |
| `md` | 6px | Small containers |
| `lg` | 8px | Cards |
| `pill` | 9999px | Reserved — rarely used; YC avoids pills on actions |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — YC Orange fill, white text, near-square `{rounded.sm}`. The default CTA ("Apply").
- **`button-secondary`** — White with a thin `{colors.border}` outline; border darkens to `{colors.ink}` on hover.

### Badges
- **`badge`** — Pale orange tint (`{colors.surface-orange}`) with darkened orange text, near-square corners.

### Cards
- **`card`** — White surface, thin `{colors.border}`, `{rounded.lg}` corners, no shadow. Flat and structural.

### Inputs
- **`input`** — White, thin gray border; border turns YC Orange on focus.

### Navigation
- **`nav-bar`** — White header with a thin bottom border. Bold orange "YC" mark left, orange CTA right.

## Do's and Don'ts

### Do
- Use YC Orange (`{colors.primary}`) decisively — logo, links, primary CTAs
- Keep corners near-square: `{rounded.sm}` (4px) on buttons and inputs
- Use thin light-gray borders (`{colors.border}`) for structure
- Keep text near-black (`{colors.ink}`) and let orange carry the accent
- Use the pale orange tint (`{colors.surface-orange}`) only for highlight blocks

### Don't
- Don't dilute the orange into gradients or glows — full saturation or pale tint, nothing between
- Don't use pill-shaped action buttons — YC keeps actions near-square
- Don't introduce a second brand color — orange is the whole identity
- Don't use heavy shadows — the system is flat
- Don't set body text in orange — links only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked nav (hamburger) |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1180px | Full multi-column layout |
| Large Desktop | >1180px | Centered, generous margins |

### Touch Targets
- Buttons use comfortable 12px vertical padding
- Navigation links spaced for tap targets
- Inputs at 10px vertical padding

### Collapsing Strategy
- Hero: 52px display scales down on mobile, tracking held proportionally
- Navigation: horizontal links → hamburger menu
- Company/batch grids: 3-column → 2-column → single column
- Section spacing: 64–96px → ~40px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: YC Orange `{colors.primary}`
- Background: Pure White `{colors.background}`
- Heading text: YC Black `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Border: `{colors.border}`
- Link: YC Orange `{colors.link}`
- Focus ring: YC Orange `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on white background. Headline at 52px Inter weight 700, line-height 1.10, letter-spacing -1.04px, color `{colors.ink}`. Subtitle at 18px weight 400, color `{colors.ink-secondary}`. Orange CTA button (`{colors.primary}`, 4px radius, 12px 24px padding, white text) labeled 'Apply'."
- "Design a card: white background, thin 1px `{colors.border}`, 8px radius, no shadow. Title at 20px Inter weight 600, body at 16px weight 400 in `{colors.ink-secondary}`."
- "Build a badge: `{colors.surface-orange}` background, `{colors.primary-hover}` text, 2px radius, 2px 8px padding, 13px Inter weight 500."
- "Create navigation: white header with thin bottom border. Bold orange YC mark left, orange 'Apply' CTA right, 15px Inter weight 600 links."

### Iteration Guide
1. One brand color only — YC Orange does logo, links, and CTAs; everything else is neutral
2. Keep corners near-square — 4px on buttons/inputs, never pills on actions
3. Flat, no shadows — depth comes from thin borders and whitespace
4. Orange at full saturation OR the pale `{colors.surface-orange}` tint — nothing in between
5. Near-black text, generous line-height, plain Helvetica-grade sans

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Y Combinator. Brand names and trademarks belong to their respective owners.