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
Heavy heading · 900
Body copy · 400
code · monospaceFallback sample: مرحبا · नमस्ते · Привет · 你好
Spacing and radius
Surface shadow
Shared panel depth
Actions
Solid and outline actions share depth; ghost stays flat.
Icon only: Favorite
Iconography
Use Lucide only for product UI and category icons. Keep flags, brand marks, logos, and content imagery in their native formats.
16px compact 20px standard 24px prominent
- Keep visible action text; icon-only controls need an unambiguous nearby label and aria-label.
- Mark decorative icons aria-hidden and let icons inherit currentColor.
- Restrict hover motion to subtle directional travel; reduced motion removes all control and icon motion.
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.