Theme Switcher

Click a theme to see how colors update across the page.

Typography: Display

Primary font (Instrument Serif) - Headlines and hero text

display-xxltext-display-xxl
Display XXL
display-xltext-display-xl
Display XL
display-ltext-display-l
Display L
display-mtext-display-m
Display M
display-smtext-display-sm
Display SM
display-xstext-display-xs
Display XS

Typography: Text

Secondary font (Geist) - Body copy and general text

text-xltext-text-xl
Text XL
text-ltext-text-l
Text L
text-mtext-text-m
Text M - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-stext-text-s
Text S - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
text-xstext-text-xs
Text XS - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Typography: Tag

Secondary font (Geist) - Uppercase labels, badges, and tags

tag-ltext-tag-l
TAG L
tag-mtext-tag-m
TAG M
tag-stext-tag-s
TAG S
tag-xstext-tag-xs
TAG XS

Typography: Label

Secondary font (Geist) - Form labels, captions, and UI labels

label-ltext-label-l
Label L
label-mtext-label-m
Label M
label-stext-label-s
Label S
label-xstext-label-xs
Label XS

Theme Colors

ui primaryvar(--ui-primary)#121212
ui secondaryvar(--ui-secondary)#12121299
ui tertiaryvar(--ui-tertiary)#1212124d
bg primaryvar(--bg-primary)#eae2d7
bg secondaryvar(--bg-secondary)#d5c5b3
ui bordervar(--ui-border)#12121226
bg gradient startvar(--bg-gradient-start)#d5c5b399
bg gradient endvar(--bg-gradient-end)#d5c5b300
btn primary fill defaultvar(--btn-primary-fill-default)#efefef
btn primary fill hoveredvar(--btn-primary-fill-hovered)#d5c5b3
btn primary fill pressedvar(--btn-primary-fill-pressed)#efefef
btn primary fill disabledvar(--btn-primary-fill-disabled)#efefef4d
btn primary text defaultvar(--btn-primary-text-default)#121212
btn primary text hoveredvar(--btn-primary-text-hovered)#2b2724
btn primary text pressedvar(--btn-primary-text-pressed)#121212
btn primary text disabledvar(--btn-primary-text-disabled)#1212124d
btn transparent fill defaultvar(--btn-transparent-fill-default)#efefef4d
btn transparent fill hoveredvar(--btn-transparent-fill-hovered)#efefef99
btn transparent fill pressedvar(--btn-transparent-fill-pressed)#efefef4d
btn transparent fill disabledvar(--btn-transparent-fill-disabled)#efefef4d
btn transparent text defaultvar(--btn-transparent-text-default)#121212d9
btn transparent text hoveredvar(--btn-transparent-text-hovered)#121212
btn transparent text pressedvar(--btn-transparent-text-pressed)#121212d9
btn transparent text disabledvar(--btn-transparent-text-disabled)#1212124d
btn grus fill defaultvar(--btn-grus-fill-default)#d5c5b3
btn grus fill hoveredvar(--btn-grus-fill-hovered)#efefef
btn grus fill pressedvar(--btn-grus-fill-pressed)#d5c5b3
btn grus fill disabledvar(--btn-grus-fill-disabled)#d5c5b399
btn grus text defaultvar(--btn-grus-text-default)#121212d9
btn grus text hoveredvar(--btn-grus-text-hovered)#121212
btn grus text pressedvar(--btn-grus-text-pressed)#121212d9
btn grus text disabledvar(--btn-grus-text-disabled)#1212124d
btn skott fill defaultvar(--btn-skott-fill-default)#dbfc78
btn skott fill hoveredvar(--btn-skott-fill-hovered)#efefef
btn skott fill pressedvar(--btn-skott-fill-pressed)#bcf022
btn skott fill disabledvar(--btn-skott-fill-disabled)#bcf0224d
btn skott text defaultvar(--btn-skott-text-default)#121212d9
btn skott text hoveredvar(--btn-skott-text-hovered)#121212
btn skott text pressedvar(--btn-skott-text-pressed)#121212d9
btn skott text disabledvar(--btn-skott-text-disabled)#1212124d
btn tulpan fill defaultvar(--btn-tulpan-fill-default)#ff8b77
btn tulpan fill hoveredvar(--btn-tulpan-fill-hovered)#efefef
btn tulpan fill pressedvar(--btn-tulpan-fill-pressed)#ff6b51
btn tulpan fill disabledvar(--btn-tulpan-fill-disabled)#ff6b514d
btn tulpan text defaultvar(--btn-tulpan-text-default)#121212d9
btn tulpan text hoveredvar(--btn-tulpan-text-hovered)#121212
btn tulpan text pressedvar(--btn-tulpan-text-pressed)#121212d9
btn tulpan text disabledvar(--btn-tulpan-text-disabled)#1212124d
btn krokus fill defaultvar(--btn-krokus-fill-default)#ba95f9
btn krokus fill hoveredvar(--btn-krokus-fill-hovered)#efefef
btn krokus fill pressedvar(--btn-krokus-fill-pressed)#a36dff
btn krokus fill disabledvar(--btn-krokus-fill-disabled)#a36dff4d
btn krokus text defaultvar(--btn-krokus-text-default)#121212d9
btn krokus text hoveredvar(--btn-krokus-text-hovered)#121212
btn krokus text pressedvar(--btn-krokus-text-pressed)#121212d9
btn krokus text disabledvar(--btn-krokus-text-disabled)#1212124d

Icons

Alert
ArrowDown
ArrowLeft
ArrowRight
ArrowUp
Check
ChevronDown
ChevronLeft
ChevronRight
ChevronUp
Close
Download
ExternalLink
Globe
Headphones
Info
Mail
Maximize
Menu
Minimize
Minus
Music
Pause
Play
Plus
SkipBack
SkipForward
SocialInstagram
SocialLinkedin
SoundOff
SoundOn
Upload
logoXO
logoXOLarge

Buttons

Primary

sm

md

lg

xl

Icon Only

Transparent

sm

md

lg

xl

Icon Only

Grus

sm

md

lg

xl

Icon Only

Skott

sm

md

lg

xl

Icon Only

Tulpan

sm

md

lg

xl

Icon Only

Krokus

sm

md

lg

xl

Icon Only

Link

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Card Slider