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 branco (#FFFFFF) com texto preto e organiza blocos como títulos, textos, métricas, imagens, ícones e ações.

Base canvas

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

Section container

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

Card

Branco. Terceira camada, onde o conteúdo real é organizado.

Card Specs

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

Card

#FFFFFF

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

Texto do card

#020B34 · muted 72%

Título e corpo em Action 900 (12.36:1); texto secundário em rgba(2,11,52,0.72) (6.30:1). Tokens: --card-foreground e --card-muted-foreground.

Popover / Dialog

#FFFFFF

A camada acima do card é o Action 50, para menus, dialogs e tooltips se separarem do card. Token: --popover.

Corner Radius

0px / raio de 10px

Sem arredondamento, alinhado à linguagem estrutural do sistema. Token: --radius = 0.

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.

Destaque

Card de destaque: gradiente oficial, texto branco e stroke branco. Um por tela.

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. No pacote, use o token: rounded-[var(--radius)].

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-[#000000]">
    Título do card
  </h3>
  <p className="mt-2 text-[13px] leading-6 text-[#000000]/72">
    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 com texto #000000, sobre a section #ECECEC e a página #D4D4D4 (versão branca do hub). O azul fica para ações e destaques.

Corner radius único

O card segue os mesmos raio de 10px usados 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.

Card de destaque com gradiente

Um por tela: gradiente oficial (30deg, #0B37F7 → #3A67FF), texto branco e stroke branco 100%. Sem o stroke ele some na section 500. Classes: action-on-dark action-highlight-card.

Masi Action Design System - Criado por Chuv Studio