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, usa o cinza mais claro da escala dark (#2C2C2C) 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

Fundo padrão do card. Token: --card.

Sombra

0 12px 28px rgba(0,0,0,.4)

No dark a sombra é mais densa para continuar perceptível. Token: --shadow-card.

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-[#2C2C2C]

Fundo do card.

RADIUS

rounded-[var(--radius)] (10px)

Raio do card. Sempre pelo token --radius (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-[#2C2C2C] p-[30px]">
  <h3 className="text-[18px] font-semibold text-[#F0F0F0]">
    Título do card
  </h3>
  <p className="mt-2 text-[13px] leading-6 text-[#9E9E9E]">
    Conteúdo principal do card com texto de apoio.
  </p>
</div>

Cards em grid dentro de uma section

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

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

Regras

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

Card sempre na camada mais clara

A terceira camada usa #2C2C2C para se destacar da section escura (#1C1C1E): no dark, quanto mais alta a camada, mais clara a superfície.

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 Experience Design System - Criado por Chuv Studio