Brand Color System Generator — Design Tokens & Typography
Gerador de Sistema de Marca
Primário
Secundário
Terciário
Neutro
TítuloDM Serif Display
Aa
CorpoInter
Aa
RótuloInter
Aa
Pesquisar
Rótulo
Configuração do Design System
Fundação Principal
#
1. Estrela Guia Criativa
HarmoniaComplementar Dividido
Perfil de HumorWarm & Approachable
2. Cores
HEX#8B5A2B
RGB139, 90, 43
CMYK0, 35, 69, 45
PMS Mais PróximoPMS ROASTED PECAN C
3. Tipografia
Display / TítulosDM Serif Display
Interface / CorpoInter
4. Elevação e Profundidade
Sombra Ambientergba(77, 50, 25, 0.06)
Fundo de Vidroblur(12px)
5. Implementação
FAQ
O que é um Sistema de Design?
Um sistema de design é um conjunto abrangente de padrões, documentação e princípios, junto com o kit de ferramentas (padrões de UI e componentes de código), usado para construir um aplicativo de forma consistente.
Como a harmonia de cores é gerada?
Analisamos a temperatura, energia e peso da sua cor HEX principal e aplicamos uma estratégia algorítmica de harmonia (como Split-Complementar ou Análoga) para derivar automaticamente superfícies e acentos acessíveis.
O que são Tokens CSS?
São variáveis semânticas que representam suas cores de marca. Você pode injetar o JSON exportado diretamente nas configurações do Tailwind CSS, Variáveis do Figma ou folhas de estilo CSS padrão.
Por que não há preto puro?
O preto puro (#000000) raramente existe no mundo real e causa grande cansaço visual em telas. Geramos um tom "On Surface" matizado que mantém alto contraste WCAG, mas com aspecto orgânico e integrado.