Design system
People choose one of four colors, light or dark, and their language. Every screen takes its colors from the same tokens, so any choice applies across the whole app without redesigning a screen. That makes 8 contexts from one design.
The same screen in all 8 contexts
Appearance: color, mode and language, with a live preview
| Theme | Light primary | White text | Dark primary | Dark text |
|---|---|---|---|---|
| Slate / أزرق | #2E5E7E | 7.0:1 | #8DB8D6 | 8.9:1 |
| Forest / أخضر | #2F6B57 | 6.2:1 | #8CCDB4 | 10.3:1 |
| Rose / وردي | #8E4A57 | 6.4:1 | #E3A9B4 | 9.4:1 |
| Ochre / عسلي | #7A5A16 | 6.4:1 | #DDBB6E | 10.2:1 |
Session type colors (workshop, ongoing, one-time) and Live stay the same in every theme, and every badge carries a word, not only a color.