Cores
Os símbolos de cores semânticas cada componente BoardUI são construídos a partir de - primeiro plano, texto, fundo e papéis de borda, nomeados 1:1 com as variáveis Figma.
Como funciona o sistema
As cores estão em camadas em dois níveis. Primitivos são a paleta em bruto - escalas OKLCH padrão do Tailwind mais um punhado de sobreposições ajustadas em Figma styles/theme.css. Tokens semânticos sentar no topo e referenciar aqueles primitivos por finalidade - para que serve a cor, nunca o que parece. --color-text-secondary says “supporting copy”, not “neutral 500”.
Os componentes consomem apenas a camada semântica. Essa indireta única é o que faz o sistema ser mantido: reconectar um token primitivo ou remapear um token semântico e todas as atualizações de componentes ao mesmo tempo - nenhum arquivo componente muda. É também o caminho para o modo escuro: o .dark bloco no theme.css re-pontua os mesmos símbolos em valores escuros, para que os componentes nunca precisem dark: prefixos.
Os nomes dos itens espelham os caminhos das variáveis Figma (text/primary → --color-text-primary), então uma especificação de design traduz-se para código sem uma tabela de pesquisa. Observe o prefixo duplicado em nomes de classes - text-text-primary, bg-background-primary-default - o primeiro segmento é o utilitário Tailwind, o resto é o caminho semântico completo do token.
Um sistema de token, dois temas
Adicionar .dark para o elemento raiz. BoardUI remapeia os mesmos tokens semânticos, então cada componente muda com ele.
Mapear cada tema
Manter os valores de luz dentro :root e valores escuros dentro .dark.
Usar cores semânticas
Usar tokens como bg-background-primary-default, não cores cruas.
Mantenha-o centralizado
Evitar o nível de componentes dark: As mudanças permanecem previsíveis.
Inclui persistência e um script de inicialização sem flash.
Ver guia de instalaçãoUm sotaque, cada CTA
Cada superfície interativa - gradientes de botões primários, caixas de seleção, rádios, interruptores, controles deslizantes, guias, o item da barra lateral selecionada, anéis de foco - lê de um único --color-accent-50…950 rampa que é padrão para azul. Escolha qualquer matiz abaixo (ou uma cor totalmente personalizada) e veja esta página re- tint ao vivo; gráficos e cores de status deliberadamente permanecer.
Uma cor personalizada fica exatamente em --color-accent-500, o tom em que o gradiente dos botões primários começa e que os anéis de foco usam; os outros dez tons são construídos em volta dela. Os botões põem texto branco sobre ela, então escolha uma cor escura o bastante para a leitura.
Leve-o para casa: copie o sobrescrito de onze variáveis e cole-o após sua importação theme.css.
Primeiro plano
Preenchimentos de ícones e primórdios inversos/em cores - tudo desenhado em cima de uma superfície que não está executando texto.
Texto
A hierarquia do tipo: primária para cabeçalhos e valores-chave, secundária para cópia de suporte, terciária para dicas, mais desativada e estados de erro.
Contexto
Preenchimentos de superfície. Cheio é a tela exterior; primário, secundário e terciário descrever progressivamente superfícies aninhadas e seus estados de interação.
Contorno
Linhas de cabelo e anéis de foco. As bordas do botão passam mais escuro através do hover e ativo; o anel de foco é o único acento azul.
Gráficos
Chart colors. Track is the background bar/ring behind a series, cursor the hover outline and dashed reference line, neutral an “other”-style data slice. The numbered accents are a categorical ramp — each pairs a base fill with a one-tone-darker active used for hover emphasis (the 400 → 500 recipe every chart follows). In charts these are consumed as CSS variables (e.g. fill=“var(--color-chart-1)”) rather than classes.
Estado
Cores de feedback semânticas cujo significado permanece estável entre os temas.