EVO

Recursos

Para desenvolvedores

Tudo que um time de produto precisa para aplicar a marca em web, apps e documentos: tokens em JSON e CSS, sprite de ícones, brandbook navegável e o pacote completo em ZIP.

Pack completo

ZIP com brandbook, tokens, logos, ícones, brandbook em HTML e assets.

Baixar

evo-tokens.json

Design Tokens Community Group format. Fonte da verdade do sistema.

Baixar

evo-tokens.css

Custom properties prontas para importar em qualquer stack.

Baixar

Brandbook (HTML)

Documento navegável com todas as seções do design system.

Baixar

Sprite de ícones

12 ícones em um único arquivo SVG com <symbol id> para <use>.

Baixar

Camadas do sistema

Componentes consomem tokens semânticos. Primitivos alimentam apenas os semânticos. É esse contrato que permite tema claro/escuro e os cinco modos de expressão sem trocar código de componente.

1

Primitivos

Cores brutas da marca. Nunca use direto na UI.

2

Semânticos

bg, fg, action, feedback — o que a UI referencia.

3

Componentes

Botão, campo, card. Só falam com semânticos.

Snippets rápidos

Importar tokens CSS
@import "./evo-tokens.css";

.btn {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border-radius: var(--radius-md);
}
Consumir no React
import tokens from "./evo-tokens.json";

const navy = tokens.brand.navy.$value; // "#081680"
const feedbackSuccess = tokens.semantic.light.feedback.success.fg;
Tailwind (v4) — @theme
@theme inline {
  --color-primary: var(--evo-navy);
  --color-accent:  var(--evo-cyan);
  --font-sans:     var(--evo-font-text);
  --font-mono:     var(--evo-font-mono);
}
Fontes no <head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap">