Design Tokens
Base visual do sistema: cor, tipografia, espaçamento, radius e regras de aplicação.
Escala tipográfica
Regra: TÍTULOS em Cormorant Garamond (serifada) · TEXTO CORRIDO em 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
22px · 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
Pontiagudo: 0px em tudo — sections, cards, botões, inputs, badges. O chanfro da marca continua, mas sem arredondamento.
Base
0px
base
Section
0px
Card
0px
Botão
0px
Input
0px
Badge
0px
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 da FOUNDER
Buttons
Badges
Cards
Acompanhe o progresso dos seus mentorados com métricas em tempo real.
Card de destaque usa o gradiente da marca (--founder-brand-gradient).
Alerts
Masi Negócios Design System - Criado por Chuv Studio