Guia de implementação para o app TERPIA

Início rápido

Dois arquivos CSS resolvem 90% do trabalho: tokens (cor, tipografia, espaçamento) e componentes (botões, badges, formulário, cards). Copie a pasta assets/fonts/ e assets/css/ inteira para o projeto.

1. Importar na ordem certa

<link rel="stylesheet" href="assets/css/tokens.css" />
<link rel="stylesheet" href="assets/css/components.css" />
<!-- seu CSS de tela/produto entra depois destes dois -->

2. Estrutura de pastas esperada

projeto/
├── assets/
│   ├── fonts/        → TrajanPro3-*.otf + DMSans-*.woff2
│   ├── css/
│   │   ├── tokens.css      → cor, tipografia, espaçamento, raio, sombra
│   │   └── components.css  → botão, badge, form, card, topbar
│   └── logos/        → ver seção "Ativos de marca"
└── ...

3. Regra de ouro

Nunca escrever um valor de cor, espaçamento ou raio direto no CSS de tela — sempre var(--token). Se o valor que você precisa não existe em tokens.css, é sinal de que precisa ser adicionado lá (e validado com quem cuida da marca) antes de virar um valor solto espalhado pelo código.

Cores

Clique em qualquer cor abaixo para copiar o hex. Todas já estão em tokens.css como custom properties — use sempre a variável, nunca o hex direto.

Paleta

Quando usar cada uma

Tipografia

Duas fontes, licenciadas e auto-hospedadas — sem Google Fonts, sem CDN externo de terceiros.

@font-face (já em tokens.css)

@font-face {
  font-family: "Trajan Pro 3";
  font-weight: 600;
  src: url("../fonts/TrajanPro3-Semibold.otf") format("opentype");
}
/* + 200 (ExtraLight), 300 (Light), 400 (Regular) — ver tokens.css */

Regras não-negociáveis

• Trajan Pro 3 não tem peso Bold (700) licenciado. Pesos válidos: 200, 300, 400, 600. Nunca aplique font-weight:700 nela nem deixe o navegador gerar negrito sintético.
• Trajan Pro 3 é só para títulos de destaque — nunca para parágrafo, botão, label ou qualquer texto de UI funcional.
• DM Sans é a fonte de interface — corpo, botões, formulários, navegação, tudo.

Uso em CSS

.titulo-destaque {
  font-family: var(--font-display);
  font-weight: 600; /* nunca 700 */
}
.texto-ui {
  font-family: var(--font-sans);
}

Espaçamento, raio e sombra

O projeto não usa uma escala numérica de espaçamento (tipo 4/8/16px) — os valores de raio e sombra são tokenizados; espaçamento interno de componente é definido por componente (ver exemplos de código em cada seção abaixo).

Raio de borda

Sombra

Breakpoints & layout

O app não é um mockup de celular numa página — é responsivo de verdade, com duas molduras de navegação que trocam no mesmo breakpoint.

Padrão de media query

/* mobile-first: escreva o CSS base para mobile, então sobrescreva para desktop */
@media (min-width: 900px) {
  /* layout desktop: sidebar visível, grid de 2-3 colunas */
}

Movimento & acessibilidade

Tokens de movimento

Obrigatório: tokens.css já zera as durações via @media (prefers-reduced-motion: reduce) — nunca remova esse bloco, e nunca crie uma animação com duration hardcoded fora dos tokens acima (ela não vai respeitar essa preferência).

Foco visível

Todo elemento interativo precisa de estado de foco visível — :focus-visible já vem estilizado globalmente em tokens.css (contorno dourado). Não remova o outline sem substituir por algo igualmente visível.

Contraste

Botões

Classe base .btn + um modificador. Nunca estilizar um <button> do zero — sempre compor com estas classes.

<button class="btn btn-primary">Falar com a equipe</button>
<button class="btn btn-outline btn-sm">Ver detalhes</button>
<button class="btn btn-primary btn-block" disabled>Enviando…</button>

Badges

Para status e categorização curta — nunca para texto de leitura, só rótulo.

<span class="badge badge--gold">Em análise</span>
<span class="badge badge--complete">Concluído</span>

Formulário

<div class="form-field">
  <label for="nome">Nome completo</label>
  <input id="nome" type="text" />
</div>

<!-- estado de erro: adicionar .has-error no wrapper e .is-invalid no input -->
<div class="form-field has-error">
  <input class="is-invalid" />
  <div class="error-msg">Mensagem de erro</div>
</div>

Cards

<div class="card">
  <strong>Consulta médica</strong>
  <p>Avaliação individual para definição do tratamento.</p>
</div>

Topbar

Referência do cabeçalho fixo já usado no protótipo do app — reaproveitar em vez de recriar.

<header class="topbar">
  <div class="topbar__brand">
    <img src="imagens/logo-horizontall-para-fundo-escuro.png" alt="TERPIA" />
    <span class="topbar__tag">Assessoria Canábica</span>
  </div>
</header>

Ativos de marca

Local canônico dos arquivos: Brand-guideline/imagens/. Não recriar, não exportar de novo a partir de captura de tela.

Logo vertical — fundo claroimagens/logo-vertical-para-fundo-claro.png

Splash screen, telas de onboarding, capa de documento.

Logo vertical — fundo escuroimagens/logo-vertical-para-fundo-escuro.png

Sobre --green-forest ou fundos com luminosidade abaixo de ~40%.

Logo horizontal — fundo escuroimagens/logo-horizontall-para-fundo-escuro.png

Topbar do app, cabeçalho fixo.

Símbolo isolado — fundo claroimagens/simbolo-claro.png

Favicon, ícone de app (fallback), avatar.

Ícone transparente (todo dourado) — para fundo escuroimagens/icone-tranparente-para-fundo-escuto.png

Fundo alfa-transparente — para sobrepor em foto, splash animado ou qualquer fundo escuro variável.

Ícone transparente (dourado + verde) — para fundo claroimagens/icone-transparente-para-fundo-claro.png

Fundo alfa-transparente — para sobrepor em foto clara ou fundo claro variável.

Tamanho mínimo

Assinatura completa: 160px digital / 35mm impresso. Símbolo isolado: 32px digital / 10mm impresso. Abaixo disso, usar sempre o símbolo isolado, nunca espremer a assinatura completa.

Checklist antes de sair para produção

Contato

Dúvida sobre um token que falta, uma cor "quase certa" que você precisa, ou uma exceção de layout: confirme com o guardião da marca antes de decidir sozinho por conveniência de prazo.