/klɑŋk/
Klank is Dutch for a sound: the ring of a bell, the colour of a voice, the way a word lands in the ear. The app teaches the sounds of Dutch before the words, so the name is the method.
This page is the design system. Everything on it is the real component with the real tokens, so it cannot drift from the app.
The mark is a voice and its sound: an oranje stem for the speaker, two white ripples for the klank, on a Delft tile. It is the favicon, the home-screen icon and the wordmark's companion. The wordmark is the word set in the display face, nothing more.
The mark never changes colour with the theme. Delft and oranje are its identity, not its state.
Alternatives considered: Vlot (fluent, and a raft), Klinker (vowel, and a brick), Stap (step). Klank won because it names what Step 1 teaches and still fits a whole course.
Paper and ink carry the page. Delft blue, the blue of the tiles, draws the structure. Oranje, the national colour, is spent on one button. Each swatch shows its light value over its dark value; the page you are reading uses whichever theme is on.
The spaced-repetition stages have their own palette, kept apart from the accent so a pink pill never competes with the oranje button. Locked is an outline; every learned stage is filled.
Each chapter of the guide has a colour, used only on the big spelling in its cards and on its chapter ring. Six is as many as a reader can hold.
| Pair | Light | Dark | Used for |
|---|---|---|---|
| Ink on paper | 16.1 | 15.7 | All body text |
| Delft on paper | 7.7 | 7.6 | Links, counts, headings in blue |
| Muted on paper | 5.4 | 7.4 | Captions, hints |
| Label on Delft | White, 8.3 | Ink, 7.5 | Selected chips, Delft buttons |
| Label on oranje | 4.8 | 6.7 | Buttons and icons, at any size |
| White on ok | 5.4 | Ink, 7.5 | Solved tiles, Continue |
Every pair above meets WCAG AA for text. The first oranje failed it at 3.6 against white, so the token was darkened; the mark keeps the brighter #e8590c because it sits on Delft and carries no text.
Three faces, each with one job. Dutch words and phonetic symbols always sit in the serif, so a learner can tell at a glance what is Dutch and what is explanation.
Bricolage Grotesque, 800 and 700. Headings, buttons, numbers, the wordmark.
Atkinson Hyperlegible, 400 and 700. Everything you read. Drawn for low vision, so b, d, p and q cannot be confused.
Gentium Plus, 400 and 700. Dutch words and IPA, in the guide, in the drill, in every chip.
| Role | Size | Face |
|---|---|---|
| Page title | 30px, 36px from md | Display 700, tight tracking, balanced wrap |
| Section | 20px, 24px on long pages | Display 700 |
| Body | 17px over 1.55, under 60 characters a line | Body 400 |
| Caption, hint | 14px and 12px, muted | Body 400 |
| Big spelling on a card | 48px | Serif 700, family colour |
| Count | 24px to 30px, tabular figures | Display 800 |
One column, 1024px wide at most, 16px gutters on a phone and 24px from the tablet size up. Corners are 0.9rem on cards and 1.5rem on the hero. Spacing moves in steps of 4px; sections sit 32px apart.
Phone: four tabs along the bottom, the thumb's reach. The active tab is oranje.
Laptop: the same pages under a sticky top bar, with the lesson and review counts as pills.
Drill: no navigation at all. A thin progress line, one question, and a verdict bar fixed to the bottom.
Oranje for the next thing, Delft when the next thing is new material, outline for side doors, red only after a confirmation step. A label is a verb and names the outcome.
The only oranje circle. Large in the drill, medium on a card, small in a chip. Slow plays the same clip at 0.6×. Every play writes a caption naming the source.
A word, its gloss, a small play button. A chip without a native recording says so in ten-point type rather than hiding it.
Time to review
7 cards waiting
Step 1 cleared
Every sound at Guru
The hero on Today has four tones: oranje when reviews wait, Delft when a lesson is ready, green when the step is cleared, plain when there is nothing to do.
Correct
huis house
Not quite
The answer was ui.
Fixed to the bottom of the drill after every answer, so the thumb never moves. The verdict is one or two words; the correction is the answer, not a lecture.
After Tofugu's kana quiz. Idle, tried and wrong, solved. A miss stays open and shows no answer, because the struggle to recall is the exercise. Every blank is the same width, so its size never gives the answer away.
Mini games score against three thresholds, as in Our Story. Medals never affect reviews or the checkpoint.
1 2 3 4 choose an answer, Enter check or continue, Space play again while typing. Quizzes and drills never need a mouse.
The app talks like a good teacher sitting next to you: plain, specific, short, and never excited on your behalf. Sentence case everywhere. Verbs on buttons. Numbers stay numbers. Dutch is always set in the serif and never wrapped in quotes.
7 cards waiting
You have 7 pending review items!
Say the thing. No exclamation marks, no filler nouns.
Review now
Submit
A button names what happens when it is pressed, and keeps its name across the flow.
Not quite. The answer was ui.
Oops! Better luck next time 😅
A miss gets the answer, not sympathy. No emoji in the interface.
Native speaker, recorded by GerardM
Audio
The source is a fact the learner needs, so it is stated in full.
Nothing is due. Free practice is always open.
No reviews available at this time.
An empty state points at the next door.
Sure? This cannot be undone.
Are you absolutely sure you want to permanently delete all of your progress data?
One sentence of warning, then the real button.
Dutch headings are flavour, never instruction. A learner on day one must be able to use every screen in English alone.
Tokens live in src/app/globals.css; this page reads them. The mark is src/components/brand.tsx and src/app/icon.svg. See also About.