Design Tokens
Base visual do sistema Masi Advisor: cor (só dark), tipografia, espaçamento, radius 0px e regras de aplicação.
Escala tipográfica
Fonte Inter. 9 níveis hierárquicos — do Display ao Caption.
Display
48px · Extrabold
Orientação Especializada
H1
32px · Bold
Diagnóstico
H2
24px · Bold
Clientes em advisory
H3
18px · Semibold
Plano de ação
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 (#2C2C2C no dark), sempre com 30px em todos os lados.
Resumo
Este bloco existe para validar visualmente o padding constante do card em qualquer contexto.
Corner Radius
0px em tudo: sections, cards, sidebar, navbar, botões, inputs, badges, menus, dialogs, imagens, avatar e switch. Cantos retos, sem exceção.
Base
0px
base
Section
0px
Card
0px
Botão
0px
Input
0px
Avatar / Switch
0px
Chanfro da marca
A primeira section de cada página recebe um corte diagonal de 32px no canto superior esquerdo, também reto (sem arredondar as pontas do corte), via SVG clipPath + ResizeObserver.
Sombras
No dark a elevação vem das camadas de cor (página → section → card). A sombra preta é sutil e só reforça cards e superfícies flutuantes.
None
Elementos inline, sem elevação
Card
Cards de conteúdo
Section
Sections principais (sem sombra)
Sidebar
Sidebar e painéis
Elevated
Modais, dropdowns
Preview de Componentes
Amostra dos componentes usando os tokens do Masi Advisor Design System
Buttons
Badges
Cards
Acompanhe cada cliente em advisory: diagnóstico, plano de ação e decisões tomadas a cada encontro.
Visão completa dos pontos críticos, prioridades e metas acordadas com o cliente no mês.
Fundo Advisor Dark (700) com acento no Advisor 100, que mantém 8.06:1 sobre ele.
Alerts
Masi Advisor Design System - Criado por Chuv Studio