Card

The primary surface container for grouped content. Cards always use warm shadows — never gray. The 24px border-radius keeps them soft without being childish. Four surface variants cover every context: paper for most content, glass for overlapping layered surfaces, dark for the moments section, and teal for the settle action.

Variants

Paper

Default surface. Expense cards, summary panels, modals.

Glass

Frosted overlay on gradient or image backgrounds.

Dark

Moments section, dark overlays, night mode context.

Teal

Settle action card. One per screen at most.

Paper is the workhorse. Most expense cards, list surfaces, and side panels use this. Warm border + medium shadow.

Glass is for layered UIs — when a card floats over a gradient or photo. It uses backdrop-filter: blur(20px). Not all browsers support this; always test with a fallback.

Dark is the ink surface for the "moments" section of the landing or any dark-themed screen. Children should use dark-text tokens.

Teal is reserved for the primary settle action. It's a full-width CTA card — never use it for informational content. Only one teal card per screen view.

Sizes

Compact — 16px padding

For list rows and dense UI.

Default — 24px padding

Standard expense cards, summary panels.

Spacious — 32px padding

Feature cards, empty states, onboarding.

Padding	Use case
16px	Compact list rows, inline group summaries
24px	Default — expense cards, panels, modals
32px	Feature highlights, onboarding steps, empty states

States

Default

Hover

Pressed

Disabled

State	Visual change	Class
Default	Resting shadow and border	—
Hover	Elevates to `--shadow-lg`, lifts `translateY(-2px)`	`.card-interactive`
Pressed	`scale(0.97)`	`.card-interactive`
Disabled	40% opacity, no hover or press states	Inline opacity

On dark surfaces

Dark card

Used directly on dark canvas.

Glass on dark

Frosted over dark surfaces.

On dark backgrounds, use .card-dark. For glass effects on dark, the --glass-bg and --glass-border tokens automatically adjust via the [data-theme="dark"] override in tokens.css — no extra classes needed.

Anatomy

Card content goes here.

24px border-radius (--r-lg)

Warm shadow (never gray)

Part	Element	Notes
Container	`<div class="card">`	Always `--r-lg` (24px) radius. `overflow: hidden` clips children to the rounded corners.
Surface	Background	Never cold gray. Paper, glass, dark, or teal — from the design tokens only.
Shadow	`box-shadow`	Always warm-tinted (`rgba(23,21,19,…)`). Never use `rgba(0,0,0,…)` shadows on light surfaces.
Border	1px solid	Paper card: `--ink-line`. Dark card: `--dark-border`. Glass: `--glass-border`. Teal: none.

Usage

Do Use .card-paper for nearly all card uses. Add .card-interactive only when the whole card is clickable. One card variant per visual group — don't mix paper and dark cards in the same list.

Don't Don't use gray shadows (rgba(0,0,0,…)) — all shadows are warm-tinted. Don't use .card-teal for anything other than the settle/pay action. Don't nest cards more than one level deep.

Do Reserve .card-glass for surfaces that sit over a colored or image background. Make sure the backdrop blur is visually meaningful — if the card is over a solid color, use .card-paper instead.

Don't Don't use .card-glass over the default canvas color — there's nothing to blur through. Don't use overflow: visible on cards with rounded corners; child elements will bleed out.

Accessibility

Interactive cards When using .card-interactive, wrap in a <button> or <a>, or add role="button" + tabindex="0" + keyboard handlers (Enter, Space). A <div> with only a click handler is not keyboard accessible.

Teal cards The settle card uses teal background with paper text. Contrast ratio: ~4.8:1. Meets WCAG AA. Text on teal should always use --s-paper, never white — white on teal is too high contrast and breaks the warm palette.

Glass cards backdrop-filter is not supported in all browsers (notably Firefox without a flag, as of 2024). Always test with the fallback: when the filter is unavailable, the card falls back to a semi-opaque background which should remain legible.

Code

HTML

<!-- Paper card (default) -->
<div class="card card-paper">
  Content here
</div>

<!-- Interactive paper card -->
<button class="card card-paper card-interactive">
  Farzi Cafe dinner — ₹2,800
</button>

<!-- Glass card -->
<div class="card card-glass">
  Content here
</div>

<!-- Teal settle card -->
<button class="card card-teal card-interactive">
  Settle ₹1,050 with Priya →
</button>

CSS classes

Class	Purpose
`.card`	Base — border-radius, padding, overflow: hidden
`.card-paper`	Warm paper surface, hairline border, medium shadow
`.card-glass`	Frosted glass with backdrop-filter
`.card-dark`	Dark elevated surface — for dark sections
`.card-teal`	Teal fill — settle/pay CTA only
`.card-interactive`	Adds hover lift, press scale, cursor pointer

Design tokens used

Token	Value	Role
`--r-lg`	24px	Border radius — all cards
`--s-paper`	#FBF8F0	Paper variant background
`--ink-line`	#DDD2B8	Paper variant border
`--shadow-md`	warm 0 8px 24px…	Default card shadow
`--shadow-lg`	warm 0 24px 60px…	Hover state shadow
`--glass-bg`	rgba(251,248,240,0.72)	Glass background
`--glass-border`	rgba(255,255,255,0.55)	Glass border
`--dark-elevated`	#2A2521	Dark variant background
`--teal`	#0E7C66	Teal variant background