Aplicando a marca nos projetos
Todo projeto com a cara da Supporte deve usar os assets do repositório oficial de marca: github.com/supportelogistica/brand. Não recrie logos nem escolha cores parecidas de memória — copie do repositório.
O que tem no repositório
| Pasta | Conteúdo |
|---|---|
logo/ | Logo em 4 versões (fundo claro, fundo escuro, monocromáticas), SVG e PNG |
simbolo/ | O símbolo "PP" isolado |
favicon/ | Favicons por ambiente: produção, homolog, localhost |
fontes/ | Titillium Web, Fira Sans e Fira Code em woff2, com o fontes.css pronto |
tokens/ | Tokens de design: supporte.css (CSS vars), supporte.json e preset Tailwind |
grafismos/ | Detalhes de canto para composição de páginas |
Cores oficiais
A marca tem três cores. Só três.
- Chumbo
#58595B - Laranja
#F37021 - Branco
#FFFFFF
Os tokens trazem escalas derivadas (chumbo-100, laranja-600 etc.) para superfícies, bordas e estados de hover — use-as na UI, mas lembre que elas não são cores de marca.
Fontes
- Titillium Web — títulos e números de destaque
- Fira Sans — texto corrido, interfaces e formulários
- Fira Code — código e dados monoespaçados
As três são self-hosted (arquivos woff2 no repositório). Não use Google Fonts para servi-las: copie os arquivos para o projeto.
Como aplicar num projeto Nuxt com Tailwind v4
O preset Tailwind do repositório é da v3. Na v4, os tokens viram um bloco @theme no seu CSS principal:
@import 'tailwindcss';
@import './fonts.css';
@theme {
--font-titulo: 'Titillium Web', 'Segoe UI', sans-serif;
--font-sans: 'Fira Sans', 'Segoe UI', sans-serif;
--font-mono: 'Fira Code', 'Cascadia Code', monospace;
--color-laranja-500: #f37021;
--color-laranja-600: #d95e12;
--color-chumbo-700: #58595b;
/* escalas completas: veja o repo supplog ou docs como referência */
}
Os repositórios supplog e docs já fizeram essa migração — copie o app/assets/css/main.css de um deles como ponto de partida.
Dica para o Claude
No início da sessão, diga algo como:
Use a identidade visual do repositório https://github.com/supportelogistica/brand — clone e copie os tokens, fontes e logos de lá. Não invente cores.
O repositório tem um AGENTS.md com regras que o próprio Claude sabe ler.