Portal do Cliente · aMORA · 2026

A fundação, e o que se constrói com ela.

Design system do portal do comprador da aMORA: um produto white-label em que a cor da incorporadora entra por regra, e que continua completo mesmo quando ela não existe.

Fundação · tokens · derivação de contraste · componentes — desenhado e documentado por João Ragazzi.

O caso canônicosem incorporadora
aMORAoferecido por Alameda
Residencial Aurora · unidade 1408

Sem nenhuma incorporadora, o produto está completo — não degradado. É este o desenho que se projeta primeiro.

Com a chancelauma incorporadora
aMORAAlameda
Residencial Aurora · unidade 1408

A mesma casca, com a cor da incorporadora em apenas cinco posições autorizadas (decisão 0042).

02 · O sistema em uma página

Seis coisas que não se negociam.

Antes de qualquer valor: o que o produto está tentando fazer, e o que isso proíbe. Todo token adiante existe para servir a um destes seis.

Clareza, não conforto

Quem está com a bola, o que falta, o que vem depois. A má notícia se dá com a mesma clareza da boa.

decisão 0010

O esqueleto carrega a coerência

Tipografia, ritmo, forma e estrutura não mudam com a incorporadora. Troque a cor e o produto continua o mesmo.

decisões 0005 · 0016

A ausência de cor é um estado projetado

Sem incorporadora, o produto é canônico — não um plano B. Com ela, a cor entra por derivação, nunca à mão.

decisões 0005 · 0037

O celular é a ordem de decisão

Tudo se resolve em 360 px e depois expande. O hover nunca é o único sinal; alvo de toque tem piso de 48.

decisões 0006 · 0020

Um modo só

Não existe modo escuro. O esquema é declarado claro para que nenhum navegador invente um produto que ninguém desenhou.

decisão 0007

Insumo ruim degrada em silêncio

Uma marca de matiz impossível não quebra a tela: a derivação escurece o papel até a legibilidade voltar.

decisões 0023 · 0037

03 · Cor

Uma cor entra; sete papéis saem.

Três origens, e só três: neutros fixos, um accent derivado da cor da incorporadora e famílias semânticas que ela nunca toca.

Os neutros · papel quente, tinta fria

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

As semânticas · wash → text

danger success warning info
A trava em açãoverde-limão h90 s90

A semente crua

1.73:1 sobre o papel — reprovado

Derivado accent-text

4.81:1 — mesma matiz, mesma saturação

Escurecer é a única direção permitida: dessaturar transformaria verde-limão em oliva, e girar a matiz seria trocar a marca.

As semânticas são invioláveisícone + texto, nunca só cor
Recusado Vence em 3 dias Aprovado Em análise

Uma incorporadora vermelha não faz o erro deixar de ser vermelho. As famílias semânticas nunca recebem a cor dela.

04 · O accent derivado

Uma semente entra. Todos os papéis se refazem.

Sete papéis calculados a partir de uma cor, com trava de contraste — texto a 4.5:1, gráficos a 3:1. Escolha uma incorporadora ou arraste a matiz: toda a apresentação responde.

—

PapelValorUso
accent-seed—a cor crua — nunca vai à tela
accent-ink—o único preenchimento que sustenta texto branco
accent-solid—marcador, glifo, anel de foco — ≥ 3:1
accent-text—texto e ícone que carregam significado — ≥ 4.5:1
accent-soft—preenchimento de marcador e avatar
accent-wash—fundo de bloco — um por tela
aMORAAlameda
Residencial Aurora · unidade 1408

Depende de você

Falta 1 documento seu

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

05 · Tipografia

Duas famílias, papéis fixos.

Plus Jakarta Sans nos títulos, Public Sans no texto. A hierarquia vem de família, peso e tamanho — nunca da cor, porque a cor é alugada.

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ê
Leitura em 360o caso eliminatório

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.

Tudo o que o produto diz cabe em 296 px de coluna. Corpo em 16 px é piso, não preferência; números usam algarismos tabulares, porque comparar propostas depende disso.

06 · Forma

O canto diz o que responde ao toque.

Base 4, ritmo 8, alvo de toque de 48 px. O que contém tem canto reto; o que se aciona tem raio 4 — a forma carrega o que a cor não pode.

Raioquatro tokens
radius-none

superfície, cartão, campo — o padrão

radius-sm

o que se aciona — botão, controle

radius-pill

a pastilha de ícone, e só ela

radius-full

avatar, marcador de estado

Régua, borda, molduratrês papéis

Moldura — border-subtle

Divisão — rule, decorativa

Borda que carrega informação obedece a 3:1; a régua só separa irmãos.

Foco e alvoaffordance de primeira classe
ícone de 20 px numa área de 48 px

anel de 2 px, afastamento de 2 px, em accent-solid — a trava garante 3:1 com qualquer semente.

07 · Componentes

Primitivos, com os estados na especificação.

Foco, desligado e erro fazem parte da especificação, não do acabamento. Troque a incorporadora acima e todos respondem.

Botão48 de altura · raio 4

Variantes por papel, não por estilo. A cor da incorporadora nunca preenche botão: a ação primária é a tinta.

Camporecipiente — canto reto
é por aqui que a gente avisa
Faltou um dígito — o CPF tem 11.

Rótulo sempre visível. O erro diz o que houve e o que fazer, com ícone.

Cartãocom ação · sem novidade

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

Um bloco em accent-wash por tela. Ausência de novidade é estado a exibir, não vazio a preencher.

08 · Componentes

Feitos para os momentos mais difíceis.

Enviar um documento, acompanhar um processo de seis fases e comparar propostas de bancos — cada componente responde a uma tarefa real do comprador.

Envio de documentoa ação mais frequente

Tirar foto ou escolher arquivo

PDF funciona melhor · até 20 MB

Em análise Aprovado Veio ilegível

Um alvo grande, duas entradas (câmera e arquivo) e o estado logo abaixo.

Jornadaseis fases, uma atual
Sua jornadafase 2 de 6

Análise de crédito

com o banco há 6 dias

Início Pendências Simulação Documentos

Concluído em accent-solid, atual em accent-ink com anel; rótulo acessível porque a forma sozinha não conta a fase.

Propostaa tela mais difícil

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

Mesmos campos, mesma ordem, algarismos tabulares: comparar é ler, não conferir.

09 · Anti-padrões

Todo “nunca” vem com o seu motivo.

A metade menos glamorosa do sistema, e a que mais o protege: um “nunca” sem motivo declarado não sobrevive à primeira pressão de prazo.

Usar a cor crua da incorporadora como texto ou borda

decisão 0037

Preencher botão com a cor da incorporadora — a ação primária é a tinta

decisões 0026 · 0037

Tingir os neutros com a cor da incorporadora

decisão 0036

Arredondar superfície, cartão, painel ou campo

decisão 0038

Mais de um bloco em lavagem por tela

decisão 0042

Sinalizar estado só por cor, sem ícone, texto ou forma

decisões 0018 · 0040

Depender do hover como único sinal de affordance

decisão 0006

Remover ou esconder o anel de foco

decisão 0028

Tipografia de interface abaixo de 12 px

decisão 0039

Amortecer, adiar ou rodear a má notícia

decisão 0010

Tratar o produto sem incorporadora como versão degradada

decisão 0005

Movimento acima de 200 ms, ou movimento que decora

decisão 0024