The New York Times International Edition · Design System Reference Sheet · 2026
A visual field guide

Type, Color & Space

The design language of the International Edition, from the nameplate and newsprint palette to the tokens that set every headline, rule, button and byline.

05
Typefaces
19
Type sizes
200+
Design tokens
06
Breakpoints
Extracted from nytimes.com/international Light & dark themes · CSS custom properties October 2026
01 / 05

Typography

Cheltenham carries the headlines, Franklin runs the interface, Imperial sets the body, and Karnak brings the opinion pages to life.

Aa
Cheltenham
Display & headlines
200 · 300 · 400 · 500 · 700 · 800
Normal & italic
The World in Focus
Aa Bb Cc Dd Ee Ff Gg 0123
Aa
Franklin
UI, labels & metadata
300 · 500 · 600 · 700 · 800 · 900
Normal & italic
Breaking news, live.
Aa Bb Cc Dd Ee Ff Gg 0123
Aa
Imperial
Body copy
400 · 600 · 700
Normal & italic
The truth is worth telling.
Aa Bb Cc Dd Ee Ff Gg 0123
Aa
Karnak
Opinion & features
400 · 700
Normal & cursive
What We Owe the Future
Aa Bb Cc Dd Ee Ff Gg 0123
Aa
Cheltenham Cond
Opinion headlines
700
Condensed display
The Case for Optimism
Aa Bb Cc Dd Ee Ff Gg 0123
The news,
in its own words.
Feature display
Cheltenham 200
Light-weight display, set tight. Reserved for the largest editorial moments.
Size56 / 64 / 72
Leading1.00 – 1.01
Tracking-0.022em
Headline news · Cheltenham Bold
A New Chapter for the International Edition
16 – 48px · 1.10 – 1.15 · weight 700
Token: typography-headline-news-32
Body · Imperial Regular
The design system is a living record of how the newsroom looks at the world: measured in columns, weighted by hierarchy, and set in type that has outlasted a century.
14 – 20px · 1.39 – 1.50 · weight 400
Token: typography-body-18
Interface · Franklin
Live · World
The latest, as it happens.

By The New York Times · 2 min read

12 – 20px · 1.20 – 1.30 · weight 500 / 600
Token: typography-text-16
Type rolesFamily · size · leading · weight
Headline NewsCheltenham Bold · 16–48 / 1.10–1.15
Headline FeatureCheltenham Light · 24–56 / 1.00–1.15
Headline OpinionCheltenham Cond Bold · 18–56 / 1.15
HeadlineCheltenham Book · 16–28 / 1.15–1.20
BodyImperial Regular · 14–20 / 1.39–1.50
TextFranklin Medium · 12–20 / 1.20–1.30
TitleFranklin SemiBold · 12–56 / 1.10–1.30
LabelFranklin Medium · 11 / 1.25 · +0.1em caps
BylineFranklin SemiBold · 14 / 1.30
UtilityFranklin SemiBold · 14–20 / 1.20–1.30
Size scale10 → 72 px · ten line-height steps
Aa
10
Aa
11
Aa
12
Aa
14
Aa
16
Aa
18
Aa
20
Aa
22
Aa
24
Aa
28
Aa
32
Aa
36
Aa
40
Aa
48
Aa
56
Aa
64
Aa
72
02 / 05

Color

A semantic palette built for news: near-black ink, warm paper, one editorial blue. Themes swap values, never token names.

Light theme:root · .tpl-always-light
Surface
background-primary
#FFFFFF
background-secondary
#F8F8F8
background-tertiary
#EBEBEB
background-highlight
#FEFAD1
Content
content-primary
#121212
content-primary-dim
#363636
content-secondary
#5A5A5A
content-secondary-dim
#727272
content-accent
#346EB7
Stroke
stroke-primary
#121212
stroke-secondary
#959595
stroke-tertiary
#DFDFDF
background-scrim
#12121299
Signal
breaking
#D0021B
developing
#E6540A
editorial
#326891
positive
#267C30
negative
#A90111
Ink on paper. The default theme for all editorial surfaces.
Dark theme.tpl-always-dark · .tpl-user-inverse
Surface
background-primary
#121212
background-secondary
#2A2A2A
background-tertiary
#424242
background-highlight
#35352F
Content
content-primary
#F8F8F8
content-primary-dim
#DFDFDF
content-secondary
#BBBBBB
content-secondary-dim
#A3A3A3
content-accent
#6BA1DD
Stroke
stroke-primary
#F8F8F8
stroke-secondary
#959595
stroke-tertiary
#424242
background-scrim
#12121299
Signal
breaking
#E14E5B
developing
#F78145
editorial
#7CA7C8
positive
#63A859
negative
#EA7980
Same roles, inverted. Signal colors lift in luminance to keep contrast.
Classic link#326891
Hover#567B95
Breaking#D0021B
Developing#E6540A
Highlight#FEFAD1
Wash#F7F7F7
Hairline#E2E2E2
Muted#999999
Text#333333
Ink#000000
03 / 05

Size & Space

An 8px-rooted spacing scale, 3px corners, hairline rules, and a content column that tops out at 1200 pixels.

Spacing scale

4 → 80px · --tpl-size-spacing-*
4
8
12
16
20
24
32
40
48
56
64
72
80
.25rem0.5.5rem1.75rem1.51rem21.25rem2.51.5rem32rem42.5rem53rem63.5rem74rem84.5rem95rem10
Corner radius
0
3
4
20
9999
3px is the default for buttons, cards and dialogs. Tiles sit at 0; icon buttons are 9999px pills.
Border weight
.0625rem1px
.09375rem1.5px
.125rem2px
.1875rem3px
Rules
primary2px solid ink
secondary1px solid ink
tertiary1px solid #DFDFDF
verticalcolumn dividers
Line height
Display1.00
Headline1.10
News1.15
Title1.20
Label1.25
Compact1.28
UI text1.30
Utility1.35
Body1.39
Long-form1.50
BreakpointsMobile-first · primary at 740px
Primary breakpoint · 375 rules
320Mobile
480Small
600Phablet
740Tablet
1024Desktop
1150Max content
1440Wide
1600Canvas
12-column content gridMax-width 1200px · 3% outer padding
123456789101112
04 / 05

Components

The masthead, buttons and story cards, assembled from the same tokens. Classic newspaper structure with a contemporary interface layer.

U.S. · International · Canada · Español · 中文
Search
WorldU.S.PoliticsBusinessOpinionScienceHealthSportsArtsBooksStyleTravel
Masthead · centered nameplate1200px max-width · 1px #E2E2E2 border · 3% side padding
Standard44px · 16 SemiBold
1px ink · 3px radius
Emphasis44px · inverted
#121212 / #F8F8F8
Compact32px · 14 SemiBold
1px ink · 3px radius
Expanded56px · 15 SemiBold
full width · icon 16px
Icon button44px · 9999px radius
1px #DFDFDF
Text button44px · 16 SemiBold
1px underline
Legacy action11 Bold · uppercase
#567B95 / #326891
Disabled40% opacity
cursor: default
Image
Live · World

A New Chapter for the International Edition

The newsroom's design language pairs a 19th-century nameplate with a modern token system: one grid, two themes, and type that holds its authority at every size.

By The New York Times
2 min readUpdated 4m ago