CORBAN · aMORA · 2026

Clareza operacional com a identidade aMORA.

Design system do CORBAN, a plataforma em que incorporadoras e o time de crédito da aMORA acompanham compradores, empreendimentos e financiamentos. Tokens e componentes espelhados do código de produção.

React 19Next.js 16Tailwind CSS 4Plus Jakarta SansPublic SansWCAG como referência

Componentes no inventário oficial

52

Famílias de componentes

10

Estados semânticos de status

7

Fundamentos, tokens, componentes e governança — desenhado e documentado por João Ragazzi.

02 · Direção

Princípios

Decisões que mantêm coerência em operações densas e fluxos sensíveis.

produto → sistema

Reuso primeiro. Estender componentes existentes antes de criar variações.
Semântica antes da cor. Usar tokens, nunca hex por proximidade.
Densidade com hierarquia. Ação primária e estado permanecem inequívocos.
Feedback fora do caminho. Operações usam notificações; validação fica junto ao campo.
Privacidade e acesso são estados. Papéis, dados sensíveis e impersonação fazem parte da UX.
Responsivo por contexto. O shell responde à viewport; módulos podem responder ao container.

03 · Fundamentos

Cores

Canvas cream, superfícies quentes, preto estrutural e azul aMORA como ação.

globals.css

ink

#252626

ink-soft

#5A5652

hint

#807A72

rule

#E5DDD0

canvas

#F5EEE2

surface

#FBF5E9

amora-azul

#636FC1 · ação

amora-verde

#645D1E

amora-roxo

#6E2D5F

amora-rosa

#D3A4CF

Estados de status

Cada estado traz quatro papéis: light, border, dot e text.

EstadolightborderdottextBadge pendingPendente activeEm análise cautionAtenção successAprovado dangerReprovado archivedArquivado warningAlerta

04 · Fundamentos

Tipografia

Plus Jakarta Sans em títulos; Public Sans em dados, formulários e navegação.

Display · Jakarta 700 · 48px

Operação em movimento

H2 · 32px

Processos de financiamento

H3 · 24px

Documentos pendentes

Body · Public Sans 16px

Texto para explicações e conteúdo corrido.

Micro · Jakarta 12px

Rótulo de seção

AaPlus Jakarta Sans — display e títulos. Carrega a voz da aMORA.

AaPublic Sans — dados, formulários e navegação, feita para leitura densa.

Numa tela densa

A hierarquia se mantém em tabelas e formulários de 12–13px.

Unidades

147

VGV total

R$ 52,3M

Prazo médio

45 dias

05 · Fundamentos

Espaço, raios e sombra

Escala de base 4, de 4 a 128px; raios 8, 12, 20, 32 e full. Cards usam borda — sombra é reservada a menus e overlays.

space-14px

space-28px

space-312px

space-416px

space-524px

space-632px

space-748px

space-864px

space-996px

space-10128px

sm · 8

md · 12

lg · 20

xl · 32

shadow-smshadow-mdshadow-lg

Fazer

Foco visível em toda ação.
Nome acessível em botão de ícone.
Suportar prefers-reduced-motion.
Não depender apenas de cor.

Evitar

Outline removido sem substituição.
Overlay sem foco ou rótulo.
Erro técnico cru para o usuário.
Alvos pequenos sem área de toque.

06 · Componentes

Ações e formulários

Button, IconButton, ActionBar, ActionMenu; Input, SearchInput, Textarea e validação de campo.

Button

Seis variantes, três tamanhos, loading e disabled.

primary · dark · outline · ghost · danger · caution

Campos

A validação fica junto ao campo.

Nome completo *Como aparece no documento. Buscar comprador⌕ CPFInforme um CPF válido. Comentário

ActionMenu · ActionBar

Sombra só no que está acima da página.

07 · Componentes

Seleção e datas

Checkbox, ToggleSwitch, Listbox, SearchableSelect, FilterChip, Avatar, Calendar e DatePicker.

Escolha

✓Selecionar documento

−Parte selecionada

Receber notificações

MRALJS+3

Select · Listbox

Horizonte ✓

Jardins

Vista Sul

Calendário

Setembro 2026

DSTQQSS3012345678910111213

08 · Componentes

Conteúdo, navegação e dados

Tabs, DataTable, PaginationBar, ProgressBar e a família de gráficos — StackBar, HBar, StackArea, OverlayArea e Scatter.

Comprador	Processo	Status	Atualização
Marina Rocha	#4821	Em análise	Hoje, 10:42
João Silva	#4817	Aprovado	Ontem, 16:20
Ana Lima	#4809	Atenção	12/09, 09:05

Gráficos

As séries usam a tríade da marca: azul, verde e roxo.

1007550250

MaiJunJulAgoSet

09 · Componentes

Feedback e overlays

Toast, Spinner, Skeleton, EmptyState, UploadZone, Modal e Drawer — feedback que não atrapalha quem opera.

✓

Alterações salvas

Os dados foram atualizados.

Arraste documentos ou cliquePDF, JPG ou PNG · 10 MB

⌕

Nenhum resultado

Ajuste os filtros ou tente outro termo.

10 · Referência

Inventário oficial

O mapa completo da biblioteca de UI do produto. Uma implementação isolada de tela nunca vira componente oficial.

52 componentes

Família	Componentes
Ações	Button, IconButton, ActionBar, ActionMenu, AddCard
Campos	Input, Textarea, MentionTextarea, Checkbox, ToggleSwitch
Seleção	Listbox, SearchableSelect, AssigneeSelect, FilterDropdown, FilterChip
Datas	Calendar, DatePicker, DateTimePicker
Identidade	Avatar, Badge, CopyableId, ProcessStageDots
Estrutura	Card, FormCard, TipCard, Divider, PageHeader, Breadcrumb, StatsRow
Navegação	Tabs, PaginationBar, StepTracker, Timeline
Dados	DataTable, ProgressBar, StackBarChart, HBarChart, StackAreaChart, OverlayAreaChart, ScatterChart
Feedback	Toast, NotificationViewport, Spinner, Skeleton, EmptyState, StrengthBar, ValidationSummary
Overlays	Modal, Drawer, UploadZone
Infra interna	chart, dialogStack — nunca importados por telas