Section System
Como as sections se apoiam no fundo global, quais são as regras fixas do container e como a estrutura visual se repete na página.
Section Specs
Regras fixas do container de section em qualquer página do foundation.
Base Canvas
#D4D4D4
Background da página. Token: --background.
Section
#ECECEC
Container do assunto. Token: --background-section.
Border
1px solid #FFFFFF
Stroke branco a 8% (o mesmo do dark mode do hub): 3.01:1 contra a página, um filete de luz contra a section.
Corner Radius
0px / raio de 10px
Sem arredondamento no contorno da section, em todas as páginas. Token: --radius = 0.
Chamfer
32px na primeira
Corte diagonal reto (sem arredondamento) 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 2
Contorno padrão
Raio 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-[#D4D4D4]
Fundo da página. Equivale ao base canvas.
BG SECTION
bg-[#ECECEC]
Fundo do container da section.
RADIUS
rounded-[10px]
Raio de 10px na section, nos cards e nos blocos estruturais. Escreva rounded-[var(--radius)] no fonte.
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 reto em vez de um retângulo simples.
Section básica
<section className="rounded-[10px] bg-[#ECECEC] px-[60px] py-[80px]">
<h2 className="text-[32px] font-bold leading-none text-[#000000]">
Título da section
</h2>
<p className="mt-3 max-w-3xl text-[13px] leading-6 text-[#474747]">
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-[#D4D4D4] p-[30px]">
<ChamferedPanel
innerStyle={{
background: "#ECECEC",
borderRadius: 0,
padding: "80px 60px",
}}
>
<div>{/* primeira section */}</div>
</ChamferedPanel>
<section className="rounded-[10px] bg-[#ECECEC] px-[60px] py-[80px]">
{/* section seguinte */}
</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 #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.
Raio de 10px, sempre
O raio estrutural é sempre 0px (raio de 10px), em sections, cards, sidebar, botões, campos, menus e dialogs, 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.
Azul só como destaque
A estrutura é a versão branca do hub. O azul oficial #0B37F7 entra em botões, links, item ativo da sidebar e destaques; o gradiente só num CTA por tela e no card de destaque.
Masi Action Design System - Criado por Chuv Studio