Client Portal · aMORA · 2026

The foundation, and what gets built on it.

Design system for aMORA's homebuyer portal: a white-label product where the developer's colour enters by rule, and the product stays complete when there is no colour at all.

Foundation · tokens · contrast derivation · components — designed and documented by João Ragazzi.

The canonical caseno tenant
aMORAoferecido por Alameda
Residencial Aurora · unidade 1408

With no developer at all the product is complete, not degraded. This is the layout designed first.

With the endorsementone tenant
aMORAAlameda
Residencial Aurora · unidade 1408

Same shell; the developer's colour lands in five authorised positions only (decision 0042).

02 · The system on one page

Six things that aren't negotiable.

Before any value: what the product is trying to do, and what that forbids. Every token that follows exists to serve one of these six.

Clarity, not comfort

Who has the ball, what is missing, what comes next. Bad news is given as clearly as good news.

decision 0010

The skeleton carries coherence

Type, rhythm, shape and structure never change with the developer. Swap the colour and it is still the same product.

decisions 0005 · 0016

No colour is a designed state

Without a tenant the product is canonical, not a plan B. With one, colour enters by derivation, never by hand.

decisions 0005 · 0037

Mobile is the order of decision

Everything is solved at 360 px and then expands. Hover is never the only signal; touch targets have a floor of 48.

decisions 0006 · 0020

One mode only

There is no dark mode. The scheme is declared light so no browser invents a product nobody designed.

decision 0007

Bad input degrades silently

An impossible brand hue never breaks the screen: the derivation darkens the role until it is legible again.

decisions 0023 · 0037

03 · Colour

One colour in; seven roles out.

Three origins, and only three: fixed neutrals, an accent derived from the developer's seed, and semantic families the tenant can never touch.

The neutrals · warm paper, cool ink

surface-page#fcfbf8
surface-raised#ffffff
surface-subtle#f5f4f5
surface-hover#eeecee
surface-pressed#e4e2e4
rule#d9d4da
border-subtle#aaa2ac
border#998f9b
text-disabled#867c88
text-muted#665f67
solid-hover#372d39
text-strong#211b22

The semantics · wash → text

danger success warning info
The lock in actionlime h90 s90

The raw seed

1.73:1 on paper — fails

Derived accent-text

4.81:1 — same hue, same saturation

Darkening is the only direction allowed: desaturating would turn lime into olive, and rotating the hue would change the brand.

Semantics are inviolableicon + text, never colour alone
Recusado Vence em 3 dias Aprovado Em análise

A red developer never makes an error stop being red. Semantic families are never seeded with tenant colour.

04 · The accent, derived

One seed in. Every role re-derived.

Seven roles computed from one seed, with a contrast lock — text at 4.5:1, graphics at 3:1. Pick a tenant or drag the hue; every slide in this deck responds.

—

RoleValueUse
accent-seed—the raw colour — never on screen
accent-ink—the only fill that holds white text
accent-solid—marker, glyph, focus ring — ≥ 3:1
accent-text—meaningful text and icons — ≥ 4.5:1
accent-soft—marker and avatar fill
accent-wash—block background — one per screen
aMORAAlameda
Residencial Aurora · unidade 1408

Depende de você

Falta 1 documento seu

accent-text on accent-wash—target 4.5
accent-solid on surface-page—target 3.0
text-on-solid on accent-ink—target 4.5

05 · Typography

Two families, fixed roles.

Plus Jakarta Sans for titles, Public Sans for text. Hierarchy comes from family, weight and size — never from colour, because colour is rented.

display-lg · 40Seu financiamento
title · 24Seu financiamento
title-sm · 20O banco pediu o comprovante
body-lg · 18O banco pediu o comprovante de estado civil
body · 16O banco pediu o comprovante de estado civil
small · 14O banco pediu o comprovante de estado civil
caption · 12pedido pelo banco · falta enviar
eyebrow · 12Depende de você
Reading at 360the eliminatory case

Depende de você

Falta 1 documento seu

O banco pediu o comprovante de estado civil. Envie até 12 de setembro para a análise não parar.

R$ 3.184/mês · 360 meses · 10,4% a.a.

Everything the product says fits a 296 px column. 16 px body is a floor, not a preference; numbers use tabular figures because comparing offers depends on it.

06 · Shape

The corner says what responds to touch.

Base 4, rhythm 8, a 48 px touch target. What contains is square; what acts gets a 4 px radius — shape carries what colour can't.

Radiusfour tokens
radius-none

surface, card, field — the default

radius-sm

what acts — button, control

radius-pill

the icon pill, and only it

radius-full

avatar, state dot

Rule, border, framethree roles

Frame — border-subtle

Divider — rule, decorative

A border that carries information obeys 3:1; the rule only separates siblings.

Focus and targetfirst-class affordance
20 px icon in a 48 px area

2 px ring, 2 px offset, in accent-solid — the lock guarantees 3:1 for any seed.

07 · Components

Primitives, with their states in the spec.

Focus, disabled and error are part of the specification, not the finish. Change the tenant above and these respond.

Button48 tall · radius 4

Variants by role, not style. Tenant colour never fills a button: the primary action is the ink.

Fieldcontainer — square
é por aqui que a gente avisa
Faltou um dígito — o CPF tem 11.

Label always visible. Errors say what happened and what to do, with an icon.

Cardaction · no news

Depende de você

Falta 1 documento seu

Envie até 12 de setembro para a análise não parar.

Nada depende de você agora

Está com o banco

One accent-wash block per screen. No news is a state to show, not a void to fill.

08 · Components

Built for the hardest moments.

Uploading a document, following a six-phase process and comparing bank offers — each component answers one of the buyer's real jobs.

Document uploadmost frequent action

Tirar foto ou escolher arquivo

PDF funciona melhor · até 20 MB

Em análise Aprovado Veio ilegível

One big target, two inputs (camera and file) and the state right below it.

Journeysix phases, one current
Sua jornadafase 2 de 6

Análise de crédito

com o banco há 6 dias

Início Pendências Simulação Documentos

Done in accent-solid, current in accent-ink with a ring; accessible label because shape alone doesn't tell the phase.

Offerthe hardest screen

Banco A

recebida

R$ 3.184/mês

10,4% a.a. · 360 meses

Banco B

recebida

R$ 3.322/mês

11,1% a.a. · 360 meses

Same fields, same order, tabular figures: comparing is reading, not checking.

09 · Anti-patterns

Every “never” comes with its reason.

The least glamorous half of the system, and the one that protects it most: a rule with no stated reason doesn't survive the first deadline.

Using the developer's raw colour as text or border

decision 0037

Filling a button with tenant colour — the primary action is the ink

decisions 0026 · 0037

Tinting neutrals with tenant colour

decision 0036

Rounding a surface, card, panel or field

decision 0038

More than one washed block per screen

decision 0042

Signalling state by colour alone, without icon, text or shape

decisions 0018 · 0040

Relying on hover as the only affordance

decision 0006

Removing or hiding the focus ring

decision 0028

Interface type below 12 px

decision 0039

Softening, delaying or circling around bad news

decision 0010

Treating the no-tenant product as a degraded version

decision 0005

Motion above 200 ms, or motion that decorates

decision 0024