Princípio

A section é o container que organiza um assunto completo dentro do fundo global.

Duas camadas, sempre nesta ordem.

A base da página é o fundo global. Sobre ela entram os containers de section, que organizam cada assunto da tela. A primeira section recebe o chanfro da marca no canto superior esquerdo. As seguintes seguem o contorno padrão com radius de 10px. Dentro desse container vivem título, textos, ícones, imagens e os cards, que aprofundam e organizam o conteúdo da própria section.

Base canvas

Fundo global da página. Cria o respiro externo e aparece entre uma section e outra.

Section container

Container principal do assunto. Usa radius de 10px e chanfro de 32px apenas na primeira section.

Cards internos

Blocos usados para explicar, dividir e aprofundar o conteúdo que já está dentro da section.

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:

light

Use 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

#F54A00

Card no modo dark

Mesmos componentes, mesmo layout. Só os tokens mudam.

Campo com borda --input

PrimáriaAccentLink

Modo Light

#F54A00

Card no modo light

Mesmos componentes, mesmo layout. Só os tokens mudam.

Campo com borda --input

PrimáriaAccentLink

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>

Section Specs

Regras fixas do container de section em qualquer página do foundation.

Base Canvas

#050505 · #D4D4D4

Background da página. Token: --background.

Section

#1C1C1E · #ECECEC

Container do assunto. Token: --background-section.

Border

1px solid rgba(255,255,255,.08) · #FFFFFF

Contorno da section: branco puro no light, branco a 8% no dark. Token: --border.

Corner Radius

10px

Arredondamento padrão do contorno da section em todas as páginas. Token: --radius.

Chamfer

32px na primeira

Corte diagonal aplicado apenas na primeira section para marcar a abertura da página.

Padding

80px × 60px

80px no topo e na base. 60px nas laterais para organizar todo o conteúdo interno.

Gap Vertical

30px

Espaço entre uma section e a seguinte no fluxo da página.

Estrutura visual

Exemplo de como a página monta a primeira section com chanfro e as seguintes com o contorno padrão.

Section 1

Abertura com chanfro

Primeira section da página com corte diagonal de 32px no canto superior esquerdo.

Card

Resumo principal do assunto.

Card

Complemento visual ou dado de apoio.

Section 2

Contorno padrão

Radius de 10px, sem chanfro, mantendo o mesmo padding estrutural.

Card largo

Quando o assunto precisa de uma leitura linear, um card único pode ocupar o bloco principal.

Section 3

Outro arranjo interno

A terceira section muda a composição dos cards, mas preserva a mesma estrutura externa.

Texto

Bloco principal para explicação, contexto ou narrativa.

Apoio

Card secundário para dado, ícone ou observação complementar.

Padrão de implementação em Tailwind

Referência prática de classes e tokens para montar a base da página e o container de section.

BG PAGE

bg-background

Fundo da página. Equivale ao base canvas (#050505 · #D4D4D4). Sempre pelo token: o valor muda com o modo.

BG SECTION

bg-background-section

Fundo do container da section (#1C1C1E · #ECECEC).

MODO

data-mode="dark" | "light"

Toda section declara o modo. Sem o atributo, herda o da section anterior.

RADIUS

rounded-[var(--radius)]

Raio padrão da section, dos cards e dos blocos estruturais: 10px.

PADDING SECTION

px-[60px] py-[80px]

Padding estrutural do container da section.

GAP ENTRE SECTIONS

gap-[30px]

Distância vertical constante entre uma section e outra.

PRIMEIRA SECTION

ChamferedPanel

A primeira section usa o componente com chanfro em vez de um rounded simples.

Section básica

<section
  data-mode="dark"
  className="rounded-[var(--radius)] bg-background-section px-[60px] py-[80px]"
>
  <h2 className="text-[32px] font-bold leading-none text-foreground">
    Título da section
  </h2>
  <p className="mt-3 max-w-3xl text-[13px] leading-6 text-muted-foreground">
    Texto introdutório da section com o conteúdo principal do assunto.
  </p>
</section>

Código base da página com sections

<div className="flex flex-col gap-[30px] bg-background p-[30px]">
  {/* premissa black: a primeira section é sempre dark */}
  <section data-mode="dark">
    <ChamferedPanel
      innerStyle={{
        background: "var(--background-section)",
        borderRadius: "var(--radius)",
        padding: "80px 60px",
      }}
    >
      <div>{/* primeira section */}</div>
    </ChamferedPanel>
  </section>

  <section
    data-mode="light"
    className="rounded-[var(--radius)] bg-background-section px-[60px] py-[80px]"
  >
    {/* bloco light no meio: a página inteira troca a ~70% da tela */}
  </section>

  <section
    data-mode="dark"
    className="rounded-[var(--radius)] bg-background-section px-[60px] py-[80px]"
  >
    {/* fecha em dark */}
  </section>
</div>

Regras

Conjunto fixo de decisões que mantém a hierarquia da página consistente.

Base sempre no background da página

A página começa no base canvas (#050505 · #D4D4D4). Esse fundo nunca vira área principal de conteúdo.

Tudo vive dentro de uma section

Nenhum conteúdo principal fica solto no background. Títulos, textos, imagens, ícones e cards entram sempre dentro da section.

Radius único e constante

O raio estrutural é sempre 10px, em sections, cards, sidebar, botões e campos, para manter a linguagem visual estável.

Gap e padding consistentes

O espaço entre sections é 30px. Dentro da section, o padding é 80px no topo e na base com 60px nas laterais.

Sem section dentro de section

A hierarquia é sempre page background, section, conteúdo e cards. Sections não são aninhadas entre si.

Toda página abre dark e declara o modo de cada section

Premissa black. No máximo 2 trocas por página (dark, light, dark), bloco light com pelo menos uma tela de conteúdo e fechamento em dark.

Masi Workshop Design System - Criado por Chuv Studio