Design System: AIEWF ’26 Field Course

Direct descendant of the AIE Scheduler’s Command Marquee system (/Users/robbwinkle/jj/robb/aidotengineer-scheduler/DESIGN.md). Same palette, same type voices, same depth vocabulary; adapted from wayfinding to studying. Where this file is silent, the scheduler’s DESIGN.md is the authority.

Adapted color jobs (the Three-Job Rule)

• Magenta: brand and primary action. The Review button, primary buttons, links (as Magenta Ink). Filled magenta always carries white text.
• Lime: due / now / active. The DUE marquee fill, the active lesson indicator, a keycap at the moment it is pressed. Only ever a fill or bold mark with On-Lime text; never small text or a thin line. When nothing is due, the marquee goes quiet (surface tones); lime disappears from the page.
• Overdue Red: reserved for cards overdue by 3+ days. Nothing else. No red errors, no red “Again” grade button.
• Completion is quiet history: an ink-filled tick, never a saturated color.

Type voices (the Two-Voice Rule)

Archivo speaks prose and titles; lesson h1 runs Archivo at font-stretch: 125% weight 800 (signage voice, fixed rem, capped at 2rem). Geist Mono speaks data: times, durations, card counts, module codes (M1–M7), source filenames, keyboard hints, streak. The font switch is the signal “this is scannable data.” Fonts load from Google Fonts with full system fallbacks; the page must remain correct on the fallback stack.

Depth (the One-Light Rule, top-left source)

1. Tonal layering: bg → surface → sunken, everywhere, free.
2. Lift: two-part shadow on floating chrome (dialogs, toast).
3. Solid extrusion (signature): hard blur-free offset in a deeper shade of the element’s own color. Primary buttons (4px 4px 0 magenta-deep), ghost buttons (magenta-ink at 35%), the DUE marquee (lime-deep), and keycaps (0 2px 0 border-strong). Elements compress into their edge on press.

Depth lives in the chrome. Lesson prose, questions, and answers sit on flat, fully legible planes.

Signature components

• The DUE marquee (sidebar, always visible): a lime extruded strip with a mono DUE-NOW pill and card count. Cursor tilt via one rAF lerp loop (transitions off on transform; disabled under reduced motion and on touch). Pressing it (or R) starts the review session. At zero due it flattens to a quiet surface strip reading the next due day.
• Keycaps: every shortcut-bearing control wears a Geist Mono keycap with a 2px extruded lip. When the user presses the key anywhere, every matching keycap compresses and fills lime for ~180ms. The UI teaches its own map.
• The flip card (review dialog): a sequential fold, front folds to edge-on (ease-in) then the back unfolds (ease-out, delayed one phase); no face ever rotates past 90°, both faces flat and legible. Reduced motion swaps instantly.
• Course tabs (header): a mono segmented control; the active course is a magenta-filled chip (it inherits the old brand-tag’s job), inactive courses are muted text on the sunken tray. G cycles. The platform brand stays plain Archivo Expanded text: the tab carries the identity, not the wordmark.

Motion

120–200ms, cubic-bezier(0.2, 0.9, 0.3, 1), transform/opacity only. Motion reports state (press, flip, reveal, navigate); nothing is decorative. No bounce, no scroll-driven choreography, no page-load sequences.

Bans carried forward

Gradient text, glassmorphism, aurora/mesh backgrounds, side-stripe borders, uppercase tracked eyebrows as section scaffolding, identical card grids, spring/elastic easing, decorative motion.