Cards
Cards are the primary content container in Naluma. They hold session previews, educational content blocks, progress summaries, and settings groups. The card design is intentionally understated — a white surface with a subtle shadow that lifts it just enough to distinguish it from the background without creating visual noise.
Token source: tokens/component/card.json
Showcase
Section titled “Showcase”Standard card — light
Tonight's session
You've completed 12 consecutive sessions this month. Your average session length is 23 minutes, with the most effective window between 9 and 11 PM.
Standard card — dark
Tonight's session
You've completed 12 consecutive sessions this month. Your average session length is 23 minutes, with the most effective window between 9 and 11 PM.
Feature card — radius.xl + shadow.lg
Your progress this week
7
sessions completed
Interactive (hover-border)
Sound Therapy
Masking, notched audio, and other sound-based approaches.
CBT & Mindfulness
Cognitive behavioral therapy and mindfulness techniques for relief.
Sleep & Tinnitus
Strategies for falling asleep and improving rest with tinnitus. (hover state)
Specifications
Section titled “Specifications”| Property | Token | Resolved value |
|---|---|---|
| Background | semantic.color.surface.card | #FFFFFF (white) |
| Border radius | primitive.radius.md | 8px |
| Shadow | primitive.shadow.md | 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1) |
| Padding | primitive.spacing.24 | 24px |
Title Typography
Section titled “Title Typography”| Property | Token | Resolved value |
|---|---|---|
| Font family | primitive.font-family.heading | Literata (serif) |
| Font size | primitive.font-size.18 | 18px |
| Font weight | primitive.font-weight.semibold | 600 |
| Color | semantic.color.text.primary | #3D2E2A (warm-dark) |
Body Typography
Section titled “Body Typography”| Property | Token | Resolved value |
|---|---|---|
| Font size | primitive.font-size.14 | 14px |
| Color | semantic.color.text.secondary | #7A6560 (muted-brown) |
| Line height | primitive.line-height.body-sm | 1.65 |
Dark Mode
Section titled “Dark Mode”In dark mode, the card background shifts to the elevated dark surface color:
| Property | Dark mode token | Resolved value |
|---|---|---|
| Background | semantic.color-dark.surface.card | #352C29 (dark-surface) |
| Title color | semantic.color-dark.text.primary | #FBFAF1 (warm-white) |
| Body color | semantic.color-dark.text.secondary | #B09A90 (dim-brown) |
The shadow remains the same — the rgba(0,0,0,...) values work across both themes since they are relative to the surface beneath them.
Interactive Variant
Section titled “Interactive Variant”The interactive card extends the standard light card with a hover state that shifts the border to the action primary color. It is suited for navigation grids, clickable content surfaces, and topic cards where the entire card surface acts as a tap or click target.
Token: component.card.interactive.border-hover → resolves to semantic.color.action.primary (burnt sienna).
The border transition uses primitive.transition.fast to keep the response crisp without feeling abrupt — consistent with button hover timing.
| Property | Token | Resolved value |
|---|---|---|
| Border (default) | semantic.color.border.subtle | 1px subtle warm border |
| Border (hover) | component.card.interactive.border-hover | semantic.color.action.primary (burnt sienna) |
| Transition | primitive.transition.fast | 150ms ease |
This variant is used in the WordPress TopicNav grid, where five topic cards sit in a responsive grid and indicate interactivity via the border shift on hover.
Usage Guidelines
Section titled “Usage Guidelines”- 24px internal padding is the default. Do not reduce card padding to fit more content — if the content doesn’t fit, the card needs to show less.
- One primary action per card. If a card is tappable, the entire surface should be the tap target. Do not nest multiple interactive elements within a card.
- Cards should not stack without spacing. Use at least
spacing.16between cards to avoid a wall-of-content effect. - Feature cards (e.g., session start, milestone reached) can use
primitive.radius.xl(20px) andprimitive.shadow.lgfor emphasis. Use sparingly. - Interactive cards should be used when the card itself is a navigation element. Avoid mixing interactive cards and non-interactive cards in the same grid — the hover behavior creates an implicit affordance that all cards in the group are clickable.