Comece aqui

Princípios

Quatro ideias que desempatam qualquer dúvida de marca. Quando duas regras parecerem entrar em conflito, decida por estas, nesta ordem.

As três camadas

A regra que sustenta o princípio 3. Código e Figma usam semânticos e de componente. Primitivo direto só dentro do arquivo de tokens. É o que permite trocar o tema, ou ajustar o âmbar, em um lugar só.

primitivo    color.amber.500      = #FFB61F
semântico    color.accent.default = {color.amber.500}
componente   button.primary.bg    = {color.accent.default}

Em CSS, var(--sunny-button-primary-bg) resolve para var(--sunny-color-accent-default), que resolve para var(--sunny-color-amber-500).

Status honesto em cada token

Todo token carrega $extensions.sunny.status. Este guia repete o selo em cada valor, porque saber de onde veio o número muda o que você pode fazer com ele.

Comece aqui

Por onde começar

O caminho mais curto entre a sua dúvida e a resposta, por perfil.

Consumir os tokens

O site importa o tokens.css desde 15/09/2026 e ainda usa os nomes antigos pelo bloco de compatibilidade. O plano de adoção está em versionamento.

# regenera o tokens.css a partir do tokens.json
$ node tokens/build.mjs

# falha se um par obrigatório não atinge WCAG AA
$ node tokens/check-contrast.mjs
✓ 14 pares verificados, 0 falhas

Sem dependências. Node 18 ou mais recente.

Fundações

Cores

Um âmbar, uma escala de neutros e quatro estados. Nada além disso. Os hex desta página são lidos do tokens.css em tempo de carregamento, então não têm como divergir da fonte.

Âmbar, a cor da marca

Como ler a escala: 50 a 200 são brilhos e fundos claros; 300 a 500 são os tons de marca; 600 a 900 são estados pressionados, texto e contraste.

Neutros

Feedback

Três tons por estado: 300 para texto sobre escuro, 500 para ícone e borda, 700 para texto sobre claro. O 500 de cada estado é medido; os 300 e 700 são derivados e precisam de validação visual.

Aliases de severidade

Para ScopeWard e RootPilot: severity.critical → error.500, severity.high → warning.500, severity.medium → amber.400, severity.low → info.500, severity.ok → success.500.

Semânticos

Estes são os nomes que você escreve no código. Eles mudam sozinhos quando o tema muda.

Tema claro

O escuro é a fundação. O claro existe para documentos, slides e e-mail, e entra com <html data-theme="light">. Use o botão Tema claro no topo desta página para ver a troca acontecer nos exemplos.

A troca de text.accent para amber.800 no claro é obrigatória: âmbar 500 sobre branco tem 1.8:1 e não serve para texto. Ver acessibilidade.

Transparências

Faça e evite

Pendências

• Validar visualmente os tons 300 e 700 de feedback.
• Decidir se bg.card sobe para algo como #1F2426, para separar de bg.base sem depender de borda.
• O site importa o tokens.css desde 15/09/2026, mas ainda usa os nomes antigos e tem hex escritos direto no CSS. Ver o passo 3 em versionamento.

Fundações

Tipografia

Três famílias, cada uma com um trabalho. Bricolage Grotesque tem personalidade e fica melhor grande. Inter é neutra e segura o corpo. JetBrains Mono é para qualquer coisa que o leitor possa copiar.

Famílias

Import único, como o site faz hoje:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" />

Fallbacks: sans-serif para as duas primeiras, ui-monospace, monospace para a mono. Os arquivos .ttf e .otf estão em Fonts/ na pasta _Sunny-NewBrand26 do Drive, para slides e documentos offline.

Estilos semânticos

Use estes, não os primitivos. Cada um vira um conjunto de variáveis --sunny-type-<nome>-<propriedade>. A amostra à direita é renderizada com o próprio token.

Exemplo de uso:

.hero h1 {
  font-family: var(--sunny-type-display-family);
  font-size: var(--sunny-type-display-size);
  font-weight: var(--sunny-type-display-weight);
  line-height: var(--sunny-type-display-line-height);
  letter-spacing: var(--sunny-type-display-letter-spacing);
}

Primitivos

Tamanhos em rem sobre raiz de 16px. Os títulos são fluidos com clamp e não trocam por breakpoint.

Entrelinha e espaçamento de letras

Slides e documentos

A escala da doc anterior do site (display 40px, h1 28px, body 12px, caption 9px) era para slides de 16:9 e continua válida só nesse contexto. Em web, use a tabela acima. Em slides: display e títulos em Bricolage Grotesque, corpo em Inter, nunca abaixo de 11px.

Faça e evite

Fundações

Espaço, radius e elevação

Base de 4px, radius contido, e sombra só quando há profundidade real. Card em repouso não tem sombra: a separação é por borda.

Espaçamento

Base de 4px. O nome do token é o múltiplo. Toda medida de layout é múltiplo de 4; valores quebrados só em ajuste óptico de ícone, e com comentário.

O Omnibus da ClickBus usa base 8. A Sunny usa base 4 porque o site já é assim e porque 12px aparece muito em UI densa de produto. Os múltiplos de 8 continuam sendo os preferidos para layout.

Radius

A marca é contida: botão com 4px, card com 12px. Não usar 16px ou mais fora de pill.

Elevação

Duas famílias: glow em âmbar para destaque, elevation em preto para profundidade. Glow é raro: um por viewport, no elemento que merece o olhar.

Glass

Receita única: fundo bg.header ou alpha.white-4, backdrop-filter: blur(var(--sunny-blur-card)), borda border.subtle. Texto sobre glass é sempre text.primary, nunca text.secondary, porque o fundo varia.

Ver o glass aplicado no componente Card.

Movimento

Breakpoints

Ícones

Têm página própria: Ícones. A proposta de Lucide em todos os produtos está na decisão 0008.

Fundações

Logo

Um sol em semicírculo cortado por faixas horizontais, e um wordmark em duas linhas. Sem raios: é isso que separa a V4 das identidades de 2021 e 2023.

Anatomia

A moldura tracejada marca a área de proteção: mínimo igual à altura do "S" de "SUNNY" em todos os lados.

Cores medidas em Logo-Hor-Color.svg

Versões

Formatos: .ai, .svg, .pdf e PNG em 1.5x, 2x, 3x e 4x.

Galeria

Os arquivos de assets/v4/, cada um no fundo para o qual existe.

Regras

Escolha por espaço

Largo usa o horizontal. Quadrado usa o vertical. Pequeno demais para o nome usa só o ícone, e só quando "Sunny Systems" já está no contexto.

Escolha por fundo

Sobre foto: aplicar o White em área com contraste. Se não houver, colocar um bloco de bg.base atrás.

Faça

Não faça

Tamanho mínimo

22px de altura para o horizontal em tela, que é o menor uso no site hoje. Abaixo disso, usar só o Icon. Em impressão, 12mm de altura.

Não faça

• Alterar cores, inclusive trocar o cinza do wordmark por âmbar.
• Distorcer, rotacionar ou espelhar.
• Aplicar sombra, glow, contorno ou gradiente sobre o logo. O glow é do fundo, não do logo.
• Recriar o wordmark com texto ao vivo.
• Usar Logo Hor Color sobre escuro. O cinza neutral.600 some.
• Usar o símbolo V1 ou V2, com raios, em material novo.
• Gerar o logo, ou uma variação dele, com IA.
• Passar a versão Color para cinza. Se a cor precisa sumir, use Positive ou Negative.

Em código

<!-- escuro -->
<img src="/images/logo-hor-white.svg" alt="Sunny Systems" width="160" height="42" />
<!-- claro -->
<img src="/images/logo-hor-color.svg" alt="Sunny Systems" width="160" height="42" />

alt é sempre "Sunny Systems". Se o logo é link para a home, o alt continua "Sunny Systems" e o link recebe aria-label="Sunny Systems, página inicial".

No site hoje

Em movimento

Loops curtos que ensinam a regra. O arquivo estático continua sendo a fonte; o movimento só demonstra. Cada loop tem botão de pausa e fica parado sob prefers-reduced-motion.

O sol nasceFaixas revelam o símbolo, depois o wordmark

Pausar

Qual espaçoLargo Hor · quadrado Vert · mínimo Icon

Pausar

Qual fundoEscuro White · âmbar Positive · claro Color · foto White

Pausar

Onde pousaHeader 28px · slide 16:9 · post 4:5 no rodapé

Pausar

Fale conosco

Pendências

• Registrar no Drive a fonte de origem do wordmark.
• Substituir os PNG do repositório do site pelos SVG.
• Um arquivo por versão no site, referenciado de /images/, em vez de cópia por produto.
• O SVG do SunnyNet traz "SYSTEMS" em cinza. O oficial, no Drive, é branco.
• Gerar a imagem Open Graph com acentos corretos. Ver assets digitais.
• Avatar social: proposta na decisão 0009. Ver assets digitais.

Fundações

Dois tipos de ícone. O de interface é Lucide, em 16, 20 ou 24px, com a cor herdada de currentColor. O de marca é o sol, nas três versões de ícone.

Tamanhos

Traço 1.5px, pontas e junções arredondadas, fill: none. O Lucide vem com traço 2px: passe 1.5 explicitamente. Acima de 128px, ícone de conceito vira ilustração, e Lucide não vai para o hero.

Marca

O sol não ganha versão em traço e não entra na galeria de interface.

Interface

Ação

Status

A cor vem de color.status.*.icon. Nunca âmbar para erro, aviso ou sucesso.

Produto

É o recorte usado no guia, com o nome de cada ícone no Lucide. Precisou de outro, use o do Lucide com as mesmas regras.

Faça e evite

Fundações

Favicon, avatar e ícone de canal usam só o sol, porque o nome já está no contexto da aba ou do perfil. O Open Graph usa o lockup horizontal, porque o card de um link não carrega o nome sozinho.

Depende da decisão 0009. O arquivo-fonte da capa do YouTube não foi localizado no Drive.

Componentes

Índice e maturidade

O que existe, onde está implementado e o quanto dá para confiar. Estes são os componentes da camada de marca: o que aparece em site, landings, slides e no chrome dos produtos. Componente interno de produto fica no produto.

Stable em produção com valores medidos. Beta implementado em um lugar, pode mudar. Proposta só documentado.

Regras comuns

• Só tokens semânticos e de componente. Nenhum hex.
• Todo estado interativo tem default, hover, focus-visible, active e disabled.
• Foco é sempre focus.outline com focus.offset.
• Alvo de toque mínimo de 44 por 44px em mobile.
• Transições usam motion.duration.*; nada anima sob prefers-reduced-motion.
• Texto vem de props ou i18n, nunca fixo no componente.

Critérios para entrar no índice

Detalhe completo em como contribuir.

Componentes · Atom

Ação principal ou secundária. Um primário por bloco; o resto é secundário ou link. Implementado em website/src/style.css como .btn-primary e .btn-secondary.

<button class="btn-primary" type="button">Falar com a Sunny</button>

Variantes

Sem variante destrutiva na camada de marca. Produto que precisar usa color.status.error.* e documenta no próprio DS.

Estados

Tamanhos

Small só no header e em contextos densos. Alvo de 44px em mobile: o Default já cumpre; o Small precisa de padding extra abaixo de breakpoint.md.

Anatomia

Altura: 48px default, 40px small  ·  Padding: 14px 32px  ·  Radius: radius.md, 4px  ·  Gap ícone e texto: space.2, 8px

• Display inline-flex, align-items: center.
• Radius radius.md. Não usar pill em botão.
• Ícone, quando houver, 16px, à esquerda do texto, em currentColor.
• Largura mínima natural. fullWidth só em mobile abaixo de breakpoint.md.
• Transição: fundo em motion.duration.base, transform em motion.duration.fast.

Uso

<a class="btn-primary" href="#contato">Falar com a Sunny</a>
<a class="btn-secondary" href="#pilares">Conheça nossos pilares</a>

.btn-primary {
  background: var(--sunny-button-primary-bg);
  color: var(--sunny-button-primary-fg);
  padding: var(--sunny-button-padding-y) var(--sunny-button-padding-x);
  border-radius: var(--sunny-button-radius);
  font-size: var(--sunny-button-font-size);
  font-weight: var(--sunny-button-font-weight);
}
.btn-primary:hover { background: var(--sunny-button-primary-bg-hover); }

Acessibilidade

Contraste medido

Checklist

• Texto diz o que acontece: "Falar com a Sunny", não "Enviar" ou "Clique aqui"
• Indicador de foco visível, 2px âmbar com offset 2px
• Ícone sempre acompanhado de texto ou aria-label
• Estado disabled comunicado visualmente e via ARIA
• Alvo mínimo de toque 44 por 44px em mobile
• Responde a Enter e Space

Componentes · Atom

Rótulo curto acima de um título ou ao lado de um item: categoria, novidade, status neutro. Não é botão e não é filtro. Implementado como .badge.

Anatomia

Tipo: type.overline, Inter 600, 12px, caixa alta, letter-spacing 0.08em, line-height 1  ·  Padding: 6px 16px  ·  Radius: radius.full

• Display inline-flex. Com ícone: 12px à esquerda, gap space.1.
• Sem borda. Sem sombra. Sem hover: badge não é interativo.

Uso

<span class="badge">Solution Provider</span>
<span class="badge badge-success">Ativo</span>

Acessibilidade

• Contraste medido: âmbar sobre badge sobre card, 9.4:1
• Caixa alta é feita por CSS. O HTML fica em caixa normal, para o leitor de tela ler palavras e não letras
• Status nunca só por cor: o texto diz o estado
• Badge decorativo que repete o título recebe aria-hidden="true"

Componentes · Molecule

Superfície que agrupa título, texto e, às vezes, uma ação sobre um mesmo assunto. Um card é um bloco de leitura, não um botão gigante. Implementado como .pillar-card, .service-card e .product-card.

<article class="pillar-card">
  <h3>Observabilidade</h3>
  <p>O RootPilot lê métricas, logs e custos…</p>
</article>

Tipos

Anatomia

• Fundo card.bg. Borda card.border, 1px branco a 4%. Radius card.radius, 12px.
• Padding card.padding, 32px, em .service-card e .product-card. Em mobile, space.6, 24px.
• O .pillar-card usa 48px 32px, medido. Diverge do token e ainda não foi decidido se o token sobe ou se o card desce.
• Ordem interna: ícone ou glifo 40px, título type.heading-5, texto type.body em text.secondary, ação.
• Gap entre título e texto space.3; entre texto e ação space.6.
• Sem sombra em repouso.
• Faixa de acento de 3px no topo: existe, medida em 14/09/2026. O .pillar-card usa um dos três amarelos por posição; o .product-card usa --accent, injetado inline por produto. A documentação anterior afirmava que a faixa não existia, e estava errada.

Estados

Glass

Sobre glow ou imagem, o card vira glass: fundo alpha.white-4, backdrop-filter: blur(var(--sunny-card-blur)), mesma borda. Texto sempre text.primary, porque o fundo varia. Ative o controle no playground acima para ver.

Grid

Quatro colunas em desktop, duas abaixo de breakpoint.lg, uma abaixo de breakpoint.md. Gap space.6. Cards da mesma linha têm a mesma altura.

Acessibilidade

• Título do card é heading real, na hierarquia da página
• Card inteiramente clicável é um único <a> com o título como texto principal. Nada interativo dentro dele
• Contraste medido: texto principal sobre card 12.3:1, secundário sobre card 5.1:1

Componentes · Atom

Campo de texto de uma linha com rótulo acima e mensagem de erro abaixo. Implementado em sovereign.css e rootpilot.css como .lead-field. Único formulário do site: captação de lead.

<div class="lead-field">
  <label for="email">E-mail corporativo</label>
  <input id="email" name="email" type="email"
         autocomplete="email" placeholder="voce@empresa.com.br" required />
</div>

Anatomia

Estados

Variantes

Só texto de uma linha hoje: nome, e-mail, empresa, telefone. Textarea, select e checkbox são proposta. O checkbox de consentimento do formulário já existe como .lead-check, com foco visível por focus.outline na caixa.

Acessibilidade

• <label for> sempre, mesmo com placeholder. Placeholder não é rótulo
• autocomplete correto em cada campo: name, email, organization, tel
• Inválido: aria-invalid="true" e aria-describedby apontando para a mensagem
• A mensagem diz o que fazer, não só "inválido"
• Erro nunca só por cor: a borda vermelha vem com texto
• Foco: a borda âmbar dá 9.9:1 sobre o fundo e substitui o outline. Se o fundo mudar, voltar ao focus.outline

Contraste medido

Componentes · Atom

Link de navegação principal no header. Também cobre o seletor de idioma. Implementado como .nav a e .lang-toggle.

"Produtos" está no estado ativo e "Serviços" no estado hover, forçados para a vitrine.

Anatomia

• type.label: Inter 500, 14px. Cor nav.link.fg.
• Gap entre itens nav.gap, 32px.
• Sublinhado animado: pseudo-elemento de 2px em accent.default, 4px abaixo do texto, cresce de 0 a 100% da largura em motion.duration.base.

Estados

Seletor de idioma

Pill com borda border.strong, texto type.overline sem caixa alta forçada, ícone de globo 14px. Hover: borda e texto âmbar. É um <button> com aria-label dizendo o idioma de destino: "Switch to English" quando em pt-BR.

Mobile

Abaixo de breakpoint.md, o header vira um botão hambúrguer com aria-expanded e o menu abre em painel com bg.header e blur. Itens ficam em coluna, type.body-lg, com alvo de 44px.

Acessibilidade

• <nav aria-label="Principal"> envolvendo a lista
• Links são <a href> reais; troca de idioma é <button>
• Contraste medido: link sobre header 13.0:1
• Skip-link antes do header, visível ao receber foco, com fundo âmbar

Componentes · Organism

Barra fixa do site. Logo à esquerda, navegação com o CTA, e à direita o seletor de idioma e, no mobile, o botão de menu. Transparente no topo, opaca e com blur depois de rolar.

Estado rolado

header.*

ProdutosServiçosSobre

Fale conosco

Anatomia

• position: fixed no topo, z-index: 100. Padding vertical space.4 (16px), conteúdo em container de 1200px com space.6 (24px) nas laterais. Perto de 73px de altura, calculado.
• Logo: Logo Hor White, 28px de altura, link para a home. No rodapé, 22px. Hoje é PNG; o SVG está em assets/v4/.
• Navegação: itens de Nav item com nav.gap (32px). O CTA é .btn-primary compacto, padding 10px 24px e 0.813rem, dentro do <nav>.
• Ações: seletor de idioma e, abaixo de 768px, o botão de menu, com gap space.4.

Estados

Fundo e blur fazem transição em motion.duration.slow; a borda entra sem transição. O ink a 98% do painel mobile não tem token.

Mobile

Abaixo de breakpoint.md (768px), hambúrguer de três barras de 24×2px que vira X ao abrir. O painel ocupa a tela, com itens em coluna, gap de 32px e texto de 20px. Clicar em um link fecha o menu.

Acessibilidade

• Skip-link "Pular para o conteúdo" antes do header, para #main-content. Desce para 16px do topo no foco, fundo amber.500, texto amber.900.
• <header role="banner"> e <nav aria-label="Navegação principal">.
• Logo com alt="Sunny Systems". O link da home ainda não tem aria-label; o padrão de Logo pede "Sunny Systems, página inicial".
• O Logo Hor White passa sobre o header nos dois estados. O Hor Color some no escuro.
• O CTA é o único botão primário da barra.

Pendências

• Trocar o PNG do logo pelo SVG.
• Os atributos width do logo no HTML (180 e 140) não batem com a largura renderizada, perto de 107 e 84px.
• A home não marca o item ativo da navegação com aria-current.
• Confirmar no navegador se o backdrop-filter do estado rolado prende o painel mobile à altura do header.

Componentes · Molecule

Número de destaque com rótulo curto, em uma faixa âmbar. Um stat não é um gráfico: é um número que o leitor guarda.

Vitrine com o rótulo já corrigido para text.on-accent sólido. O site usa amber.900 a 65% ou 70%, que falha AA. Ver Acessibilidade.

Anatomia

• Faixa: color.amber.500 com gradiente animado até amber.600. Padding vertical de 80px, 60px no mobile.
• Número: Bricolage Grotesque 700, line-height 1, text.on-accent.
• Rótulo: Inter 500, space.2 abaixo do número.

As landings não concordam entre si nos breakpoints. Alinhar é pendência.

Estados

Nenhum. O stat não é interativo. Na home e no RootPilot o número conta de 0 até o valor em 1,8s quando aparece na tela, uma vez só, e não conta sob prefers-reduced-motion: reduce.

Regras

• Número com unidade e contexto: "5 min de MTTR típico em incidente", não "5". Nunca abreviar como "48.2k".
• Faixa âmbar, texto escuro. Número e rótulo em text.on-accent.
• A variante com número âmbar sobre fundo escuro não existe no código. Se for desejada, entra como proposta.

Acessibilidade

• Número: 7.9:1 sobre amber.500 e 6.3:1 sobre amber.600. Passa.
• Rótulo falha AA. A 65% dá 3.5:1 e 3.2:1; a 70%, 4.0:1 e 3.5:1. Texto de 13 a 14px pede 4.5:1. Correção: text.on-accent sólido.
• O título da faixa da home está fixo em inglês, "The Sunny Facts", inclusive no aria-label. Deve vir do i18n.

Componentes · Molecule

Janela falsa que emoldura uma saída de terminal ou um relatório. Serve para dizer “isto é output real de ferramenta”, não para ser interativo: nenhum dos três dots faz nada.

$ scopeward audit
# 80 checks, 0 falhas

$ sunshine report
# custo por nó, 30d

Os três dots

São posicionais, não semânticos: esquerda, meio e direita de um chrome de janela. Fecham nada, avisam nada, confirmam nada.

Reusar as cores de feedback aqui não contraria a regra da decisão 0004 de que âmbar nunca significa estado. Essa regra vale para o que comunica estado ao usuário; o dot do meio não comunica nada. O proibido continua sendo o inverso — âmbar dizendo “atenção” numa mensagem real.

Anatomia

Barra: padding 11px space.4, borda inferior 1px branco 5%  ·  Dots: terminal.dot-size (11px), radius.full, gap 7px  ·  Corpo: JetBrains Mono 0.8rem (12,8px), line-height 1.75, padding space.6, medido no ScopeWard  ·  Janela: radius.lg, borda color.alpha.white-6, sombra shadow.elevation.lg

• A variante quente não é decoração: terminal.bg-warm é um preto com âmbar dentro, e trocá-lo pelo neutro muda a página de forma perceptível (ΔE 5.2 no corpo, 7.6 na barra).
• Use a neutra por padrão. A quente só onde o fundo da página já é quente — hoje, só o Sunshine.

Uso

<div class="term">
  <div class="term-bar" aria-hidden="true">
    <span class="term-dot"></span>
    <span class="term-dot"></span>
    <span class="term-dot"></span>
  </div>
  <pre class="term-body">$ scopeward audit</pre>
</div>

Acessibilidade

• Os três dots são decorativos: aria-hidden="true" na barra. Um leitor de tela não deve anunciar “vermelho amarelo verde” antes do conteúdo
• Contraste medido do texto primário sobre o corpo: 14.2:1 na neutra, 14.1:1 na quente. Os dois passam AAA
• Barra e corpo se separam por 1.09:1 (neutra) e 1.04:1 (quente) — por isso a borda inferior da barra é obrigatória: é ela que dá o limite, não a diferença de fundo
• O corpo é texto de verdade, nunca imagem de texto. Saída longa rola no corpo, não na janela

Padrões

Acessibilidade

WCAG 2.1 nível AA em tudo que a Sunny publica. Não é polimento: par de cor que falha não vira token, componente sem foco visível não entra no índice.

Contraste mínimo

Texto grande é 24px, ou 19px em bold.

Checagem automática

node tokens/check-contrast.mjs lê os tokens semânticos e falha o PR se um par obrigatório não atinge o mínimo. Resultado em setembro de 2026: todos passam.

Pares proibidos

Medidos e reprovados. Não usar como texto.

Em fundo claro, âmbar em texto é sempre amber.800. Sobre botão âmbar, texto é sempre amber.900.

Limites conhecidos

• Card sobre fundo tem 1.1:1. A borda border.subtle é o único limite visual e não pode ser removida.
• Borda do seletor de idioma tem 1.5:1. Aceitável porque o botão tem texto. Não reutilizar em controle sem texto.
• Placeholder de input fica abaixo de 4.5:1. Aceitável porque placeholder não é conteúdo; o rótulo é.

Checklist geral

Vale para qualquer página, slide exportado para web ou e-mail.

• Contraste de texto e ícone conforme a tabela
• Navegação completa por teclado, na ordem visual
• Foco sempre visível: focus.outline 2px âmbar, offset 2px
• Skip-link antes do header
• Todo controle com rótulo; ícone sem texto com aria-label
• Estado nunca só por cor: ícone ou texto junto
• Formulário com label for, autocomplete, aria-invalid e aria-describedby
• Imagem informativa com alt que descreve; decorativa com alt=""
• Logo com alt="Sunny Systems"
• <html lang> correto e atualizado ao trocar idioma
• Um h1 por página, hierarquia sem pulos
• prefers-reduced-motion desliga partículas, tilt, parallax, shimmer e contadores
• Zoom a 200% sem perda de conteúdo
• Reflow a 320px sem scroll horizontal
• Alvo de toque de 44px em mobile
• Vídeo e GIF de demo com descrição textual ao lado

Faça e evite

Padrões

Voz

Como a Sunny Systems escreve. Vale para site, landings, propostas, e-mails, posts e mensagens de produto.

Princípios

Idioma

pt-BR é o idioma primário. Inglês é a versão alternativa do site e de materiais para parceiros globais. Termos técnicos consagrados ficam em inglês: observability, FinOps, platform engineering, on-premises. Não traduzir "deploy" nem "pipeline". Traduzir "monitoring" para monitoramento e "cost" para custo.

Evite e prefira

Exemplos

Nomes

• Sunny Systems, sempre com S maiúsculo nos dois, nunca "Sunny" sozinho em texto institucional. "Sunny" sozinho só em conversa informal e no wordmark.
• Produtos: RootPilot, ScopeWard, DevXOS, Sunshine, Soberania de IA. Grafia fixa, sem espaço, sem hífen.
• Tagline: "Seu parceiro estratégico em tecnologia, do produto à operação." Em inglês: "Your strategic partner in technology, from product to operations."

Microcopy de produto

• Botão diz o que acontece: "Falar com a Sunny", não "Enviar"
• Erro diz o que fazer: "Digite um e-mail válido", não "Campo inválido"
• Estado vazio diz o próximo passo, em uma frase
• Número sempre com unidade e período: "R$ 48,2 mil este mês", não "48.2k"

Governança

Como contribuir

Fluxo para mudar ou adicionar algo na marca: token, componente, regra ou asset. Sem SLA de revisão nem reunião fixa.

Fluxo

1. Já existe? Procure neste guia e no tokens.json. Se existe, use como está. Não sobrescreva com estilo local.
2. É ajuste ou é novidade? Ajuste de valor medido errado, texto ou exemplo: abra PR direto. Cor, fonte, componente, regra ou mudança visual grande: abra uma decisão primeiro, com contexto, opções e recomendação.
3. Faça no token, não no CSS. Se a mudança é de valor, ela entra em tokens.json, roda o build e o check de contraste, e o tokens.css gerado vai junto no PR.
4. PR para main com um approval de alguém com contexto de marca. Mudança visível para usuário avisa no PR o que muda na tela e onde.
5. Registre. Mudança que altera decisão anterior ganha uma nova decisão, nunca edita a antiga.

Critérios de entrada

Regra nova entra se resolve uma dúvida que apareceu de verdade. Regra preventiva vira ruído.

Checklist do PR

• node tokens/build.mjs rodou e tokens.css está atualizado
• node tokens/check-contrast.mjs passa
• Nenhum hex novo fora de tokens.json
• Texto em pt-BR, sem travessão em prosa
• Se muda visual: screenshot ou link antes e depois
• Se muda decisão: arquivo novo em decisoes/
• CHANGELOG.md dos tokens atualizado, se tocou em token

O que fica fora deste repositório

• Componentes internos de produto: tabelas, gráficos, drawers do Sunshine. Ficam no produto, consumindo tokens daqui.
• Copy final de marketing.
• Configuração de build dos sites.

Governança

Versionamento e adoção

O pacote tokens/ segue Semantic Versioning. A versão fica em tokens/CHANGELOG.md. Hoje: 0.2.0.

Semver dos tokens

Mudança de status de um token, de proposta para medido, é PATCH se o valor não mudou e MINOR se mudou.

Maturidade

Breaking change

Nunca sem alternativa. Token renomeado mantém o nome antigo como alias por uma MAJOR inteira, no bloco de compatibilidade do tokens.css. Mudança visual grande é avisada no PR antes de mergear, não só no changelog.

Plano de adoção pelo site

A migração é em três passos, sem big bang. Os passos 1 e 2 estão feitos desde o website#14, em 15/09/2026. O passo 3 está em andamento.

1. Copiar (feito) o tokens.css para o site e importar antes do style.css. O bloco de compatibilidade garante que --color-amber, --space-lg e os demais nomes atuais continuem funcionando. Nada muda na tela.
2. Remover (feito) os :root duplicados de style.css e dos seis CSS de produto. Os --sev-* do ScopeWard passam a vir do tokens.css.
3. Trocar (em andamento) gradualmente os nomes antigos pelos semânticos novos, arquivo por arquivo, e apagar o bloco de compatibilidade na MAJOR seguinte.

Depois do passo 1, este repositório é a origem. O site consome uma versão fixa e atualiza por PR.

Sunshine e outros produtos

Mesmo caminho, com um passo extra: mapear os tokens OKLCH do Sunshine app para os semânticos daqui. O radius contido da V4 é a diferença mais visível e pede uma decisão antes da adoção.

Governança

Quem procurar

Direcione a dúvida por assunto. Assíncrono, por PR ou issue no repositório.

Este quadro reflete setembro de 2026, quando há um mantenedor. Ao entrar mais gente, atualize aqui e no CODEOWNERS no mesmo PR.

Perguntas frequentes

Referência

Decisões

Registro append-only de decisões de marca. Uma decisão nunca é editada depois de aceita. Se muda, entra uma nova que substitui a anterior e aponta para ela.

Formato: NNNN-titulo-curto.md com as seções Status, Contexto, Decisão, Consequências e Alternativas. Status possíveis: Proposta, Aceita, Substituída por NNNN, Rejeitada.

O que está em aberto agora

Referência

História da marca

Quatro identidades em cinco anos. Saber o que ficou para trás evita trazer de volta um amarelo aposentado.

O que sobreviveu às quatro versões

O sol e o amarelo. Tudo o mais mudou: a fonte, a forma do símbolo, o tom do amarelo, o idioma. Por isso a regra de não criar um quinto tom.

Referência

Fontes da verdade

Em caso de divergência, a fonte da verdade vence, nesta ordem.

Links

Para agentes e LLMs

O mesmo conteúdo desta página existe em markdown, gerado das mesmas fontes. Um agente que precise escrever código ou texto na marca deve ler isso em vez de raspar o HTML.

Os dois primeiros são gerados por node site/build.mjs a partir de tokens/tokens.json e de docs/. Não há cópia escrita à mão: se um valor muda no token, ele muda nos três arquivos no mesmo comando.

Os cinco produtos

RootPilot, ScopeWard, DevXOS, Sunshine e Soberania de IA. Grafia fixa, sem espaço, sem hífen. Nenhum tem cor própria hoje: ver decisão 0005.