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.

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.

Corner Radius

10px

Arredondamento padrão do contorno da section em todas as páginas.

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-[#D4D4D4]

Fundo da página. Equivale ao base canvas.

BG SECTION

bg-[#ECECEC]

Fundo do container da section.

RADIUS

rounded-[10px]

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

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 className="rounded-[10px] bg-[#ECECEC] px-[60px] py-[80px]">
  <h2 className="text-[32px] font-bold leading-none text-black">
    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: 10,
      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.

Radius único e constante

O raio estrutural é sempre 10px 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.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter