Design Tokens
Base visual do sistema Masi Experience: cor, tipografia, espaçamento, radius e regras de aplicação. Só dark.
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 em tudo, igual ao hub: sections, cards, sidebar, navbar, botões, inputs, badges, menus, dialogs e imagens. Só elementos circulares (avatar, switch, indicadores) usam full.
Base
10px
base
Section
10px
Card
10px
Botão
10px
Input
10px
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 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 Masi Experience Design System
Buttons
Badges
Cards
Acompanhe inscrições, check-ins e lotação de cada evento com métricas em tempo real.
Visão completa de público, presença e metas de engajamento da experiência.
Fundo Experience Dark (800) com acento no Experience 200, que mantém 6.00:1 sobre o 800.
Alerts
Masi Experience Design System - Criado por Chuv Studio