Principles
Six ideas behind every decision in the system. When a rule elsewhere doesn't cover your case, decide with these.
Calm, dense and quiet
Major is where teams build apps, agents, skills and workflows that run inside their own organization. The interface stays out of the way of that work: greys on greys, small type, short motion.
One green action per view
Solid accent marks the single action the view exists for — Create agent, Publish, Connect. Everything else is a secondary button. If two things feel equally important, the view is doing two jobs.
Colour means something
Colour marks a tool type, a state, or the call to action. Never decoration, never a gradient (the Major mark is the one exception).
Four kinds of things, equals
Apps, agents, skills and workflows share the same list pages, editors, sharing and publishing. Build the pattern once and reuse it for all four.
Say what happens
Buttons say exactly what they do; toasts confirm in the past tense; errors say what to do next. Plain words, sentence case, no exclamation marks.
Location, choice and check look different
Where you are is white. A choice you made is an outline with a check. A form check is the link colour. People should never confuse the three.
States, everywhere the same
- Hover:
hoverfill. Focus: a 2px accent-tinted ring; inputs get afaintborder plus a 2pxsecondaryhalo. - Disabled: 50% opacity, no pointer.
- Working: the control that started it shows a spinner and a present-tense label and stays disabled; nothing else on the page locks.
- Unsaved changes: a
warndot on the editor tab, "Unsaved changes" under the name, Cancel + Save changes replace Share + Publish. Settings pages save as you go, confirmed by a toast. - Locked: the row dims its name and tile, shows a lock and says "No access" instead of controls.
Overlays and feedback, smallest first
- Tooltip (names a control) → DropdownMenu and Select (pick) → Popover (anchored) → Dialog and the Share modal (focused task, page dimmed) → side panels (work alongside the page).
- One overlay at a time, except a DropdownMenu opened from inside a dialog.
- A toast (Sonner) — what just happened (2.8s). Alert — what is true now, until it changes. EmptyState — nothing here yet, and what to do.