Card

In context

Purpose

Card draws a soft boundary around a single idea — a summary, a record, a decision. It's the basic building block of a DayTwo screen, and the rule that makes screens calm: one main card per screen.

Anatomy

A card is a rounded surface with consistent inner padding. Everything else (headings, text, buttons, metrics) is composed inside it — the card itself only owns the boundary, the background, and the lift.

Variants

• Elevated — the default; a soft shadow lifts it off the canvas.
• Outlined — a hairline border instead of a shadow. Lightest on the eye and on low-end Android.
• Filled — a tinted surface for a grouped, inset block.

Code

import { Card } from '@daytwo/components'

<Card variant="elevated" onPress={openDetails}>
{/* one heading + one piece of content */}
</Card>

When to use

• To hold one unit of content or one decision (a sale record, a summary, a coach suggestion).
• To make a whole block tappable — pass onPress and the entire card becomes one large target.

When NOT to use

• For two equal-weight decisions side by side — that forces a choice a first-time user may not be ready to make. Pick one primary card.
• As pure decoration — a card with no real content is just visual noise.
• Nested many levels deep — cards inside cards inside cards lose the boundary's meaning.

The correct scenario

The home screen shows one elevated card — "Today's summary" — as the single focus. Supporting information sits in quieter outlined cards below it, so the eye lands on the one thing that matters first.

Anti-patterns

Edge cases

Tokens used