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 fundo branco 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

#FFFFFF

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

Corner Radius

10px

Raio padrão do card, alinhado à linguagem estrutural do sistema.

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

Fundo do card.

RADIUS

rounded-[10px]

Raio do card.

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-[10px] bg-[#FFFFFF] p-[30px]">
  <h3 className="text-[18px] font-semibold text-black">
    Título do card
  </h3>
  <p className="mt-2 text-[13px] leading-6 text-[#474747]">
    Conteúdo principal do card com texto de apoio.
  </p>
</div>

Cards em grid dentro de uma section

<section className="rounded-[10px] bg-[#ECECEC] px-[60px] py-[80px]">
  <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
    <div className="rounded-[10px] bg-[#FFFFFF] p-[30px]">
      {/* card 1 */}
    </div>

    <div className="rounded-[10px] bg-[#FFFFFF] p-[30px]">
      {/* card 2 */}
    </div>
  </div>
</section>

Regras

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

Card sempre branco

A terceira camada usa #FFFFFF para criar contraste claro contra a section.

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.

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