EDUTRACK
Design System · Storybook
{{nv.label}}
{{nv.label}}
EDUTRACK DESIGN SYSTEM
A PLANBOOK,
NOT A DASHBOARD.
Lessons are physical index cards. Surfaces are warm paper. Shadows say how far off the desk something is. Everything square, everything calm.
PAPER PHYSICS
Cards lift on hover, compress under press, squash when they land. Motion follows the metaphor, never decorates.
COLOR MEANS
Brown teaches, green delights, orange demands, blue points at today. Never decorative color.
TWO VOICES
Oswald UPPERCASE for structure; EB Garamond italic for the warm human aside. Always paired.
Tokens live in tokens/*.css · components in components/{atoms,molecules,organisms}/ · every block below has copyable React source.
FOUNDATIONS
COLOR
Warm paper neutrals + four functional colors. Every hue means something.
{{copyLblTokColors}}
FUNCTIONAL
{{c.label}}
{{c.token}}
PAPER
{{c.label}}
{{c.token}}
INK & LINES
{{c.token}}
Click any swatch to copy its var() — {{copyFeedback}}
TYPOGRAPHY
Three voices: structure, warmth, and quiet.
{{copyLblTokType}}
--font-display
Oswald 600 · trk 2px
PLAN | DO | REVIEW
--font-editorial
EB Garamond · italic
September — reflect on what you've taught
--font-body
Helvetica · 12.5–14.5
Readers separate what a character feels in a moment from who they are over time, citing lines that prove it.
FIELD LABEL 11/2 BUTTON 14/1.5 TAG 12/1 CARD CAPTION 9/.8 metadata aside 15px
SPACING, RULES & ELEVATION
Square corners everywhere; shadows are physics.
{{copyLblTokElev}}
SPACING SCALE
{{sp.n}}
RULES
the timeline bar · 5px · --rule-strong
section rule · 2px · --rule
row hairline · 1px · --rule-soft
ELEVATION — HOW FAR OFF THE DESK?
{{el.label}}
{{el.token}}
INTERACTION & MOTION
PAPER PHYSICS
Two easings, five keyframes, nothing over 400ms.
{{copyLblTokMotion}}
HOUSE EASING
cubic-bezier(.22,1,.36,1)
Everything spatial. Decisive settle, no wobble.
REWARD EASING
cubic-bezier(.34,1.56,.64,1)
Overshoot. ONLY for celebration moments.
DURATIONS
press 150 · hover 180 · fade 250 · drop & check 320 · spotlight 400
{{md.title}}
↻ REPLAY
LESSON
✓
Views crossfade — never slide.
118 MIN
SECTION ENTERS
{{md.desc}}
{{md.code}}
MICRO-INTERACTIONS — TRY THEM
HOVER — PAPER LIFTS
HOVER ME
−4px lift + deeper shadow at 180ms. Press compresses to .95.
DRAG — GHOST & TARGET
GHOST
TARGET
Ghost tilts −3° at drag shadow; targets get dashed accent + tint. 8px threshold separates tap from drag.
SPOTLIGHT — GLIDES
Tour spotlight travels at 400ms settle.
MOVE →
ATOMS
BUTTON
ATOM
components/atoms/Button.jsx
VIEW CODE
{{copyLblButton}}
One solid button per view. Hover lifts −2px with shadow; press compresses to .96. Flag orange is reserved for assignment and warning actions.
START PLANNING
LOAD & CONTINUE
GO TO PLAN
BACK
DISABLED
SM
LARGE →
variant: solid | flag | outline | ghost · size: sm | md | lg · disabled
TAG & CHIP
ATOM
components/atoms/Tag.jsx
VIEW CODE
{{copyLblTag}}
Outline for standards metadata, solid for tags on colored rows, chip for selectable options — try the grade picker.
5R1 — INFERENCE & EVIDENCE 5R6 · POINT OF VIEW
grade:
{{ch.label}}
CHECKBOX
ATOM
components/atoms/Checkbox.jsx
VIEW CODE
{{copyLblCheckbox}}
Green fill, popping mark. With strike, checking crosses the label out — the materials-to-prep pattern. Click them.
{{cbA.check}}
POV anchor chart
{{cbB.check}}
"Because of Winn-Dixie" ch. 4
TEXTFIELD
ATOM
components/atoms/TextField.jsx
VIEW CODE
{{copyLblTextField}}
Boxed for deliberate form entry, underline for quick in-context jotting. Focus turns the border accent — the only focus treatment in the system.
YOUR NAME
underline variant — for jotting mid-lesson
SECTIONLABEL
ATOM
components/atoms/SectionLabel.jsx
VIEW CODE
{{copyLblSectionLabel}}
MATERIALS TO PREP
STANDARDS COVERAGE
through Sep 9
ASSIGNMENTFLAG
ATOM
components/atoms/AssignmentFlag.jsx
VIEW CODE
{{copyLblAssignmentFlag}}
Clip-path arrows: START points into the work, DUE points back at the deadline. Hover grows 1.08; they read as printed stickers on the planbook.
ASSIGNMENT
START
ASSIGNMENT
D U E
DONECHECK
ATOM
components/atoms/DoneCheck.jsx
VIEW CODE
{{copyLblDoneCheck}}
The "taught it" circle — the system's reward moment. Tap it: the mark overshoots to 1.3× then settles (the only use of the reward easing).
{{dc1.check}}
← tap to mark the lesson taught
MOLECULES
LESSONCARD
MOLECULE
components/molecules/LessonCard.jsx
VIEW CODE
{{copyLblLessonCard}}
The system's core object: a physical index card. Brown = lesson, green = vitamin; the standards code lives in the square, a Polaroid caption below. Hover to pick it half-up.
5R1
Traits vs. Feelings
5L4
Word Collector
Placed (dimmed)
5R6
SM SIZE
5L2
Drop-in
↻ REPLAY DROP
RATINGTOGGLE
MOLECULE
components/molecules/RatingToggle.jsx
VIEW CODE
{{copyLblRatingToggle}}
One-tap lesson verdict. Tap the active option again to clear it — reflection with zero friction.
WENT WELL
RETEACH
COVERAGEROW
MOLECULE
components/molecules/CoverageRow.jsx
VIEW CODE
{{copyLblCoverageRow}}
Brown = taught, tan = planned, empty = not yet — computed from the plan, never hand-entered.
{{cr.code}}
{{cr.name}}
{{cr.count}}
CAPTURENOTE
MOLECULE
components/molecules/CaptureNote.jsx
VIEW CODE
{{copyLblCaptureNote}}
Tap a roster name to spawn a note — it drops in with the landing animation. Formative assessment captured mid-lesson, one line at a time.
{{rs.name}}
{{cp.student}} ×
AGENDAITEM
MOLECULE
components/molecules/AgendaItem.jsx
VIEW CODE
{{copyLblAgendaItem}}
One row of the teaching day. Click the row to expand the phased lesson plan; tap the circle to mark it taught.
9:00 – 9:45
Traits vs. Feelings
Readers separate what a character feels in a moment from who they are over time.
5R1 · INFERENCE & EVIDENCE 45 min {{agHint}}
{{agDoneObj.check}}
“Readers separate how a character feels right now from who they are over time.”
{{ph.min}} MIN
{{ph.name}}
{{ph.note}}
ORGANISMS
APPHEADER
ORGANISM
components/organisms/AppHeader.jsx
VIEW CODE
{{copyLblAppHeader}}
The app name IS the navigation. Active mode is accent; the rest recede to gray. Click the tabs.
PLAN | DO | REVIEW
CALENDAR › ALL UNITS ›
MS. RIVERA · GRADE 5 ELA · ROOM 214 · P.S. 130 BROOKLYN
School Year 2026–27 · Marking Period 1 · Week 2 of 38
LESSONPOPOVER
ORGANISM
components/organisms/LessonPopover.jsx
VIEW CODE
{{copyLblLessonPopover}}
Tap a card and it flips over: the lesson's color becomes the "photo" area holding materials, timing and peer notes; the title is the Polaroid caption below. Enters with et-pop.
MATERIALS
— "The Tiger Rising" excerpt
— Trait word bank
— T-chart organizer
DURATION
45 minutes
5R1 — INFERENCE & EVIDENCE
Notes from others
"The word bank saved my striving readers. Print extras." — Mr. Okafor · Rm 118
Traits vs. Feelings
REMOVE
TOURTIP + SPOTLIGHT
ORGANISM
components/organisms/TourTip.jsx
VIEW CODE
{{copyLblTourTip}}
Onboarding pair: TourSpotlight dims everything but the target; TourTip explains it. Both glide between steps at 400ms settle — see the Motion section's live spotlight demo.
STEP 1 OF 5
YOUR LESSON SHELF
Every unit comes loaded with ready-to-teach lessons, aligned to NY Next Gen standards. Tap any card to see materials, timing, and notes from teachers who taught it before you.
Skip tour
BACK
NEXT
MOBILETABBAR
ORGANISM
components/organisms/MobileTabBar.jsx
VIEW CODE
{{copyLblMobileTabBar}}
On phones the masthead collapses to this bar. Square glyph + Oswald label, 3px accent indicator, ≥44px targets, safe-area aware. Tap the tabs.
{{mt.label}}
MOBILE SYSTEM
A COMPANION IN THE POCKET
Optimized for DO — the teaching day — first. Try both screens.
TAP, DON'T DRAG
Drag-and-drop becomes tap-to-assign: tap a card, then tap a day. Long-press = peek.
44PX TARGETS
Every control ≥ 44px (--tap-min). Body type grows to 15px for thumb-distance reading.
SHEET IS THE SCREEN
Desk + frame chrome disappears; the timeline turns vertical; the tab bar moves to the thumb.
PLAN
Week 2 of 38
UNIT 1 · CHARACTER STUDY
LESSON SHELF — {{mHint}}
5R6
Narrator POV
5R2
Theme & Change
5L4
Word Collector
{{dy.dow}}
{{dy.num}}
{{dc.label}}
{{dy.emptyLabel}}
Drag becomes tap-to-assign on touch.
{{mt.label}}
PLAN — tap a card, then tap a day
DO
TODAY
Wednesday, September 9
ELA BLOCK · 9:00 – 10:45 · 95 MIN
{{ma.title}}
{{ma.time}} · {{ma.std}}
{{ma.check}}
MATERIALS TO PREP
{{mcbA.check}}
Character change timeline
{{mcbB.check}}
"Winn-Dixie" ch. 15
{{mt.label}}
DO — the teaching day, thumb-reachable
{{codeName}}
{{codePath}}
{{copyModalLbl}}
×
{{codeText}}