NYTimes.com as a DESIGN.md: Cheltenham, Franklin and Imperial type, breaking-news red #d0021b and near-black ink, with components for React and AI tools.
Curated by Dov Azencot, updated May 13, 2026. Source nytimes.com (opens in a new tab).
The New York Times homepage reads less like a digital product and more like a print front page that learned to scroll. The canvas is white ("#ffffff"), the ink is a near-black "#121212" rather than pure "#000000", and the wordmark is the 174-year-old Old English script — set as a static SVG above a thin "#dfdfdf" rule that runs the full container width. Headlines never escape nyt-cheltenham serif at 16–20px in weight 700; the body sits in nyt-imperial at 14px / 400 with a tight 19px leading; every UPPERCASE section eyebrow uses nyt-franklin 10px / 500 with an unusually aggressive 1px tracking — the eyebrow tier alone accounts for 65 of the page's 280-odd text-color instances. There is no hero illustration, no gradient wash, no animated marquee. The brand voltage is the masthead itself.
This DESIGN.md file packages the homepage into a structured spec. Inside: 20 colors tokens organized into ink (near-black #121212, secondary #363636, tertiary #5a5a5a, quaternary #727272), surface (#ffffff canvas, #ebebeb tint, #dfdfdf quaternary stroke), and chromatic signals — breaking-news red "#d0021b", developing-story orange "#e6540a", editorial blue "#326891" with its darker "#a61b1e" negative variant, editorial-accent blue "#2671dc", positive green "#267c30", and the single highlighter yellow "#fefad1"; 11 typography tokens spanning nyt-cheltenham serif headlines (16–20px), nyt-franklin sans UI work (8.96–14px), nyt-imperial body (14px), nyt-karnak display, and nyt-cheltenham-text-cond condensed; a 3-step radius scale dominated by "3px" corners; an 11-step spacing scale built on a 4px unit with a "10px" workhorse; and 21 components specifications covering the top nav, masthead wordmark, story cards, photo packages, breaking-news banners, and the section eyebrow. The format follows the Google Labs DESIGN.md specification.
Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces the Times' wire-service-meets-serif voice — white canvas, near-black ink, nyt-cheltenham serif headlines, UPPERCASE nyt-franklin labels, square-corner cards at "3px" radius, chromatic editorial semantics, and the load-bearing absence of a branded CTA color. Reference the tokens to paste hex values into Tailwind config, or audit any news surface against the spec's discipline. Where most editorial sites since 2020 have chased the Apple News tile-rounded aesthetic or The Verge's neon hazard chrome, the Times has bet the opposite direction — that restraint, serif typography at 16–20px, and chromatic semantics tied to specific editorial functions can outlast a decade of redesign cycles. That bet is the design.
5 highlights
The New York Times in production, as captured. Scroll the window to see the whole page.
The New York Times's system runs on #121212 as its primary voltage, used in 11 of 21 components. Type is set in nyt-franklin across 12 tokens from 8.96px to 20px, weights 400–800. Shape language is sharp — components average 1px corner radius, favoring crisp rectangles.
Page and card backgrounds · 2
Headlines, body, captions · 6
Specialty colors · 12
Set in nyt-franklin across 12 tokens, from 8.96px to 20px, weights 400–800. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
4 corner radii and 11 spacing values. Shape language: sharp, on a 4px base radius.
Each rendered from its tokens (color, type, radius, padding) on The New York Times's own canvas.
The New York Times's tokens on the kind of product it builds.
The stories that shape the world, told well
Reporting, analysis and opinion from journalists around the world, every day.
The cities racing to adapt before the next flood
Coastal planners are rewriting the rules for how and where we build. Not everyone agrees on who should pay for it.
The New York Times staff · 12 min readWe are designing for water we have not seen yet. The people who build the places we live are starting to plan for decades, not seasons, and the work is already changing what gets made.
The New York Times's tokens, its components and how to use this DESIGN.md in your project.
Specs, directories and component libraries that pair with this design system.
One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of The New York Times.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match The New York Times's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
The New York Times homepage reads as a print front page that learned to scroll. The canvas is white ({colors.canvas} — #ffffff), the ink is a softened near-black ({colors.ink-primary} — #121212) rather than pure #000000, and the wordmark is the 174-year-old Old English script set as a static SVG above a thin {colors.stroke-quaternary} (#dfdfdf) rule that runs the full container width. There is no branded accent color in the manner of Bloomberg Orange or Stripe Indigo. The chromatic palette is functional editorial signal — breaking-news red {colors.signal-breaking} (#d0021b), developing-story orange {colors.signal-developing} (#e6540a), editorial blue {colors.signal-editorial} (#326891), positive green {colors.signal-positive} (#267c30), highlighter yellow {colors.signal-highlight} (#fefad1) — each bound through a CSS variable to one specific editorial function and never used as a button fill or background wash.
Restraint as masthead: where most editorial sites since 2020 have chased either the Apple News tile-rounded aesthetic or The Verge's neon hazard chrome, the Times holds every story card at {rounded.xs} 3px and every headline at 16–20px in nyt-cheltenham weight 700. There is no display-tier shout. The page packs 30+ story slots into a 4500px scroll without raising its voice above 20px. This is the inverse of The Verge's 107px Manuka headline or Medium's 120px GT Super — the Times trusts serif-headline information density and the masthead's iconic standing to carry the page.
Editorial-signal chromatic discipline: each color is bound through CSS variables — --color-signal-breaking for red, --color-signal-developing for orange, --color-signal-editorial for blue, --color-signal-positive for green, --color-signal-highlight for yellow — to a single function. Red is the breaking-news + live + error tier; orange is "developing story" only; blue is editorial column accent and link hover; green is markets-up and confirmation; yellow is keyword highlight. The discipline is rare in mainstream media — most publishers let red and green leak into generic toast and CTA roles, but the Times keeps each color pinned to a single newsroom signal so a reader scanning the page can map color directly to meaning.
The shape language is square-cornered with hairline rules. Three radius values appear on the homepage — {rounded.xs} 3px (the structural default, 10 occurrences), {rounded.sm} 4px (6 occurrences), and {rounded.full} 50% (6 occurrences, all on avatar circles and the breaking-news indicator). There is no 8px corner, no pill geometry, no rounded CTA. The Times refuses the iOS-tile aesthetic — story cards stay at 3px because a sharper corner reads as newsprint reproduction rather than as a SaaS dashboard tile.
Key Characteristics:
--color-signal-* variables.{rounded.xs} 3px, image circles at {rounded.full} 50%, near-zero pill geometry across 19 component slots.{colors.stroke-quaternary} #dfdfdf and {colors.surface-tint} #ebebeb carry every column rule and section divider; zero drop shadows on the captured homepage.{colors.ink-primary} — #121212) — frequency 3055. Used as text (1530), bg (0), border (1525). The workhorse near-black, bound to --color-content-primary, --color-background-inversePrimary, and --color-stroke-primary. Not pure black — a softened near-black that pulls the page toward newsprint warmth rather than OLED void.{colors.overlay-black} — #000000) — frequency 1226. Used as text (610), border (610), gradient (6). The absolute black, bound to --color-overlay-black and --color-static-gray100. Reserved for SVG icons, the editorial-overlay scrim on hero photography, and the page's truest dark accent.{colors.ink-tertiary} — #5a5a5a) — frequency 546. Used as text (273), border (273). Bound to --color-content-tertiary. The secondary text layer — bylines, deks, and section secondary copy.{colors.ink-quaternary} — #727272) — frequency 262. Used as text (131), border (131). Bound to --color-content-quaternary. Timestamp and metadata color.{colors.ink-quintary} — #8b8b8b) — bound to --color-content-quintary and --color-stroke-secondary. The dim text-and-stroke color at the lowest legibility tier — photo credits and disabled secondary actions.{colors.ink-secondary} — #363636) — bound to --color-content-secondary and --color-background-inverseSecondary. The deep gray for emphasized body copy and the inverse-secondary surface.{colors.ink-disabled} — #666666) — frequency 32. Used as text (16), border (16). The disabled text and placeholder color outside the main CSS-variable system.{colors.canvas} — #ffffff) — frequency 40. Used as text (8), bg (26), border (6). The default page surface, bound to --color-background-primary, --color-background-elevated, --color-background-secondary, --color-static-white, and --color-content-inversePrimary. Merged from a near-white cluster collapsed via OKLCH delta-E.{colors.surface-tint} — #ebebeb) — frequency 228. Used as bg (228). Bound to --color-background-tertiary. The cream-paper tint used for photo placeholders, ad-creative backdrops, and the rare section-tinted rail.{colors.stroke-quaternary} — #dfdfdf) — bound to --color-stroke-quaternary. The structural hairline used on column rules, section dividers, and story-card outlines.{colors.stroke-strong} — #c7c7c7) — bound to --color-stroke-tertiary and --color-background-quaternary. The darker hairline used on form input borders and emphasized rule dividers.{colors.signal-breaking} — #d0021b) — frequency 38. Used as text (19), border (19). Bound to --color-signal-breaking. The breaking-news red — the LIVE pulse, the "BREAKING" kicker, the breaking-news rail. Never used as a button fill or wash.{colors.signal-negative} — #a61b1e) — frequency 2. Used as text (1), border (1). Bound to --color-signal-negative. The darker red used for form-validation errors and markets-down indicators — distinct from breaking-news red so the two never collide on a single page.{colors.signal-developing} — #e6540a) — bound to --color-signal-developing. The orange tag on stories still updating — distinct from the red breaking signal. Sits between red breaking and yellow highlight in the chromatic alarm ladder.{colors.signal-editorial} — #326891) — frequency 2. Used as border (2). Bound to --color-signal-editorial. The editorial-column accent and link-hover color. Sits in the same range as Bloomberg's Opinion blue but is darker and more saturated.{colors.signal-editorial-soft} — #567b95) — frequency 2. Used as bg (2). The softer editorial blue, the only brand-layer color in the extraction. Used for in-line link defaults before the darker {colors.signal-editorial} takes over on hover.{colors.signal-accent} — #2671dc) — bound to --color-signal-accent. The brighter accent blue for inline links inside subscription rails and the focus ring.{colors.signal-positive} — #267c30) — bound to --color-signal-positive. The dedicated positive green — markets-up percentages, confirmation toasts, and success states. Sits in the same chromatic register as Bloomberg's markets-up but darker.{colors.signal-highlight} — #fefad1) — bound to --color-signal-highlight. The pale highlighter yellow used to mark search-result keywords and editor's-note inline emphasis. The only signal color that paints a fill rather than text or border.{colors.inverse-secondary} — #363636) — bound to --color-background-inverseSecondary. The dark surface used inside the rare dark-canvas embed (puzzle previews and certain editorial graphics).The Times uses no decorative gradients on the homepage. The only gradient-like treatment is the scrim under the hero photograph — a top-to-bottom #000000 fade to transparent, used to land the deck on the image. No mesh gradients, no brand-accent fades, no atmospheric blurs. The flat-color discipline is unusual for a media surface in 2026 — most publishers reach for a brand gradient at least once on the homepage, but the Times stays on the flat-color print register throughout.
Four newsroom-licensed families do the work. nyt-cheltenham (a custom cut of Bertram Goodhue's 1896 Cheltenham, fallback cheltenham-fallback-georgia / georgia / times new roman) carries 16–20px serif headlines in weight 700 — the structural workhorse of the page. nyt-franklin (the digital cut of Franklin Gothic, fallback helvetica / arial) handles every UPPERCASE eyebrow, nav link, byline, and section label at 8.96–14px across weights 400/500/600/700/800. nyt-imperial (the Hoefler & Co. body-text cut, fallback georgia / times new roman) carries 14px / 400 body copy at 19px leading. nyt-karnak (a slab serif derived from W. A. Dwiggins' 1942 Karnak, fallback georgia) and nyt-cheltenham-text-cond appear rarely for display callouts and condensed headers.
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.headline-md} | 20px | 700 | 1.15 | 0.05px | Lead story headlines in nyt-cheltenham-text-cond |
{typography.headline-sm} | 18px | 700 | 1.2 | 0.18px | Secondary story headlines in nyt-cheltenham |
{typography.headline-xs} | 16px | 700 | 1.2 | 0.16px | Tertiary story headlines and section labels |
{typography.body-md} | 14px | 400 | 1.36 | 0.1px | nyt-imperial body copy and story summaries |
{typography.nav-link} | 14px | 500 | 1.0 | 0.1px | Top-nav section links in nyt-franklin |
{typography.link-md} | 13px | 500 | 1.23 | 0 | Inline anchor links in nyt-franklin |
{typography.eyebrow-md} | 10px | 500 | 1.25 | 1px | UPPERCASE section eyebrows in nyt-franklin |
{typography.eyebrow-strong} | 10px | 600 | 1.25 | 1px | Emphasized eyebrows on developing-story rails |
{typography.eyebrow-loud} | 11px | 800 | 1.25 | 1.1px | The "BREAKING" eyebrow with breaking-news red text |
{typography.caption-micro} | 8.96px | 400 | 1.2 | 0 | Photo captions and ultra-fine credit lines |
{typography.display-slab} | 16px | 700 | 1.15 | 0.25px | The rare nyt-karnak slab callout |
{typography.headline-condensed} | 20px | 700 | 1.15 | 0.05px | Promotional headlines in nyt-cheltenham-text-cond |
nyt-cheltenham 16–20px is the headline ceiling, nyt-franklin 10px UPPERCASE is the eyebrow workhorse. Anything above 20px on the homepage lives inside an ad creative or a section-front interstitial; editorial story headlines never escape {typography.headline-md} 20px. The 10px / 500 / 1px-tracked eyebrow tier alone accounts for 65 of the 280-odd text-color instances across the page — the Times trusts UPPERCASE micro-eyebrows to carry section identity rather than scaling type.
Letter-spacing runs in three registers. Aggressively positive (1–1.1px) on UPPERCASE nyt-franklin eyebrows at 10–11px — the 1px tracking is what makes the eyebrow read as newsroom kicker rather than UI label. Slightly positive (0.05–0.25px) on nyt-cheltenham headlines to keep the serif at 16–20px from feeling cramped. Plain 0 tracking on body and nav links — the default. Negative tracking does not appear on the page.
nyt-cheltenham, nyt-franklin, nyt-imperial, nyt-karnak, and nyt-cheltenham-text-cond are licensed Times-only cuts. Georgia substitutes acceptably for nyt-cheltenham and nyt-imperial at the published sizes — the metrics differ but the serif voice reads correctly. Source Serif or Tinos preserves the body-text behavior with slightly tighter metrics. Libre Franklin is the closest open-source substitute for nyt-franklin and tracks well at 10–14px UPPERCASE. Hoefler Text or Lyon Text match nyt-imperial at body sizes if licensed. For nyt-karnak, Roboto Slab or Zilla Slab substitute at the 16px callout size. The Times' type is deliberately conservative, so substitutes preserve the wire-service-meets-serif tone without retuning.
{spacing.micro} 2px · {spacing.xxs} 4px · {spacing.sm} 8px · {spacing.base} 10px · {spacing.md} 11px · {spacing.lg} 12px · {spacing.xl} 16px · {spacing.xxl} 24px · {spacing.section} 30px · {spacing.section-lg} 33px · {spacing.page} 60px.10px is the most-used spacing value on the page (126 occurrences) — it controls the gap between byline avatars, eyebrow rails, and the section margin tier.The Times treats whitespace like a printed newspaper treats column gutters — a calibrated separator measured in single-digit pixels, not a dramatic reset. The page is paced by hairlines rather than open space: every section is bounded by a 1px {colors.stroke-quaternary} (#dfdfdf) rule, every column gutter is measured at 10–12px, every story card carries a 16×12px interior padding. The result is dense without feeling cramped. Where the Apple News surface lets air carry the layout, the Times lets hairline ruling carry it — closer to a print copy desk than to a magazine landing.
{rounded.none} 0px: the masthead wordmark, breaking-news kicker, and section eyebrow — square corners{rounded.xs} 3px: the structural default (10 occurrences) — story cards and inline tags{rounded.sm} 4px: form inputs and ad-creative tiles (6 occurrences){rounded.full} 50%: byline avatars, the LIVE indicator dot, and round icon buttons (6 occurrences)The 3px radius is the structural default because it softens the card edge just enough to read as a current-decade web product while staying close to the square-corner discipline of print. Story cards round at 3px, form inputs at 4px, indicators at 50%, and everything else stays square at 0px.
The Times' depth philosophy is hairline-as-elevation. There are zero traditional box-shadows in the extracted top-frequency colors. Instead, the page leans on {colors.stroke-quaternary} (#dfdfdf) and {colors.surface-tint} (#ebebeb) 1px treatments to separate every column, section, and card.
| Level | Treatment | Use |
|---|---|---|
| 0 | No border, no shadow | Default canvas text and inline copy |
| 1 | 1px solid {colors.stroke-quaternary} (#dfdfdf) | Section dividers, story-card outlines, the masthead rule — the structural workhorse |
| 2 | 1px solid {colors.stroke-strong} (#c7c7c7) | Form input borders and emphasized rule dividers |
| 3 | 1px solid {colors.ink-quintary} (#8b8b8b) | Tertiary stroke on emphasized buttons and rare nav active states |
| 4 | 1px solid {colors.ink-primary} (#121212) | Focused input borders and active-state outlines |
| 5 | Saturated {colors.signal-breaking} (#d0021b) text or fill | Breaking-news voltage — color-as-attention rather than depth |
| 6 | Tinted {colors.surface-tint} (#ebebeb) bg | Photo placeholders and ad-creative backdrops — surface differentiation through a single tint step |
When something needs to stand out, it doesn't get a drop shadow — it gets a darker hairline, a black border on focus, or the breaking-news red text voltage. No gradients, no glows, no atmospheric blurs. The page stays flat throughout, and hierarchy is carried by hairline weight, ink-ladder tier, and editorial-signal color.
masthead-wordmark — The "The New York Times" Old English script set as a static SVG, ink primary on canvas white, 48px tall with 10px vertical padding above the section-nav rule. Square corners at {rounded.none} — the wordmark never sits inside a tinted card or rounded chip.
top-nav — White fill, 36px height, nyt-franklin 14px / 500 nav links with 0.1px tracking. Bordered top-and-bottom by a 1px {colors.stroke-quaternary} hairline (#dfdfdf), 0px outer radius. Section labels — U.S., World, Business, Arts, Opinion — sit left-aligned with 10px gap between them.
nav-link — Transparent fill, near-black text, nyt-franklin 14px / 500. Padding 0×6×0×0 on the horizontal axis — the asymmetric right margin keeps section labels packed without colliding with their right neighbor. Hover transitions text to {colors.signal-accent} (#2671dc) over 150ms — the only place the brighter accent blue appears.
section-eyebrow — Transparent fill, near-black text, nyt-franklin 10px / 500 UPPERCASE with 1px letter-spacing — the structural section kicker (e.g., "POLITICS", "INTERNATIONAL"). Repeats 65+ times on the homepage. The 1px tracking is what makes the eyebrow read as newsroom kicker rather than UI label.
breaking-news-pill — Transparent fill, {colors.signal-breaking} (#d0021b) text, nyt-franklin 11px / 800 UPPERCASE with 1.1px tracking. The "BREAKING" kicker on the top breaking-news rail. The only place 800-weight UPPERCASE Franklin appears.
live-indicator — {colors.signal-breaking} 8px circle at {rounded.full} 50% radius. The LIVE pulse next to the breaking-news kicker. The only place breaking-news red paints a fill — and it's an 8px dot, never a button.
developing-tag — Transparent fill, {colors.signal-developing} (#e6540a) text, nyt-franklin 10px / 600 UPPERCASE with 1px tracking. The orange "DEVELOPING" tag on stories still updating — bound to --color-signal-developing and chromatically distinct from the red breaking signal.
story-card — Canvas white fill, 1px {colors.stroke-quaternary} (#dfdfdf) border, {rounded.xs} 3px radius, 16×12px interior padding. Headline in nyt-cheltenham 16–20px / 700, summary in nyt-imperial 14px / 400, byline in nyt-franklin 10px / 500. Hover: no lift, no scale — the headline color stays put; the cursor change is the only state signal.
story-card-headline — {typography.headline-md} 20px / 700 nyt-cheltenham near-black on white. Maximum three lines before truncating with ellipsis. Letter-spacing 0.05px keeps the 20px serif from feeling cramped.
story-card-summary — {typography.body-md} 14px / 400 nyt-imperial in {colors.ink-secondary} (#363636). The body summary is always 14px nyt-imperial at 19px leading — the Times pushes the body weight to read as long-form magazine prose rather than card-flavored snippet copy.
byline — Transparent fill, {colors.ink-tertiary} (#5a5a5a) text, nyt-franklin 10px / 500 UPPERCASE with 1px tracking. "By Jane Doe and John Smith" — UPPERCASE author names sit immediately under the headline.
timestamp — Transparent fill, {colors.ink-quaternary} (#727272) text, nyt-franklin 8.96px / 400 lowercase. "12 min ago" — the smallest type token on the page, never tracked, never UPPERCASE.
avatar-circle — {colors.surface-tint} (#ebebeb) placeholder fill, 24px tall, {rounded.full} 50% radius. The byline avatar — never bordered, never shadowed.
photo-frame — {colors.surface-tint} (#ebebeb) placeholder background, 0px radius, 0px padding. The Times never rounds photo corners on the homepage — the placeholder tint is the only chrome around an image.
link-text — Transparent fill, {colors.signal-editorial-soft} (#567b95) text, nyt-franklin 13px / 500. The default inline link color — soft enough to recede in dense paragraphs.
link-text-hover — Hover transitions text to {colors.signal-editorial} (#326891) — the darker variant, never an underline-only state.
highlight-mark — {colors.signal-highlight} (#fefad1) background, near-black text, nyt-imperial 14px / 400, 0×2px horizontal padding. The keyword-mark used in search results and editor's-note emphasis. The only signal color that paints a fill.
text-input — White fill, 1px {colors.stroke-strong} (#c7c7c7) border, {rounded.sm} 4px radius, 8×12px padding. nyt-imperial 14px text in near-black, placeholder in {colors.ink-disabled} (#666666). On focus, border transitions to {colors.ink-primary} (#121212) — never to a blue ring.
divider-thin — {colors.stroke-quaternary} 1px horizontal rule. The structural separator used between sections, story rails, and footer columns. No spacing-rules variant exists — every divider is the same 1px hairline.
--color-signal-breaking for red, --color-signal-developing for orange, --color-signal-editorial for blue, --color-signal-positive for green, --color-signal-highlight for yellow. Each color tied to a single editorial function.{rounded.xs} 3px on story cards. A 3px corner reads as newsprint reproduction; an 8px corner reads as Apple News.{colors.stroke-quaternary} (#dfdfdf) 1px hairlines for separation instead of shadows. The page has zero drop shadows on the captured homepage.{colors.signal-breaking} (#d0021b) as a button fill or background wash. The hex appears 38 times across the page, all as text or as the 8px LIVE-indicator circle — never as a CTA fill. A filled breaking-news red button breaks the editorial-signal discipline and turns the page into a Salesforce-flavored newsroom.{rounded.sm} 4px and the page reads like Apple News; round it to 8px and it stops looking like a newspaper-of-record entirely.{colors.signal-positive} (#267c30) or {colors.signal-breaking} (#d0021b) leak into generic "success" or "danger" semantics. Each color is bound to one editorial function — markets-up + confirmation for green, breaking + live + error for red. Using either for a generic toast drains its newsroom meaning.{colors.signal-developing} (#e6540a) on anything but updating stories. The orange is bound to --color-signal-developing and reserved for the "DEVELOPING" tag. Using it as a CTA, an accent, or a button fill breaks the chromatic-alarm-ladder semantics — red is breaking, orange is developing, yellow is highlight, and the three colors carry meaning only because they don't drift.--color-background-inversePrimary = #121212, --color-content-inversePrimary = #ffffff) suggest the inversion is engineered, but no dark-canvas toggle ships on this surface.BuzzFeed, Financial Times, Ghost and 25 more in News & Publishing: each brand's colors, type and components in one file your AI agent builds from.
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
4.9 out of 5 from 150+ developers
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.
