Navistu
Design system

Foundation v0.1

The grammar of Navistu

These are the primitives every screen is built from — tokens, motion, type, and the core components reviewed in isolation before any feature.

Colors

OKLCH · stone neutrals · indigo accent

bg
--color-bg
surface
--color-surface
surface-2
--color-surface-2
surface-3
--color-surface-3
fg
--color-fg
fg-muted
--color-fg-muted
fg-subtle
--color-fg-subtle
fg-faint
--color-fg-faint
accentaccent
--color-accent
successaccent
--color-success
warningaccent
--color-warning
dangeraccent
--color-danger

Typography

Geist UI · Fraunces editorial · Geist mono

56px
The whole school year, on one page.
32px
Display heading
20px
Section heading
15px
Body — the default size for app text and paragraphs of writing.
13px
Small — labels, dense rows, secondary copy.
11px
Eyebrow / label
The editorial face is reserved for AI summaries, flashcard fronts, and quiet hero moments — never UI chrome.
25:00 · 14h 32m · oklch(0.45 0.18 270)

Buttons

Six variants · five sizes · always icon-aware

Variants
Sizes
States

Cards

Resting elevation · interactive variant for clickable surfaces

Plain card
Hairline border, layered surface, almost no shadow.
Rests on the page. No drama.
Interactive
Hover lifts the border and shadow by one notch.
Featured
Accent surface
Used sparingly for callouts and onboarding cards.

Inputs

One radius, one focus ring, one feeling

That doesn't look like an email address.

Daily review reminder
Nudge me at 8:30pm if I have flashcards due.

Badges & Avatars

Tags, statuses, identity

DefaultIn progress DoneDue soonOverdueOutlineSynced
ASJM+3
⌘K⏎

Progress

Calm, deliberate motion

Essay draft64%
25m

Tabs

Segmented control feel; not browser tabs

A 1,500-word analytical essay on the moral ambiguity of Macbeth's ambition, citing at least three primary passages and two scholarly sources.

Overlays

Surfaces that arrive when called

Skeleton

Shaped placeholders; never a spinner

Empty states

Designed, not ‘No items.’

No assignments yet

Drop a syllabus, snap a worksheet, or paste a Google Classroom link — Navistu will turn it into a step-by-step plan.

Command palette

The fastest path through the app

Press anywhere
Search assignments, jump views, kick off AI tasks.