Laboratorio
Experimentos
Todas las variables de tailwind.config, más type, forms y acciones.
Pastilla del hero y todas las paletas del config. Los tokens reaccionan en vivo.
Fondos utilitarios
De menor a mayor peso visual. Sufijo `-white` para apoyarlos sobre blanco.
graph whisper linen mesh slate neutral charcoal charcoal-dense black Sobre blanco
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
Acento
Paletas
Escalas 50–950 definidas en 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
Semánticos
Sueltos
Escala Tailwind, Funnel Display y Heading / Paragraph.
Escala
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.
Familia
Funnel Display
font-funnel
Peso
Sin bold. Un solo peso. La jerarquía se arma con tamaño y con color.
Título, más grande
Rótulo, en color
Cuerpo, mismo peso
Campos con inset-border, foco accent y estados.
Botones, enlaces, chips y flechas del sistema.
Cita, lista, card y tabla de tokens.
Cita
El color no es un detalle: es el sistema.
Lista
Card
Experimentos
Tokens
| Token | Uso |
|---|---|
| --color-primary | accent / buttons |
| --color-text | body, headings |
| --color-border | inset-border / shadow-border |
inset-border pinta adentro; shadow-border es la misma geometría hacia afuera.
inset-border · 1px hacia adentro
shadow-border · 1px hacia afuera 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 y borderWidth del 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 y 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
Pasá el cursor para repetir hero-chess-pop.