Lab
Experiments
Every tailwind.config token, plus type, forms, and actions.
Hero pill and every palette in the config. Tokens on this page update live.
Utility backgrounds
Lightest to heaviest visual weight. Use the `-white` suffix to sit them on white.
graph whisper linen mesh slate neutral charcoal charcoal-dense black On white
graph-white
whisper-white
linen-white
mesh-white
slate-white
neutral-white
charcoal-white
charcoal-dense-white
black-white
baseNeutral
50
100
200
300
400
500
600
700
800
900
950
Accent
Palettes
50–950 scales from theme.extend.colors.
pano
50
100
200
300
400
500
600
700
800
900
950
disco
50
100
200
300
400
500
600
700
800
900
950
viru
50
100
200
300
400
500
600
700
800
900
950
kiu
50
100
200
300
400
500
600
700
800
900
950
lab
50
100
200
300
400
500
600
700
800
900
950
celi
50
100
200
300
400
500
600
700
800
900
950
suonp
50
100
200
300
400
500
600
700
800
900
950
perf
50
100
200
300
400
500
600
700
800
900
950
challengeui
50
100
200
300
400
500
600
700
800
900
950
Semantic
Loose tokens
Tailwind scale, Funnel Display, and Heading / Paragraph.
Scale
xs Eyebrow
sm Caption
base Body
lg Lead
xl Intro
2xl Subhead
3xl Drawer
4xl Display sm
4-5xl Display
5xl Display md
6xl Display lg
7xl Display xl
Heading
Label
Paragraph · text-lg leading-relaxed.
Family
Funnel Display
font-funnel
Weight
No bold. One weight. Hierarchy comes from size and color.
Title, larger
Label, in color
Body, same weight
inset-border fields, accent focus, and states.
Buttons, links, chips, and system arrows.
Quote, list, card, and token table.
Quote
Color is not a detail: it is the system.
List
Card
Experiments
Tokens
| Token | Use |
|---|---|
| --color-primary | accent / buttons |
| --color-text | body, headings |
| --color-border | inset-border / shadow-border |
inset-border paints inside; shadow-border is the same geometry facing out.
inset-border · 1px inward
shadow-border · 1px outward inset-border
full full-bold t t-bold b b-bold l l-bold r r-bold x x-bold y y-bold tl tl-bold tr tr-bold bl bl-bold br br-bold xt xt-bold xb xb-bold yl yl-bold yr yr-bold shadow-border
full full-bold t t-bold b b-bold l l-bold r r-bold x x-bold y y-bold tl tl-bold tr tr-bold bl bl-bold br br-bold xt xt-bold xb xb-bold yl yl-bold yr yr-bold boxShadow
shadow-hero inset 0 1px 0 white
shadow-casestudy 0 -4rem 0 #6f2dff
shadow-promocontent 0 4rem 0 #6f2dff
ring-1 ring-baseNeutral-200
spacing, width, height, min/max, aspect-ratio, and borderWidth from the config.
w-690 43rem h-115 / min-h-115 / max-h-115 33rem h-120 / min-h-120 35rem h-110 / min-h-110 28rem min-h-90 22.5rem h-heroArticleArrow / min-h- / min-w- 208px min-h-heroSlider 300px max-h-hero 431px min-w-260px 260px min-w-200px 200px w-430 430px border-tria 10.5rem border-triaM 128px border-20 4rem aspect-4-3
backgroundImage, backgroundPosition, and backgroundSize.
backgroundImage
heroM hero2 hero2unfold serviceCTA bg-video-hero casestudy casestudy-img hero-celi casestudy-cover-celi about about2 projects02 projects01 casestudy-cover article library promocontent casestudy-gradient casestudy-gradient2 bgHeroI3 recursos01 recursos02 recursos03 recursos04 backgroundPosition
x-16 · 4rem 0
x-8 · 2rem 0
vw-70 · 60vw 0
library · 179px bottom
backgroundSize
casestudy · 100% 2rem
hero-celi-h · 670px
index-casestudy · 120%, contain, contain
Motion
Hover to replay hero-chess-pop.