Vocabulário visual, de componentes e de conteúdo que opera o Peppe. Uma referência viva para quem projeta, escreve e constrói.
"Um design system não é projeto. É produto, servindo produtos." — Nathan Curtis, EightShapes. O Peppe Design System é a fonte da verdade para a materialização visual, comportamental e verbal do Peppe: cada token, componente e diretriz de conteúdo documentado aqui sustenta uma decisão de produto, não uma preferência estética.
O sistema se organiza em quatro camadas. Fundamentos reúne os tokens de cor, tipografia, espaçamento, sombra, raio, ícones e grade — os átomos de qualquer composição. Componentes documenta 11 peças de catálogo em três níveis de complexidade: primitives, containers e compositions. Content formaliza a voz, o tom e os anti-padrões textuais do Peppe. Material do projeto expõe os cinco documentos canônicos que governam as decisões de fundo.
Três princípios estruturantes atravessam todas as camadas:
Cada componente do catálogo é justificável a partir destes cinco princípios. Um componente que não se encaixa neles está errado — ou o manifesto precisa evoluir antes de ele entrar.
Off-white dominante, cinzas industriais e pareamento sans+serif disciplinado cobrem a maior parte da interface. Os tons terrosos retrofuturistas aparecem contidos em cards e ícones — nunca como fundo de tela. Quando a nota vira chão, a identidade se dilui.
A interface lê como um plano contínuo — não como teatro de camadas. Sombras são derivadas da cor do fundo, nunca preto puro. Direção de luz fixa do canto superior esquerdo. Sem backdrop-filter decorativo, sem transparência gratuita, sem cards aninhados além de dois níveis.
Humanização performada é anti-padrão — conforme argumentado em Humanizing AI Is a Trap (Caleb Sponheim, NN/g, 2026). O sistema privilegia resolver acima de parecer humano.
O Peppe trata interface como dado. Cada componente é descrito no backend como estrutura; o cliente é intérprete. A cena muda por contexto; a gramática permanece estável. Cada componente do catálogo separa slots semânticos, tokens visuais e diretrizes de conteúdo em contratos explícitos.
Cada componente declara no seu schema: rótulo (aria-label ou equivalente semântico), foco (ordem de tab, focus ring visível), contraste mínimo (WCAG AA) e fallback de canal. Acessibilidade assumida mas não declarada é incompleta.
O DS fala com três perfis — cada um com pontos de entrada distintos no catálogo.
Tokens são o vocabulário — todo valor visual parte deles. Componentes são o repertório de composição — use as variantes documentadas antes de propor uma nova. Quando uma superfície nova não se encaixar no catálogo existente, escale ao product-designer conforme documentation/WORKFLOW.md §3.3.1 antes de improvisar. Pares Do/Don't em cada componente respondem as dúvidas de calibragem mais comuns.
O schema semântico de cada componente é o contrato entre backend e frontend — slots mapeiam diretamente em props. O markup de referência ao final de cada página é o ponto de partida para implementação. Tokens CSS são consumidos diretamente de tokens/tokens.css; nenhum valor hex inline. Acessibilidade está declarada no schema: rótulo, foco e contraste já estão especificados.
O ponto de entrada é a seção Material do projeto — os cinco documentos canônicos (Manifesto, Briefing, Workflow, Jobs to be Done e Use Cases) estão acessíveis e navegáveis aqui. Para avaliar a coerência de uma superfície nova, os cinco princípios desta Overview são a régua. Uma superfície que não se justifica por eles precisa de revisão antes de entrar no catálogo.
v1 cobre 11 componentes de catálogo materializados (5 primitives, 3 containers, 3 compositions) e o primeiro surface template completo (Dashboard), com ProximateDueAlert em curadoria parcial. Os demais surface templates, variante V-B de Card, catálogo nomeado de ícones, motion e dark mode são v2+.
| Camada | Componente | Status | Artefato de referência |
|---|---|---|---|
| Primitives | Button (+ Tecla) | materializado | prototype/visual-reference/index.html §Ação |
| Chip | materializado (4 tones) | prototype/visual-reference/index.html §Cor |
|
| Icon | materializado (scaffold) | prototype/visual-reference/index.html §Ícones |
|
| Hairline | materializado | prototype/visual-reference/styles.css |
|
| SearchField | materializado (default) | prototype/visual-reference/index.html §Painel |
|
| Containers | Card | materializado (V-A); V-B contratado | prototype/visual-reference/index.html §Painel |
| CardGrid | materializado | prototype/visual-reference/index.html §Painel |
|
| SectionHero | materializado | prototype/visual-reference/index.html §Hero |
|
| Compositions | BalanceCard | materializado | prototype/visual-reference/index.html §Painel |
| CommitmentCard | materializado (× 3) | prototype/visual-reference/index.html §Painel |
|
| QuickActionsCard | materializado | prototype/visual-reference/index.html §Painel |
|
| Surface templates | Dashboard | materializado | prototype/visual-reference/index.html §Painel |
| Onboarding | contratado | — | |
| ConfirmationSignal | contratado | — | |
| ProximateDueAlert | parcial (card existe; fluxo contratado) | — | |
| DebtState | contratado | — | |
| SystemError | contratado | — | |
| EmptyState | contratado | — | |
| Celebration | contratado (depende lote 3 V-B) | — | |
| ViabilityAnswer | contratado | — | |
| WeeklyBrief | contratado | — | |
| CampaignSurface | contratado | — |
Fonte da verdade: documentation/MANIFESTO.md, documentation/BRIEFING.md, e os pares operacionais em .claude/ui-design/, .claude/content-design/, .claude/product-design/. Em conflito, os documentos-base prevalecem.
Atualizações seguem protocolo em WORKFLOW.md. Ver seção Material do projeto.