Back to home

Design System

Styles

Typography

Instrument Serif

Display

Lorem Ipsum

H1

Lorem Ipsum

H2

Lorem Ipsum

H3

Lorem Ipsum

H4

Lorem Ipsum

Inter

Display

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

H1

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

H2

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

H3

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

H4

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Body XL

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Body L

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Body M

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Body S

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Body XS

Regular · Semibold · Italic

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Color Ramps

Olive

olive-50
olive-100
olive-200
olive-300
olive-400
olive-500
olive-600
olive-700
olive-800
olive-900
olive-950

Peach

peach-50
peach-100
peach-200
peach-300
peach-400
peach-500
peach-600
peach-700
peach-800
peach-900
peach-950

Neutral

neutral-0
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950
neutral-1000

Semantic Colors

bg-base

var(--semantic-bg-base)

bg-subtle

var(--semantic-bg-subtle)

bg-elevated

var(--semantic-bg-elevated)

text-primary

var(--semantic-text-primary)

Sample

text-secondary

var(--semantic-text-secondary)

Sample

text-tertiary

var(--semantic-text-tertiary)

Sample

accent

var(--semantic-accent)

border-default

var(--semantic-border-default)

border-strong

var(--semantic-border-strong)

Spacing

spacing-1 · var(--spacing-1)

spacing-2 · var(--spacing-2)

spacing-4 · var(--spacing-4)

spacing-8 · var(--spacing-8)

spacing-12 · var(--spacing-12)

spacing-16 · var(--spacing-16)

spacing-24 · var(--spacing-24)

spacing-32 · var(--spacing-32)

spacing-48 · var(--spacing-48)

spacing-64 · var(--spacing-64)

spacing-80 · var(--spacing-80)

spacing-96 · var(--spacing-96)

spacing-128 · var(--spacing-128)

Radius

radius-none

radius-sm

radius-md

radius-lg

radius-xl

radius-2xl

radius-full