Colour & tokens
Full Tailwind 50–950 ramps. Surfaces stay neutral; colour carries meaning. The brand violet is an accent and data colour, not chrome.
One light, dispersed into the six measurements. The same spectrum runs through the mark, the data and the system, and it fades into the surface: to white in light mode, to black in dark.
Typography
Space Grotesk for display, headings, numerics and UI. Inter for body and long-form. Numerics are tabular for alignment in data views.
Iconography
Phosphor (regular weight) across the product. Stroke-based, ~1.5px optical weight. Sized 16 / 20 / 24; paired at roughly 1.2× the adjacent text, aligned to the text centre. No custom icons — the library moves as fast as the roadmap.
Brand mark
The mark in monochrome, for places the full spectrum cannot go. Ink on light, white on dark; keep clear space equal to one spoke and never recolour it outside these two.
Motion
The point of view in one line: surfaces breathe, components don’t.
Expressive motion is confined to generative surfaces. On Discuss, the prismatic background drifts on a slow 26–34s loop and the spectral streaks reveal under the pointer, so the AI surface feels alive. Everywhere data lives, motion is restrained and functional, because a cockpit shouldn’t shimmer.
All motion honours prefers-reduced-motion: ambient loops freeze, transitions collapse to instant.
Ambient backgrounds, loaders and confirmations. Colour appears only where it carries meaning (the mark, the radar, atmospheric flares); everything functional stays monochrome. Each loops and every specimen respects reduced motion.
Backgrounds
Slow, low-contrast atmosphere. Spectral options are for impact surfaces (hero, header, the Discuss canvas); the monochrome grid is safe behind dense app screens.
Loading
Reach for the smallest one that fits: dots for a short inline wait, the bar for a page action, skeletons when the shape is known, the mark for a full screen, and the radar while a result is computed.
Feedback
A finished assessment earns the full spectral burst, because completing the six is the whole point. Routine confirmations get the quiet monochrome check.
App components
Patterns shared across the product surfaces. All monochrome; the live indicator uses the sanctioned violet accent rather than a status green, so colour stays reserved for the six measurements. The integration action (e.g. Connect Slack) is just a full-width primary button.
Inputs & forms
Cards
Tabs
Tables
| Course | Category | Status | Lessons | Enrolled |
|---|---|---|---|---|
| Evaluating AI Output | Evaluation | Live | 5 | 42 |
| AI Security and Safe Use | Responsible use | Live | 5 | 38 |
| Prompt Engineering | Specification | Draft | 5 | 0 |
Badges & status
Dialog
Archive this course?
Learners currently enrolled will keep access until they finish. You can restore it any time.
Toasts
Clean monochrome cards with a small semantic icon and a neutral auto-dismiss timer. No gradients on components, colour stays reserved for the six measurements.
Progress & charts
Scores, progress and charts use the spectral palette; everything else stays neutral. Numerics are tabular.
Empty states
Illustration is abstract and prismatic — a soft refraction, never a character or a robot. Each state names the one action that fills it: the icon floats over a slow breathing glow, the first-assessment radar waits as a dashed outline, and no-results runs a quiet scan line.
No assessments yet
Measure your team across the six. About five minutes.
No courses yet
Build your first from a topic, a template, or a blank page.
Just you so far
Invite your team so their capability shows up here.
No matches
Nothing matched that search. Try a broader term.