7shifts. A bright restaurant counter where indigo buttons, orange hand-drawn underlines, and lime highlighter marks sit on clean white and warm bone surfaces, with occasional black bands that make the colors glow.
- SaaS
- Light theme
- 15 colors
- 5 typefaces
7shifts is a light, air-kissed SaaS canvas with a single punchy indigo as the call-to-action and a small cast of warm accents doing the personality work. The page reads like a clean restaurant counter: white surface, warm bone secondary panels, soft pastel card variants, and the occasional full-bleed black band that makes everything around it feel brighter. Orange is the signature flourish — it underlines hero words in a hand-drawn stroke, floods feature backgrounds, and marks tabbed content — while a lime-green acts as highlighter text inside dark sections. Components are generous and rounded (pill buttons, 20px cards, 40px hero plates) with a compact vertical rhythm. The lone script typeface, Nanum Pen Script, shows up only as a personality accent under hero copy and never on body or UI controls.
7shifts design system
Brand1
Violet action color for filled buttons, selected navigation states, and focused conversion moments.
Accent7
Orange accent for outlined action borders, linked labels, and lightweight interactive emphasis
Green text accent for links, tags, and emphasized short phrases.
Soft card surface, gentle section background — pastel variant for breaking up the white canvas without adding noise
Cool pastel card surface, section wash — pairs with indigo to reinforce the primary brand hue at low intensity
Saturated card background in feature card grid — bolder pastel, one of four colored card variants that rotate across feature rows
Blue wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
Muted teal card variant — grounded, earthy counterpoint in the four-color card rotation
Neutrals7
Primary text, dark feature sections, filled dark comparison cards — creates the dramatic black bands that make the colors pop
Tertiary text, button labels on neutral buttons
Secondary body text, helper text, muted captions
Mid-gray strokes, subtle dividers, muted icon backgrounds
Borders, dividers, table rules, input borders — the workhorse neutral stroke
Secondary canvas, soft section backgrounds, neutral action borders — the off-white that keeps the page from feeling sterile
Page background, card surfaces, button fills, body text on dark sections
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Ink Black on Indigo Bolt
5.01 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
