Relate. Cool dawn over product canvas.
- SaaS
- Light theme
- 14 colors
- 7 typefaces
Relate renders as a cool-white SaaS surface with near-black headline ink and one vivid royal-blue accent that does all the brand talking. The product UI is shown through soft rounded cards floating on a pale lavender wash, with colored status dots (blue/green/red/orange) punctuating pipeline columns like Kanban tickets. Typography is tight: Inter at 56–80px with strong negative tracking whispers scale, body copy sits compact at 14–16px on generous line-height, and spacing leans dense (8–12px gaps) rather than airy. Everything lives in pill and rounded-rect containers; hard corners are absent.
Relate design system
Brand1
Primary brand accent — headlines, links, hero word highlight, pipeline-active dots, logo mark. Single saturated hue carries the entire brand identity
Accent5
Blue wash for highlight backgrounds, decorative bands, and soft emphasis behind content
Green text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color
Red text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color
Orange text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color
Input focus ring glow — pure blue that distinguishes active form state from ambient blue brand color
Neutrals8
Hero and section headings — near-black with a violet cast, reads warmer than pure black against white
Body text, secondary headings, product UI labels — workhorse dark neutral with cool undertone
Muted body text, nav labels, list items — medium-dark gray for subordinate copy
Helper text, metadata, timestamps — lighter gray for tertiary information
Hairline borders, card edges, divider lines — barely-there separation between surfaces
Subtle accent surface behind hero and feature blocks — gives cool-tinted depth without darkening the page
Input backgrounds, disabled states, subtle grouping surfaces — one shade darker than canvas
Page background, card surfaces, nav surface — the dominant neutral that makes blue accents feel switched on
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Snow Canvas on Royal Signal
5.20 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
