Typography
Greenhouse uses three typefaces, each with a clear role. Typography is applied through the Text component and --type-* tokens, aligned to a 4px baseline.
Typefaces
Each typeface serves a distinct purpose in the system. Together they cover interfaces, expressive headings, and code.
Plus Jakarta Sans
The workhorse. Used for body text, UI labels, headings, and everything that needs to be calm and legible.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Fraunces
The expressive voice. A soft serif used for display headings and landing pages where Greenhouse wants to feel warm and distinctive.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Fira Code
The technical voice. A monospace typeface with coding ligatures, used for code blocks, inline code, and token references.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 => !== <= ++ --
Scale
The type scale covers display, headings, body, and utility sizes. Display through H2 can use either Plus Jakarta Sans or Fraunces. Switch between them to see the difference.
Display
2.5rem / line 1.2 — --type-display-size
Heading 1
2rem / line 1.25 — --type-h1-size
Heading 2
1.5rem / line 1.333 — --type-h2-size
1.25rem / line 1.4 — --type-h3-size
1rem / line 1.5 — --type-h4-size
Body
1rem / line 1.5 — --type-body-size
Body small
0.875rem / line 1.429 — --type-bodySm-size
Label
0.8125rem / line 1.231 — --type-label-size
Caption
0.75rem / line 1.333 — --type-caption-size
Code
0.875rem / line 1.429 — --font-mono · Fira Code
Display
2.5rem / line 1.2 — --type-display-size · Fraunces · 400
Heading 1
2rem / line 1.25 — --type-h1-size · Fraunces · 400
Heading 2
1.5rem / line 1.333 — --type-h2-size · Fraunces · 400
1.25rem / line 1.4 — --type-h3-size
1rem / line 1.5 — --type-h4-size
Body
1rem / line 1.5 — --type-body-size
Body small
0.875rem / line 1.429 — --type-bodySm-size
Label
0.8125rem / line 1.231 — --type-label-size
Caption
0.75rem / line 1.333 — --type-caption-size
Code
0.875rem / line 1.429 — --font-mono · Fira Code
Component rules
Components never set font sizes directly. Typography is always applied via the Text component or --type-* tokens.
Forms
Field label — variant="label"
Input text — body tokens (--type-body-*)
Helper and error — variant="bodySm"
Buttons
Button text — variant="label"
Size variants change height and padding, not font size
Selection controls
Checkbox/Radio label — variant="label"
Description — variant="caption"
Dropdown
Trigger text — body tokens
Option label — variant="label"
Option description — variant="caption"
Usage
Use the Text component with a variant prop to apply typographic styles. Use the as prop to control the rendered HTML element independently of the visual style. Add className="gh-heading-display" to any heading to switch it to Fraunces.