Princípio

O card é a terceira camada da hierarquia visual e recebe o conteúdo real da interface.

Três camadas, com o card no conteúdo final.

A página começa no background global, passa pelo container da section e chega ao card. É no card que o conteúdo real ganha estrutura, contraste e leitura.

O card vive sempre dentro das sections. Ele define a terceira camada visual, fica um degrau acima da section nos dois modos (#2C2C2C no dark, branco no light) e organiza blocos como títulos, textos, métricas, imagens, ícones e ações.

Base canvas

Fundo global da página. Cria o respiro e segura a hierarquia completa.

Section container

Agrupa o assunto da página e recebe o card como conteúdo principal.

Card

Terceira camada. Onde o conteúdo real é organizado e ganha contraste.

Card Specs

Especificações fixas do card como terceira camada da interface.

Card

#2C2C2C · #FFFFFF

Fundo padrão do card nos dois modos. Token: --card.

Sombra

0 12px 28px

Geometria fixa, cor por modo (--shadow-card-color): preto a 40% no dark, quase invisível; azul-ardósia a 6% no light.

Corner Radius

10px

Raio padrão do card, alinhado à linguagem estrutural do sistema. Token: --radius.

Padding Interno

30px × 30px

Espaçamento interno base do card em todos os lados.

Gap Interno

16px a 24px

Faixa de espaçamento entre blocos internos, conforme a densidade do conteúdo.

Estrutura visual

Exemplo prático de como o card se comporta dentro da section e que tipos de bloco ele pode conter.

Section

Exemplo de card dentro da estrutura

O card organiza o conteúdo real sem quebrar a hierarquia da página.

Card principal

Título do conteúdo

Aqui entram texto, narrativa, contexto e qualquer bloco principal de leitura da section.

Badge

Ação

Métrica

Bloco compacto para número, indicador ou status.

Apoio

O card também pode conter uma observação curta, mídia ou dado secundário.

Padrão de implementação em Tailwind

Conjunto de classes e decisões práticas para construir cards dentro da estrutura do sistema.

BG CARD

bg-card

Fundo do card (#2C2C2C · #FFFFFF). Sempre pelo token: o valor muda com o modo.

RADIUS

rounded-[var(--radius)]

Raio do card: 10px.

PADDING

p-[30px]

Padding interno base do card em todos os lados.

GAP INTERNO

gap-4 / gap-6

Gap entre blocos internos.

CONTEXTO

dentro da section

O card sempre vive dentro da section.

Card básico

<div className="rounded-[var(--radius)] bg-card p-[30px] shadow-[var(--shadow-card)]">
  <h3 className="text-[18px] font-semibold text-card-foreground">
    Título do card
  </h3>
  <p className="mt-2 text-[13px] leading-6 text-muted-foreground">
    Conteúdo principal do card com texto de apoio.
  </p>
</div>

Cards em grid dentro de uma section

<section
  data-mode="light"
  className="rounded-[var(--radius)] bg-background-section px-[60px] py-[80px]"
>
  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
    <div className="rounded-[var(--radius)] bg-card p-[30px]">
      {/* card 1 */}
    </div>

    <div className="rounded-[var(--radius)] bg-card p-[30px]">
      {/* card 2 */}
    </div>
  </div>
</section>

Regras

Conjunto fixo de uso para manter o card coerente dentro da hierarquia visual.

Card sempre um degrau acima da section

A terceira camada usa o token --card (#2C2C2C · #FFFFFF) para se destacar da section nos dois modos.

Corner radius único

O card segue o mesmo raio estrutural de 10px usado no sistema.

Conteúdo interno pode variar

Textos, métricas, ícones, mídia, ações e blocos de apoio podem viver dentro do card.

Padding interno constante

Topo, base, esquerda e direita seguem o padding base do card para preservar leitura e ritmo.

Gap interno consistente

Os elementos dentro do card precisam manter espaçamentos previsíveis para não quebrar a hierarquia.

Card sempre dentro de section

A hierarquia correta é background da página, section, conteúdo e card. O card não substitui a section.

Masi Workshop Design System - Criado por Chuv Studio