typography #

h1

paragraph

h2

paragraph

h3

paragraph

h4

paragraph

h5

paragraph

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
🐢

With .sm
#

The .sm composite class makes sizing tighter with smaller fonts, inputs, padding, border radii, and flow margins. Apply on a container to cascade to children.

<div class="sm"> <h3>small heading</h3> <p>small paragraph</p> <p>small paragraph</p> </div>

small

Paragraph in a small container with tighter flow margins between elements.

Another paragraph with the reduced spacing.

  • list item one
  • list item two

normal

Paragraph in a normal container with default flow margins between elements.

Another paragraph with the default spacing.

  • list item one
  • list item two

Reset with .md
#

The .md composite class resets sizing to the defaults. Use it inside a sized container to restore normal sizing for a subtree.

<div class="sm"> <p>small text</p> <div class="md"> <p>back to normal</p> </div> </div>

small region

Everything here is small.

normal nested inside

This region is back to default sizing despite the parent having .sm.