title: “Design & colours” description: “How boulingua chooses a colour for each language, and why.” Link to heading
Every boulingua course shares one design system — the same navigation, the same typography, the same rhythm in light and dark. Within that frame each language carries one signature accent colour, so a course is recognisable at a glance without ever looking like a different product.
The rules Link to heading
A language’s accent must be:
- Flag-safe. The hue does not appear in that language’s national flag. Colour should signal which course you are in, not which country a language is spoken in — a language is not a nation, and several of these are spoken across many.
- At least 20° apart from every other accent on the hue wheel, so two courses are never mistaken for each other.
- WCAG AA on white, because it is used for links and rules, not decoration.
- Not hub blue —
#1A73E8is reserved for this umbrella site and for anything that belongs to no single course.
The palette Link to heading
18 languages.
| Code | Language | Accent | Hover | Dark | Dark hover | Status |
|---|---|---|---|---|---|---|
daf | German | ■ #1D87A7 | #176780 | ■ #7ECEE7 | #A9DEEF | live |
efl | English | ■ #248D19 | #1A6612 | ■ #89E77E | #B0EFA9 | live |
fle | French | ■ #4B8D19 | #366612 | ■ #ACE77E | #C7EFA9 | live |
afl | Arabic | ■ #4A23C7 | #3B1CA0 | ■ #977EE7 | #BAA9EF | planned |
cfl | Chinese | ■ #2334C7 | #1C2AA0 | ■ #7E89E7 | #A9B0EF | planned |
ele | Spanish | ■ #198D81 | #12665D | ■ #7EE7DC | #A9EFE8 | planned |
gfl | Greek | ■ #C74A23 | #A03B1C | ■ #E7977E | #EFBAA9 | planned |
ils | Italian | ■ #8023C7 | #671CA0 | ■ #B97EE7 | #D1A9EF | planned |
jfl | Japanese | ■ #867B18 | #5F5811 | ■ #E7DC7E | #EFE8A9 | planned |
lle | Latin | ■ #C72334 | #A01C2A | ■ #E77E89 | #EFA9B0 | planned |
nsf | Norwegian | ■ #6D8618 | #4D5F11 | ■ #CEE77E | #DEEFA9 | planned |
nvt | Dutch | ■ #198D34 | #126626 | ■ #7EE797 | #A9EFBA | planned |
pfa | Persian | ■ #B5892B | #8C6A21 | ■ #E7C97E | #EFDCA9 | planned |
pfl | Polish | ■ #AD701F | #865618 | ■ #E7B97E | #EFD1A9 | planned |
ple | Portuguese | ■ #B723C7 | #931CA0 | ■ #DC7EE7 | #E8A9EF | planned |
rki | Russian | ■ #198D5B | #126642 | ■ #7EE7B9 | #A9EFD1 | planned |
tfl | Turkish | ■ #C7236A | #A01C56 | ■ #E77EAC | #EFA9C7 | planned |
ufl | Ukrainian | ■ #C723A1 | #A01C82 | ■ #E77ECE | #EFA9DE | planned |
CEFR levels Link to heading
Independent of the accents and shared by every course, so a B1 badge means the
same thing everywhere: A #4CAF50 · B #1A73E8 (hub blue) · C #8E24AA.
Where these come from Link to heading
This page is generated. The colours live in one file — design/tokens.yaml in
the kit — from which the site CSS, the LaTeX
material templates, the accent registry and this table are all built. Adding a
nineteenth language is one entry there, not an edit in nineteen places.