Riverside. Studio darkroom behind frosted glass.
- SaaS
- Light theme
- 13 colors
- 2 typefaces
Riverside runs a near-monochrome light system anchored by white canvas and near-black text, with a single vivid violet accent (#9671ff) that functions as the only chromatic element in the entire interface. The visual rhythm alternates between pure white content bands and full-bleed dark sections (near-black backgrounds) that host feature lists and CTAs, creating a cinematic on/off cadence rather than a continuous light layout. Typography is exclusively Inter (with IBM Plex Sans 600 reserved for a narrow role), set with aggressive negative tracking and tight line-heights at large sizes — headlines feel compressed and intentional rather than airy. Components are lightweight: pill-shaped buttons at 300px radius, 8px card radii, hairline borders over soft tints, and almost no elevation. The violet accent is rationed — one filled CTA per screen, occasional icon strokes, soft wash backgrounds — which makes it feel like a deliberate switch being thrown rather than decoration.
Riverside design system
Brand1
Primary CTA buttons, active nav indicators, selected states, accent icon strokes — the sole chromatic switch in an otherwise grayscale interface; one filled violet per screen creates a clear hierarchy of action
Accent3
Soft accent surface washes behind feature tags, subtle highlighted regions, and selected nav backgrounds — a whisper of brand color that never competes with the primary violet
Deeper lavender wash for highlighted tag backgrounds, soft brand-tinted card surfaces, and active state fills that need more presence than Lavender Mist
Secondary violet for outlined buttons, hover strokes, and decorative icon tints where full Studio Violet would be too loud
Neutrals9
Heading text on light backgrounds, logo lockups, and maximum-contrast borders where no warmth is desired
Full-bleed dark section backgrounds, inverted surface blocks — slightly deeper than Carbon for maximum contrast against violet accents
Primary text, dark section backgrounds, hairline borders, icon strokes — the workhorse near-black that replaces pure #000 in body contexts
Secondary text on light backgrounds, dark hover states, and intermediate borders that need more weight than hairline but less than Carbon
De-emphasized text, secondary metadata, timestamp labels, and subtitle copy on lighter sections
Muted helper text, placeholder copy, and tertiary informational elements
Default borders, input outlines, dividers, and disabled state strokes — the neutral hairline layer
First elevation step — subtle card backgrounds, section dividers, muted surface fills that break from pure white without introducing a different color
Base canvas, card surfaces, text on dark sections, button fills on light backgrounds
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Onyx on Studio Violet
6.10 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
