Styles & Design System
Description of the purpose of this page and the overall design system goes here.
← Return to SiteColor
13 tokensA description of the color system goes here.
Structural
… …… …… …Emphasis
… …… …… …… …Accent
… …… …… …Highlight
… …… …Extra
… …Typography
4 familiesDescription of the type system goes here.
Sample sentence is size text-5xl md:text-6xl
Sample glyphs are size text-4xl
Role: Display
Typeface: Prompt
Token: --font-display
The sky above the port was the color of television, tuned to a dead channel.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ::: ᠅
Role: Decorative
Typeface: Manufacturing Consent
Token: --font-decorative
The sky above the port was the color of television, tuned to a dead channel.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ::: ᠅
Role: Body
Typeface: Body
Token: --font-body
The sky above the port was the color of television, tuned to a dead channel.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ::: ᠅
Role: Monospace
Typeface: IBM Plex Mono
Token: --font-mono
The sky above the port was the color of television, tuned to a dead channel.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ::: ᠅
Type Scale
14 sizesDescription of the type scale goes here.
text-2xs Custom
…
Aa
text-xs
…
Aa
text-sm
…
Aa
text-base
…
Aa
text-lg
…
Aa
text-xl
…
Aa
text-2xl
…
Aa
text-3xl
…
Aa
text-4xl
…
Aa
text-5xl
…
Aa
text-6xl
…
Aa
text-7xl
…
Aa
text-8xl
…
Aa
text-9xl
…
Aa
Section Headings
5 treatments · 2 alignments · 3 sizesDescription of the heading system goes here.
Treatments × Alignments (size: md)
Treatment: None
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Treatment: Line
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Treatment: Glow
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Treatment: Inverted
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Treatment: Bordered
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Sizes (treatment: none, align: center)
Size: sm
Section Heading
Size: md
Section Heading
Size: lg
Section Heading
Composed Treatments (size: md)
Treatment: [line, inverted]
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Treatment: [line, bordered]
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Treatment: [line, glow]
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Treatment: [glow, inverted]
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Treatment: [line, glow, inverted]
::: Align: Left
Section Heading
::: Align: Center
Section Heading
Line Modifiers (size: md, align: center)
Config: lineColor: "emphasis"
Section Heading
Config: lineFlush: true
Section Heading
Config: treatment: [line, inverted] · lineFlush: true
Section Heading
Config: treatment: [line, bordered] · lineFlush: true
Section Heading
Config: treatment: [line, bordered] · lineColor: "emphasis" · lineFlush: true
Section Heading
Config: treatment: [line, inverted] · lineColor: "emphasis" · lineFlush: true
Section Heading