Design System · UI Patterns

Uma interface feita para se repetir bem.

Esta página documenta as decisões que deixam o blog coerente: tokens semânticos, componentes reutilizáveis e padrões de interface simples.

01 · Princípios

Menos decisões repetidas, mais clareza.

01

Consistência por padrão

Peças reutilizáveis evitam que cada tela precise recomeçar do zero.

02

Tokens, não exceções

Cores e superfícies recebem nomes semânticos para funcionar em qualquer tema.

03

Interface componível

Variantes resolvem contextos distintos sem duplicar comportamento ou estilo.

02 · Fundações

Tokens que acompanham o contexto.

As cores descrevem sua função na interface. Com a troca de tema, os componentes preservam contraste e intenção sem alterações locais.

Background

--background

Foreground

--foreground

Primary

--primary

Secondary

--secondary

Muted

--muted

Accent

--accent

Tipografia

Hierarquia direta, pesos moderados e texto confortável para leitura.

Espaçamento

Ritmo baseado em incrementos consistentes para aproximar elementos relacionados.

Cores de texto

A cor também é semântica: cada token comunica a prioridade da mensagem, não uma tonalidade fixa.

Conteúdo principal

text-foreground

O texto que conduz a leitura.

Leitura padrão e títulos dentro do fluxo de conteúdo.

Texto secundário

text-muted-foreground

Contexto sem competir com o essencial.

Metadados, explicações e informações de apoio.

Destaque

text-primary

Uma chamada com hierarquia visual.

Ações, estados ativos e elementos que pedem atenção.

Destrutivo

text-destructive

Remover este conteúdo

Feedbacks e ações que exigem cuidado do usuário.

03 · Componentes

Uma base, variações com propósito.

Button

Ação com hierarquia visual.

O mesmo componente reúne estados de foco, desabilitado e variantes para que a chamada mais importante seja sempre reconhecível.

Padrão de uso

  • Primary para a ação principal da tela.
  • Outline e secondary para ações de apoio.
  • Ghost quando a ação não deve competir pela atenção.

Ewerton Coutinho

Front-End Engineer

I build pixel-perfect, optimized web experiences focused on UX.

/ewertoncoutinho

Designed in Figma, developed in Visual Studio Code, and built with Next.js and Tailwind CSS. Deployed on Vercel, with all text in the Open Sans typeface.

© Ewerton Coutinho

ID Card

Identidade em uma peça reutilizável.

O cartão combina apresentação pessoal, atalhos sociais e QR code em uma composição pronta para superfícies compactas.

Componentes compostos encapsulam uma experiência completa, sem perder a consistência das fundações do sistema.

04 · Estrutura

Um grid que prioriza a leitura.

O layout começa com uma única coluna e adiciona navegação persistente apenas quando a largura oferece espaço suficiente para ela.

Base

1 coluna

No mobile, conteúdo ocupa toda a largura útil e a navegação fica fixa na base.

Conteúdo

Leitura limitada

O Wrapper segura a largura máxima para manter linhas confortáveis e previsíveis.

Desktop

Shell em 3 áreas

A partir de lg, sidebar e trilho de ações se fixam enquanto o conteúdo permanece fluido.

Arquitetura da página

Shell compacto com navegação inferior.

main · flex-1

Conteúdo em uma coluna

A leitura ocupa a área útil, sem sidebar concorrendo por espaço.