03 · Tema e marca

Um tema não é uma cor — é um sistema de decisões encadeadas. No Fayz você declara três decisões no app.manifest.json e o motor de tema do shell deriva a paleta inteira a partir delas. O shell continua o mesmo; só a aparência muda, de forma coerente.

Passo 1 · Pense no sistema

Antes de editar, escolha três coisas — cada uma cascateia por dezenas de tokens:

• Cor da marca → vira primary, o anel de foco, um accent derivado e (opcionalmente) a barra lateral colorida.
• Personalidade dos cantos (o raio) → define botões, cards, inputs e modais de uma vez.
• Estratégia de modo → claro, escuro ou seguir o sistema operacional.

Três decisões, não trinta cores. Esse é o ponto de um Design System.

Passo 2 · Aplique no manifesto

Recém-criado, o app traz "theme": { "brand": "violet" }. O bloco aceita três chaves:

{
  "theme": {
    "brand": "teal",
    "radius": "lg",
    "mode": "system"
  }
}

Parece pouco — e é de propósito. Cada chave é a raiz de uma cadeia. Veja o que ela desdobra.

Galeria das 7 marcas

Escolher brand é escolher uma família inteira. O motor pega o matiz da marca, o aplica em primary/ring e gira o matiz −50° para gerar um accent harmônico automaticamente. A tabela abaixo mostra, por marca, o matiz base, o accent derivado e onde cada uma brilha:

O que cada chave cascateia

Repare que radius não muda "o botão": muda botões, cards, inputs e modais juntos, na mesma proporção. É isso que mantém o app coerente quando você troca uma ponta.

3 receitas prontas

Copie, cole no app.manifest.json e ajuste o name. Cada uma é uma combinação testada de marca + raio + modo para um tipo de negócio:

Clínica / saúde

{
  "theme": { "brand": "green", "radius": "md", "mode": "light" }
}

Verde comunica cuidado e confiança; md equilibra o formal e o acessível; light combina com recepção e atendimento diurno.

Food / comanda noturna

{
  "theme": { "brand": "orange", "radius": "lg", "mode": "dark" }
}

Laranja é apetite e hospitalidade; lg deixa os alvos táteis para o toque rápido; dark descansa a vista do salão à noite.

SaaS B2B sóbrio

{
  "theme": { "brand": "blue", "radius": "sm", "mode": "system" }
}

Azul institucional passa segurança; sm mantém a densidade profissional; system respeita o SO do operador ao longo do dia.

O name no topo do manifesto é o nome exibido — troque-o junto com a cor para a mudança de marca ficar completa:

{
  "name": "Minha Clínica",
  "theme": { "brand": "green", "radius": "md", "mode": "light" }
}

Passo 3 · Valide

Edite o bloco, salve e rode o doctor:

npx @fayz-ai/cli doctor

⚠ plugins referenced by manifest are resolved by the platform bundle, not public npm packages: dashboard

0 error(s), 1 warning(s)

Por baixo do capô

Essas três chaves são a expressão resumida de um sistema maior. A partir da sua cor de marca, o motor de tema (createTheme / applyTheme, em @fayz-ai/saas) deriva a cadeia — verificado no código:

O applyTheme então escreve cada valor como variável CSS no documento (--primary, --ring, --accent, --sidebar, --button-radius, --font-family, --shadow-sm/md/lg). Sua marca é uma entrada num sistema de tokens já consistente.

Quer a cadeia inteira — as oito famílias de tokens, o raciocínio de contraste e o fluxo de desenhar o sistema antes de configurar? Está no capítulo Design System e tema.

Ver também: a Referência completa de tokens — a consulta rápida das famílias e das variáveis CSS que o motor escreve.

Além das 3 chaves Experimental

O manifesto expõe três decisões hoje, mas o motor por baixo é bem mais rico. Já existem, atrás do runtime da plataforma: cor livre em HSL (não só os 7 nomes), 11 famílias de fonte (de inter e geist a outfit e manrope), níveis de sombra (none → subtle → medium → bold), a barra lateral em modo brand ou neutral, e presets base inteiros. Expor essas famílias no manifesto — sem inflá-lo — é o próximo passo do contrato de tema; o sentido é evolutivo, não pronto.

← Anterior: 02 · Explorar a anatomia · Próximo: 04 · Adicionar um plugin →