Design Tokens
Base visual do sistema PAM: cor, tipografia, espaçamento, radius e regras de aplicação.
Escala tipográfica
Fonte Inter. 9 níveis hierárquicos — do Display ao Caption.
Display
48px · Extrabold
Gestão e Relacionamento
H1
32px · Bold
Dashboard
H2
24px · Bold
Mentorados ativos
H3
18px · Semibold
Resumo financeiro
Body LG
18px · Regular
Texto de apoio para blocos de destaque ou descrições longas.
Body
10px · Regular
Texto padrão para conteúdo de cards, descrições e parágrafos gerais.
Body SM
13px · Regular
Texto secundário para notas, datas e informações complementares.
Label
12px · Semibold · Uppercase
EYEBROW · CATEGORIA · TAG
Caption
11px · Medium · Uppercase
LEGENDA · STATUS · METADATA
Escala de espaçamento
30px no respiro externo e entre sections. Dentro da section: 60px nas laterais e 80px no topo e na base.
--gap-sm
Gap entre elementos pequenos e inline
--gap-md
Gap padrão entre cards
--gap-lg
Gap entre sections e blocos maiores
--spacing-page
Respiro externo entre a borda do background global e as sections
--section-padding-x
Padding lateral interno da section para todo o conteúdo
--section-padding-y
Padding superior e inferior interno da section
Page Respiro
O fundo global precisa manter 30px de respiro em toda a extremidade antes da primeira section e entre todas as sections.
Section Interna
Dentro da section, o conteúdo trabalha com 60px nas laterais e 80px no topo e embaixo. Depois, entram os cards quando o conteúdo precisa ficar separado.
Card com Padding 30
Exemplo isolado do card como terceira camada, sempre #1B3152 e sempre com 30px em todos os lados.
Resumo
Este bloco existe para validar visualmente o padding constante do card em qualquer contexto.
Corner Radius
10px em tudo: sections, cards, sidebar, navbar, botões, inputs, badges, menus, dialogs e imagens. Só elementos circulares (avatar, switch, indicadores) usam full.
Base
25px
base
Section
25px
Card
25px
Botão
25px
Input
25px
Full
∞
Chanfro da marca
A primeira section de cada página recebe um corte diagonal de 32px no canto superior esquerdo via SVG clipPath + ResizeObserver.
Sombras
Sombras em rgba preto, mais densas no dark azul para continuarem perceptíveis. Sections não recebem shadow — apenas cards.
None
Elementos inline, sem elevação
Card
Cards de conteúdo
Section
Sections principais
Sidebar
Sidebar e painéis
Elevated
Modais, dropdowns
Preview de Componentes
Amostra dos componentes usando os tokens do Design System PAM
Buttons
Badges
Cards
Acompanhe a evolução de cada empresa no ciclo de aceleração com métricas em tempo real.
Visão completa de metas, entregas e resultados das empresas no mês.
Fundo Aceleração Dark (700) com acento no Aceleração 100, que mantém contraste AAA sobre ele (8.33:1).
Alerts
Design System PAM - Criado por Chuv Studio