Everyday actions
Recommended12 unseen · 8 learning · 4 retained
Open mapLive review route
Supertaal design system
Source of truth: $lib/assets/css/app.css, DaisyUI semantic roles, and real shared
components. Component owners change behavior; route owners compose these contracts.
Foundations
Semantic theme roles adapt across installed themes.
Base
Soft surface
Primary
Success
Warning
Error
Type scale
Page title
Section title
Body copy
Supporting copy
Spacing and radius
Surface shadow
Shared panel depth
Actions
Forms
Live preview control; changes stay on this page.
Daily Learn goal
Feedback and status
Neutral status or empty state.Empty
Saved successfully.Ready
Action needs attention.
Example error with recovery guidance.
Loading example
Panels, stats, and map topics
- Assessed
- 128
- Learning
- 24
- Due
- 6
Vocabulary card
Loading first published word…
Accessibility and adoption
Component and state notes
- Keep visible labels, focus treatment, semantic status roles, and 44px touch targets.
- Use theme roles so contrast follows active DaisyUI theme.
- Preserve reduced-motion behavior for swipe and press feedback.
Ownership and adoption checklist
- Reuse shared component or semantic class before route CSS.
- Test loading, empty, error, active, disabled, and success states.
- Check desktop, tablet, 390px, and 320px without overflow.
- Keep content data static; keep learner state in existing stores.