Look back

Practised today

Look through these words again without changing when they return for practice.

No words practised yet today.

Welcome to Supertaal

Choose languages to compare on every card, then pick a card view.

Connected languages

Choose at least two. You can change these later in settings.

Card view

Settings

Connected languages

Choose at least two. Read out loud uses voices on this device.

English
Dutch
Spanish

Study cards

View
Animation
Flag display

Where settings are kept

Saved with your account: connected languages, pronunciation, word filters, card display, daily goal, and A1 choices.

Kept on this device: theme, phrase situation, and number of new phrases.

Kept only while this page stays open: search, current cards, and unsaved progress.

Sign in to keep progress and favourites for next time.

Live 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
Information text
Success text
Warning text
Error text

Type scale

Heavy heading · 900

Body copy · 400

code · monospace

Fallback sample: مرحبا · नमस्ते · Привет · 你好

Spacing and radius

Surface shadow

Shared panel depth

Actions

Solid and outline actions share depth; ghost stays flat.

Icon only: Favorite
Not saved Saved

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.

New words each day

Connected-language control

Responsive real control with minimum selection, ordering, pronunciation, keyboard focus, and 44px targets.

Feedback and status

Neutral status or empty state.Empty
Saved successfully.Ready
Action needs attention.
Loading example

Panels, stats, and map topics

Assessed
128
Learning
24
Due
6

Everyday actions

Recommended

12 unseen · 8 learning · 4 retained

Open map

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.
  • Theme selection: show current value, selected option semantics, and polite confirmation; system fallback is never persisted.
  • Live announcements: loading, errors, card position, grading, empty results, sync, and feedback use status or alert roles.
  • Compact translation scroll: translations scroll independently while grading and navigation stay visible.

Ownership and adoption checklist

  1. Reuse shared component or semantic class before route CSS.
  2. Test loading, empty, error, active, disabled, and success states.
  3. Check desktop, tablet, 390px, and 320px without overflow.
  4. Keep content data static; keep learner state in existing stores.