Design Tokens
Base visual do sistema Masi Action: cor, tipografia, espaçamento, raio de 10px e regras de aplicação.
Primária por superfície
Nenhuma cor única funciona nos dois fundos (o 900 sobre a section dá 2.64; o branco sobre o card dá 1.54). Por isso a primária inverte: branca com texto azul no escuro, azul 500 com texto branco no claro. Os componentes são os mesmos; mudam os tokens que eles leem.
Sobre a página e a section
Conjunto escuro: .action-root, sidebar e .action-on-dark.
Sobre o card e o popover
Conjunto claro: .ds-card, [data-slot=card] e .action-portal.
Foco
Contorno de 2px com offset 2px na cor do --ring da superfície: branco sobre a section (7.23:1), azul 500 sobre o card (4.68:1) e o popover (5.88:1). O anel translúcido do hub não chega a 3:1 sobre o azul.
Cores semânticas por superfície
O par do hub reprova sobre o azul. Success, destructive, warning e info também trocam de valor: tons escuros com texto branco no claro, tons claros com texto 900 no escuro.
No card e no popover
Na página e na section
Gráficos
Gráficos vivem sempre dentro de card (fundo 100). Todas as séries passam 3:1; entre vizinhas, mantenha legenda e separador de 2px.
Gradiente oficial
linear-gradient(30deg, #0B37F7, #3A67FF). Fica para o que deve ser único; se tudo for gradiente, nada se destaca.
Hero
Primeira section
A única section em gradiente. Só texto branco (mín. 4.60:1 na ponta #3A67FF), sem muted. Card dentro dela é o 50, nunca o 100.
Botão principal
Um CTA por tela, em superfície clara ou na página 900, com texto branco. Os demais botões usam a primária sólida.
Card de destaque
Destaque
Gradiente + texto branco + stroke branco 100%.
Sobre a section, sempre com o stroke branco (sem ele o card some no 500). Classes action-on-dark action-highlight-card.
Onde não entra
- Sections comuns, sidebar, cards comuns e popover: tira a hierarquia.
- Sobre a section 500 sem stroke branco: 500 x 500 = 1.0; #3A67FF x 500 = 1.57.
- Texto em gradiente: #3A67FF sobre o card dá 2.98; #0B37F7 sobre a página dá 2.64.
- Inputs, bordas, badges pequenos, hover/ativo e séries de gráfico: estados e dados pedem cor sólida.
Escala tipográfica
Fonte Inter. 9 níveis hierárquicos — do Display ao Caption.
Display
48px · Extrabold
Execução e Movimento
H1
32px · Bold
Dashboard
H2
24px · Bold
Frentes ativas
H3
18px · Semibold
Resumo do ciclo
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 Action 500 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, raio de 10px: sections, cards, sidebar, navbar, botões, inputs, badges, menus, dialogs e imagens. Como no Founder, nem avatar, switch e radio são redondos.
Base
0px
base
Section
0px
Card
0px
Botão
0px
Input
0px
Dialog
0px
Chanfro da marca
A primeira section de cada página recebe um corte diagonal reto de 32px no canto superior esquerdo, sem arredondamento nas quinas, via SVG clipPath + ResizeObserver.
Sombras
Sombras em azul 900 translúcido para comunicar elevação sobre o azul. Sections não recebem shadow — apenas cards e camadas flutuantes.
None
Elementos inline, sem elevação
Card
Cards de conteúdo
Section
Sections não recebem sombra
Sidebar
Sidebar e painéis
Elevated
Modais, dropdowns
Preview de Componentes
Amostra dos componentes usando os tokens do Masi Action Design System
Buttons
Badges
Cards
Acompanhe as entregas de cada frente com métricas em tempo real.
Visão completa de metas, entregas e conversões do mês. Card de destaque: gradiente, texto branco e stroke branco.
Fundo Action Dark com acento no Action 200, que mantém 7.90:1 sobre o 900. O 500 nunca vira texto aqui (2.64).
Alerts
Masi Action Design System - Criado por Chuv Studio