Design System — Inspired Applied Learning Platform

Name: “Warm Field Notebook” Memorable feeling: warm & human — a supportive coach, not a system. Every type, color, and spacing decision serves that. Created by /design-consultation (synthesized from Claude + Codex design voices + competitive research: Edthena, BetterUp).

Product Context

• What this is: a digital coaching companion for teachers after in-person professional development — it follows a teacher from “learned a strategy” to “applied it in the classroom.”
• Who it’s for: K-12 teachers and school staff (NOT students). Often on a phone, between classes.
• Space/industry: teacher professional development / instructional coaching.
• Project type: web app (mobile-first for participants; desktop for strategists). v1 surfaces: the Participant dashboard and the Instructional Strategist dashboard.

The trust posture (design law for this product)

This product lives or dies on feeling not evaluative. These are not preferences — they are constraints every screen must honor: - No scores, no percentages, no pass/fail, no completion rings. Progress is narrated (“You’re practicing this week”), never quantified. The phase ribbon is a stitched thread, not a bar. - The IS view is “cohort weather,” not a watchlist. Pattern bands + a suggested support action. No ranked people, no red names. Individual detail sits one logged click behind a reason prompt. - Nudges are care language, not deadlines. “Best within a couple of days while it’s fresh,” never a ticking countdown. Every nudge offers a “not this week” path. - Data as sentences first, charts second. Numerals live in mono so they read as a quiet note, not a scoreboard.

Aesthetic Direction

• Direction: Warm Field Notebook — organic-editorial. A calm workshop table in afternoon light: paper-grain surfaces, ink headlines, generous margins.
• Decoration level: intentional — subtle paper grain, hairline rules, the stitched-ribbon phase indicator. Nothing decorative for its own sake.
• Mood: unhurried, tactile, reassuring. A coach leaning in, not a console lighting up.
• First-3-seconds reaction to design for: relief — “this isn’t going to grade or chase me.”
• Reference points: break from edu-SaaS norms (Edthena’s bright blue + cartoon teachers); borrow from adult coaching / calm stationery (BetterUp’s warm editorial restraint).

Typography

Pairing C (chosen). All fonts are free / open (Google Fonts) — zero licensing friction. - Display/Hero: Fraunces (variable serif, soft editorial warmth) — phase names, the one primary prompt, section headings. The human voice; never childish. - Body/UI: Hanken Grotesk — nudge copy, cards, buttons, nav. Clean, friendly, highly legible at arm’s length on a phone. Product-crisp without going clinical. - Data/labels: IBM Plex Mono — timestamps, the 48h marker, counts, kickers. Monospace keeps numerals from reading as a scoreboard. - Loading: Google Fonts — Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700, Hanken+Grotesk:wght@400;500;600;700, IBM+Plex+Mono:wght@400;500. - Scale (rem): hero 1.8 · h2 1.4 · h3 1.28 · body 0.95–1.02 · label/mono 0.64–0.74. Display tracks letter-spacing:-0.01em; mono kickers uppercase letter-spacing:0.12em.

Color

Warm paper system. Color is rare and meaningful (restrained approach).

• Accent discipline: terracotta appears once per screen (primary action / current phase). Sage marks “received/saved/done” only — never as a success grade.
• Dark mode is “lamplight,” not black-invert: shift to warm umber. It should feel like grading papers at night, not a terminal. Accent lifts to hold contrast.
• Contrast: accent on paper ≈ 4.6:1; verify all text meets WCAG AA (the greyed “locked” state must still pass — do not let disabled states fall below AA).

Spacing

• Base unit: 4px.
• Density: comfortable — calm, generous margins.
• Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 (--s1…--s7). Use the scale; no off-scale padding.

Layout

• Approach: hybrid — app shell with intentional editorial warmth inside.
• Participant (mobile-first): full app shell — top bar (wordmark + avatar) + bottom tab nav (Home / Workshop / Notes / You). Home = phase ribbon → one “Next good step” card → workshop card (IS intro video + locked-as-“coming next” resources). One primary action per screen.
• Instructional Strategist (desktop): left sidebar nav (Cohorts / Engagements / Context briefs / Resources / My intro video) + top bar with search. Main panel = cohort weather. Collapses to stacked on mobile.
• Max content width: ~1140px desktop; single column ≤640px.
• Border radius: sm 8px (buttons/inputs) · md 10px (cards) · lg 16px (containers). Quiet rectangles — no bubble-radius-everything.
• Progress: the 6-phase stitched ribbon (Prepare · Engage · Practice · Apply · Reflect · Adjust). Active = terracotta knot; done = sage thread; upcoming = warm-line thread. Never a %.

Motion

• Approach: minimal-functional, gentle. Nothing celebrates or alarms.
• Easing: enter ease-out · exit ease-in · move ease-in-out.
• Duration: micro 80ms · short 200ms · medium 300ms. Soft fades; the ribbon knot settles in. No bounce, no confetti, no urgent flashing.

Anti-slop guardrails (do not ship)

No purple/violet gradients · no 3-column icon grids · no centered-everything · no gradient CTAs · no bubble-radius on everything · no bright primary blue · no cartoon-teacher illustrations · no system-ui as display/body · no progress bars or completion rings · no red “overdue” badges · no individual ranked watchlists.

Decisions Log

Preview + approval artifacts: ~/.gstack/projects/inspired-applied-learninh/designs/design-system-20260527/