Design System · v1.0

Acredity
Design System

Documentação central da interface e experiência do usuário. Reúne a especificação técnica de componentes, padrões e tokens integrados diretamente ao código.

01 — Paleta

Cores

Estilos de cor definidos como variáveis nativas no Figma, exportados como CSS Custom Properties em tokens/variables.css.

Brand
brand/primary
#D51385
Botão primário, destaque
brand/primary-700
#B3005F
Hover do botão primário
brand/primary-900
#991B1B
Estado pressionado
brand/accent
#6653F6
Destaque secundário, links
brand/success
#0FCEA1
Sucesso, etapa concluída
Status
status/warning
#FCB232
Alerta, atenção
status/warning-dark
#DB9B2C
Borda e ícone de alerta
status/warning-bg
#FFEED0
Fundo de banner de alerta
status/error-soft
#EA637E
Ícone de erro suave
status/error-bg
#FEF2F2
Fundo de campo com erro
status/accent
#9747FF
Destaque vibrante, badges
Blue Gray
blue-gray/500
#6F7DA0
Texto auxiliar, subtítulos
Neutral
neutral/black
#000000
Texto principal
neutral/900
#212121
Headings, overlay
neutral/800
#383838
Texto em fundo escuro
neutral/700
#3A414B
Secondary hover, nav
neutral/600
#666666
Corpo de texto
neutral/500
#767676
Texto secundário
neutral/400
#858585
Labels, muted
neutral/300
#979797
Placeholders
neutral/200
#B3B3B3
Elementos desabilitados
neutral/100
#D9D9D9
Steps inativos, bordas
neutral/50
#F5F5F5
Fundo de inputs, surface
neutral/white
#FFFFFF
Canvas, cards

02 — Fonte

Tipografia

15 estilos de texto sob o prefixo Types-Acredity/ no Figma. Fonte primária: DM Sans.

display/boldDM Sans Bold 700 · 40px
R$ 1.200,00
40px
lh 1.1
title/lgDM Sans Semi Bold 600 · 26px
Simule seu crédito
26px / lh 30px
ls -0.27px
title/mdDM Sans Semi Bold 600 · 20px
Confirmação de dados
20px / lh 35px
ls -0.16px
title/smDM Sans Bold 700 · 18px
12× de R$ 189,90
18px / lh 30px
ls -0.72px
body/lg-regularDM Sans Regular 400 · 16px
Acredity — crédito pessoal com as melhores taxas do mercado.
16px / lh 24px
body/lg-semiboldDM Sans Semi Bold 600 · 16px
Dados pessoais confirmados
16px / lh 24px
body/lg-boldDM Sans Bold 700 · 16px
Valor total da parcela
16px / lh 24px
body/md-regularDM Sans Regular 400 · 14px
Preencha seus dados para continuar a solicitação de crédito.
14px / lh 24px
body/md-compactDM Sans Regular 400 · 14px
Texto em espaçamento compacto
14px / lh 18px
body/md-relaxedDM Sans Regular 400 · 14px
Texto em espaçamento relaxado
14px / lh 20px
body/md-mediumDM Sans Medium 500 · 14px
Label de campo de formulário
14px / lh 24px
caption/md-regularDM Sans Regular 400 · 13px
Dados de endereço e localização do titular
13px / lh 18px
caption/sm-lightDM Sans Light 300 · 12px
Ao continuar, você concorda com os Termos de Uso e Política de Privacidade.
12px / lh 20px
caption/sm-mediumDM Sans Medium 500 · 12px
LABEL DE SEÇÃO
12px / lh 13px
caption/sm-boldDM Sans Bold 700 · 12px
RÓTULO DE CONFIRMAÇÃO
12px / lh 24px

03 — Componentes

Botões

Passe o mouse nos botões para ver os estados Hover e Pressed. Estados controlados por CSS puro via tokens.

Primary Button
token: primary/main · #D51385 · border-radius: pill (9999px)
Scale
XL
LG
MD
SM
XS
States · LG
Default
Hover
Pressed
Disabled
Secondary Button
token: text/secondary · #767676 · hover: surface/linktab · #3A414B
Scale
XL
LG
MD
SM
XS
States · LG
Default
Hover
Pressed
Disabled
Icon Buttons
Botões circulares com ícone · sem label de texto
Primary Icon
Default
Hover
Pressed
Disabled
Secondary Icon
Default
Hover
Pressed
Disabled

04 — Componentes

List Components

Steps Indicator, Description List, List Icon e Timeline — os quatro padrões de lista do sistema.

Steps — Indicator
States
1

Completed

Etapa concluída

1

Active

Etapa atual

1

Inactive

Etapa pendente

Em Contexto
1
2
3
4
Description List
Variantes
Sem subtítulo
Data da primeira parcela:
27/06/2026
Com subtítulo
Data da primeira parcela:
Taxa de juros
27/06/2026
2,15% ao mês
Com 2 subtítulos
Data da primeira parcela:
Taxa de juros
CET (a.m.)
27/06/2026
2,15% ao mês
2,48% ao mês
List Icon

1. Selfie e biometria

Capture sua selfie para validar sua identidade.

2. Envio de documentos

Envie seu RG ou CNH para continuar a análise.

3. Assinatura do contrato

Revise e assine seu contrato com segurança.

Timeline
States

Completed

Etapa concluída

In Progress

Em andamento

Pending

Aguardando

Em Contexto

Proposta enviada

27 de abril de 2026 - 9:30h

Aprovação do empréstimo

Em análise na mesa de crédito

Dinheiro na conta

Em pouco tempo após a aprovação

05 — Componentes

Text Field

Estados do componente de input — fiel ao frame Text Field do Figma.

Text Field — States
Default
Active
Error
Favor digite um CPF válido
Disabled
Success
Message Success
O CPF foi preenchido automaticamente com os dados do seu cadastro.

06 — Tokens

Spacing & Radius

Escala de espaçamento e raio de borda — variáveis CSS prontas para uso.

Spacing Scale
xxs4px
xs8px
sm12px
md16px
lg24px
xl32px
2xl40px
3xl48px
section64px
Border Radius Scale
xs 4px
sm 8px
md 12px
lg 20px
xl 32px
pill 9999