Design System
CSS Defaults — Live Reference
Every token, transition, and micro-interaction from the Alt Shift design system, running live. Drag the hue slider to re-theme everything.
oklch Palette
One hue. Full system.
Brand tokens — all derived from hue 180
Semantic tokens — fixed hue ranges
Live card — try hovering
EXAMPLE CARD
Everything derives from one hue
Change the slider and watch this entire page re-theme. Ground, surface, text, accent, borders — all computed from a single value.
Typography
Fluid, balanced, alive.
text-wrap: balance
This heading automatically balances its line lengths for visual harmony
text-wrap: pretty
Body text uses pretty wrapping to avoid orphaned words at the end of paragraphs, creating more visually pleasing text blocks.
Hover & Focus
Brightness shift + subtle lift.
Buttons — brightness + lift on hover, press on click
Cards — lift + glow edge on hover
Knowledge
Hover to see the lift + glow
Skills
Hover to see the lift + glow
Interventions
Hover to see the lift + glow
Links — underline slides in from left
Read more about the design philosophy, oklch colour science, or micro-interaction patterns.
Easing Curves
Four named curves for every need.
snappy
UI feedback, toggles
smooth
General transitions
bouncy
Playful emphasis
settle
Objects coming to rest
Completion States
Push the tile flush.
Click each step to complete it. Notice: raised = pending, flush = done.
Enter/Exit
Elements arrive with direction.
Knowledge Unit
Skill Assessment
Intervention Step
Progress Report
Staggered by 60ms per item. Smooth easing. Direction: slide up from below.
CTA Shimmer
The button comes alive.
Imagine: the user has finished building their course outline. The interface says “ready.”
AI Portal
A gap in dimension.
The AI thinking state: a portal opens, particles orbit, text streams from the light.
These are the CSS defaults documented in CSS-DEFAULTS.md. Every Alt Shift product starts here.