01 — FOUNDATION

Section System

Como toda página da Chuv Studio é construída — a camada estrutural que define o fundo base e os containers de seção empilhados sobre ele.

Princípio

Duas camadas, sempre nesta ordem

Toda página é construída a partir de exatamente duas camadas. A camada inferior é sempre um canvas branco puro. Sobre esse canvas empilhamos os containers de seção — blocos retangulares com cor de fundo, radius e padding fixos. Todo o conteúdo real vive dentro desses containers. Nada significativo fica diretamente sobre o branco.

Base canvas

Branco puro. Nunca usado como superfície de conteúdo. Sempre embaixo.

Section containers

Cinza claro, radius 10px. Todo o conteúdo vive aqui — diretamente ou dentro de cards.

Conteúdo interno

Cards, imagens, componentes e qualquer elemento dentro da section usam rounded-none. O radius de 10px pertence exclusivamente ao container de section.

Section Specs

As regras fixas de todo container de seção

Background#efefef → section container

Corner Radius10px → rounded-[10px]

Padding16px mínimo → p-4

Gap (vertical)16px entre sections → gap-4

Base canvas#ffffff → --color-background

Conteúdo internorounded-none → sem corner radius dentro da section

Estrutura Visual

Diagrama anotado — como a página se empilha

Base canvas — #ffffff

Section

bg #efefef

radius 10px

p-4

gap — 16px

Section

bg #efefef

radius 10px

p-4

gap — 16px

Section

bg #efefef

radius 10px

p-4

Padrão de implementação

O código Tailwind que toda página segue

<main className="min-h-screen bg-white">
  <div className="flex flex-col gap-4 p-4">

    <section className="rounded-[10px] bg-[#efefef] p-4">
      {/* conteúdo direto da section */}
      <h2 className="rounded-none">Título</h2>
      <p className="rounded-none">Texto, imagem ou componente</p>

      <div className="rounded-none border border-white bg-[#f9f9f9] p-[var(--card-padding)]">
        {/* card dentro da section */}
      </div>
    </section>

    <section className="rounded-[10px] bg-[#efefef] p-4">
      <img className="rounded-none" src="/..." alt="" />
    </section>

    <section className="rounded-[10px] bg-[#efefef] p-4">
      <button className="rounded-none">{/* componente */}</button>
    </section>

  </div>
</main>

bg-whiteFundo da página

bg-[#efefef]Fundo da section → --color-card

rounded-[10px]Radius da section → --radius

rounded-noneRegra de qualquer elemento interno à section

p-4Padding mínimo interno → 16px

gap-4Gap entre sections → 16px

Regras

Restrições não negociáveis

01
Base sempre branca
O fundo da página é sempre #ffffff. Nunca use cor ou padrão no base.
02
Conteúdo dentro da section
Nada significativo fica diretamente sobre o branco. Tudo vive dentro de uma section.
03
Radius único
Sections usam sempre exatamente 10px de corner radius. Nenhuma exceção.
04
Tudo dentro é reto
Cards, imagens, badges, botões e qualquer outro elemento dentro da section usam rounded-none.
05
Gap consistente
O espaço vertical entre sections é sempre 16px.
06
Padding mínimo
Sections têm sempre ao menos 16px de padding em todos os lados. Viewports maiores podem ter mais.
07
Sem sections aninhadas
Sections não contêm outras sections. A hierarquia é: página → section → conteúdos e cards.

Conteúdo interno — Card System

O que vive dentro das sections

Dentro de cada section podem existir duas coisas ao mesmo tempo: conteúdos diretos e cards. Os conteúdos diretos são textos, imagens e componentes que pertencem ao assunto da própria section. Os cards entram quando esse assunto precisa ser dividido em blocos separados. Em ambos os casos, tudo que está dentro da section segue a regra de rounded-none.

Página

bg-white

Section

bg-[#efefef] · rounded-[10px]

Conteúdos

texto, componentes, imagens · rounded-none

Cards

bg-[#f9f9f9] · border-white · p-[var(--card-padding)] · rounded-none

Ver Card System completo →

Chuv Studio Design System · Foundation: Section System · bg-white → section #efefef → card #f9f9f9