Lingo Toolbox — Design System

24 components · 35 cards · v0.1

The token layer, component library and screen recreations behind Lingo Toolbox — an open-source language-learning app built as a set of tools rather than a course. Dark is the product default; every specimen below is the live HTML, not a screenshot.

Brand

Clear space & minimum size Clear space = height of the 'l'. Wordmark ≥ 96px wide
Logo lockups Wordmark, app icon, reduced mark, stacked mark — never redraw

Colors

Ink — dark surfaces Rail → sidebar → app → card → raised → border
Paper — light surfaces Marketing pages, print, light product shell
Status success · warning · danger · info, with subtle fills
Text on surfaces strong / body / muted / faint, dark and light
Tool accents One hue per tool — used on card stripes, rails and tags
Violet — primary The one brand fill: buttons, active states, card backs
Dark / light parity The same components under [data-theme] — dark is the product default, light is the same tokens retuned

Type

Display — Baloo 2 Hero, display, h1, h2. Weight 800 almost always
Eyebrow & micro-label 11/800, uppercase, 0.08em — the only tracked-out type
Mono — JetBrains Mono Phonetics, roots, intervals, shortcuts
UI text — Nunito Sans Body, labels, meta. 400 / 600 / 700 / 800

Spacing

Control heights 28 · 36 · 44 · 52 — 44 is the mobile hit minimum
Corner radii 4 · 6 · 8 · 12 · 16 · 24 · pill
Spacing in use Card 20 pad · 12 stack · 8 inline · 34px rows
Spacing scale 4px base — 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80

Elevation

Shadows xs → xl. Near-black, tight, never soft grey
Focus & selection 3px violet ring outside, 1.5px inset inside
Chunky press edge 3px solid bottom edge compresses to 1px on press

Motion

Durations & easing 80 → 640ms · standard, out, spring

Illustration

OpenMoji set Sample of the language-related illustrations — CC BY-SA 4.0

Sound

Sound palette ZzFX-synthesised UI sound — click to audition

Components

Buttons Variants, sizes, icon + state coverage
Badges, tags, progress Badge, Tag, ProgressBar, StreakPill, Avatar
Toast & Tooltip Transient confirmation and hover labels
Form controls Input, Select, Checkbox, Radio, Switch
Icons Lucide line set, 2px stroke, currentColor
Learning primitives Flashcard, ReviewRating, EtymologyNode
Card & Dialog Raised container and modal
Illustration picker Search, sections and a way back to none

App

Lingo Toolbox app Dark product shell — home, review, etymology, library, settings

Marketing site

Marketing home Light-theme landing page — hero, tools, open source, footer