Design Tokens
Base visual do sistema Masi Workshop: cor, tipografia, espaçamento, radius e regras de aplicação.
Modos de cor
Light e dark com toggle
Dois conjuntos de tokens com os mesmos nomes. O site abre em light; o toggle alterna a página inteira.
Light e dark, com toggle.
A Masi Workshop tem dois modos de cor completos. O site sempre abre em light, e o botão no canto inferior direito alterna para dark. A troca vale para a página inteira (fundo, sidebar, navbar, sections, cards, texto, bordas, logo e o fundo do hero) e é gravada em .workshop-root[data-mode].
Modo atual da página:
lightUse o botão no canto inferior direito para alternar.
Abre em light
Toda vez que o design system abre, ele começa em light. O dark é escolha de quem está navegando.
Um toggle, a página inteira
O botão troca o modo de tudo de uma vez, inclusive a cena 3D do fundo do hero (uma cena para cada modo).
Dois conjuntos de tokens
Os mesmos nomes (--background, --primary, --card…) com valores dark e light. A troca é uma transição de cor de 700ms com EASE.out (200ms com movimento reduzido).
Os dois conjuntos lado a lado (ilhas fixas)
Modo Dark
#F54A00Card no modo dark
Mesmos componentes, mesmo layout. Só os tokens mudam.
Modo Light
#F54A00Card no modo light
Mesmos componentes, mesmo layout. Só os tokens mudam.
Exemplos que precisam de um modo fixo usam data-mode-fixed: redeclaram os tokens no próprio elemento e não mudam com o toggle.
Tokens por modo
| Token | Dark | Light | Papel |
|---|---|---|---|
--background | #050505 | #D4D4D4 | Página |
--background-section | #1C1C1E | #ECECEC | Section |
--card | #2C2C2C | #FFFFFF | Card e popover |
--foreground | #F0F0F0 | #000000 | Texto principal |
--muted-foreground | #9E9E9E | #474747 | Texto de apoio |
--primary | #FF621F | #992E00 | Botão, link, foco (400 · 700) |
--primary-foreground | #000000 | #FFFFFF | Texto sobre a primária |
--brand-accent | #F54A00 | #F54A00 | Cor oficial, texto preto |
--brand-dark | #661F00 | #361000 | Fundo de alto contraste (800 · 900) |
--accent | #361000 | #FFEAE0 | Fundo suave (900 · 50) |
--input | #767676 | #767676 | Borda de campo (3:1 nos dois) |
--sidebar | #1E1E1E | #ECECEC | Navegação |
Como declarar
<section data-mode="dark">…</section> {/* abre dark */}
<section data-mode="light">…</section> {/* troca a ~70% da tela */}
<section data-mode="dark">…</section> {/* fecha dark */}
{/* exemplo que não pode mudar com o scroll */}
<div data-mode-fixed="light">…</div>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 um degrau acima da section 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 suaves em rgba para comunicar elevação. Sections não recebem shadow, apenas cards. No dark a sombra do card vira preto a 40% e quase não aparece, por isso a elevação só se lê no light.
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 Workshop Design System
Buttons
Badges
Cards
Acompanhe inscrições e presença em cada encontro prático com métricas em tempo real.
Visão completa de inscrições, presença e entregas da sessão aplicada. Preto sobre o laranja oficial (5.86:1).
Fundo Workshop Dark (800 no dark, 900 no light) com acento claro da escala (200 e 300), contraste AA nos dois modos.
Alerts
Masi Workshop Design System - Criado por Chuv Studio