CORBAN · aMORA · 2026

Operational clarity with the aMORA identity.

Design system for CORBAN, the operations platform where developers and aMORA's credit team run buyers, developments and financing processes. Tokens and components mirrored from the production codebase.

React 19Next.js 16Tailwind CSS 4Plus Jakarta SansPublic SansWCAG as reference

Components in the official inventory

52

Component families

10

Semantic status states

7

Foundations, tokens, components and governance — designed and documented by João Ragazzi.

02 · Direction

Principles

Decisions that keep dense operations and sensitive flows coherent.

product → system

Reuse first. Extend existing components before creating variations.
Semantics before colour. Use tokens, never a hex picked by proximity.
Density with hierarchy. The primary action and status stay unmistakable.
Feedback out of the way. Operations use notifications; validation stays next to the field.
Privacy and access are states. Roles, sensitive data and impersonation are part of the UX.
Responsive by context. The shell responds to the viewport; modules may respond to their container.

03 · Foundations

Colour

Cream canvas, warm surfaces, structural black and aMORA blue as the action colour.

globals.css

ink

#252626

ink-soft

#5A5652

hint

#807A72

rule

#E5DDD0

canvas

#F5EEE2

surface

#FBF5E9

amora-azul

#636FC1 · action

amora-verde

#645D1E

amora-roxo

#6E2D5F

amora-rosa

#D3A4CF

Status states

Every state ships four roles: light, border, dot and text.

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

04 · Foundations

Typography

Plus Jakarta Sans for titles; Public Sans for data, forms and navigation.

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 and titles. Carries the aMORA voice.

AaPublic Sans — data, forms and navigation, built for dense reading.

In a dense view

Hierarchy survives tables and forms at 12–13px.

Unidades

147

VGV total

R$ 52,3M

Prazo médio

45 dias

05 · Foundations

Space, radius and shadow

A 4-based scale from 4 to 128px; radii 8, 12, 20, 32 and full. Cards use borders — shadow is reserved for menus and 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

Do

Visible focus on every action.
Accessible name on icon buttons.
Support prefers-reduced-motion.
Never rely on colour alone.

Avoid

Outline removed with no replacement.
Overlay without focus or label.
Raw technical errors for users.
Small targets with no touch area.

06 · Components

Actions and forms

Button, IconButton, ActionBar, ActionMenu; Input, SearchInput, Textarea and field validation.

Button

Six variants, three sizes, loading and disabled.

primary · dark · outline · ghost · danger · caution

Fields

Validation stays next to the field.

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

ActionMenu · ActionBar

Shadow only above the page.

07 · Components

Selection and dates

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

Choice

✓Selecionar documento

−Parte selecionada

Receber notificações

MRALJS+3

Select · Listbox

Horizonte ✓

Jardins

Vista Sul

Calendar

Setembro 2026

DSTQQSS3012345678910111213

08 · Components

Content, navigation and data

Tabs, DataTable, PaginationBar, ProgressBar and the chart family — StackBar, HBar, StackArea, OverlayArea and 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

Charts

Series use the brand triad: azul, verde, roxo.

1007550250

MaiJunJulAgoSet

09 · Components

Feedback and overlays

Toast, Spinner, Skeleton, EmptyState, UploadZone, Modal and Drawer — feedback that stays out of the operator's way.

✓

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 · Reference

The official inventory

The complete map of the product's UI library. A one-off screen implementation is never promoted to an official component.

52 components

Family	Components
Actions	Button, IconButton, ActionBar, ActionMenu, AddCard
Fields	Input, Textarea, MentionTextarea, Checkbox, ToggleSwitch
Selection	Listbox, SearchableSelect, AssigneeSelect, FilterDropdown, FilterChip
Dates	Calendar, DatePicker, DateTimePicker
Identity	Avatar, Badge, CopyableId, ProcessStageDots
Structure	Card, FormCard, TipCard, Divider, PageHeader, Breadcrumb, StatsRow
Navigation	Tabs, PaginationBar, StepTracker, Timeline
Data	DataTable, ProgressBar, StackBarChart, HBarChart, StackAreaChart, OverlayAreaChart, ScatterChart
Feedback	Toast, NotificationViewport, Spinner, Skeleton, EmptyState, StrengthBar, ValidationSummary
Overlays	Modal, Drawer, UploadZone
Internal infrastructure	chart, dialogStack — never imported by screens