Design Tokens
Base visual do sistema: 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
15px · 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 branco 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 é o valor base — sections, cards, sidebar. Os demais servem para elementos menores.
XS
4px
SM
6px
Base
10px
base
LG
16px
XL
24px
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 suaves em rgba para comunicar elevação. 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 MN Design System
Buttons
Badges
Cards
Acompanhe o progresso dos seus mentorados com métricas em tempo real.
Controle completo das receitas, despesas e metas financeiras do mês.
Alerts
MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter