Design system
Tokens and components from the Juno design system, rendered live in the current language and direction.
Color
Ink
#1D2A57 text
Paper
#F6F7FB app
Pen
#3355FF action
Night
#0F1733 3D stage
Mint mark
#0FA37A line
Pink mark
#E0479B line
Yellow mark
#B58900 line
Sky mark
#1C9BD6 line
Correct
with check icon
Caution
with info icon
Error
with x icon
Rule
#E3E7F2 lines
Controls
Type
Display
Bricolage Grotesque 800, 40/44Heading
Bricolage 700, 28/34Body text for explanations
Lexend 400, 15/24Secondary and captions
Lexend 400, 13/20Juno, the AI teacher
A deliberately non-human character: an orb with an orbit ring. It never pretends to be a person, and every session starts with "Juno is an AI teacher".
Color-linked dual coding
The vertical velocity grows every second, while the horizontal velocity stays the same.
One concept, one highlighter color, used the same way in narration, on-screen text, visuals and equations within a step. Color is never the only cue: terms are also named in text.