Único idioma de interface

1) O que é uma única linguagem de interface e o que é necessário

Uma única linguagem de interface é um sistema comum de conceitos, regras visuais e interações compartilhado por designers, engenheiros, analistas e autores de conteúdo.

• Coerência: os mesmos componentes e termos em produtos e comandos diferentes.
• Velocidade: Montagens rápidas, menos cólivares, mais rápido.
• Qualidade: Pattern UX consistentes, disponibilidade padrão.
• Escalabilidade: Evolução segura sem desintegração do zoológico UI.

2) Camadas de língua única

1. Tokens (cor, tipografia, dimensões, sombras, recuos, raios, animações).
2. Componentes (botões, campos de entrada, tabelas, gráficos, modais, brindes, chapas).
3. Pattern (formulários, validação, assistente passo a passo, listas/tabelas, notificações).
4. Conteúdo (microkopirating, terminologia, mensagens de erro).
5. Iconografia e ilustrações (família, estilo, tamanhos e linhas).
6. Disponibilidade e i18n/RENAULT (regras A11y, tradutividade, locais).
7. Processos (versões, áudios, ciúmes, linteres, vitrines e exemplos).

3) Design-token (base de expressão)

Os tokens são os valores citados, reutilizados em todos os produtos.

3. 1 Estrutura de tokens (exemplo)

json
{
"color": {
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"accent": { "primary": "#2F6BFF", "warning": "#FF9F1A", "critical": "#E53935", "success": "#2EAE60" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 },
"radius": { "sm": 8, "md": 12, "lg": 16, "pill": 1000 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "sm": 12, "md": 14, "lg": 16, "xl": 20 } },
"motion": { "duration": { "fast": 120, "base": 200, "slow": 320 }, "curve": { "inout": "ease-in-out" } }
}

3. 2 Naiming de tokens

De geral para privado, 'cor. accent. primary`, не `primaryBlue`.
Sem referência de marca em naiming (a marca é um assunto, não é o nome do token).
Gradações: 'fg. muted`, `fg. primary`, `fg. inverse`. Não codifique o brilho no nome («blue500») sem o sistema.

3. 3 Tópicos de token

Claro, escuro, contrastante, alterar os valores, não os nomes.
Temas - camada de redefinição, UI permanece consistente.

4) Componentes: contrato, estados, disponibilidade

Componente = visual + comportamento + contrato de props + A11y.

4. 1 Exemplo de contrato de botão

ts type ButtonProps = {
kind: "primary"      "secondary"      "tertiary"      "danger";
size: "sm"      "md"      "lg";
icon?: "plus"      "download"      "trash";
disabled?: boolean;
loading?: boolean;
ariaLabel?: string;
onClick?: (e: MouseEvent) => void;
};

Estados: 'default/hover/ativo/focus/disabled/loading'.
Disponibilidade: anel de foco, tamanho de meta ≥ 40-48 px, 'aria-pressed' para toggle.

4. 2 Garantias de componentes

Dimensões estáveis (line-height, paddings).
Disponibilidade da caixa (rolos/ária, teclado, contraste).
Invariantes: erro dentro do campo sempre abaixo e com 'aria-describedy'.

5) Pattern UX (lógica repetível)

Formulários: editora esquerda/superior, placeholder ≠ label, erros ao lado + no resumo, máscaras de entrada e dicas.
Modalks: um CTA principal, 'Esc' fecha, uma armadilha de truque, um foco voltado.
Tabelas/listas: triagem, título sticky, página, exportação.
Filtros: botão «Aplicar» explícito, redefinição, precondições salvas.
Notificações: tost ≤ 3-5 c, pausa no foco, 'role =' status/alert '.
Dashboards: top insights → contexto → gráficos → CTA.

6) Terminologia unificada e microopirataria

6. 1 Glossário

Use um único glossário de termos empresariais e UX. Cada artigo da interface faz referência a ele.
Para os suplentes, escolher uma palavra («carteira» vs «balanço»), e a segunda, como sinônimo na pesquisa.

6. 2 Regras de texto

Breve e no caso; evitar o jargão.
Erros - explicar o que fazer: «Especifique uma data em formato de GGG-MM-DD».
Títulos: substantivos; botões - verbas (Salvar, Cancelar).
Unidades consistentes: data/hora em UTC ou local, moedas com código (EUR, USD).

7) Iconografia e ilustrações

Família isomórfica: ângulo único, espessura da linha, malha 24 x 24.
Estados e semântica: cor é secundária; forma/ícone + texto - primário.
Zoom: ícones não «navegam» em densidades diferentes (1 x/2 x/3 x).

8) Disponibilidade (A11y) e localização (i18n/RENAULT)

Os componentes passam por WCAG AA: contraste, navegação do teclado, foco, 'prefers-reduced-motion'.
As linhas traduzíveis estão em recursos, não no código. Playshalders e formato de números/datas são localizados.
ATÉ: Espelhamento de ícone, Ordem de Taib correta, Lógica de DnD do teclado.

9) Números, datas, divisas e formatos

Data/hora: ISO-8601, ponto de data real - UTC; o usuário é local.
Moeda: menor units/linhas decimais; especificar sempre um código (por exemplo, "€12,34" ou "12. 34 EUR - pelo local).
Os juros são '12,3%' e os pontos '+ 1,2 p.p' para distinguir claramente.
Arredondar: até descargas significativas; «k/m» para números maiores.

10) Governance: papéis, artefatos, canais

Design Language Council (DLC): proprietários de tokens/componentes, afirmam RFC.

• Biblioteca de componentes (Figma/código) + diretório vivo com exemplos.
• Documentação: arquibancadas, pattern, A11y, conteúdo hyde.
• Chainjog com datas, níveis (added/changed/deprecated/removed/fixed).
• Canais de Design Sink Semanal, Slack, Shows de Implementação.

11) Versionização e evolução

«MAJOR» para o pacote de componentes. MINOR. PATCH`.
MENOR - Adutor: novos tokens, props com default, novos componentes.
MAJOR - breaking: remoção de propas, mudança de semântica → guindastes migratórios.
Decolagens: avisos, janela ≥ 90 dias, bandeiras de compatibilidade.

12) Linters e verificações automáticas

UI-linter: Cores proibidas fora do token, anti-pattern (botão-diva, outline desativado).
Verificações A11y: contraste, papel/ária, foco, teclado.
i18n-linter: linhas «rígidas» no código, playsholders incorretos.
Testes de captura de tela, regressão visual dos componentes.
Contratos API de visualização (se houver): tipos de dados, faixas, assinaturas.

13) Vitrine de componentes (storybook/caixa de areia)

Exemplos vivos com controladores de props, código, estados, cheque A11y.
«Receitas»: formulário de inscrição, assistente 3 etapas, tabela + filtros, modal + brinde.
«Caixa de areia local»: alteração de linguagem/formatos/RENAULT.

14) Modelos de naiming e estrutura

14. 1 Componentes (WEM/semântica, exemplo CSS)

.btn/basic/
.btn--primary/view/
.btn--danger
.btn--lg/size/
.btn __ icon/part/

No código, os nomes de props são «size», «kind», «disabled», «onClick».

14. 2 Estrutura de arquivos da biblioteca

/tokens
/components
/button
/input
/modal
/patterns
/docs
/changelog

15) Anti-pattern

Cores livres/recuos fora do token.
Os componentes «ButtonV2», «PrimaryButtonNew».
O playsholder é a única marca do campo.
Desativar outline e botões de dive.
Hover/ativo/disabled imprevisíveis.
Termos transmitidos em vez de tradução normal.
Nenhuma migração nas atualizações.

16) Métricas de qualidade de língua única

Coverage: proporção de telas que usam a biblioteca de componentes.
Consistency Index: reutiliza os tickens vs manuais.
A11y Pass Rate: porcentagem de componentes que passam pelo WCAG AA.
Defect Escape: Defeitos de UI/conteúdo em venda em 1K commits.
Time-to-Ship: tempo para a implementação da tela típica antes/depois do DLS.
Adução: vitrine DAU, número de PR com componentes/pattern.

17) Folha de cheque da tela

• São usados os tokens (cor/recuo/raio) e não os valores «rígidos».
• Componentes da biblioteca; A casta é apenas com RFC.
• Disponibilidade: teclado/foco/contraste/rolos/ária.
• Unidades: datas/divisas/juros - formatos de guide.
• Microkopi: botões = verbos, erros = ação de correção.
• A localidade/SE não quebra o layout.
• Estados: loading/empty/erro estão previstos.
• Os testes de regressão visual foram atualizados.

18) Plano de implementação (3 iterações)

Iteração 1 - Fundações (2-3 semanas)

Tokens (cor/tipografia/spacing/motion), componentes básicos (Button, Input, Select, Tooltip, Modal), conteúdo-hyde (tom, editoras, erros).
Vitrine (storybook) e cheque A11y, linter de tokens.

Iteração 2 - Pattern e localização (3-4 semanas)

Pattern de formulários/tabelas/filtros, iconpac 24 x 24, SE/i18n-caixa de areia, regras de números/datas/moedas.
SemVer, chainjólogo, processo RFC/migração, auto-estações (visual + A11y).

Iteração 3 - Escala e evolução (contínua)

Componentes compostos (Wizard, DataGrid, Chart primitives), tematização (claro/escuro/contraste), relatórios de métricas de qualidade, auditorias UX regulares.

19) Mini-FAQ

Precisas de «tudo e tudo»?
Não. Comece com tokens e componentes básicos e adicione patters e processos.

Como convencer as equipas a usarem a EIE?
Mostre o ganho de velocidade, menos defeitos, receitas de telas prontas e A11y «de caixa».

O que fazer com os ecrãs legacy?
O plano de migração, os estilos de ponte através dos tokens, as telas prioritárias primeiro.

Resultado

Uma única linguagem de interface não é apenas uma biblioteca de componentes. Este é um sistema de regras e processos onde os tokens definem expressividade, os componentes são comportamento e disponibilidade, os patters são repetitivos, e a produção e as métricas são uma evolução sustentável. Tornem a linguagem clara, verificável e extensível - e os seus produtos vão parecer e funcionar uniformizados, rápidos e confiáveis.