00 · Visão Geral

Design System

Painel único que apresenta todos os elementos do sistema para auditoria rápida. Funciona como índice visual e prova de coerência: marca, cor, tipografia, fundações, componentes.

01

Brand

A marca Comunidade de IA é monolítica. Wordmark único, símbolo circular para usos compactos, quatro variações de lockup. Detalhes em F4.2.

F4.1

Arquitetura

Modelo monolítico, 4 pilares.

 F4.2

Logos & Símbolos

Wordmark, ícone, lockups.

 F4.5

Aplicação

Princípios + sistema gráfico.
02

Color

Verde-IA (#00A994) como cor de assinatura. Tinta (#1A1A1D) e papel (#FFFFFF) carregam o restante. Escala de acento em sete passos, dez neutros, quatro tons semânticos.

Verde-IA#00A994
Tinta#1A1A1D
Papel#FFFFFF
Snow#FAFAFB
03

Typography

Space Grotesk para Display e títulos > 20px. Inter para body e UI. JetBrains Mono para código e metadados técnicos. Pesos limitados: 400, 500, 600, 700.

04

Foundations

F3.1

Spacing

Escala 4px · 12 patamares.

 F3.2

Type Scale

11 patamares · clamp().

 F3.5

Radii

5 raios · hairline-first.

 F3.6

Elevation

3 níveis · sombra tingida.

 F3.7

Motion

3 durações · 1 easing.

 F3.8

Iconography

Lucide · 24px · 1.5px.
05

Components

21 blocos canônicos: do botão à linha separadora. Cada componente vive em página própria com anatomia, variantes, estados, código e acessibilidade.

06

Patterns

7 composições recorrentes: sticky banner, paletas de cor, formulário, busca, filtros, sticky card, tile. Padrões aglutinam componentes em cenários.