Pular para o conteúdo principal
Ir para o conteúdo

Configurar seu site

Tema & cores

Cada workspace tem dois temas independentes: o do site público (que seus visitantes veem) e o da área de membros (dashboard dos alunos e clientes logados). Ambos editáveis com preview ao vivo e cores em formato OKLCH.

Dois temas, dois propósitos

Os dois temas são independentes — você pode ter o site público clarinho e a área de membros escura, ou vice-versa. Cada um tem editor próprio, preview ao vivo e set de cores diferente:

Tema do site público

Aplicado em tudo que o visitante vê

  • 11 cores semânticas (estilo DaisyUI)
  • Configurações de body (fundo, texto, antialiasing)
  • Preview com botões e badges
  • Editor em Workspace → Tema

Tema da área de membros

Dashboard dos alunos e clientes logados

  • 28 cores em 10 grupos (estilo shadcn/ui)
  • Cores próprias para gamificação (XP, Streak, Level, Achievement)
  • Sidebar com paleta separada
  • Editor em Workspace → Tema da Área do Membro

Tema do site público

Em Workspace → Tema, você abre o editor com 3 seções recolhíveis: Preview, Cores do Tema (OKLCH) e Configurações do Body. Tudo num só formulário, com botões "Resetar" e "Salvar" no topo.

11 cores semânticas

As cores não têm nome de cor (não chamamos "azul" ou "vermelho") — usam nomes semânticos. Assim, mesmo que você troque a paleta inteira, os botões "primary" continuam sendo o destaque principal:

primary

65% 0.25 250

secondary

70% 0.15 200

accent

75% 0.2 150

neutral

30% 0.02 250

base-100

100% 0 0

base-200

96% 0 0

base-300

92% 0 0

info

70% 0.15 220

success

65% 0.2 145

warning

75% 0.18 80

error

60% 0.25 25

Significado de cada cor

CorOnde aparece
primaryCor principal da marca — botões de CTA, links, ícones de destaque, logo no header
secondaryCor de apoio — botões secundários, badges informativas
accentAcento opcional para chamar atenção em pontos específicos (CTAs especiais, banners)
neutralCor de texto principal e elementos neutros (cabeçalhos, parágrafos)
base-100Fundo principal das páginas (geralmente branco no tema claro)
base-200Fundo de seções alternadas, cards leves
base-300Fundo de elementos elevados, hover, divisórias
infoAvisos informativos (azul claro)
successMensagens de sucesso, badges de "ativo" (verde)
warningAtenção, alertas suaves (amarelo/laranja)
errorErros, ações destrutivas, validações negativas (vermelho)

Cada cor é editada com um OKLCH Color Picker: você ajusta os 3 eixos (Lightness, Chroma, Hue) e vê o resultado direto na seção Preview no topo.

Configurações do body

Logo abaixo das cores, você define como o <body> da página é renderizado. Não é cor solta — você escolhe um dos tokens definidos no tema, então se mudar o token, todas as páginas atualizam juntas.

  • Cor de fundo do body — escolha entre 6 tokens: base-100, base-200, base-300, primary, secondary, neutral. Default: base-100
  • Cor do texto principal — entre 4 tokens: neutral, base-100, base-200, primary. Default: neutral
  • Antialiased (toggle) — habilita -webkit-font-smoothing: antialiased. Texto fica mais suave em telas Retina, mas pode ficar mais fino. Default: ligado
Dark mode no site público

Não tem switch automático. Se você quer um tema escuro, defina base-100 como uma cor escura (ex.: oklch(15% 0 0)) e neutral como cor clara. O tema é único — não há claro+escuro alternados.

Tema da área de membros

Em Workspace → Tema da Área do Membro, você abre o editor com layout split-screen: pickers de cor à esquerda (organizados em 10 grupos) e preview ao vivo do dashboard do aluno à direita. Tudo que mudar, você vê na hora.

10 grupos de cor (28 variáveis no total)

Cada cor tem um nome estilo CSS variable (--color-*) e segue padrão shadcn/ui. As cores são pares (background + foreground) onde o foreground é o texto que cai em cima daquela base — sempre com contraste adequado.

1. Cores principais 3 vars

  • --color-primary cor da marca
  • --color-primary-foreground texto sobre primary
  • --color-ring borda de foco

2. Background & Texto 2 vars

  • --color-background fundo geral
  • --color-foreground texto principal

3. Cards 2 vars

  • --color-card fundo de cards
  • --color-card-foreground texto em cards

4. Secundário 2 vars

  • --color-secondary botões e badges secundários
  • --color-secondary-foreground texto em secondary

5. Muted 2 vars

  • --color-muted fundo opaco / placeholder
  • --color-muted-foreground texto secundário, descrições

6. Accent 2 vars

  • --color-accent item ativo, hover
  • --color-accent-foreground texto sobre accent

7. Bordas & input 2 vars

  • --color-border divisórias, contornos
  • --color-input borda de campos de formulário

8. Sidebar 8 vars — sub-tema próprio

  • --color-sidebar fundo da sidebar
  • --color-sidebar-foreground texto da sidebar
  • --color-sidebar-border borda direita
  • --color-sidebar-accent item ativo
  • --color-sidebar-accent-foreground texto do ativo
  • --color-sidebar-primary brand mark / logo
  • --color-sidebar-primary-foreground texto do logo
  • --color-sidebar-ring foco na sidebar

9. Gamificação 4 vars — exclusivas LMS

  • --color-xp pontos de experiência (amarelo padrão)
  • --color-streak sequência de dias (laranja padrão)
  • --color-level nível do aluno (turquesa padrão)
  • --color-achievement conquistas/medalhas (dourado padrão)

10. Destructive 2 vars

  • --color-destructive erro, deletar
  • --color-destructive-foreground texto em destructive

Por que cores próprias para gamificação?

A área de membros tem mecanismos de engajamento (pontos XP, sequência de dias, nível, conquistas) que precisam de cores distintas das do tema principal. Por que separar:

  • Contexto único — XP é universalmente associado a amarelo/dourado, streak a laranja/vermelho
  • Não compete com botões — usar primary nos elementos gamificados confundiria com CTAs
  • Reconhecimento visual rápido — o aluno bate o olho e identifica imediatamente o que é cada métrica

Defaults reais do código:

--color-xp

0.75 0.18 85

--color-streak

0.7 0.2 30

--color-level

0.72 0.15 192

--color-achievement

0.78 0.15 75

Preview do dashboard do aluno

À direita do editor, você vê uma réplica fiel do dashboard que o aluno vai ver, com sidebar, header, card de boas-vindas, cards de estatística (com cores de gamificação), grid de cursos com barras de progresso e botões em todas as variantes:

* Mock simplificado. O preview real no editor é completo, com todas as variantes de botão e barras de progresso animadas.

Sobre o formato OKLCH

Todas as cores no UlaNano usam OKLCH em vez de #hex ou rgb(). É um formato de cor moderno que tem 3 vantagens:

  • Lightness perceptual — 50% de Lightness em OKLCH é realmente o meio entre preto e branco para a percepção humana. Em HEX, dois valores parecem ter "brilhos diferentes" mesmo com a mesma luminosidade técnica
  • Wide gamut — suporta cores fora do sRGB (P3, Rec.2020), aproveitando telas modernas
  • Manipulação previsível — diminuir 10% de Lightness sempre escurece igualmente, em qualquer cor

Os 3 eixos do OKLCH

Toda cor OKLCH é descrita por 3 valores: oklch(L C H). O picker da plataforma tem um slider para cada um:

L

Lightness

0% → 100%

Quão clara é a cor. 0% = preto, 100% = branco. Manter consistente em paletas (ex.: 70% para todos os tons primários).

C

Chroma

0 → 0.4

Saturação / vivacidade. 0 = cinza puro, 0.4 = neon. Para cores corporativas, fique entre 0.05 e 0.2.

H

Hue

0° → 360°

A "cor" propriamente dita. 0/360 = vermelho, 120 = verde, 240 = azul. É o eixo circular do espectro.

Convertendo de HEX para OKLCH

Se você tem cores HEX da sua marca, use oklch.com para converter. Cole o HEX, copie o resultado OKLCH e cole no picker.

Dicas de contraste & acessibilidade

Mínimo WCAG AA

Para que pessoas com baixa visão consigam ler, o contraste entre texto e fundo deve atingir o padrão WCAG AA:

  • Texto normal (até 18px) — contraste mínimo de 4.5:1
  • Texto grande (a partir de 18px ou 14px bold) — mínimo 3:1
  • Elementos não-textuais (ícones, bordas) — mínimo 3:1

Use contrast-ratio.com ou similares — ou, mais prático: olhe o Lightness de cada cor. Se você tem texto neutral em fundo base-100, mantenha pelo menos 50 pontos de Lightness de diferença.

Construindo uma paleta coerente

  • Primary, secondary e accent — use a mesma Lightness (ex.: todas em 65%) e mude só o Hue. Cria harmonia automática
  • Base-100/200/300 — escalonamento de cinzas: 100/96/92 para tema claro, 15/18/22 para tema escuro
  • Neutral — texto principal, oposto da base-100. Tema claro: ~30%; tema escuro: ~95%
  • Info/success/warning/error — manter Chroma similar (~0.18) para uniformidade visual

Testar com daltonismo

Use a extensão Chrome DevTools ou ferramentas como colorfilter para ver como as pessoas com daltonismo veem a sua paleta. Trocas de cor com Hue 30° vs 90° (vermelho×verde) podem ser invisíveis para 8% dos homens.

Salvar & resetar

Os dois editores têm a mesma barra de ações no topo:

  • Resetar — volta para os defaults do código (cores originais e body settings padrão). Não pede confirmação, mas as alterações só são persistidas se você clicar em Salvar depois
  • Salvar — confirma a paleta atual. No primeiro save de um workspace cria o tema; nos seguintes atualiza (singular upsert)

O que acontece após salvar

  • Tema do site — todas as páginas geradas passam a usar a nova paleta no próximo carregamento. Cache de CDN é invalidado automaticamente
  • Tema da área de membros — alunos logados veem a mudança no próximo F5 ou ao trocar de página
  • Sem deploy — não há build, não há aprovação. Mudou, salvou, está no ar
Sem versão / histórico

Salvar substitui a paleta anterior. Se você quer experimentar mudanças grandes, abra o editor em outra aba e copie os valores OKLCH atuais antes de mexer — assim consegue reverter manualmente se não gostar do resultado.