Minimal gradient systems for SaaS teams
Turn one accent into a usable gradient language.
Build a restrained gradient direction, inspect contrast behavior, and export a senior-designer-ready brief without drifting into decorative noise.
Start with the product action, not a mood board.
Keep every stop tied to tokens, states, and accessibility.
Use one strong accent with calm supporting neutrals.
Live product surfaceAA contrast verified
Revenue risk review
Gradient is reserved for the highest-value state: verified momentum behind the next decision.
Decision confidence
--gradient-accent
#0969da--gradient-support
#13b38d--gradient-angle
132degPurpose
Give SaaS teams a minimal gradient rule that highlights primary decisions without becoming brand wallpaper.
Layout
First viewport pairs controls with an inspectable product surface; proof and constraints sit below for refinement.
States
Selected, hover, disabled, loading, success, and error states are visible in the working UI.
Implementation constraints
| Rule | Decision |
|---|---|
| Gradient count | One system gradient plus neutral surface fallbacks |
| Accent use | Primary action only |
| Responsive behavior | Controls stack above preview; export remains reachable |
| Empty state | No missing token values |
Refinement brief
Restrained off-white surfaces, dark olive text, one assertive accent, and a second stop used only to soften the transition. No decorative blobs or image filler.
Hover clarifies affordance, selected controls invert color, export enters a loading state, success confirms copy, and contrast failure is surfaced as an error.
The builder becomes a single column: promise, controls, live preview, tokens, then proof. Primary action stays above the fold on common phone sizes.