Skip to content
Library

Stryds. Aurora ringed midnight void.

  • Brand
  • Dark theme
  • 9 colors
  • 2 typefaces

Stryds is a poster-scale health manifesto: a near-black void ringed by a segmented spectrum gradient, with display typography that pushes past 100px to feel like a billboard, not a dashboard. The entire palette is monochrome — one canvas tone, one text tone, one border tone — broken only by Electric Lime, the single chromatic voice that makes CTAs and active states feel switched on. A massive circular gradient frame is the signature visual gesture, reappearing around hero text and content blocks like a health aura. Components are minimal and pill-shaped; the design has almost no elevation, no photography, and no illustration beyond the spectrum ring itself and a floating avatar. The result is an editorial, late-night broadcast feel: bold, confrontational, and deeply opinionated about digital wellness.

Screenshot of Stryds
Captured from stryds.com on October 11, 2026

Stryds design system

Stryds

Brand2

  • Green action color for filled buttons, selected navigation states, and focused conversion moments.

  • Outlined action borders, subtle decorative borders — a near-black indigo that adds tonal depth to dark borders without breaking the monochrome canvas

Neutrals7

  • SVG fills, spectrum ring backing — pure black for graphic elements where absolute darkness is needed

  • Page canvas, outermost background, shadow tokens — the base void that every surface floats on

  • Card surfaces, elevated content panels — the only step above Obsidian in the surface stack

  • Hairline borders, card borders, subtle dividers — the structural border color, used more than any other in the system

  • Strokes, secondary card borders — a half-step lighter than Slate for layering borders on borders

  • Dark borders and separators for elevated surfaces and inverted UI.

  • Primary text, heading borders, illustration highlights — the only text color that reads as active

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Void on Electric Lime

16.93 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.