Como funciona
Ajuste os controles à esquerda para sobrescrever as propriedades CSS em tempo real. As alterações ficam restritas ao painel de visualização — não destrutivas, sem etapa de build. Copie o trecho CSS gerado e cole no stylesheet global do seu projeto para aplicar as personalizações.
Playground de Temas
Personalize tokens de design em tempo real
Visualização
Button
Typography
Display Heading
Section Heading
Body text — The quick brown fox jumps over the lazy dog.
Small muted text — used for captions and secondary info.
Badge
DefaultSecondaryOutlineDestructive
Progress & Spinner
Loading…Loading…Loading…
Alert
Info
This is an informational message.
Success
Your changes were saved successfully.
Warning
Please review before continuing.
Error
Something went wrong. Try again.
Input & Textarea
Something went wrong.
Select
Card
Card Title
A short description of the card content.
This is the card body. It reacts to token overrides in real time.
Switch & Checkbox