Component

Card

A container for results, Vault items, and hero blocks. Variants: default, soft, dark, and reference accents (highlightPink / Green / Blue). Optionally hoverable, compact.

Variants

default, soft, dark, and accents (reference: pink, green, blue).

Default

White card with diffuse shadow.

Soft

Purple tint.

Dark

Hero / CTA.

Highlight Pink

5 min

Highlight Green

12 min

Highlight Blue

15 min

Hoverable

For clickable cards: slight lift and stronger shadow on hover (150ms ease-out).

Result card

Role · Company

Vault item

Snippet or skill

Usage

Dark card: primary + ghostOnDark buttons (same as Button doc). Default card for lists and detail blocks.

Hero or CTA block: use primary + ghost for actions.

Specification

  • Radius: 3xl
  • Padding: p-6 (24px); compact → p-4
  • Highlight: highlightPink | highlightGreen | highlightBlue (ds-accent-*-soft)
  • Default: frosted surface (bg-ds-surface-card/70 + blur + border)
  • Hoverable: hover shadow-ds-diffuse-md, -translate-y-0.5, 150ms ease-out
  • Semantic: optional as (div | article | section)