CREATE SOMETHING

Elevation Levels

Cards use shadow tokens to create depth. Three levels: subtle (flat surface), medium (standard card), and large (elevated modal).

Subtle

Minimal shadow, nearly flat. Use for inline content cards.

Subtle Card

Uses --shadow-sm for minimal elevation. Blends with background while maintaining subtle separation.

 "token attr-name">class="token tag"><div "token attr-name">class="card card-subtle">
  "token attr-name">class="token tag"><h4>Subtle Card"token attr-name">class="token tag"></h4>
  "token attr-name">class="token tag"><p>Minimal elevation for inline content."token attr-name">class="token tag"></p>
"token attr-name">class="token tag"></div>

"token attr-name">class="token tag"><style>
  .card-subtle {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
"token attr-name">class="token tag"></style>

Medium

Standard card elevation. Use for most card components.

Medium Card

Uses --shadow-md for standard elevation. Clear separation from background while remaining grounded.

 "token attr-name">class="token tag"><div "token attr-name">class="card card-medium">
  "token attr-name">class="token tag"><h4>Medium Card"token attr-name">class="token tag"></h4>
  "token attr-name">class="token tag"><p>Standard elevation for card components."token attr-name">class="token tag"></p>
"token attr-name">class="token tag"></div>

"token attr-name">class="token tag"><style>
  .card-medium {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
"token attr-name">class="token tag"></style>

Large

High elevation for modals and overlays. Use sparingly for prominent surfaces.

Large Card

Uses --shadow-lg for prominent elevation. Floats above content, suitable for dialogs and popovers.

 "token attr-name">class="token tag"><div "token attr-name">class="card card-large">
  "token attr-name">class="token tag"><h4>Large Card"token attr-name">class="token tag"></h4>
  "token attr-name">class="token tag"><p>High elevation for modals and overlays."token attr-name">class="token tag"></p>
"token attr-name">class="token tag"></div>

"token attr-name">class="token tag"><style>
  .card-large {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
"token attr-name">class="token tag"></style>

Border Radius

Canon provides radius tokens from sharp to fully rounded. Cards typically use --radius-lg (12px) for balanced softness.

--radius-sm 6px

--radius-md 8px

--radius-lg 12px (recommended)

--radius-xl 16px

Border radius usage
 .card {
  /* Use --radius-lg for standard cards */
  border-radius: var(--radius-lg);
}

.card-header {
  /* Inner elements can use smaller radius */
  border-radius: var(--radius-md);
}

.card-tag {
  /* Pills and badges use --radius-full */
  border-radius: var(--radius-full);
}

Interactive States

Cards can be interactive. Use hover states with Canon motion tokens for smooth transitions.

Clickable Card

Hover lifts the card and emphasizes the border. Uses --duration-micro for quick response.

 "token attr-name">class="token tag"><button "token attr-name">class="card card-interactive">
  "token attr-name">class="token tag"><h4>Interactive Card"token attr-name">class="token tag"></h4>
  "token attr-name">class="token tag"><p>Hover to see elevation change."token attr-name">class="token tag"></p>
"token attr-name">class="token tag"></button>

"token attr-name">class="token tag"><style>
  .card-interactive {
    transition: all var(--duration-micro) var(--ease-standard);
    cursor: pointer;
  }

  .card-interactive:hover {
    border-color: var(--color-border-emphasis);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .card-interactive:active {
    transform: translateY(0);
  }
"token attr-name">class="token tag"></style>

Token Reference

Complete list of tokens used in Card components.

Elevation

--shadow-sm Subtle shadow for minimal elevation

--shadow-md Standard shadow for card components

--shadow-lg Large shadow for modals and overlays

Border Radius

--radius-sm 6px — Subtle rounding

--radius-md 8px — Medium rounding

--radius-lg 12px — Recommended for cards

--radius-xl 16px — Large rounding

Colors

--color-bg-surface #111111 — Card background

--color-border-default rgba(255,255,255,0.1) — Default border

--color-border-emphasis rgba(255,255,255,0.2) — Hover border

Motion

--duration-micro 200ms — Hover transitions

--ease-standard cubic-bezier(0.4, 0.0, 0.2, 1)