Design System uMode
Manual estático navegável
Padrões
Responsividade, contraste e receitas visuais
Os padrões abaixo são as regras vivas do uMode: como camadas respondem a viewport, como cores se combinam dentro do WCAG 2.1 AA e quais composições são aprovadas para reuso.
1 · Responsividade
Três breakpoints nomeados, mobile-first, sem media queries soltas.
| Breakpoint | Min-width | Contexto | Quando usar | Classes exemplo |
|---|---|---|---|---|
| tablet: | 640px | Mobile landscape / small tablets | Primeira quebra: stack→2-col, sidebar colapsada | tablet:grid-cols-2 tablet:block tablet:pl-12 |
| laptop: | 1024px | Laptops e desktops compactos | Layout principal: sidebar visível, grids de 3 colunas | laptop:grid-cols-3 laptop:overflow-y-auto laptop:px-6 |
| desktop: | 1368px | Monitores desktop padrão | Layout expandido: até 4 colunas, máxima densidade | desktop:grid-cols-4 desktop:max-w-screen-xl desktop:gap-8 |
| Viewport | Sidebar | Conteúdo |
|---|---|---|
| Mobile | Oculta — acionada por hamburguer | 100% da largura, px-4 |
| tablet: | Colapsada (ícones), w-12 | pl-12, tablet:px-6 |
| laptop: | Expandida com labels, w-64 | pl-64, overflow-y-auto |
tsx
<div className="grid gap-4
grid-cols-1
tablet:grid-cols-2
laptop:grid-cols-3
desktop:grid-cols-4"
>
{items.map(item => <Card key={item.id} />)}
</div>Mobile-first sempre — base styles para mobile, depois tablet: → laptop: → desktop:
Use breakpoints semânticos — tablet:/laptop:/desktop:, nunca sm:/md:/lg:
Touch targets ≥ 44px — min-h-[44px] ou h-11 em todo elemento clicável (WCAG 2.5.5)
Sem @media ad-hoc — toda quebra usa um dos três breakpoints nomeados
Nunca esconda conteúdo crítico — alertas de status visíveis em todo viewport
Nunca larguras fixas em px — use max-w-* e w-full; px quebra em viewports intermediários
2 · Contraste de cores (WCAG 2.1)
Toda combinação validada antes do uso. Texto normal ≥ 4.5:1 (AA), texto large ≥ 3:1 (AA Large).
| Aa | Combinação | Texto | Fundo | Ratio | WCAG | Nota |
|---|---|---|---|---|---|---|
Aa | Foreground em Background | #191a21 | #ffffff | 17.5:1 | AAA | — |
Aa | Primary em Background | #973beb | #ffffff | 4.8:1 | AA | — |
Aa | Branco em Primary (CTA) | #ffffff | #973beb | 4.8:1 | AA | — |
Aa | Muted Foreground em Background | #6d7280 | #ffffff | 4.6:1 | AA | somente texto ≥14px |
Aa | Status OK em Background | #0daf73 | #ffffff | 4.7:1 | AA | — |
Aa | Status Critical em Background | #e94f4f | #ffffff | 3.8:1 | AA Large | use com ícone |
Aa | Status Warning em Background | #d97706 | #ffffff | 3.1:1 | AA Large | nunca texto corrido |
Aa | Foreground em Card | #191a21 | #ffffff | 17.5:1 | AAA | — |
Aa | Primary em Accent (chips) | #973beb | #f4f0fe | 4.5:1 | AA | — |
Aa | Branco em Muted | #ffffff | #f4f5f7 | 1.1:1 | FAIL | nunca usar |
text-foreground em bg-background — sempre AA ou AAA
text-primary-foreground em bg-primary — AA ✓
text-muted-foreground somente em texto ≥14px
status-ok em bg-status-ok — badge oficial
text-primary em bg-accent — hover state aprovado
Contraste < 1.5:1. Ilegível em qualquer tamanho.
Roxo em cinza claro cai abaixo de 3:1.
3.1:1. Só em badge com ícone, nunca em parágrafo.
muted-foreground em bg-muted — < 3:1.
Nunca misture tokens de status com fundos de outro status.
Use tokens semânticos — text-foreground, bg-background, bg-card adaptam via .dark
Primary clareia no dark — 58% → 62% lightness para manter contraste
Teste ambos os temas — toda nova tela revisada em light e dark antes de subir
Nunca hex literal — text-[#973BEB] quebra no dark; use text-primary
Nunca assuma fundo branco — bg-white não muda no dark; use bg-background ou bg-card
Nunca esqueça muted-foreground em cards escuros — 66% lightness, valide leitura
3 · Receitas de layout
Composições recorrentes para páginas reais — copie estrutura, adapte conteúdo.
Workspace
Área principal sempre clara
A sidebar é suporte contextual. O conteúdo mantém respirabilidade e foco em métricas.
Resumo operacional com leitura instantânea
Use o gradiente principal em áreas de destaque com promessa clara, CTA único e hint do conteúdo seguinte sempre visível.
Leads ativos
1.284
Engajamento
74%
Risco
3 alertas
| Projeto | Status | Owner |
|---|---|---|
| PlanejAI Sprint 18 | Saudável | Ops |
| Mapa Hering | Atenção | Conteúdo |
| GEST HUB rollout | Crítico | Produto |