ALUGA.Design system
Fundamentos.
Tokens de design-system/tokens, espelhados de DESIGN.md (fonte da verdade). Troque o tema no topo para ver os valores do tema escuro.
Cores semânticasuse estas no código
--brand
--brand-hover
--brand-soft
--on-brand
--text-strong
--text-body
--text-secondary
--text-muted
--text-subtle
--surface-page
--surface-card
--surface-subtle
--surface-sunken
--surface-hover
--surface-inverse
--surface-inverse-2
--border-subtle
--border-default
--border-strong
--success
--success-soft
--danger
--danger-soft
--warning
--warning-soft
--focus-ring
Paletaprimitivos — só definem os semânticos
--orange-50
--orange-100
--orange-200
--orange-400
--orange-500
--orange-600
--ink-900
--ink-800
--ink-700
--ink-600
--teal-900
--gray-500
--gray-400
--gray-300
--gray-250
--gray-200
--gray-150
--gray-100
--gray-50
--white
--canvas
--mist-200
--night-950
--night-900
--night-850
--night-800
--green-500
--green-600
--green-100
--red-500
--red-600
--red-100
--amber-500
--amber-700
--amber-100
--viz-blue
--viz-green
--viz-orange
--viz-lilac
--heat-1
--heat-2
--heat-3
--heat-4
--heat-5
--heat-6
--heat-7
TipografiaPlus Jakarta Sans
--text-display
96 · displayALUGA.
96 · displayALUGA.
--text-6xl
72 · metric xlR$ 124K
72 · metric xlR$ 124K
--text-5xl
64 · displayImóveis sob controle.
64 · displayImóveis sob controle.
--text-4xl
48 · metric lg78%
48 · metric lg78%
--text-3xl
36 · metric md432 unidades
36 · metric md432 unidades
--text-2xl
28 · metric smDecisões mais claras.
28 · metric smDecisões mais claras.
--text-xl
22 · dialog/page titleNova tarefa
22 · dialog/page titleNova tarefa
--text-lg
18 · card titleTotal de unidades
18 · card titleTotal de unidades
--text-md
16 · descriptionAcompanhe unidades ocupadas e livres.
16 · descriptionAcompanhe unidades ocupadas e livres.
--text-base
14 · bodyInquilino Marina Costa
14 · bodyInquilino Marina Costa
--text-sm
13 · smallVisitas agendadas
13 · smallVisitas agendadas
--text-xs
12 · labelStatus das tarefas
12 · labelStatus das tarefas
--text-2xs
11 · captionAlto interesse
11 · captionAlto interesse
--weight-lightLight 300
--weight-regularRegular 400
--weight-mediumMedium 500
--weight-semiboldSemiBold 600
--weight-boldBold 700
Espaçamento--space-*
--space-0-5
--space-1
--space-2
--space-3
--space-3-5
--space-4
--space-4-5
--space-5
--space-5-5
--space-6
--space-7
--space-7-5
--space-8
--space-9
--space-10
--space-11
Raios--radius-*
xs
badge-sm
badge
sm
md
tile
lg
tile-lg
xl
2xl
pill
Elevação e texturascards são planos; sombra só em camadas flutuantes
hairline (cards)
--shadow-xs
--shadow-card
--shadow-pop
--shadow-brand
Core.
Button · IconButton · Badge · Chip · Avatar · AvatarGroup · Wordmark · Icon
Buttonvariantes × estados
PadrãoHoverActiveFocusDisabledLoadingprimarydarksecondaryoutlineghost
Tamanhos
fullWidth
IconButtonvariantes × estados · dot de não lido
PadrãoHoverActiveFocusDisabledsoftdarkbrandwhiteghostinverse
dot · tamanhos
Badgetons · tamanhos · contador
mdbrandsoftneutraldarksuccessdangerwarning
smbrandsoftneutraldarksuccessdangerwarning
count212Problema 01
Chipvariantes × estados
PadrãoHoverFocuslightoutlineglassdark
Avatar · AvatarGroup
iniciaisRARSAL
imagem
grupoALBRALBCCD+2
Wordmarknão há logo — o nome é tipográfico
ALUGA.ALUGA
ALUGAALUGA
Iconregistro completo (29) · Lucide, traço 1.5
arrow-rightbellboxbuilding-2chart-splinecheckchevron-downcircle-alertcircle-checkfile-chart-columnfile-textinfolayout-gridlightbulbloader-circlelocklog-outmailmaximize-2message-circlemoonplussearchsettingssunuserswalletwrenchx
Forms.
Input · Select · Checkbox · Switch · SegmentedControl
Inputsoft / white × estados
PadrãoHoverFocusDisabledsoftwhite
Selectmd / sm × estados
PadrãoHoverFocusDisabledmdsm
Checkboxmarcado / desmarcado × estados
PadrãoHoverFocusDisableddesmarcadomarcado
Switchon / off × estados
PadrãoFocusDisabledoffon
SegmentedControlsegmento selecionado em branco
mdsm
PadrãoHoverFocussegmento
Data.
Card · CardHeader · StatCard · Metric · ProgressPill · BarChart · Legend · LineChart · HeatScale · DataTable
Card
default
Próximo
vencimento
05nov
Card
sunken
A receber
este mês
R$ 18,9K
Card
sem hairline
Unidades
Ocupadas (selecionado)
78%5 unidades
Unidades
Livres (clique)
14%1 unidade
Card interativoestados
PadrãoHoverFocusonClick
Abrir
imóvel
Abrir
imóvel
Abrir
imóvel
CardHeader
Visitas
Hoje
Visitantes por
Origem
Fluxo de
caixa
Total de
Unidades
432
Novos
Contratos
32
+12esta semana
Visitas
Hoje
56pessoas
Metricsm · md · lg · xl · decimais
28sm
36md
78%Ocupação
R$ 124KReceita mensal
R$ 23680.00
ProgressPilltons · valores · responsáveis
Vistoria do ar-condicionado100%
ALBR
Revisão do elevador67%
CDDMEP+1
Reparo hidráulico43%
FS
Pintura da fachada0%
BarChart · Legendhachurado / liso
Direto27%
Site28%
Instagram34%
Parceiro11%
Visitantes
Recorrentes
HeatScaleníveis 0 · 3 · 6 · 8
Sem procura
Média
Alta procura
Alto interesse
LineChartsérie única · fundo hachurado · valor destacado
R$ 11.800,00
10 out15 out20 out25 out31 out
LineChartduas séries · área · sem fundo
Visitantes: 756
10 out20 out31 out
DataTablelinhas clicáveis · hover
| Unidade | Inquilino | Aluguel | Status |
|---|---|---|---|
| Aurora · 402 | Marina Costa | R$ 3.200 | Pago |
| Pinheiros · 118 | João Pedro Lima | R$ 2.750 | Atrasado |
| Aurora · 805 | Reserva · Lucas F. | R$ 3.350 | Reservado |
| Vila Madalena · 33 | Beatriz Nunes | R$ 3.900 | A vencer |
DataTableestado vazio
| Unidade | Inquilino | Status |
|---|---|---|
| Nenhuma unidade neste filtro. | ||
Feedback.
Dialog · Toast · Tooltip
Toasttons · com e sem fechar
Tarefa criada
Pagamento atrasado
Nova visita agendada
Cobrança automática desativada
Tooltipaberto (top / bottom) e no hover
Visitantes: 1.869AbaixoPasse o mouse ou use Tab
DialogEsc ou clique no fundo fecha
Templates.
Padrões de composição prontos em design-system/templates.
Painel administrativo
Login → Painel → Imóveis → Manutenção → Financeiro
Responsivo: <760px mobile (barra inferior), 760–1179px tablet, ≥1180px desktop (rail lateral). Rota: /design-system/admin.
Referências HTML
originais do Claude Design
Abra no navegador a partir de design-system/reference/index.html (funciona offline do projeto, sem servidor).