Valmor
Design System

valmor.net.br

Sistema de design modular com suporte a múltiplos temas, tipografia expressiva e controle de contraste.

Construído com performance e acessibilidade em mente.

Imagem conceitual

Temas

Explore e personalize os temas do sistema

Componentes

Biblioteca completa de UI components

Especificações

Documentação técnica do projeto

Tema ao vivo

Componha uma paleta a partir do fundo e da cor de destaque. As doze etapas de cada escala são geradas em OKLCH, aplicadas no site inteiro enquanto você edita, e podem virar um tema permanente.

Escalas

Cada escala tem 12 etapas com o mesmo significado em todos os temas. Clique em qualquer amostra para copiar o hex.

Escala 1 2 3 4 5 6 7 8 9 10 11 12
Neutro
Destaque
Erro
Sucesso
Atenção
Informação
O que significa cada etapa
1 Fundo do app
Fundo principal da página.
2 Fundo sutil
Cards, barras laterais, blocos de código, linhas zebradas.
3 Fundo de componente
Estado de repouso de componentes interativos.
4 Componente em hover
Fundo do componente sob o cursor.
5 Componente ativo
Fundo de componente pressionado ou selecionado.
6 Borda sutil
Bordas e separadores de elementos não interativos.
7 Borda de componente
Bordas de componentes interativos e anéis de foco.
8 Borda em hover
Bordas mais fortes e anel de foco em destaque.
9 Fundo sólido
A cor mais pura da escala: botões primários, gráficos, badges.
10 Sólido em hover
Hover do fundo sólido.
11 Texto de baixo contraste
Texto secundário, legendas, ícones sobre os passos 1–5.
12 Texto de alto contraste
Títulos e texto corrido sobre os passos 1–5.

Componentes reais

Design System

Estes são os componentes do projeto renderizados com a paleta atual. Se algo ficar ilegível aqui, a paleta precisa de ajuste antes de virar tema.

UI construída só com etapas

Etapas 1–2 · fundos
Etapa 6 · separador
Etapa 7 · borda de campo
Etapa 9 · sólido Etapa 10

Etapa 11 · texto de baixo contraste

Etapa 12 · texto de alto contraste

Contraste

WCAG 2.1 é o que auditorias pedem; APCA (Lc) modela melhor o contraste percebido, sobretudo em temas escuros. Os dois são mostrados porque às vezes discordam.

Par Amostra WCAG Nível APCA Lc Veredito

Exportar

Aplicar no site registra a paleta como o tema custom e a mantém entre as páginas e recarregamentos. Para torná-la permanente no código, cole o mapa SCSS em src/styles/_theme-maps.scss e registre em src/styles/main.scss.

Espaçamento

$space-1 4px
$space-2 8px
$space-3 12px
$space-4 16px
$space-5 24px
$space-6 32px
$space-7 48px
$space-8 64px