Creativity with soul for the future now.
O sistema de design da L/PUB codifica o Manual de Identidade Visual v1.0 em tokens, componentes e padrões reutilizáveis. Foi feito para manter fidelidade editorial entre as quatro frentes — BRAND, ADS, LAB, OS — sem sacrificar velocidade operacional.
Foundations
Decisões de baixo nível que tudo o resto herda — paleta, tipografia, espaçamento, grid e movimento. São os únicos níveis em que tokens novos podem ser introduzidos; todo o resto compõe a partir daqui.
Colors
- Vermelho MASP — máx 10% da superfície, nunca isolado, nunca com amarelo.
- Verde MK27 — aplicar com 3 camadas de compensação visual (hierarquia, tipografia, espaço).
- Creme-niemeyer #F2EADB foi descontinuado em abril/2026. Substituído por Off-white L/PUB.
Color tokens
| Token | Value | Name | Role |
|---|---|---|---|
| --preto-lina | #1A1915 | Preto Lina | Texto, fundo escuro, wordmark |
| --off-white | #F2F1EC | Off-white L/PUB | Surface padrão |
| --vermelho-masp | #AA3D2F | Vermelho MASP | Acento ADS · max 10% |
| --ocre-totora | #A6632A | Ocre Tótora | Acento LAB |
| --verde-mk27 | #3D4737 | Verde MK27 | Acento OS |
| --lpub-ink-80 | #33322D | Ink 80 | Body secondary |
| --lpub-ink-60 | #6B5F47 | Cinza-médio | Meta, captions |
| --lpub-ink-20 | #C9C3B8 | Ink 20 | Borders emphasized |
| --line-1 | rgba(26,25,21,.12) | Hairline | Default border |
Typography
- Família
- Sans-serif editorial
- Pesos
- 400 · 500 · 600 · 700
- Cobertura
- ~95% do sistema
- Usos
- Wordmark, títulos, body, legendas
- Licença
- ITF Free Font License
- Família
- Monospaced
- Pesos
- 400 · 500
- Cobertura
- ~5% do sistema
- Usos
- Metadados //, rodapés, contadores, interface OS
- Licença
- SIL Open Font License 1.1
Type scale
Spacing & Grid
Escala baseada em múltiplos de 4 px. Grid default de 12 colunas com gutter 24 px em viewports ≥ 1024 px; 4 colunas / 16 px em mobile. Padding interno de seção: 60/80 px.
| Token | px | rem | uso típico |
|---|---|---|---|
| --sp-1 | 4 | 0.25 | micro-gap inline |
| --sp-2 | 8 | 0.5 | ícone ↔ label |
| --sp-3 | 12 | 0.75 | padding pequeno |
| --sp-4 | 16 | 1 | padding base |
| --sp-5 | 24 | 1.5 | grid gutter |
| --sp-6 | 32 | 2 | seção compacta |
| --sp-7 | 48 | 3 | entre subsections |
| --sp-8 | 64 | 4 | section padding |
| --sp-9 | 96 | 6 | section padding · display |
Motion
Quieta, curta e linear-ish. Sem overshoot, sem bounce. Fades e pequenos translates dão ritmo sem distrair da leitura editorial.
Wordmark
A marca é sempre renderizada como texto em General Sans Bold — a barra / é um glifo literal, nunca um SVG, nunca uma barra desenhada. A/B/O são letras do logotipo.
Quatro frentes complementares
Marca-mãe única. Cada frente herda todo o sistema e acrescenta apenas uma cor de acento e um sufixo no eyebrow.
Identidade e sistemas visuais
Naming, arquitetura, manuais, sistemas de marca.
Publicidade e performance
Campanhas, conteúdo, narrativa editorial.
Projetos especiais
Sinalização, wayfinding, ativações físicas.
Sistemas com IA
Pipelines, agentes, brand.json, operação.
Voice & Tone
Editorial, autoral, preciso. Escreve como direção criativa, não como marketing. Português é padrão; inglês reservado a tagline e rodapés internacionais. Metadados sempre prefixados com // — é a voz do sistema.
✓ Fazer
- Sentence case em botões, títulos e nav.
- Em-dash para apostos. Aspas tipográficas.
- Eyebrows mono com tracking 0.14–0.18em.
- Datas em mono:
04 · 2026. - Primeira do plural em notas editoriais.
× Não fazer
- Emoji em nenhum contexto.
- "Ops!" / "Algo deu errado" em erros.
- CAPS LOCK fora de eyebrows mono.
- Primeira pessoa do singular em UI.
- Tom promocional ou coloquial.
Barra / economy
Patterns
Composições recorrentes. Cada padrão combina componentes e tokens das seções anteriores. Usar os padrões direto, sem reinventar — a consistência entre peças é o que carrega a voz.
Metadata lines
// Anatomia
// formato // <label> · <valor> · <data> // tracking 0.1–0.18em · mono · uppercase só em eyebrow
Do & Don't — global
✓ Fazer
- Hierarquia por peso, tamanho e espaço — nunca por cor nova.
- Off-white como default; Preto Lina para alto contraste.
- Um acento por peça, no máximo.
- Metadados mono com
//. - Texto renderizado — nunca imagem do logo.
× Não fazer
- Gradientes coloridos, glow, neumorfismo.
- Vermelho MASP + amarelo em nenhum contexto.
- Ícones decorativos onde metadata resolve.
- Rounded corners acima de 8 px.
- Sombras grandes ou coloridas.
Governance
O sistema é versionado como código. Quebras em tokens ou componentes requerem bump de major; novos tokens, um minor; correções, um patch. Toda mudança passa por Direção Criativa antes de publicar.
Changelog
#F2EADB (creme-niemeyer) por Off-white L/PUB #F2F1EC.Owners & contribution
| Área | Owner | Escopo |
|---|---|---|
| Foundations | Almir Lira | Cor, tipografia, espaço, motion |
| Brand | Almir Lira | Wordmark, voz, barra, frentes |
| Components | Direção Criativa + Engenharia | UI patterns, código React/CSS |
| Patterns | Direção Criativa | Layouts recorrentes, tom |
| L/PUB · OS | Engenharia | brand.json, pipelines, agentes |
Resources
| Arquivo | Propósito |
|---|---|
| colors_and_type.css | Tokens canônicos + classes semânticas (pronto para produção) |
| Wordmark.html | Lockups oficiais (120/64/24 px + inverso) |
| assets/miv-v1.html | Manual de Identidade Visual v1.0 — fonte da verdade |
| assets/playbook-visual.html | Playbook de aplicações por frente |
| fonts/_inline-fonts.css | General Sans + JetBrains Mono embedados (base64) |
| SKILL.md | Instruções para agentes (Claude, brand.json) |
| README.md | Overview textual do sistema |