typography #

h1

h2

h3

h4

h5
h6

paragraphs

paragraphs

paragraphs

p with some small text

p sub p sup p

show code

Font families
#

=
=
=

Font sizes
#

=
=
=
=
=
=
=
=
=
=
=
=
=

Font weights
#

Font weight values can be any integer from 1 to 1000.

There are no variables for font-weight but there are utility classes.

.font-weight:100
.font-weight:200
.font-weight:300
.font-weight:400
.font-weight:500
.font-weight:600
.font-weight:700
.font-weight:800
.font-weight:900
.font-weight:950
.font-weight:234
.font-weight:555
.font-weight:997

Text colors
#

The text scale (text_00 through text_100) provides tinted neutral colors optimized for text legibility. The scale uses "prominence" semantics for light and dark modes: low numbers are subtle, high numbers are strong. This matches the shade scale pattern.

  • text_00 - surface-side endpoint: essentially invisible on surface
  • text_10-text_30 - very subtle/faint text: watermarks, hints
  • text_50 - disabled text: text_disabled
  • text_80 - default body text: --text_color
  • text_90-text_100 - high emphasis/headings
  • text_min/text_max - knockout text (pure white/black without tint)

The text scale is separate from the shade scale because text and backgrounds have different contrast requirements. Use text_* for text colors and shade_* for backgrounds. For colored text, use color_a_50 etc.

=
=
=
=
=
=
=
=
=
=
=
=
=
=
=

Line heights
#

Icon sizes
#

= 18px
🐢
= 32px
🐢
= 48px
🐢
= 80px
🐢
= 128px
🐢
= 192px
🐢
= 256px
🐢