# Cosmic

> Deep space aesthetic with purple nebula gradients and mysterious atmosphere

- Skill: `jdsadminllc/cosmic` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/cosmic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/cosmic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/cosmic

---

# 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 `#8B5CF6` border 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 `#E0E7FF` on `#0B0B1A`)
- Focus rings: 2px `#8B5CF6` glow 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)