Chuv Studio

01 — FOUNDATION

Card System

Como os blocos de conteúdo são construídos dentro dos containers de seção. Os cards são a terceira camada da hierarquia visual da Chuv Studio.

Hierarquia Visual

Três camadas, sempre nesta ordem

Todo conteúdo real da Chuv Studio passa por três camadas. O Card System define a terceira — os blocos em neutral gray 50 que vivem dentro dos containers de seção e envolvem o conteúdo final.

01

Base canvas

Fundo da página — branco puro

02

Section container

Container de seção — cinza claro, radius 10px

03

Card

Bloco de conteúdo — neutral gray 50, stroke branco, padding 45px, radius 0px

Card Specs

As regras fixas de todo card

Background#f9f9f9 → neutral gray 50
Borda1px solid #ffffff → border-white
Corner Radius0px → rounded-none (regra da identidade)
Padding45px todos os lados → p-[var(--card-padding)]
Token--card-padding: 45px (globals.css)

Estrutura Visual

Diagrama anotado — card dentro do container de seção

Section container — bg #efefef, radius 10px
Card
bg #f9f9f9
border #ffffff
radius 0px
p-[var(--card-padding)]
gap entre cards — 16px
Card

Padrão de implementação

O código Tailwind que todo card deve seguir

Card básico

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

Cards em grid dentro de uma section

<section className="rounded-[10px] bg-[#efefef] p-4">
  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

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

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

  </div>
</section>

Mapa de tokens

bg-[#f9f9f9]Fundo do card → neutral gray 50
border-whiteStroke branco do card
rounded-noneSem radius → regra da identidade
p-[var(--card-padding)]Padding interno → --card-padding (45px)
gap-4Gap entre cards → 16px

Regras

Restrições não negociáveis

  1. 01

    Sempre neutral gray 50

    O fundo do card é sempre #f9f9f9. O branco puro pertence ao canvas base da página.

  2. 02

    Sempre com stroke branco

    Cards sempre têm border-white. O contraste vem da superfície cinza clara do próprio card.

  3. 03

    Sem corner radius

    Cards usam rounded-none. A identidade Chuv reserva o radius de 10px exclusivamente para os containers de seção.

  4. 04

    Elementos internos também retos

    Badges, imagens, botões e demais componentes usados dentro da section ou do card também seguem rounded-none.

  5. 05

    Padding consistente

    Use sempre p-[var(--card-padding)]. Nunca px-6, p-4, ou outros valores ad hoc.

  6. 06

    Gap de 16px

    Quando múltiplos cards estão lado a lado ou empilhados, o gap entre eles é sempre gap-4 (16px).

  7. 07

    Não aninhados

    Cards não contêm outros cards. Hierarquia é: seção → card → conteúdo.

Chuv Studio Design System · Foundation: Card System · neutral gray 50 → border-white → rounded-none → p-[var(--card-padding)]