Campos, textareas e superfícies neutras.
Identidade compartilhada · contratos universais
Foundations
Tokens e princípios mantêm significado, tipografia, espaço, forma, movimento, layout e acessibilidade coerentes — sem temas locais.
Cor
Camada 1 — primitivos são escalas cruas e fixas (a verdade física).Camada 2 — papéis semânticos dão significado e trocam entre claro/escuro.No produto, use sempre o papel — nunca o primitivo, nunca o hex.
Clique em qualquer amostra para copiar o
var(--token).
Alterne o tema no topo para ver os papéis trocarem ao vivo.Papéis semânticos — superfícies e conteúdo
Identidade, ação e interação
A identidade institucional do Baluarte é acromática.
O logo usa contraste neutro; azul comunica interação e foco.
Vermelho pertence somente a erro, perigo e ação destrutiva.
A identidade cromática é compartilhada por toda a família e não possui variações por produto.
Um azul, um contrato:
--accent é o papel canônico para interação, seleção e foco. --focus permanece apenas como alias de transição; marcas que definiam os dois seguem a matriz de adoção antes de remover o legado.Status semânticos
Primitivos — neutros quentes
Os neutros do Baluarte são levemente quentes e fazem parte da assinatura comum. Nenhum produto substitui esses papéis por uma paleta paralela.
Primitivos — espectro funcional
Categóricos (tags, gráficos, features)
Faça
Use papéis:
color: var(--text), background: var(--surface).
O tema escuro funciona sozinho.Não faça
color: #2c2c2b ou var(--b-neutral-800) direto no produto —
quebra o tema e a manutenção.Tipografia
Fonte oficial: Noto Sans (variável), com fallbacks Noto para árabe, japonês, coreano e chinês — o suporte multilíngue é parte da identidade. Ícones são Phosphor, carregados localmente em Regular, Bold e Fill.
A escala operacional continua densa entre 11–24px, mas os papéis editoriais agora chegam a 64px. O crescimento não adiciona tinta indefinidamente: displays estabilizam em peso 500, títulos usam 550 e o peso light 370 fica reservado à leitura contínua.
A referência OpenAI foi medida em seis páginas e dois viewports: 64/500, 48/500 e 30/500 formam o padrão editorial; no mobile, os degraus convergem sem inverter. O Baluarte destila essa proporcionalidade com Noto Sans local, sem copiar fonte, identidade ou CSS externo.
.b-display-2xl · 32–64/500Consistência é gentilezalandmark editorial.b-display-xl · 32–48/500Consistência é gentilezahero institucional.b-display-lg · 28–40/500Consistência é gentilezahero de produto.b-display · 28–32/500Consistência é gentilezatítulo de página.b-headline · 28/500Consistência é gentilezadestaque interno.b-title-lg · 24/550Consistência é gentilezaseções grandes.b-title · 20/550Consistência é gentilezatítulos de card/modal.b-title-sm · 18/550Consistência é gentilezasubtítulos.b-subtitle · 16/500Consistência é gentilezacabeçalhos menores.b-body-lg · 15/455Consistência é gentileza com quem usa e com quem mantém.leitura confortável.b-body · 14/455Consistência é gentileza com quem usa e com quem mantém.corpo padrão do sistema.b-body-light · 14/370Consistência é gentileza com quem usa e com quem mantém.leitura contínua.b-body-sm · 13/455Consistência é gentileza com quem usa e com quem mantém.densidade máxima.b-label · 13/500Rótulo de controlebotões, campos.b-caption · 12/400Legenda, metadado, timestampapoio.b-overline · 11/600Categoria · SeçãoagrupadoresProporcionalidade óptica. Entre 28 e 64px, o peso fica em 500; a hierarquia vem de tamanho, leading e tracking. Em 320/390px, papéis podem empatar para proteger reflow, mas nunca inverter.
PT-BR · displayUma ambição que acompanha o produtotracking −0,02emárabe · displayتصميم واضح يخدم الجميعleading 1,20 · tracking normaljaponês · displayすべての人に明快な設計leading 1,20 · tracking normalTipografia de brand
A marca não herda a escala de títulos nem a escala de corpo. Nome e descritor formam um conjunto próprio, com peso 500 constante e diferença produzida por tamanho, cor e line-height — nunca por densidade adicional.
--b-brand-name-size · 18/500/22Baluartenome institucional--b-brand-descriptor-size · 14/500/20Material Designdescritor da marcabrand lockupBaluarteMaterial Designum peso, duas escalasEscala e densidade são eixos independentes. O lockup usa tokens exclusivos: 18px e 14px, ambos em peso 500. A hierarquia vem da escala e da cor sem misturar a marca com títulos de produto.
Sem meios-pixels. O legado tinha 14.5/13.5/12.5px — no Baluarte,
snap para 14/13/12. Diferença imperceptível; grade preservada.
Espaçamento
Ritmo destilado do uso real: base-2 até 12px (a faixa densa que domina o produto) e base-4/8 acima.
Layout e espaçamento usam os tokens da escala.
Valores ópticos como 7, 9, 13, 17 ou 25px só podem surgir como resultado geométrico de borda + padding nos contratos de perímetro auditados; não são novos tokens de spacing.
--b-space-12px--b-space-24px--b-space-36px--b-space-48px--b-space-510px--b-space-612px--b-space-716px--b-space-820px--b-space-924px--b-space-1032px--b-space-1140px--b-space-1248px--b-space-1364pxRitmo do menu lateral: itens consecutivos mantêm gap 0; a caixa de título de 24px mantém 10px até a primeira superfície por
--b-nav-title-content-gap; grupos irmãos recebem 20px por --b-nav-section-gap. O inset do título é 10px por --b-nav-title-inset, e sua cor usa --nav-section-title com contraste mínimo de 4,5:1.Shape
Raio + curva + papel semântico
Shape não é apenas um valor de border-radius.
O Baluarte combina raio e curva em quatro categorias: rounded rectangle, squircle, pill e circle.
Squircle identifica controles e superfícies que respondem diretamente à ação.
A assinatura é ampla, mas preserva formas canônicas.
Quatro categorias oficiais
Controles e superfícies interativas de alta confiança.
Chips, tags e filtros compactos.
Avatares, radios, indicadores e Icon Buttons em composições radiais governadas.
Aplicações promovidas
Baluarte
Começar Visão geralSistema FoundationsComponentesFrame 260px, header 54px, itens 36px, ícones 20px, inset 7px e Squircle 16px; grupos respiram 20px, título e primeiro destino mantêm 10px e os títulos usam contraste secundário acessível; no rail, todos os ícones primários persistem mesmo se o grupo estava fechado, e o controle contextual aparece no hover/foco.
Button permanece squircle; Icon Button pode usar Circle quando o contexto radial estiver explícito.
Container squircle com borda reforçada e ação circular a 9px da direita/base, estável em todos os estados.
Controle contextual do rail
O controle preserva a identidade do produto e reduz ruído visual.
Em desktop com mouse, o Sidebar Simple Regular aparece somente quando o rail expandido recebe hover ou quando o controle recebe foco.
No rail colapsado, a marca do produto ocupa o mesmo centro e só é substituída pelo comando quando o próprio controle recebe hover/foco; mover o ponteiro pelos vazios do rail mantém o logo, embora clicar ou tocar nesses vazios também expanda a navegação.
w-resize em LTR.
e-resize em LTR.| Papel | Desktop fine | Coarse | Contrato |
|---|---|---|---|
| Frame expandido | 260px | 260px | Divisor de 1px e header de 54px |
| Frame colapsado | 49px | 49px | 48px internos + divisor 1px; eixo fixo em 24px |
| Superfície do controle/item | 36 × 36px · insets 6px | 44 × 44px · insets 2px | Squircle 16px; Sidebar Simple Regular 20px, logo 32px e fallback Fill 24px no mesmo eixo 24px |
| Comando | ph ph-sidebar-simple · 20px | igual | O nome acessível e o cursor comunicam abrir/recolher; RTL inverte apenas o cursor |
| Marca textual | 18px/500/22 + 14px/500/20 | igual | Escala própria de brand, separada de títulos e corpo |
Identidade provisória: sem logo oficial, escolha um Phosphor Fill de 24px que represente inequivocamente o domínio — nunca um símbolo genérico. O fallback usa a cor de conteúdo do tema, permanece sem fundo e recebe nome acessível pelo botão. O runtime também o revela quando o asset falha e restaura o logo após uma carga válida.
Abrir contrato completo do shell de produto →
Cobertura expandida sem ruptura
- Core: nav item, menu item, card interativo, account, entity item, radio row, picker, paginação e ação do toast.
- Padrões: file tile/card, ferramentas independentes, fontes/links e composer.
- Portal: destination cards, previews do catálogo, ações de copiar/limpar e swatches copiáveis.
- Protegidos: inputs e superfícies neutras continuam rounded; chips e progresso continuam pill; avatares, radios, indicadores e Icon Buttons contextuais aprovados continuam circle.
Evidência real: o portal registra navegador, versão, suporte CSS, fallback simulado, forced colors e todos os interativos — inclusive sem raio — em
reports/squircle-audit-v1.5.md.Escala de fallback
Quando corner-shape: squircle não estiver disponível, o mesmo papel mantém seu raio arredondado. A geometria muda por capacidade do navegador, nunca durante hover ou seleção.
4px8px12px16px24pxpillcircleConvergência de raios legados
A migração escolhe primeiro a categoria semântica e depois o degrau oficial. Não crie um novo token para preservar 6px, 10px ou outro valor intermediário.
| Legado | Destino v1.5 | Critério |
|---|---|---|
| 0–5px | --b-radius-xs · 4px | detalhe mínimo |
| 6–9px | --b-radius-md · 8px | controle compacto |
| 10–13px | --b-radius-xl · 12px | navegação e superfície pequena |
| 14–19px | --b-radius-2xl · 16px | controle e card interativo |
| 20–31px | --b-radius-3xl · 24px | composer e superfície ampla |
| cápsula / 999px | --b-radius-pill | chip, tag ou progresso |
| 50% com lados iguais | --b-radius-circle | papel circular permitido |
FaçaUse os tokens semânticos de shape e mantenha a curva estável entre estados.
Não façaNão transforme chips em squircle, avatares em rounded rectangle nem anime a forma no hover.
Elevação
Cinco níveis compartilhados cobrem cards, menus, painéis flutuantes e modais sem um salto excessivo entre painel e overlay.
elevation-1cards, inputs
elevation-2menus, hover elevado
elevation-3toasts, painéis
elevation-4painéis flutuantes
elevation-5modais, drawers
Gaussian para superfícies sticky
O shell usa vidro funcional moderado: fundo semitransparente, blur de 20px e saturação 1,12. Ele substitui a linha horizontal do header, mas nunca o divisor estrutural entre navegação e conteúdo.
| Token | Valor | Uso |
|---|---|---|
--b-effect-gaussian-blur | 20px | headers sticky e superfícies de vidro governadas |
--b-effect-gaussian-saturation | 1,12 | preserva legibilidade sem efeito vítreo excessivo |
Abrir contrato normativo de elevação → · Abrir contrato de Gaussian →
Motion
O sistema é rápido e discreto: micro-interações em 120ms dominam.
Easing padrão é o uso dominante do sistema — cubic-bezier(.4, 0, .2, 1).
| Token | Valor | Uso |
|---|---|---|
--b-motion-instant | 70ms | feedback imediato (press) |
--b-motion-fast | 120ms | hover, foco, toggles — o padrão do sistema |
--b-motion-base | 160ms | transições comuns de estado |
--b-motion-gentle | 220ms | menus, painéis, tooltips |
--b-motion-slow | 300ms | modais, canvas, layout |
shell colapsável | 160/60ms · 220/200+140ms | layout/texto no fechamento · layout/texto+delay na abertura |
--b-ease-standard | ease | padrão do sistema (51× no CSS real) |
--b-ease-emphasized | cubic-bezier(.4, 0, .2, 1) | movimentos maiores/expressivos |
--b-ease-decelerate | cubic-bezier(0, 0, .2, 1) | elementos entrando |
--b-ease-accelerate | cubic-bezier(.4, 0, 1, 1) | elementos saindo |
Respeite
prefers-reduced-motion: animações decorativas devem ser
desligadas quando o usuário pedir menos movimento.Iconografia
Phosphor 2.1 · práticas de símbolos inspiradas no Apple HIG
Phosphor é a única família de ícones de sistema. Regular, Bold e Fill são fontes locais derivadas do mesmo desenho; não há CDN, ligatura textual nem fallback de outra família. A caixa pertence ao Baluarte e o desenho pertence ao peso Phosphor correspondente.
Quatro caixas aprovadas
16px · compactChips, tabs densas e metadados.
20px · defaultBotões, menus, navegação e campos.
24px · largeHeaders e ações de destaque.
32px · displayEmpty states e specimens.
Regular, Bold e Fill
Estado pareado
Regular comunica repouso; Fill comunica seleção. O label, aria-current ou aria-pressed continua sendo a fonte semântica.
Ênfase controlada
Regular usa o desenho-base de 16 unidades de stroke; Bold usa a fonte desenhada em 24 unidades. Nunca simule peso com CSS.
Aplicação por contexto
| Contexto | Caixa | Peso | Variante |
|---|---|---|---|
| Menu, lista ou label | 20px | Regular | Outline |
| Toolbar compacta | 16–20px | Regular | Outline |
| Ação isolada de destaque | 20–24px | Bold somente com justificativa | Outline |
| Selecionado ou favorito | mesma caixa do repouso | mesmo papel | Fill |
| Empty state ilustrativo | 24–32px | Regular | Outline por padrão |
Práticas inspiradas nos símbolos da Apple
- Trabalhe com texto. Ícone e label são elementos separados, centralizados pela mesma caixa; o ícone não recebe
top, margem negativa outranslateY. - Preserve margens ópticas. A silhueta pode ocupar áreas diferentes dentro da caixa. Igualdade significa canvas, peso e alinhamento consistentes — não esticar todos os desenhos até a borda.
- Outline é o padrão. Fill fica reservado a seleção ou maior superfície semântica; tamanho, peso e fill não mudam simultaneamente.
- Peso acompanha hierarquia. Regular é o padrão e Bold é uma fonte desenhada, não um stroke artificial. A preferência por texto em negrito deve ser considerada nos produtos que a expõem.
- Direção é semântica. Setas de navegação podem espelhar em RTL; relógios, mídia, marcas e objetos físicos não são espelhados automaticamente.
- Nomeie pelo significado. O contrato usa um nome semântico estável e registra deprecações no de–para; não selecione um ícone apenas por semelhança visual.
- Acessibilidade não depende do desenho.Ícone acompanhado de texto usa
aria-hidden.Controle icon-only exige nome acessível.Cor ou Fill nunca são o único sinal de estado. - Alvo e glyph são diferentes. O ícone pode ter 16 ou 20px dentro de controles de 32, 40 ou 44px.
Contrato para ícone customizado
Somente crie um desenho quando o catálogo Phosphor não cobrir o conceito. Use viewBox 256, caps e joins arredondados, stroke 16 no Regular e 24 no Bold, margens compatíveis e versões Regular/Fill semanticamente equivalentes. A proposta precisa incluir nome, contexto, RTL, acessibilidade e teste a 16px.
Quatro classes de representação
Ação ou conceito funcional; sempre Phosphor.
Asset oficial do provider; nunca redesenhado como ícone.
Emoji, ícone ou imagem escolhida pelo usuário em container estável e caixa óptica equivalente.
Representa formato ou conteúdo; não é uma ação.
FaçaUse 16/20/24/32 tanto em
.b-icon quanto em .b-emoji; caixa fixa e nome acessível pertencem ao controle.Não façaNão misture famílias, não simule stroke, não use emoji como ação universal e não corrija alinhamento por deslocamento manual.
<span class="b-icon b-icon--sm ph ph-house" data-icon="home" aria-hidden="true"></span> <span class="b-icon ph ph-magnifying-glass" data-icon="search" aria-hidden="true"></span> <span class="b-icon b-icon--lg b-icon--strong ph-bold ph-gear-six" data-icon="settings" aria-hidden="true"></span> <span class="b-icon b-icon--lg b-icon--fill ph-fill ph-heart" data-icon="favorite" aria-hidden="true"></span> <span class="b-emoji b-emoji--lg" aria-hidden="true">🤖</span>
Abrir contrato normativo de iconografia →
Abrir matriz completa de migração Material Symbols → Phosphor →
Densidade · Modos de interação
coreO núcleo define três alvos de controle. Todos os produtos usam os mesmos modos por contexto e não criam alturas intermediárias ou escalas paralelas.
Compacto · 32px
Toolbars densas e desktop especializado, com alternativa de toque quando necessário.
Padrão · 40px
Botões, campos e controles gerais em interfaces produtivas.
Touch · 44px
Alvo mínimo para contextos móveis ou de baixa precisão.
Aplicação em Icon Button
A densidade controla alvo e glyph em conjunto: compact 32/16, default 40/20 e touch 44/24. Ênfase e seleção nunca alteram essas medidas. Theme switch e segmented são compound controls e seguem o componente pai.
Abrir taxonomia normativa de Icon Button →
Separação importante: densidade é uma decisão contextual. Um fluxo pode usar mais de um modo, desde que a escolha siga a mesma regra de contexto, coerência e acessibilidade.
Layout adaptativo
coreO sistema não impõe uma única largura para contextos diferentes. Ele fornece limites, receitas e regras responsivas comuns; medidas específicas precisam nascer como extensão governada, nunca como CSS privado.
Limites compartilhados
--b-layout-reading720pxLeitura contínua e documentação.--b-layout-content1120pxConteúdo de aplicação e grids.--b-layout-wide1280pxWorkspaces e dados densos.--b-layout-gutter16–32pxGutter fluido do viewport.Alinhamento ao perímetro
Quando um descendente é o último elemento visual antes de um canto, sua distância às arestas adjacentes deve ser igual. O alvo é delta geométrico zero; 0,1px CSS existe apenas como tolerância numérica de subpixel, a correção nasce de padding, tamanho e layout, nunca de deslocamento manual.
| Contrato | Arestas | Resultado |
|---|---|---|
| Composer / ações | laterais + base | 9px / 9px / 9px |
| Toolbar / fechar | topo + direita + base | 8px / 8px / 8px |
| File card / tile | topo + base + esquerda | 7px / 7px / 7px |
| Nav / item atual | topo + laterais | 9px / 9px |
| Dialog / danger | direita + base | 25px / 25px |
| Menu / primeiro ícone | topo + esquerda | 15px / 15px |
| Menu / superfícies extremas | topo + laterais + base | 7px / 7px / 7px |
| Picker / upload | laterais | 9px / 9px |
| Media Card / footer | laterais + base | 1px / 1px / 1px |
Não confunda os contratos: alinhamento de ícone e texto trata o conteúdo dentro do controle; alinhamento ao perímetro trata o controle ou tile em relação à borda da superfície externa.
Abrir checklist normativo de alinhamento →
Três receitas genéricas
Focused
Uma coluna principal com largura de leitura e ações próximas ao contexto.
App shell
Navegação persistente e conteúdo flexível; a largura responde aos tokens e limites compartilhados.
Split workspace
Conteúdo e painel contextual com reflow para overlay ou stack conforme espaço disponível.
Critérios de mudança estrutural
- Prefira container queries ou capacidade real do conteúdo a breakpoints herdados.
- Quando duas regiões não couberem, reflow antes de comprimir leitura ou área de toque.
- Sidebars, canvases e docks adicionais entram como extensões governadas e continuam obedecendo à assinatura da família.
- Valide 320px, 390px, tablet, desktop, zoom 200% e conteúdo longo.
Acessibilidade
Acessibilidade no Baluarte não é auditoria posterior — está embutida nos tokens.
Contraste (WCAG AA) — verificado por cálculo
| Par | Claro | Escuro | Status |
|---|---|---|---|
text / bg | 13.98:1 | 15.30:1 | AAA |
text-subtle / bg | 6.58:1 | 6.42:1 | AA |
text-muted / bg | 3.23:1 | 6.33:1 | claro: apenas texto grande/decorativo |
on-action / action | 13.98:1 | 15.30:1 | AAA |
on-accent / accent | 4.54:1 | 4.54:1 | AA |
on-danger / danger (fill) | 6.71:1 | 6.36:1 | AA |
accent (foco) / bg | 4.54:1 | 3.88:1 | ≥ 3:1 (UI) |
info / info-bg | 7.13:1 | 5.81:1 | AA |
success / success-bg | 6.60:1 | 6.79:1 | AA |
danger / danger-bg | 6.13:1 | 6.28:1 | AA |
warning / warning-bg | 6.86:1 | 9.21:1 | AA |
link / bg | 5.79:1 | 6.97:1 | AA |
Regra do muted:
--text-muted no tema claro é a cor
histórica do sistema (#8f8f8f) e passa apenas AA-large. Para texto secundário em tamanho
normal, use --text-subtle. Todo par novo deve ser validado por cálculo: ≥ 4.5:1.Foco visível
Campos de texto seguem o padrão do sistema: a borda "acende" em azul (border-color: var(--accent), 120ms) — sem anel/glow.
Demais interativos (botões, links, toggles) usam outline: 2px solid var(--accent) no :focus-visible.
Nunca remova o indicador sem substituto equivalente (contraste da borda de foco: 4.54:1 claro / 3.88:1 escuro — ≥ 3:1 exigido).