Totality Festival
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.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
headline-xl
72px · 700 · 80px
The quick brown fox jumps
headline-lg
48px · 600 · 56px
The quick brown fox jumps
headline-md
32px · 600 · 40px
The quick brown fox jumps
body-lg
18px · 400 · 28px
The quick brown fox jumps
body-md
16px · 400 · 24px
The quick brown fox jumps
label-md
14px · 500 · 20px
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| unit | 8px | |
| container-max | 1280px | |
| gutter | 24px | |
| margin-mobile | 16px | |
| margin-desktop | 64px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sm | 0.125rem | |
| DEFAULT | 0.25rem | |
| md | 0.375rem | |
| lg | 0.5rem | |
| xl | 0.75rem | |
| full | 9999px |
FAQ
- What colors does Totality Festival use?
- Totality Festival's core palette includes #121318, #121318, #38393f, #0d0e13, #1a1b21. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Totality Festival DESIGN.md.
- What font does Totality Festival use?
- Totality Festival's primary typeface is Space Grotesk. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Totality Festival design system?
- 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.