Diego GarciaConsultoria de Crescimento

DESIGN SYSTEM / V3.2

Clareza operacional antes da recomendação.

DIREÇÃO

Estratégia que torna o próximo passo legível.

Uma linguagem editorial e operacional para organizar sinais, evidências, decisões e trabalho em campo.

Diagnóstico da OperaçãoEntenda Meu Trabalho

01 / COR

Paleta de decisão

Midnight#061631
Raised#0A1F42
Ink#071633
Canvas#F7F7F3
Surface#FFFFFF
Signal#C8F000
Pressed#A7C900
Lime suave#EFFFC8
Muted#566078
Hairline#D7DBDC
Sucesso#17735C
Erro#B93A3E

02 / TIPO

Hierarquia editorial

Manrope

Corpo claro, direto e humano.

IBM PLEX MONO / EVIDÊNCIA

03 / ÍCONES

Uma família, três escalas

24px
48px
72px

04 / COMPONENTES

Ação e evidência

EVIDÊNCIA A CONSIDERAR

O contexto precisa acompanhar a passagem entre venda e entrega.

05 / ESTADOS E MOVIMENTO

A mesma função, o mesmo tratamento.

Botões: 7 px. Campos: 6 px. Cards: 16–18 px. Área de toque mínima: 44 px.

Hover e pressionado: #A7C900. Foco com contorno visível.
Estado desabilitado, sem interação.
Comportamento de expansão

Abertura nativa imediata. Feedback de controles em 140–160 ms; mudanças de estado até 220 ms. Movimento reduzido remove deslocamentos não essenciais.