Eduversal Design System

Visual identity reference for the five-app monorepo. Brand decisions, typography, spacing, shadows, and component recipes. Source of truth lives in shared-design/tokens.css at the monorepo root and docs/DESIGN_SYSTEM.md.

Brand palette

Mor + cyan family identity. Mor is the primary brand color (favicon, navbar avatar gradient, Teachers Hub canon). Cyan is the companion (Central Hub's existing accent).

Brand

--brand
#6c5ce7
Primary mor — buttons, active state, brand chrome
--brand-dk
#5a4bd1
Hover / focus / active background
--brand-2
#ede9fe
Light tint — selected pill, badge background
--secondary
#0891b2
Companion cyan — secondary action, accent badge
--secondary-dk
#0e7490
Darker cyan — hover
--secondary-2
#ccfbf1
Cyan tint

Ink (text)

--ink
#1c1c2e
Primary text
--ink-2
#44445a
Secondary text, labels
--ink-3
#8888a8
Tertiary, captions, placeholder

Paper (surface)

--white
#ffffff
Cards, modal background, input fills
--paper
#f7f6f3
Page background, table headers
--paper-2
#efede8
Striped rows, hover states
--border
#e0ddd6
Card borders, dividers

Semantic

--green / --green-2
#059669 / #d1fae5
Success, "approved", positive deltas
--red / --red-2
#dc2626 / #fee2e2
Error, destructive, "rejected"
--amber / --amber-2
#b07800 / #fef8e7
Warning, "pending"
--blue / --blue-2
#1a5fa8 / #e8f0fb
Info, neutral notification

Brand gradient

Hero CTAs, primary save buttons, and brand chrome.

--brand-gradient linear-gradient(135deg, #7c3aed, #0891b2)

Typography

DM Sans for everything by default. Lora for hero h1 and .page-title only. DM Mono for code, doc IDs, technical badges.

Aa Bb Cc 123
--font-body
DM Sans — body text, buttons, form inputs, navbar
Aa Bb Cc 123
--font-title
Lora (serif) — page titles, hero h1, prominent section headings
Aa Bb Cc 123
--font-mono
DM Mono — code, doc IDs, technical badges

Type scale

--text-xs 11px The quick brown fox jumps over the lazy dog
--text-sm 13px The quick brown fox jumps over the lazy dog
--text-base 15px The quick brown fox jumps over the lazy dog
--text-lg 17px The quick brown fox jumps over the lazy dog
--text-xl 19px The quick brown fox jumps over the lazy dog
--text-2xl 22px The quick brown fox
--text-3xl 26px Page subtitle
--text-4xl 32px Section header
--text-5xl 40px Page title

Spacing scale

8px-based scale. Container max-width --container-max: 1200px.

--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 20px
--space-6 24px
--space-8 32px
--space-10 40px
--space-12 48px
--space-16 64px
--space-20 80px

Shape (border-radius)

Default --radius is 10px (cards, inputs, dropdowns).

--radius-sm
6px — small buttons, tags
--radius
10px — default
--radius-lg
16px — large cards, modals
--radius-xl
24px — hero panels
100px
pill — chips, badges

Shadows

Two scales — light surface (default) and dark surface (hero / landing).

Light surface

--shadow-sm
0 1px 4px rgba(28,28,46,.07)
--shadow
0 3px 14px rgba(28,28,46,.10)
--shadow-lg
0 10px 40px rgba(28,28,46,.16)

Dark surface

--shadow-dark-sm
0 1px 4px rgba(0,0,0,.2)
--shadow-dark
0 3px 14px rgba(0,0,0,.35)
--shadow-dark-lg
0 10px 40px rgba(0,0,0,.5)

Components

Live previews of components shipped in shared-styles.css.

.btn-primary / .btn / .btn-ghost / .btn-danger / .btn-sm
.badge + variants
Teal Amber Red Green Violet Orange Pink Neutral Accent (--accent) Blue
.role-badge — role pills
Admin Teacher
.chip / .chips — filter pills
Active Cambridge Indonesian Math Science
.prog-pill — progress label
12 / 25 topics
9 / 10 weeks
.spinner
.page-header — icon + title + subtitle block
School Performance KPI
SCR-style scorecard across academic, operational, and stakeholder dimensions
.page-breadcrumb
Library › Documents › Compliance
Toast — call from JS
Saved.
Modal — confirm / form pattern

Per-page accent override

Pages may have a thematic accent (red for math pacing, green for biology, amber for appraisals). Override --accent only — never --brand.

Pattern: set the override in the page's <style> block AFTER the shared stylesheet loads. The brand chrome (navbar avatar gradient, brand-gradient buttons) keeps mor; only page-scoped components pick up the page accent. 
:root {
  --accent:    #c0392b;   /* math red */
  --accent-dk: #a93224;
  --accent-2:  #fdf0ef;
}

Don't do

Common ways the design system gets quietly eroded.

Source of truth: shared-design/tokens.css (CSS variables) + docs/DESIGN_SYSTEM.md (rationale) at the monorepo root. Each hub's local tokens.css is a synced copy — edit master, run npm run sync:tokens -- --apply.