Design system
Um arquivo, a marca inteira.
O design system é o manual transformado em código. Cores, fontes, espaçamentos e componentes vivem em um único arquivo CSS, com os logotipos, selos e fontes ao lado. Toda página, formulário, sistema ou apresentação da Legado começa importando esse arquivo, e por isso sai com a mesma qualidade da marca.
Nada é definido com cor ou fonte solta: tudo aponta para os tokens. Trocar um valor no arquivo troca a marca inteira, em todas as peças.
Para a equipe e para as ferramentas de IA, existe a skill design-legado. Os componentes ficam na aba Componentes, que carrega estas regras e estes arquivos sempre que alguém pedir uma peça da Legado.
<!-- no <head> de qualquer página da Legado -->
<link rel="stylesheet" href="assets/legado.css">
<!-- seções declaram a superfície; os componentes se adaptam -->
<section class="lg-sec lg-escuro">
<div class="lg-in">
<span class="lg-eb">Para médicas e dentistas</span>
<h1 class="lg-h1">Sua excelência já <em>existe</em>.</h1>
<p class="lg-texto">Sua marca precisa torná-la reconhecível.</p>
<a class="lg-btn" href="/form">Quero conhecer o Método</a>
</div>
</section>
| Token | Valor | Uso |
|---|---|---|
| --bordo | #780016 | Fundo das seções principais. A cor da marca é chão, não acento. |
| --bordo-fundo | #6A0013 | Fundo da página e do topo fixo. |
| --noite | #350810 | Rodapé, seções de respiro escuro, cartões fechados, texto sobre gelo. |
| --gelo | #D0D0CF | Texto corrido sobre bordô; fundo das seções claras. |
| --gelo-claro | #F2F1EF | Títulos sobre bordô; fundo de cartões em seções claras. |
| --ouro | #C7B08E | Fios, ícones, marcadores, aspas. Nunca em texto pequeno. |
| --ouro-claro | #E9DECB | Rótulos e ênfases sobre bordô (contraste 9:1). |
| --ouro-escuro | #5E4A2C | Rótulos sobre gelo (contraste 5:1). |
| --metal | gradiente | Botão principal, cartão de destaque, marcadores de formulário. O dourado da marca nunca é chapado. |
| --d | Bodoni Moda | Títulos, citações, números de capítulo. Só peso 400; itálico para ênfase. |
| --s | Poppins | Texto (300), rótulos e botões (400) em caixa alta. Nenhum negrito. |
| --coluna · --gutter | 1200px · 20 a 48px | Largura da coluna e margem lateral, em .lg-in. |
Sempre
- Declarar a superfície da seção (
.lg-escuroou.lg-claro) e deixar os componentes herdarem as cores. - Um botão dourado por tela. O resto em linha fina ou vinho.
- Cantos retos em tudo: botões, cartões, campos, fotos. Só o selo é redondo.
- Logotipo e selo em PNG do pacote, com respiro igual à altura do laço do L.
- Texto corrido entre 15 e 17 px, entrelinha 1,75, coluna de até 62 caracteres.
- Fotos em retrato, luz natural, fundos calmos; preto e branco ou duotone bordô quando houver texto por cima.
Nunca
- Recompor o logotipo com fonte, ou repetir o floreio fora dele.
- Dourado chapado em áreas grandes, ou dourado em texto abaixo de 14 px.
- Negrito, sombras coloridas, cantos arredondados, degradês fora do metal.
- Branco puro como fundo de página. O claro da Legado é gelo.
- Mais de duas famílias tipográficas. Ícones coloridos ou emojis.
- Trocar um token por um valor solto. Se a cor não existe no sistema, não existe na marca.
O pacote
design-legado
Pasta pronta para copiar em qualquer projeto. Versão 1.0, outubro de 2026.
assets/legado.css· tokens, base e componentesassets/fonts/· Bodoni Moda 400 e itálico, Poppins 300 e 400assets/img/logo-{dourado,bordo,preto,branco}.png· logotipo, 1156×217assets/img/selo-{dourado,bordo,preto,branco}.png· selo, 671×670assets/img/simbolo-l-dourado.png· símbolo isolado, fundo transparenteSKILL.md· as regras desta página para a equipe e para as ferramentas de IA