Cosmic

Cosmic is an immersive, otherworldly system that draws the eye into deep space — radial nebula gradients, drifting starfields, luminous accents, and layered frosted-glass depth combine to make the screen feel like a window onto something vast. Where many dark themes feel flat, Cosmic feels dimensional, with soft colored glows and translucent panels stacking into real perceived depth. The mood is dreamy, premium, and a little magical. Reach for it on launch pages, creative AI tools, web3 products, and anything that wants to feel aspirational and beyond-ordinary.

Design principles

• Depth through layers: stack translucent glass panels, glows, and gradients so the interface recedes into space.
• Color is luminous and emotional — nebula violets and pinks bloom rather than sit flat.
• Backgrounds are alive: subtle gradients and starfields drift slowly to create atmosphere.
• Soft over sharp: generous radii, blurred glows, and feathered edges define the look.
• Reserve the brightest accents for moments of delight — CTAs, success states, key headings.
• Keep content readable by floating it on frosted-glass plates above the busy cosmic backdrop.

Color

The canvas is a profound space-black with a violet undertone, #06040F, deepening toward the edges and lifting toward #130D2B where nebula light gathers. Surfaces are translucent panels tinted with #130D2B. Foreground text is a soft lavender-white #ECEAFF that glows gently against the dark. The primary accent is a luminous cosmic violet #8B6CFF, paired with a secondary nebula pink #FF6FD8 for gradients and highlights, plus an electric aqua #3CE0E8 reserved for success and special emphasis. Muted text sits at #7E7AA8, and glass borders use #2A2150 at partial opacity. The system is inherently dark; a "dawn" variant softens to a #1A1440 background with lighter glass and the same gradient accents for contexts needing less intensity.

Typography

Headings use Sora for its rounded, modern, slightly cosmic character, occasionally filled with a #8B6CFF to #FF6FD8 gradient for featured moments, tracked slightly tight at -0.01em. Body copy uses Inter for clean legibility against the layered backgrounds. Mono details and codes use JetBrains Mono. The scale is expressive — a 1.333 ratio — letting hero headings feel grand and luminous while body text stays grounded. Heading line-height is 1.1; body relaxes to 1.65 because the busy backdrop benefits from extra breathing room between lines.