# Bora — Style Reference > Meia-noite azul com uma faísca laranja: tudo em degradê frio, e um único ponto quente que diz onde clicar. **Theme:** dark O canvas é um navy quase preto puxado para o azul, e toda superfície elevada é o mesmo navy um degrau acima, separada por borda de 1px em vez de sombra. Nada é chapado: herói e chamada usam degradê de superfície, e a expressão em destaque é texto com degradê recortado, do azul claro ao azul da marca. Os azuis não são escolha de gosto — saíram de uma paleta de referência e da foto de perfil do João, onde o tom dominante é `#186CF0`. O laranja é o único calor da paleta e por isso nunca decora: ele marca a ação que a página quer, uma por tela. A coluna de leitura trava em 68ch e o ritmo vem de uma escala de base 4. ## Tokens — Cores | Nome | Valor | Token | Papel | |---|---|---|---| | Navy | `#020925` | `--navy` | Fundo da página e do rodapé. Nunca em texto, nunca em borda. | | Navy alto | `#08123A` | `--navy-alto` | Superfície elevada: card de post, bloco de código, citação. | | Navy borda | `#16224F` | `--navy-borda` | Borda de 1px, régua, divisória do topo. Nunca preenche área. | | Azul | `#186CF0` | `--azul` | O azul da foto do João. Preenchimento e borda de elemento de interface, e fim do degradê de destaque. Nunca em texto corrido: dá 4.16:1, passa em elemento grande mas não em parágrafo. | | Azul fundo | `#0052C0` | `--azul-fundo` | Fim de degradê e estado pressionado. Só em fundo, nunca em texto. | | Azul claro | `#B0D7F8` | `--azul-claro` | Link dentro de texto, marcador de lista, código inline. 13:1 sobre o navy. | | Laranja | `#FE5102` | `--laranja` | A ação principal: botão da comunidade e o "Ler o post" do card. Uma por tela. Nunca em texto corrido, nunca em borda decorativa. | | Laranja alt | `#FF7A29` | `--laranja-alt` | Só o começo do degradê do botão. Não existe sozinho. | | Branco | `#F8F8F8` | `--branco` | Título e texto corrido. | | Cinza | `#A9B6D4` | `--cinza` | Texto secundário: subtítulo, resumo de card, parágrafo de apoio. | | Cinza fraco | `#7182AB` | `--cinza-fraco` | Legenda, metadado, rodapé, botão desabilitado. Piso: 5.13:1, não usar abaixo de 14px. | ## Tokens — Degradês O dono pediu degradê, então ele é peça do sistema e tem lugar marcado. Fora destes três, não existe. | Token | Valor | Onde | |---|---|---| | `--grad-destaque` | `linear-gradient(100deg, #E4F0FF, #9CC8FA 42%, #2F82F5 78%, #186CF0)` | Só na expressão em Rigter dentro de `h1`/`h2`, recortado no texto. | | `--grad-superficie` | `linear-gradient(165deg, #0A1540, #050D2E 55%, #020925)` | Fundo do herói e do bloco de chamada. Em mais nada. | | `--grad-laranja` | `linear-gradient(135deg, #FF7A29, #FE5102)` | Botão da ação principal. | | `--grad-azul` | `linear-gradient(135deg, #186CF0, #0052C0)` | Botão secundário, como o de copiar o prompt. | Degradê de destaque precisa de plano B: onde `background-clip: text` não existe, o texto volta a ser `--azul-claro` chapado. ## Tokens — Tipografia ### Rigter — logo e destaque - **Arquivo:** `/fonts/rigter.woff2`, 22 KB, servida do próprio domínio e pré-carregada no ``. - **Substituta:** `ui-sans-serif`, `system-ui`, `sans-serif` - **Peso:** 400, o único que existe. 29px no logo. - **Tracking:** −0.01em. - **Cobertura:** 231 glifos, acentuação do português completa. Foi o critério que a descartou a Groote demo, que tem 93 glifos e nenhum acento. - **Quebra de linha:** a expressão em destaque dentro de `h1` não quebra (`white-space: nowrap`). Abaixo de 640px a trava sai, senão estoura a tela. - **Teto de uso:** no máximo três palavras por tela, e só em `h1`, `h2` ou na marca. Em parágrafo, lista, botão, legenda ou tabela, nunca. ### Figtree — texto corrido e títulos - **Substituta:** `ui-sans-serif`, `system-ui`, `sans-serif` - **Pesos:** 400 corpo, 500 metadado, 700 negrito e "Ler o post", 800 título - **Tamanhos:** 14px legenda, 15px navegação, 16px card, 18px corpo, 20px entrada, 21px h3, 26–34px h2, 38–60px h1 - **Altura de linha:** 1.7 no corpo, 1.5 na legenda, 1.2 em h2, 1.12 em h1 - **Tracking:** −0.005em no corpo, −0.02em em h3, −0.025em em h2, −0.03em em h1 - Abaixo de 640px o corpo cai para 17px e os títulos acompanham via `clamp()`. ## Tokens — Espaçamento e Raio Escala de base 4: `4, 8, 12, 16, 24, 32, 48, 64, 96` px (`--e1` a `--e9`). - Dentro de um componente, degraus vizinhos: `--e2` a `--e4`. - Entre parágrafos, `--e5`. Entre seções, `--e8` acima e `--e4` abaixo do título, para o título colar no texto que governa. - Pula-se degrau só ao trocar de nível: fim de seção para outra usa `--e9`. - Raio único de 10px. Botão usa 8px e código inline 5px, porque raio constante em elemento pequeno parece maior do que é. - Coluna de leitura: 68ch. Figura larga vai até 1040px e volta a 100% abaixo de 1100px. ## Componentes **Logo.** A palavra `Bora` em Rigter, 29px. No hover vira `--azul-claro`. Sem ícone, sem subtítulo, sem segunda palavra. **Botão de ação.** Fundo `--grad-laranja`, texto `--navy` em peso 800, 17px, padding `--e3 --e6`, raio 8px. Hover clareia 8% e sobe 1px. Texto escuro sobre laranja dá 5.98:1; texto branco daria 3.6:1 e reprovaria. Desabilitado vira `--navy-borda` com `--cinza-fraco`, ganha `aria-disabled="true"` e perde o `href`. **Card de post.** Fundo `--navy-alto`, borda 1px, raio 10px, padding `--e5`. Hover troca a borda para `--azul` e sobe 2px. O card inteiro é clicável, e o "Ler o post" em laranja abre a distância da seta no hover. Card futuro usa borda tracejada, opacidade .6 e não se move. **Figura.** Largura total, borda 1px, raio 10px, `loading="lazy"` e `width`/`height` declarados. Legenda 14px `--cinza-fraco`. Todo `alt` descreve o que se vê. **Bloco de prompt.** Cabeçalho com rótulo e botão Copiar em `--grad-azul`, corpo em `pre` com teto de 520px e rolagem própria. **Navegação do topo.** Fixa, fundo do navy a 96% com desfoque de 12px, borda inferior de 1px, altura mínima de 64px. **Favicon.** O `B` da Rigter extraído como vetor, preenchido com degradê `#B0D7F8 → #186CF0` sobre navy. É a letra da fonte, não um desenho parecido. ## Regras de composição - Uma coluna. Sem sidebar, sem grid de duas colunas em artigo. - Máximo de 68ch por linha. Só figura e bloco de código passam disso. - Uma expressão em Rigter por bloco de título, no máximo três palavras. - Um laranja por tela. Se aparecer um segundo, um dos dois não é a ação principal. - Foco sempre visível: contorno de 2px em `--azul-claro`, 3px de afastamento. - Movimento some inteiro sob `prefers-reduced-motion`. - O botão da comunidade lê o endereço de uma constante única em `js/portal.js`. Vazio, ele se desliga sozinho. ## Proibido - Rigter em texto corrido, botão, legenda, lista ou tabela. - `--azul` ou `--laranja` como cor de texto em parágrafo. Para link, `--azul-claro`. - Degradê fora dos quatro tokens. Nada de gradiente inventado na hora. - Sombra para separar superfície. Aqui o que separa é borda de 1px. - Dois laranjas na mesma tela. - Emoji na interface. - Botão com `href="#"`. Ou o endereço existe, ou o botão está desligado. - Valor solto no CSS fora da escala de 4. - Texto secundário abaixo de 14px. ## Checklist 1. Quantas palavras em Rigter existem nesta tela? Mais de três, corrigir. 2. Quantos laranjas? Mais de um, corrigir. 3. Todo texto passa de 4.5:1 sobre o fundo? Todo elemento de interface passa de 3:1? 4. Algum degradê que não é um dos quatro tokens? 5. Alguma medida fora da escala de 4? 6. Toda imagem tem `alt` descritivo, mais `width` e `height`? 7. Existe algum `href="#"`? 8. Navegando só pelo teclado, dá para ver onde está o foco em todos os passos? 9. Em 390px de largura, alguma coisa rola na horizontal?