Skip to content

PUBLIC REFERENCE

Clyde

Iridescent gradients on obsidian glass

2026-04-30 Source style Original site
Clyde captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Midnight #000000

Page background, primary text on light surfaces, icon fills, strong borders

Ghost Ash #f6f6f4

Primary text on dark backgrounds, ghost button text, accent borders, light surface elements

Slate #7d7d7d

Secondary background surfaces, ghost button backgrounds, muted text

White Smoke #ffffff

Subtle inset shadows, light accents

Dark Charcoal #1a1a1a

Subtle dark borders

Iridescent Glow #ff8400

Decorative gradient accent, hero product highlighting; Decorative gradient accent, hero product highlighting with vertical flow

Do

  • Use Midnight (#000000) for all page backgrounds to maintain atmospheric depth.
  • Apply Recoleta for all primary headlines, leveraging its unique tracking values for distinct visual impact.
  • Implement 100px border-radius for all primary buttons to achieve a soft, pill-shaped aesthetic.
  • Employ the Iridescent Glow gradient (linear-gradient(90deg, #feed7a, #ff8400, #df91f7)) for any elements requiring unique visual emphasis or product highlights.
  • Ensure Ghost Ash (#f6f6f4) is the default text color on dark backgrounds, providing maximum contrast and legibility.
  • Maintain generous spacing with a base unit of 4px and elemental gaps around 20px, fostering a comfortable content density.

Don't

  • Avoid harsh, solid borders or backgrounds, except for functional elements that require clear separation.
  • Do not use highly saturated colors for text except for specific accent elements; stick to Ghost Ash (#f6f6f4) and Midnight (#000000) for content.
  • Do not introduce sharp corners or small radii on interactive elements; favor the 16px and 100px radii for organic, approachable shapes.
  • Avoid generic system fonts for any primary heading or body text; always use Recoleta or Oldschool Grotesk.
  • Do not use explicit drop shadows for elevation; rely on subtle inset shadows (rgba(255, 255, 255, 0.25) 0px 0.636826px 3.82096px 0px inset) for depth on dark surfaces.
  • Do not introduce competing gradients; the Iridescent Glow is the signature gradient.