Typography

Inter is the primary typeface — engineered for screen legibility at every size. JetBrains Mono handles all code contexts.

Type Scale

Display
The quick brown fox
48px / 600
Hero headings only
H1
The quick brown fox
36px / 600
Page titles
H2
The quick brown fox
24px / 600
Section headings
H3
The quick brown fox
20px / 600
Card titles, subsections
H4
The quick brown fox
17px / 600
Group labels
Body LG
The quick brown fox
17px / 400
Introductory text
Body
The quick brown fox
15px / 400
Default body copy
Body SM
The quick brown fox
13px / 400
Secondary descriptions
Caption
The quick brown fox
11px / 500
Labels, metadata, timestamps
Overline
SECTION LABEL
16px / 600
Section labels (UPPERCASE)
Code
The quick brown fox
13px / 400
Inline code, token values

In context

The type scale works through contrast — large and small, heavy and light. These examples show how styles combine in real UI surfaces.

Foundations · Color

How the palette adapts to dark mode

Every color in Sitka is stored as an RGB triplet so it composes with CSS opacity. When the theme switches, the token values swap — no component changes required.

Jamie Rothwell· 5 min read

Appearance

Theme

Follows your OS setting

System

Font size

15px base

Medium

Reduce motion

Disables all transitions

Off
TodayMark all read

Pull request approved

main ← feature/token-refresh was approved by 2 reviewers.

2m ago

Deploy succeeded

Production deployment v2.4.1 completed in 47s.

18m ago

Fonts

Primary--font-sans
Aa Bb Cc 0123 !@#
Inter
Font.custom("Inter", size: 15)
Code--font-mono
const x = fn(42);
JetBrains Mono
Font.custom("JetBrainsMono", size: 13)