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 |
| --cinza-calango | #6B5F47 | Cinza Calango | Meta, captions, eyebrows |
| --lpub-ink-80 | #33322D | Ink 80 | Body secondary |
| --lpub-ink-60 | #6B5F47 | Ink 60 · alias de Cinza Calango | Compat — prefira --cinza-calango |
| --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
Slash Heading
Título de abertura de página. Estrutura editorial em três partes — Lead · Slash · Echo — com ritmo próprio do L/PUB. Lead afirma (bold, Preto Lina); Slash separa (bold, Vermelho MASP, glifo literal em General Sans); Echo ressoa a afirmação em tom qualificado (italic 500, Cinza Calango). Usado no h1 único do hero de cada página.
Four fronts/authorial and automated integration.
--preto-lina--vermelho-masp--cinza-calango| Token | Value | Uso |
|---|---|---|
| font-size | clamp(40px, 5.5vw, 80px) | Escala unificada do hero (/work, /frentes, /studio, /contact) |
| font-weight (lead / slash) | 700 | General Sans Bold |
| font-weight (echo) | 500 | General Sans Italic |
| line-height | .95 | Compressão editorial |
| letter-spacing | -0.03em | Exceto no slash (0) |
| slash margin | 0 .06em | Respiro estável ao redor do glifo |
- 1 por página — sempre no hero, nunca em h2+.
- Slash é glifo literal General Sans (
/). Nunca SVG, nunca/, nunca desenhado. Mesma disciplina do wordmark. - Echo sempre em
<em>— herda italic e pode receber line-break opcional (<br />entre slash e echo) para layouts 2-linhas. - Não aplicar em eyebrows, metadados ou body — essas áreas seguem o padrão mono
// label. - Cores não-negociáveis: Lead =
--preto-lina, Slash =--vermelho-masp, Echo =--cinza-calango. Não inverter, não substituir.
<h1 class="slash-heading">
<span class="slash-heading__lead">Four fronts</span><!-- lead -->
<span class="slash-heading__slash">/</span><!-- slash -->
<em class="slash-heading__echo">authorial and automated integration.</em><!-- echo -->
</h1>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 |