Gerador de tokens de design
Criar cores semânticas, espaçamento, raio e fichas de tipografia com uma prévia ao vivo. Exportação CSS Propriedades personalizadas ou... JSON, livre sem IA.
Tokens de design
:root {
--color-accent: #c65324;
--color-background: #faf8f5;
--color-foreground: #292521;
--color-surface: #ffffff;
--color-on-accent: #000000;
--font-family: "Inter", sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}O texto exportado permanece em inglês; seus dados são mantidos como foram digitados.
Sem registro. Nenhum crédito de IA. Esta ferramenta monta sua saída no seu navegador.
De uma ideia para algo útil.
- 01
Defina suas cores semânticas e valores base.
- 02
Inspecione a amostra viva e a escala de espaçamento gerada.
- 03
Entendido. CSS Variáveis ou exportar a correspondência. JSON Valores.
Um pouco de contexto.
Tokens semânticos dão um nome a decisões de design repetidas. Esta ferramenta constrói uma paleta compacta e escala de espaçamento a partir de suas escolhas. CSS e... JSON As exportações compartilham os mesmos valores. O JSON é um simples documento de valor chave, não uma alegação de conformidade com um padrão de troca de símbolos.
Boas perguntas.
Posso usar isso com meu tema existente?
Sim. Mapear ou renomear as fichas exportadas para as convenções do seu tema em vez de substituir um sistema estabelecido cegamente.
Isso cria temas claros e sombrios?
Exporta uma paleta de cada vez. Criar e baixar cada paleta separadamente e rever contraste em cada modo.