Cards

Cards are fundamental containers throughout the design system, providing consistent spacing and visual hierarchy for content organization. All cards use standardized padding specifications to ensure visual consistency across all interfaces.

Principles

Consistent Spacing

Standardized Padding: All cards use 20px top/right/left, 30px bottom
Visual Hierarchy: Consistent spacing creates predictable content organization
Scalable System: Uniform padding works across all screen sizes
Content Breathing Room: Adequate spacing ensures readability and focus

Visual Clarity

Backgrounds & Emphasis: Cards use no background, white (#ffffff), or tone 50. Use tone 50 on white pages; use white on tone 50 pages; no‑background cards can be used on both.
Highlighting: Apply a background (white or tone 50) when a section needs mild emphasis. Use no background when no special focus is needed.
Interactivity: Cards can be fully clickable (entire card) or contain clickable elements (buttons/links) inside.
Border Usage: Generally only cards that are fully clickable get a border. Border color depends on the background the card rests on (not the card fill) and follows inline link tone logic.
Drop Shadow: Any card with a background color (white or tone 50) uses a centered shadow: 0 10px 20px 0 at 10% opacity of the card's static color (tone 1200 of the same family). For white cards, use grey-1200.

Spacing Hierarchy System

Text → Highlight → Card Formula

All cards and modals follow a consistent spacing hierarchy based on text content width:

The Formula

Text: x pixels (content width)
Highlight Box: x + 20px (10px extension on each side, plus 10px extra at bottom)
Card/Modal: x + 40px (20px padding on each side)

Example at 360px Viewport

Text: 280px
Highlight Box: 300px (280 + 20)
Card/Modal: 320px (280 + 40)
Viewport: 360px (40px total margins)

/* Spacing tokens */
--text-side-padding: 20px
--highlight-extension: 10px (each side)
--highlight-bottom-extension: 10px (extra)
--card-padding: 20px (each side), 30px (bottom)

Card Specifications

Universal Card Structure

Padding Specifications

Top:20px

Right:20px

Bottom:30px

Left:20px

Visual Properties

Border Radius:8px

Border (White Cards):None (only add borders for fully clickable cards)

Shadow (White Cards):0 10px 20px 0 @10% of tone-1200 for the card's color family (white uses grey-1200)

Border (Colored Cards):N/A (follows clickable‑card border rule)

Highlight Boxes

Using Highlight Boxes

Highlight boxes extend 10px beyond text on all sides, with an additional 10px at the bottom. They're perfect for code snippets, tooltips, and emphasized content within cards.

Code Highlight

Example of code with proper highlighting:

background: #ffffff
padding: 20px
border-radius: 8px

Info Highlight

Example of informational content:

This is highlighted information that extends beyond the normal text boundaries.

Card Types

White Content Card

Default non-clickable content container. White background; no border by default (optionally a subtle shadow). If the entire card is clickable, apply the clickable card border rules below.

background: #ffffff
border: none
box-shadow: 0 10px 20px rgba(26, 26, 26, 0.10)

Colored Principle Card

Used for principles, guidelines, and informational sections. Features colored backgrounds without borders for visual distinction.

background: #f5f5f5 (grey-100)
border: none
box-shadow: 0 10px 20px rgba(26, 26, 26, 0.10)

Clickable Card Borders & States (Principles)

When applied: Only for cards that are fully clickable (the entire card performs a navigation/action). Cards with only internal buttons/links do not get a card border.
Border surface: The border color is based on the background the card rests on (not the card's own fill).
Base tones by background:
- On white (#ffffff): use tone 600 of the chosen color family
- On any tone 50 background: use tone 700 of the same color family
States:
- Hover/Focus: tone 1000 of the same family; border width = 2px
- Active: black (#040404); border width = 2px
Color family selection: Follow the same purpose rules as inline links (e.g., navigation = blue, destructive = red, neutral/contextual = neutral family).

Card Examples on All Backgrounds

Page Background: White (#ffffff)

Non-clickable card (white): no border, optional subtle shadow.

Clickable card (tone 50 fill): border 1px var(--blue-600) on white background.

Clickable card (no background): border 1px var(--blue-600) on white background.

Page Background: Grey 50

Non-clickable card (tone 50): no border.

Clickable card (white fill): border 1px var(--blue-700) on tone 50 background.

Clickable card (no background): border 1px var(--blue-700) on tone 50 background.

Colored Card Examples

Blue Information Card

Used for informational content, getting started guides, and transitional actions. Blue cards signal helpful information and guidance.

background: #e7fbff (blue-100)
text: blue-1200 (#001025)

Green Success Card

Used for success states, positive feedback, and completion messages. Green cards indicate successful actions and positive outcomes.

background: #eafff2 (green-100)
text: green-1200 (#001402)

Yellow Warning Card

Used for warnings, important notices, and implementation guidelines. Yellow cards draw attention to important information.

background: #fef3e1 (yellow-100)
text: yellow-1200 (#191300)

Red Error Card

Used for error states, destructive actions, and critical warnings. Red cards signal problems that need immediate attention.

background: #fff2e8 (red-100)
text: red-1200 (#300005)

Implementation

CSS Implementation

.card {
  background: #ffffff;
  border: none; /* Only add borders for fully clickable cards per rules */
  border-radius: 8px;
/* Shadow color = 10% opacity of tone-1200 for the card's color family.
   For white cards, use grey-1200 (#1a1a1a). */
  box-shadow: 0 10px 20px rgba(26, 26, 26, 0.10);
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 20px;
}

CSS Markup Example

<div class="card">
  Card content
</div>

Clickable Card Border CSS

Example CSS for clickable cards showing border tones and state transitions on white and tone 50 page backgrounds.

.clickable-card {
  border-radius: 8px;
  border: 1px solid currentColor;
  transition: border-color 120ms ease, border-width 120ms ease;
}

/* On white background: base tone 600 */
.on-white .clickable-card {
  color: var(--blue-600);
  background: #ffffff; /* or transparent */
}
.on-white .clickable-card:hover,
.on-white .clickable-card:focus-visible {
  color: var(--blue-1000);
  border-width: 2px;
}
.on-white .clickable-card:active {
  color: #040404;
  border-width: 2px;
}

/* On tone 50 background: base tone 700 */
.on-50 .clickable-card {
  color: var(--blue-700);
  background: #ffffff; /* or var(--grey-50) or transparent */
}
.on-50 .clickable-card:hover,
.on-50 .clickable-card:focus-visible {
  color: var(--blue-1000);
  border-width: 2px;
}
.on-50 .clickable-card:active {
  color: #040404;
  border-width: 2px;
}