Clyde. A near-black gallery where one warm gradient orb is the only color in the room.
- SaaS
- Dark theme
- 6 colors
- 3 typefaces
Clyde treats product protection as luxury editorial: a near-black canvas dominates every section, warm cream (#f6f6f4) carries all text and hairline borders, and a single yellow-to-orange-to-purple gradient appears only inside 3D abstract shapes and product accents. Display headlines at 80–125px in Recoleta serif create magazine-cover scale, while Oldschool Grotesk at 300/400 handles all UI and body copy at a measured, compact rhythm. The palette is 99% achromatic — buttons are dark fills or cream-outlined pills, never chromatic, and surfaces separate through tonal contrast and hairline borders rather than shadows.
Clyde design system
Accent1
Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color
Neutrals5
Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color
Near-black hairline borders, subtle dark surface differentiation from the true-black canvas
Mid-gray surface accent, secondary UI fill, muted element backgrounds — sits between bone and obsidian for tonal layering
Primary text on dark surfaces, hairline borders, light section backgrounds, ghost-button outlines, nav links — the warm cream that defines the entire light/dark polarity
Inner product-image containers, pure-white card panels, maximum-contrast text — the brightest surface in the stack
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper on Obsidian
21.00 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
