Hover and click the examples below — the states are real. This is a starting set covering what shows up in decks, one-pagers and mockups. The full product library still needs to be documented.
One primary action per screen. Everything else is secondary or a plain link.
Darken one brand step and lift 2px. 150ms, ease-out.
Return to resting position, darken one step further.
A soft blue ring, not a hard browser outline. Keyboard users need to see it.
44 × 44px on touch. Padding counts toward it.
Tint background, dark text from the same family. Never a saturated fill with white micro-type.
Cream fill at rest, white on focus with a blue ring. Labels sit above the field, always visible.
White surface, 14px radius, hairline border, navy-tinted shadow. Lifts 2px on hover.
Fourth edition · Supplements and homework included
Auto-graded assignments, recommended by 88% of professors who use them.
Reorder chapters, cut what you don't teach, add your own material. At no extra cost.
Quiet and functional. Short fades and small translates, 120–280ms. One piece of personality is allowed: a gentle spring overshoot on confirmations and toasts.
Hover, focus, colour changes.
Fade plus an 8px rise. Nothing bounces in.
Toasts and copy confirmations only.
Infinite loops, parallax, or anything that ignores prefers-reduced-motion.
These exist in the product but are not documented here yet. Tell us which ones reps and marketing actually reach for and they get built first.