jdsadminllc Cosmic
Mission
Transport users into deep space through rich purple-indigo gradients, starfield textures, and a sense of infinite mystery.
Brand
🎨 Colors
#0B0B1A— Deep space background (near-black indigo)#1A1A3E— Secondary background (dark nebula)#8B5CF6— Primary accent (vivid purple)#6366F1— Secondary accent (indigo)#A78BFA— Soft accent (lavender glow)#E0E7FF— Text (ethereal white)
🔤 Typography
- Heading font: Space Grotesk (Google Fonts)
- Body font: Inter (Google Fonts)
- Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 1.75rem / 2xl 2.5rem / 3xl 3.5rem
📐 Spacing
- Grid: 12-column, 1.5rem gap, centered container
- Section padding: 6rem top/bottom
- Card gap: 2rem
🧩 Components
- Buttons: Ghost-style with 1px purple border and glow effect (box-shadow in accent color), rounded 12px, hover fills with gradient
- Cards: Translucent dark backgrounds (
rgba(26, 26, 62, 0.8)) with backdrop-blur, 1px#8B5CF6border at 20% opacity, 16px radius - Nav: Minimal, transparent with backdrop-blur, white text links, subtle star-dot separators
- Hero: Massive heading with text-glow, animated starfield or particle background, slow parallax nebula layers
- Footer: Dark fade-to-black, subtle constellation-line graphic, minimal links
♿ Accessibility
- All text passes 4.5:1 contrast (light text on dark = verify
#E0E7FFon#0B0B1A) - Focus rings: 2px
#8B5CF6glow with 2px offset - Reduced motion: disable parallax, particle effects, and glow animations; keep static starfield
- Minimum font size 0.75rem
✍️ Writing Tone
- Evocative and atmospheric — use cosmic metaphors sparingly but effectively
- Short, weighty statements; let whitespace carry meaning
- Labels use lowercase or sentence case; avoid shouting
Do / Don't
✅ Do
- Layer depth through parallax, translucent cards, and soft glow effects
- Use CSS animations for slow, ambient motion (stars twinkling, nebula drifting)
- Keep text minimal — let the atmosphere do the heavy lifting
- Apply text-shadow glow to key headings for ethereal effect
- Use star/constellation/dot patterns as subtle decorative elements
❌ Don't
- Use bright, saturated colors outside the purple-indigo spectrum
- Add fast or jarring animations — everything must feel slow and cosmic
- Overcrowd with content — cosmic design needs empty space
- Use harsh white (
#FFFFFF) — always warm it to#E0E7FF - Include cartoonish space elements (clip-art rockets, planets) — keep abstract
Quality Gates
- All text passes 4.5:1 contrast against dark backgrounds
- Focus states visible against dark backgrounds
- Page respects prefers-reduced-motion (disable parallax, particles, glows)
- No font smaller than 0.75rem
- Animations run at 60fps (no janky particle effects)
- At least one atmospheric element present (starfield, nebula gradient, or parallax)