OmniTutor — design language v0

1.The four blues

Each blue has a job. Light sky for friendliness and lift; deep sky for primary action and decisive moments; sea for secondary depth and panels; ink for the night-sky background that holds it all.

light sky

Light sky

sky-100#b8e0ff

sky-300#7ec8f0

sky-500#4ea9e8

friendly accents · hover lifts · secondary text · supportive labels · the breeze on the page

deep sky · primary

Deep sky

sky-700#1d6fc4

sky-900#0d3a78

primary buttons · active mode · selected segment · the focused moment · "I mean this"

sea

Sea

sea-400#2a96b0

sea-600#0e6e8e

sea-800#0a4f68

panel surfaces · secondary depth · card backgrounds · the medium where lessons live

ink · background

Ink

ink-700#1a2542

ink-800#131c33

ink-900#0a1424

ink-950#050a16

page background · darkest panels · the night sky behind everything

2.Contrast — warm light against cool depth

Four blues alone read as cold. Three warm anchors give the page a sun. Use sparingly: gold for "important", coral for "warm action", mint for "alive / success".

sun gold

Sun gold

gold#f6c453

gold-soft#ffd97d

key callouts · "▸ NEXT" markers · highlighted equation · sun on the horizon

sunset coral

Sunset coral

coral#ff8a65

warm secondary action · attention without alarm · "you're welcome here"

sea mint

Sea mint

mint#5fc1a8

success states · "correct" verdict · alive · the right answer · life under water

soft cream

Soft cream

cream#fef3c7

white#ffffff

primary text on ink · used as warm white instead of pure #fff · feels handwritten

▸ Contrast pairings — readable combinations

F = -kxgold on ink-900

▸ Importantgold on sky-700

✓ Correctmint on sea-600

Stuck?coral on ink-900

Plan my sessioncream on sky-700

Beat 5 of 8sky-300 on ink-900

3.Roles · what each color is allowed to do

A palette is only as useful as its rules. Each color has a defined job; mixing roles makes the page feel chaotic.

Token	Job	Examples
sky-100 `#b8e0ff`	secondary text · hint copy · friendly	"or jump back into…", placeholder text, breadcrumbs
sky-300 `#7ec8f0`	section labels · accents · subtle highlights	"▸ NEXT", micro-headings, hover state preview
sky-500 `#4ea9e8`	brand accent in serif · italics · key emphasis	"OmniTutor", "what would you learn?"
sky-700 `#1d6fc4`	primary action · active selection · "I mean this"	Ask AI button, active mode segment, Plan-my-session
sea-600 `#0e6e8e`	panels · cards · secondary depth	lesson cards, modal content surface, going-further tiles
sea-800 `#0a4f68`	deep card gradients · hover-down states	card lower edge, deep card glow
ink-900 `#0a1424`	page background · default canvas	body bg, modal-1 lower band, the always-there void
gold `#f6c453`	important callout · highlighted equation · 1 use per surface	F = −kx in callouts, "▸ KEY IDEA", lesson-card accent bar
coral `#ff8a65`	warm secondary action · attention without alarm	"Stuck?" hint, problem card lb tag, warm flag
mint `#5fc1a8`	success · "correct" · life	step verdict CORRECT, completed beat ✓, "+ Start" button
cream `#fef3c7`	primary text on ink · warm-white default	body text, headings, lesson titles

4.Components in the new palette

A few sample components rendered in the four-blue scheme so you can feel the temperature of the system.

▸ Buttons · the action vocabulary

Primary = deep sky. Secondary = sea. Ghost = sky-300 outline. Warm/coral/mint = anchors used sparingly when the action carries warmth.

▸ Pills · status & tag vocabulary

▣ Concept · 8b ∫ Problem · 7s ▸ Key idea ✓ Correct 🚩 Flagged

Each tag carries the same color throughout the system — concept = sky, problem = sea, success = mint, etc. Predictable.

▸ Lesson card · how the page surfaces a lesson

▸ Classical mechanics · Ch.4

Why does liquid spray sideways?

8 beats · 8 min · started 12 min ago

▸ Recent · finished yesterday

Spring–mass derivation

9 beats · 92% mastered

▸ Mini topbar · the new palette applied

Step 3 of 7 Tilt-angle from force balance

▸ Modal #1 · re-skinned in the four-blue palette

5.Type pairing · already locked

Three faces. Playfair Display in italic for serious-but-warm headings. Inter for UI body. JetBrains Mono for labels and tokens. Crimson Pro for handwritten-feeling annotations.

Headings · serif What would you like to learn?

Body · sans A trolley carries a vessel of water. Find the angle the surface makes with the horizontal.

Labels · mono ▸ STEP 3 OF 7 · TILT-ANGLE FROM FORCE BALANCE

Annotations · serif italic "the resultant of g and a defines the effective vertical"

6.Principles

One depth per surface. Don't stack ink → sea → deep-sky → light-sky on the same panel. Pick a layer; the others sit elsewhere on the page.
Warm anchors are a privilege. Gold, coral, mint show up no more than ~2 times per visible surface. Any more and they stop carrying meaning.
Italic = "I mean this." Italic in Playfair on sky-500 is reserved for emphasis the rest of the page should orbit. Don't use italic for casual styling.
Cream over pure white. Default text on ink is cream, never #fff. White is reserved for the rare moments when a button's text needs maximum contrast.
The horizon never inverts. Light at the top, ink at the bottom. Backgrounds, gradients, and card glows respect this — sky doesn't appear below sea, ever.

Four blues, one horizon.