Y Combinator — Design System

Color Palette

Background Colors

Black

#000000 · ×1974

White

#FFFFFF · ×664

Light Gray (Cream)

#F5F5EE · ×202

Text Colors

Dark Gray (Near-Black)

#16140F · ×411

Muted Warm Gray

#8A8575 · ×58

Border Colors

Light Gray 2

#E5E7EB · ×1

The most minimal palette in this set

YC uses only 6 color tokens — the fewest of any system extracted. Identity is carried entirely through typography, layout, and the two-tone black-and-cream palette. Black (`#000000`) appears 1,974 times — by far the most-used token across all 14 systems in this set. No brand color, no accent hue, no gradient. Maximum restraint.

Typography

PRIMARY · OUTFIT

Outfit

Make something people want. The only question is whether it's worth doing.

Extralight · 200 Light · 300 Regular · 400 Medium · 500 Semibold · 600

SECONDARY · SOURCE SERIF 4

Source Serif 4

Ideas, companies, and stories from the YC community.

Light · 300 Regular · 400 Semibold · 600 Italic

Make something people want.

Display 73px · Extralight 200 · line-height: 79.915px · letter-spacing: −0.8px

Y Combinator

Display 60px · Light 300 · line-height: 66px · letter-spacing: −0.8px

The startup accelerator

Hero 48px · Light 300 · line-height: 57.6px

Batch companies · Alumni

Heading 40px · Regular · line-height: 42px · letter-spacing: −0.4px

Apply to Y Combinator

Heading 32px · Medium 500 · line-height: 38.4px

Hacker News · YC Research

Heading 28px · Medium 500 · line-height: 32.64px

We fund startups in batches twice a year. We make a small investment in exchange for a small amount of equity.

Editorial Body · Source Serif 4 · 18px · Regular Italic · line-height: 28.6px

We accept companies from any sector and at any stage. Even if you haven't started yet, you can apply.

Body Base · 15.2px · Regular · line-height: 25px

WINTER · SUMMER · BATCH

Label/Caption · 11px · Semibold · letter-spacing: +1.68px · uppercase

Line Heights — 20 tokens

Tight

13.2px

Snug

16.8px

Normal

17.5px

Relaxed

19.6px

Loose

20.8px

LH-6

22px

LH-9

25px

LH-12

28px

LH-14

32.64px

LH-15

38.4px

LH-16

42px

LH-17

57.6px

LH-18

60px

LH-19

66px

LH-20

79.915px

Letter Spacing — 9 tokens (bidirectional)

Display

Tight

−0.8px · display type, large heroes

Headings

Normal

−0.4px · headings, subheadings

Body text

Widest

+0.4px · body, comfortable reading

LABELS

LS-9 (Max)

+1.68px · uppercase labels, caps

Spacing

Spacing Scale

25 tokens — 2px → 346.789px (micro through layout-level)

16.5

66.5

120

275

346.8

Borders

Border Radii

sm (bottom)

0/0/12/12px

4px

6px

8px

2xl

12px

full (Pill)

9999px

Notable: --radius-sm applies only to bottom corners (0px 0px 12px 12px) — used for dropdown panels or cards anchored to a trigger above.

Border Width

--border-width-hairline

1px · ×25

Single universal border width used sparingly (×25 — significantly less than any other system in the set). YC primarily separates elements through spacing and background contrast rather than borders.

Shadow / Elevation

Shadow Tokens

2 tokens — pure black, no tint

sm — Deep Float

×26

15% black · 32px radial spread — hero panels, modal overlays, cards with strong elevation

md — Subtle Lift

×6

8% black · 4px offset, 20px spread — standard card lift on cream or white surfaces

Z-Index

Layer	Value	Usage
z-1 (Base)	1	Base content layer — all positive, no negative values
z-2 (Raised)	2	Slightly elevated inline elements
z-3 (Navigation)	10	Sticky headers, persistent navigation bars
z-4 (Popover)	20	Dropdowns, tooltips, floating menus
z-5 (Overlay)	30	Overlays, sidesheets, drawers
z-6 (Modal)	50	Modal dialogs, toasts, critical global alerts

Breakpoints

YC defines 16 breakpoints — the most granular in this set, covering 350px → 1200px with unusually fine steps in the mobile range (350, 400, 450, 500, 550px) and fractional precision at 639.9/640px boundary.

📱

350px

📲

400px

📲

450px

📲

500px

📲

550px

📱

2XL

639.9px

📱

3XL

640px

💻

BP-10

768px

💻

BP-11

850px

💻

BP-12

900px

💻

BP-13

950px

🖥️

BP-14

1000px

🖥️

BP-15

1100px

🖥️

BP-16

1200px

Opacity

Opacity Tokens

5 tokens — 0.15 → 0.9 (high range: near-opaque)

--opacity-15

15% · ×14

--opacity-30

30% · ×1

--opacity-80

80% · ×1

--opacity-85

85% · ×20

--opacity-90

90% · ×26

YC's opacity range skips the middle and concentrates at extremes: very low (15%) for subtle overlays and tints, and very high (85–90%) for near-solid glass effects — probably frosted nav or backdrop-filter elements. The most commonly used are 85% (×20) and 90% (×26).

Accessibility

WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1

Text Color	Background Color	Ratio	WCAG Rating
#16140F (Dark Gray)	#000000 (Black)	1.14:1	Fail
#16140F (Dark Gray)	#FFFFFF (White)	18.4:1	AAA
#16140F (Dark Gray)	#F5F5EE (Light Gray)	16.81:1	AAA
#8A8575 (Yellow/Muted)	#000000 (Black)	5.69:1	AA
#8A8575 (Yellow/Muted)	#FFFFFF (White)	3.69:1	AA Large
#8A8575 (Yellow/Muted)	#F5F5EE (Light Gray)	3.37:1	AA Large
#FFFFFF (White)	#000000 (Black)	21:1	AAA
#FFFFFF (White)	#16140F (Dark Gray)	18.4:1	AAA

CSS Variables Reference

Color Palette (all 6)

Black--color-black#000000 · ×1974

White--color-white#FFFFFF · ×664

Dark Gray (Near-Black)--color-dark-gray#16140F · ×411

Light Gray (Cream)--color-light-gray#F5F5EE · ×202

Muted Warm Gray--color-yellow#8A8575 · ×58

Light Gray 2 (Border)--color-light-gray-2#E5E7EB · ×1

Typography

Outfit (Display/UI)--font-family-baseOutfit

Source Serif 4 (Editorial)--font-family-2Source Serif 4

Extralight--font-weight-extralight200

Light--font-weight-light300

W350 (Intermediate)--font-weight-w350350

Regular--font-weight-regular400

Medium--font-weight-medium500

Semibold--font-weight-semibold600

2xs → xs → sm11px → 11.2px → 14px

base → lg → xl15.2px → 16px → 16.8px

2xl → 3xl → 4xl17px → 18px → 19.2px

5xl → 6xl → 28px20px → 22px → 28px

32px → 40px → 48pxnamed by pixel value

60px → 73px (Display)--font-size-60px/73px60px / 72.65px

Letter Spacing

Tight (Display)--letter-spacing-tight−0.8px

Normal (Heading)--letter-spacing-normal−0.4px

Wide--letter-spacing-wide+0.24px

Wider--letter-spacing-wider+0.3px

Widest--letter-spacing-widest+0.4px

LS-6--letter-spacing-ls-6+0.55px

LS-7--letter-spacing-ls-7+0.56px

LS-8 (Label caps)--letter-spacing-ls-8+0.7px

LS-9 (Max — all caps)--letter-spacing-ls-9+1.68px

Motion, Opacity & Layers

Instant (30ms)--duration-instant0.03s · ×26

Fast (100ms)--duration-fast0.1s · ×34

Normal (150ms)--duration-normal0.15s · ×221

Slow (200ms)--duration-slow0.2s · ×376

Slower (300ms)--duration-slower0.3s · ×230

400ms--duration-duration-60.4s · ×9

500ms--duration-duration-70.5s · ×40

700ms--duration-duration-80.7s · ×26

Ease Out--easing-ease-outease-out

Ghost (15%)--opacity-150.15 · ×14

Strong (80%)--opacity-800.80 · ×1

Near-solid (85%)--opacity-850.85 · ×20

Almost opaque (90%)--opacity-900.90 · ×26

Base--z-11

Raised--z-22

Navigation--z-310

Popover--z-420

Overlay--z-530

Modal--z-650

Spacing (selected)

Space 1--space-12px · ×2

Space 2--space-24px · ×121

Space 5 (SM)--space-58px · ×53

Space 8 (Gutter)--space-812px · ×72

Space 20--space-2018px · ×28

Space 32--space-3224px · ×16

Space 48--space-4832px · ×16

Space 80--space-8040px · ×62

Space 96--space-9648px · ×3

Space 128--space-12860px · ×8

Space 256--space-25680px · ×6

Space 23--space-2396px · ×1

Space 24 (Section)--space-24120px · ×7

Borders & Breakpoints

Hairline--border-width-hairline1px · ×25

sm (bottom only)--radius-sm0/0/12/12px

md--radius-md4px

lg--radius-lg6px

xl--radius-xl8px

2xl--radius-2xl12px

full (Pill)--radius-full9999px

XS → XL (mobile)5 steps350 → 550px

2XL / 3XL (breakpair)--bp-2xl / bp-3xl639.9 / 640px

Tablet--breakpoint-bp-10768px

Desktop rangebp-11 → bp-16850 → 1200px

Y Combinator Design System · Generated 15/04/2026 · 6 color tokens · 54 type tokens · 25 spacing steps · 6 border radii · 1 border width · 2 shadows · 8 durations · 1 easing · 6 z-index layers · 16 breakpoints · 5 opacity tokens