RÉGUA — VISUAL SYSTEM v1.0
Regra central: nenhum elemento visual entra sem função.
01. Essência visual
RÉGUA existe para provar mudança, não para parecer moderna. O sistema traduz o método — medir, intervir, comparar, evidenciar — em elementos gráficos funcionais. Cada forma representa um estado ou uma relação entre estados; nada é decorativo.
02. Arquitetura da identidade
LOGO = wordmark RÉGUA + É proprietário (fixo). SISTEMA = Marco Zero, Baseline, Range, Delta, Gate, Evidência, Unknown — vocabulário visual usado fora da logo, em produto, documentos e apresentações. A logo declara a marca; o sistema declara o método em uso.
03. Logo
Wordmark RÉGUA em IBM Plex Sans, peso 500–600. Intervenção proprietária exclusiva no acento do É (mais longo, mais espesso, mesmo ângulo natural da fonte). Não redesenhar. Cor apenas brand.primary ou branco sobre fundo escuro. Área de proteção mínima = altura da letra R. Abaixo de ~20px de altura de caixa alta, usar a marca responsiva É isolada.
04. Uso do É proprietário
Único elemento gráfico exclusivo da marca. Usos válidos: (a) dentro do wordmark completo; (b) isolado, como favicon, avatar, app icon. Uso inválido: bullet de lista, ícone decorativo, substituto de qualquer símbolo do sistema.
05. Marco Zero
■──────────── — quadrado sólido + linha fina. Representa o ponto em que uma referência foi estabelecida. Pertence ao sistema, não à logo. Usar para abrir uma seção de dados ou o início de uma comparação. Cor: brand.primary ou text.primary. Não usar brand.accent no marco, exceto quando o próprio marco for a evidência marcada.
06. Baseline
Linha simples ───────, sem marco. Representa o estado registrado antes da intervenção. Espessura stroke.hairline, cor border.default ou text.secondary. Nunca na mesma espessura de stroke.emphasis.
07. Range
|────────| — dois traços verticais finos delimitando um intervalo medido. Usar em gráficos e tabelas para mostrar o intervalo entre dois pontos (ex.: baseline → estado atual). Nunca decorativo.
08. Delta
Representação numérica de mudança (ex.: -38%). Sempre número, nunca seta. Cor: status.critical para queda que exige atenção, status.success para melhora, text.primary quando neutro. Nunca brand.accent.
09. Gate
Marca textual de checkpoint (ex.: GATE 01). Label uppercase, peso 600, tracking aberto (letter-spacing: 0.06em). Sinaliza um ponto de decisão humana no processo — nunca título decorativo.
10. Evidência
Tag VERIFIED: fundo status.verified (#C97A2E), texto #17150F (nunca branco pequeno sobre âmbar). Uso exclusivo: medição confirmada com dado real. Âmbar nunca significa "novo", "destaque" ou warning genérico.
11. UNKNOWN
Texto/tag em status.unknown (#8C8578), peso 500, sem ênfase adicional. Representa ausência legítima de evidência — não é erro. Nunca usar status.critical para UNKNOWN.
12. Cores
| Token | Hex |
|---|---|
| brand.primary | #1C1B19 |
| brand.primaryDark | #0E0D0C |
| brand.primaryLight | #4A4844 |
| brand.accent | #C97A2E |
| surface.background | #FAF8F5 |
| surface.primary | #FFFFFF |
| surface.secondary | #F0EDE8 |
| text.primary | #17150F |
| text.secondary | #5C574C |
| border.default | #DAD5CC |
| status.success | #4C7A4A |
| status.warning | #9A6B1F |
| status.critical | #9C3B2E |
| status.unknown | #8C8578 |
| status.verified | #C97A2E |
Nenhuma cor fora desta lista deve aparecer em nenhuma superfície da marca.
13. Tipografia
Única família: IBM Plex Sans. Pesos permitidos: 400, 500, 600, 700.
| Estilo | Tamanho | Peso | Uso |
|---|---|---|---|
| Display | 56px | 600 | Capas, hero |
| H1 | 40px | 600 | Título de página |
| H2 | 28px | 600 | Título de seção |
| H3 | 22px | 600 | Subtítulo |
| Body Large | 18px | 400 | Introdução, lead |
| Body | 15px | 400 | Corpo padrão |
| Body Small | 13px | 400 | Notas, legendas longas |
| Label | 12px | 600 | Uppercase, tracking 0.06em |
| Data Large | 32px | 600 | Métrica em destaque, tabular |
| Data | 15px | 500 | Valores em tabela, tabular |
| Caption | 11px | 400 | Rodapés, fontes de dado |
14. Grid
12 colunas para superfícies largas (documentos, dashboards, web). Gutter = space.5 (24px). Margem externa mínima = space.7 (48px) em desktop, space.5 em mobile. Layouts de card usam múltiplos de space.4 (16px) como módulo.
15. Spacing
Base 4px: space.1=4, space.2=8, space.3=12, space.4=16, space.5=24, space.6=32, space.7=48, space.8=64, space.9=96.
16. Bordas
stroke.hairline=1px (linhas de sistema: baseline, range), stroke.default=1px (bordas de card/tabela), stroke.emphasis=2px (uso raro, ênfase de Gate ou Marco Zero em contexto de destaque). Marco Zero e elementos do Sistema de Referência usam sempre espessura controlada — nenhuma linha decorativa gratuita.
17. Radius
radius.none=0, radius.small=2px, radius.medium=4px. Sem pill como padrão. Pill (radius.pill) somente em tags de status, quando semanticamente necessário.
18. Cards
Fundo surface.primary, borda border.default em stroke.default, radius.small, padding mínimo space.5. Marco Zero opcional no canto superior esquerdo quando o card representa uma métrica com referência estabelecida.
19. Dados e números
Usar estilos Data Large / Data. Tabular figures sempre que a fonte suportar. Números alinhados à direita em tabelas. Delta sempre ao lado do valor atual — nunca o substitui.
20. Status
success, warning, critical, unknown, verified são semanticamente distintos e não intercambiáveis. warning ≠ evidência: âmbar (verified) é reservado exclusivamente à confirmação de medição.
21. Documentos
Fundo surface.background. Corpo em text.primary. Títulos H1/H2, peso 600. Marco Zero abre seções de dados. Sem cor decorativa fora dos tokens de status.
22. Apresentações
Capas em brand.primaryDark ou surface.background. Um dado em destaque por slide. Gate usado para marcar decisões dentro do deck.
23. Interfaces
Superfícies em surface.primary / surface.secondary. Âmbar reservado a estados verified. Botão primário padrão usa brand.primary — nunca âmbar.
24. Website
Mesma disciplina de interfaces. Hero pode usar brand.primaryDark. Wordmark sempre em brand.primary ou branco — nunca em âmbar.
25. Uso incorreto
- Âmbar como cor de destaque genérica, CTA padrão ou "warning".
- Marco Zero como bullet decorativo.
- Seta substituindo Delta numérico.
- Radius pill fora de tags de status.
- Qualquer sombra, gradiente ou fonte fora de IBM Plex Sans.
- Recolorir, reproporcionar ou redesenhar o É proprietário.
- UNKNOWN tratado visualmente como erro/crítico.