SaaS gradient system

Make gradients operational.

A direction board for senior product designers turning brand gradients into governed tokens, contrast-safe states, and dense SaaS interface rules.

Primary user goal

Approve a credible visual system direction for a B2B product suite without losing implementation constraints.

Accent family

Interface density

Selected state model

First viewport promise

Tokens designers can defend.

Gradient ramps are shown with usage rules, contrast evidence, and component states in the same review surface.

Hero artifact

Signal Map 01

Pointer movement inspects how the accent behaves across dark, neutral, and elevated product surfaces.

Token	Use	Status
gradient.signal	risk focus	AA
surface.raised	tools	Stable
state.disabled	blocked	Muted

Component density

Decision table

Section	Role	Action
Purpose	JTBD	Approve scope
Visual	Tokens	Check contrast
States	Behavior	Ship specs

Interactive state

Selected state

Strong border, accent fill, and persistent label make the active choice obvious in dense SaaS controls.

Purpose

PrismSpec is for SaaS teams replacing decorative gradient use with a technical direction that maps emotion, hierarchy, accessibility, and implementation ownership.

Audience: senior product designers and design-system leads.
Job: produce a review-ready visual direction in one working session.
Promise: gradient choices become explicit product behavior.