primary.50
#F3F7FE
Documentação do design system
CarFlow
Esta página centraliza as decisões visuais do client do sistema de aluguel de carros. Ela foi pensada para consulta rápida durante implementação de telas, componentes e estados.
Paleta base
Escala cromática
primary.100
#E7EFFC
primary.200
#CBDEF9
primary.300
#9EBFF3
primary.400
#689BEB
primary.500
#387ADE
primary.600
#2663C7
primary.700
#1A4DA8
primary.800
#113A88
primary.900
#0B2965
neutral.0
#FFFFFF
neutral.50
#F8F9FC
neutral.100
#F1F2F8
neutral.200
#E5E7F0
neutral.300
#CBD0DC
neutral.400
#9CA3B7
neutral.500
#757D93
neutral.600
#525B72
neutral.700
#363F52
neutral.800
#222939
neutral.900
#181D2A
neutral.950
#10131F
accent.100
#FFF2D4
accent.300
#FDCB70
accent.500
#D98704
accent.700
#804C00
Tokens semânticos
Light e dark lado a lado
Token
Uso
Light
Dark
bg.page
Plano de fundo principal do produto.
#F8F9FC
#10131F
bg.surface
Cards, modais e painéis principais.
#FFFFFF
#181D2A
bg.surface-2
Inputs, áreas internas e camadas secundárias.
#F1F2F8
#222939
bg.primary
CTA principal e destaques de jornada.
#1A4DA8
#2663C7
bg.primary-subtle
Realces suaves ligados à marca.
#E7EFFC
rgba(38, 99, 199, 0.18)
text.primary
Texto principal e títulos.
#10131F
#F8F9FC
text.secondary
Texto de apoio, labels e metadados.
#525B72
#9CA3B7
text.brand
Links e trechos de ênfase da marca.
#1A4DA8
#689BEB
border.default
Borda padrão de inputs e contêineres.
#E5E7F0
#363F52
border.strong
Separações mais explícitas quando necessárias.
#CBD0DC
#525B72
border.brand
Foco, seleção e destaque interativo.
#387ADE
#689BEB
interactive.hover
Estado hover do botão primário.
#113A88
#689BEB
interactive.press
Estado pressed do botão primário.
#0B2965
#9EBFF3
accent.default
Preço, métricas monetárias e CTA secundário.
#D98704
#FDCB70
Tipografia
Fontes e tamanhos disponíveis
Famílias
DM Serif Display
Usada para títulos, manchetes, números de destaque e trechos de alto impacto.
DM Sans
Base de leitura do sistema: navegação, formulários, cards, tabelas e textos de apoio.
Regras
- Use DM Serif Display apenas em pontos de alto contraste visual.
- Use DM Sans para todo conteúdo funcional e leitura contínua.
- Evite misturar mais de dois níveis tipográficos fortes na mesma seção.
- Prefira variações de tamanho e peso antes de introduzir novas famílias.
display
DM Serif Display
48px a 88px responsivo
Hero, manchetes e chamadas de impacto.
Precisão editorial para aluguel premium
h1
DM Serif Display
40px a 60px responsivo
Título principal de página.
Arquitetura visual do sistema
h2
DM Sans
28px a 36px
Seções e blocos principais.
Tonalidade, ritmo e clareza operacional
h3
DM Sans
22px
Títulos de cards e painéis.
Estados de interface
h4
DM Sans
18px
Subtítulos e grupos de formulário.
Hierarquia de apoio
body-lg
DM Sans
16px
Parágrafos de abertura e conteúdo descritivo.
Use este estilo quando a leitura precisar de mais respiro, como explicações de fluxo e contexto operacional.
body
DM Sans
14px
Corpo padrão, tabelas e textos de interface.
Texto padrão do produto com legibilidade neutra e alta compatibilidade com telas densas.
caption
DM Sans
12px
Metadados, horários e notas rápidas.
Atualizado há 3 minutos
label
DM Sans
12px
Etiquetas, tags e cabeçalhos compactos.
status operacional
Spacing
Escala de espaçamento
4px
8px
12px
16px
24px
32px
48px
64px
Radii
Arredondamentos padrão
4px
8px
12px
16px
999px
Logos
Versões da marca (Light / Dark)
Horizontal (principal)
Light
Dark
Uso: header desktop, páginas públicas e materiais de marca.
Empilhada
Light
Dark
Uso: telas de login, mobile quando o espaço horizontal for limitado.
Marca (ícone)
Light
Dark
Uso: favicon, botões, avatars e contextos de espaço reduzido.
Regras rápidas
- Use a variante light em fundos claros e a variante dark em fundos escuros.
- Mantenha a área de respiro mínima (altura da letra "F").
- Preferir SVG para novas exportações; estes PNGs são as versões finais aprovadas pelo design team.