Design System Inspired by Totality Festival

Category: Themed & Unique Surface: web A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse — obsidian surfaces, amber “corona” highlights, and cyan atmospheric accents.

1. Visual Theme & Atmosphere

“Cosmic Premium” — the visceral tension and awe of a solar eclipse. The aesthetic blends the stark mystery of deep space with the explosive brilliance of the solar corona. Surfaces appear as translucent obsidian slabs floating over nebula-like gradients. High-energy amber accents represent the “diamond ring” flash — they make the interface feel luminous and alive rather than heavy or muted.

• Visual style: dark, glassmorphic, cinematic
• Color stance: obsidian neutral, amber corona accent, cyan atmospheric
• Design intent: Keep outputs recognizable as a premium festival / creator product; use radial gradients for backgrounds to simulate the circular nature of the eclipse.

2. Color

• Primary: #fff6df — Amber / white-gold, the solar corona and “diamond ring” flash. Used for critical CTAs and high-importance highlights.

• Primary Container: #ffd700 — Pure corona gold. Reserved for the single most important highlight on a screen.

• Secondary: #bdf4ff — Soft cyan, the atmospheric thinning and ethereal glow of the sky during totality. Used for interactive states and secondary emphasis.

• Secondary Container: #00e3fd — Vivid cyan for interactive ambient glow rims.

• Tertiary: #fcf3ff — Faint lavender-white for subtle tinted highlights.

• Tertiary Container: #e7d1ff — Deep indigo haze, celestial badges.

• Surface: #121318 — Obsidian / near-black foundation.

• Surface Container: #1e1f25 — Slightly elevated obsidian for cards.

• Surface Container High: #292a2f — Elevated panels, active states.

• Text: #e3e1e9 — Warm off-white for primary body copy and headlines.

• Text Muted: #d0c6ab — Warm parchment tone for metadata and labels.

• Outline: #999077 — Low-contrast warm gray for hairline borders.

• Favor Primary (#fff6df) and Primary Container (#ffd700) for the “corona flash” moments — max 3 per screen.

• Use Secondary (#bdf4ff / #00e3fd) for interactive states, never for decorative flourishes.

• Surfaces stack as semi-transparent glass: rgba(255, 255, 255, 0.05-0.1) with backdrop-filter: blur(20px) and a 1px rgba(255, 255, 255, 0.1) inner border to simulate light refraction.

3. Typography

A dual-font strategy to balance cinematic impact with utility.

• Display / Headings: Space Grotesk — geometric, technical, futuristic-astronomical tone. Tight letter spacing (-0.02em to -0.04em) on large headings to feel “locked” and monumental.
• Body / Long-form: Inter — neutral, highly legible in low-light environments.
• Labels: Space Grotesk with wide tracking (0.1em) and uppercase, to read as “coordinates” or “readouts” rather than UI chrome.

Apply a subtle text-shadow or low-opacity primary-colored glow to headline-xl elements on the darkest backgrounds for a truly cinematic feel — radiant, not static.

4. Layout & Spacing

• Grid: 12-column fixed grid on desktop with generous outer margins (64–80px) to simulate the isolation of a celestial body in the void. Fluid model on mobile with 16px margins.
• Rhythm: 8px base unit. Internal component spacing tight (8 / 16px); external section margins wide (64 / 80px) to create distinct “islands” of content.
• Max width: 1280px for content containers.
• Negative space is a feature, not a cost. Prefer breathing room over density.

5. Elevation & Depth

Depth is achieved through glassmorphism and light-based layering — not traditional drop shadows.

• Level 1 (Base): Deep obsidian surface with an optional radial gradient vignette in #1a1b21 → #121318.
• Level 2 (Panels): Semi-transparent surfaces at rgba(52, 52, 58, 0.2) with backdrop-filter: blur(20px) and a 1px inner stroke at rgba(255, 255, 255, 0.1) to simulate refraction on a glass edge.
• Level 3 (Interactive / Active): An ambient glow — a soft, diffused shadow tinted with Secondary (#00e3fd) or Primary Container (#ffd700), creating the impression of light bleeding from behind the object.

6. Shapes

Shape language is soft-technical. Geometric overall, but small corner radii soften aggression.

• Buttons, inputs: rounded-lg (8px).
• Cards, featured containers: rounded-xl (12px).
• Badges, pills: rounded-full.
• Decorative elements: circles and perfect arcs are encouraged to mirror the orbital / eclipse theme.

7. Components

• Primary button: Amber fill on obsidian, with a luminous amber glow on hover (mimics the diamond-ring flash). Space Grotesk label, uppercase, 0.1em tracking.
• Secondary button: Transparent fill, cyan outline and label — suggests the sky’s transition during totality.
• Glass card (level 2): rgba(52,52,58,0.2) + 20px blur + 1px inner white stroke + generous internal padding.
• Input field: Anchored in the deepest surface (#0d0e13) for maximum contrast; cyan border on focus.
• Badges: Pill-shaped with the tertiary container color; reserved for “celestial” metadata (status, live indicators).

8. Do’s & Don’ts

• Do use Primary Container (#ffd700) no more than 3 times per screen — it’s the flash, not the background.
• Do pair large Space Grotesk headlines with a subtle primary-colored glow on dark surfaces.
• Do tint shadows and glows with Primary or Secondary — never use pure gray shadows.
• Don’t use solid opaque fills for cards — break the glass illusion.
• Don’t combine amber and cyan glows on the same element — choose one depending on state (amber = highlight / CTA; cyan = interactive / focus).
• Don’t use sharp 0-radius corners except for data tables where structure outweighs warmth.