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
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.
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.