Tokens

Cores

Os dois temas lado a lado. Champanhe é o fio condutor; saibro é o acento vivo; lima domado existe só no estado ao vivo. Cada token é a mesma CSS var — o valor muda com .dark.

Paleta por tema

DarkCourt at Night

Background 01
fundo base
#0B0A09
--bg-01
Background 02
superfície / card
#131210
--bg-02
Background 03
elevação / header
#1B1916
--bg-03
Background 04
chips inline
#262320
--bg-04
Foreground
texto principal
#F2EDE4
--fg
Foreground muted
corpo secundário
#9A8F7E
--fg-muted
Foreground faint
labels / meta
#5E574C
--fg-faint
Metal
champanhe — fio condutor
#C9A24B
--metal
Metal soft
champanhe legível
#E6CB87
--metal-soft
Clay
saibro — acento vivo
#B25C42
--clay
Hairline
borda fina
#2E2A24
--hairline
Hairline 2
borda forte
#3A352C
--hairline-2
Grass
grama dessaturada, rara
#5E7D60
--grass
Live
lima domado — só AO VIVO
#C9D14B
--live

LightClubhouse

Background 01
fundo base
#F7F4F0
--bg-01
Background 02
superfície / card
#FFFDFA
--bg-02
Background 03
elevação / header
#F1EBE2
--bg-03
Background 04
chips inline
#E8E0D4
--bg-04
Foreground
texto principal
#1E1B17
--fg
Foreground muted
corpo secundário
#6E665B
--fg-muted
Foreground faint
labels / meta
#A9A092
--fg-faint
Metal
champanhe — fio condutor
#9A7B3F
--metal
Metal soft
champanhe legível
#8A6A2C
--metal-soft
Clay
saibro — acento vivo
#8C4A3B
--clay
Hairline
borda fina
#DCD5C9
--hairline
Hairline 2
borda forte
#C9C0B0
--hairline-2
Grass
grama dessaturada, rara
#4F6A52
--grass
Live
lima domado — só AO VIVO
#7C8A14
--live

Uso

/* tokens chegam como CSS vars + utilitários Tailwind v4 */
className="bg-bg-02 text-fg border-hairline"
className="text-metal-soft"   /* champanhe */
className="text-clay"          /* saibro */
className="text-live"          /* ao vivo */

/* trocar de tema = trocar a classe .dark no <html>
   (next-themes faz isso; default = dark) */