google-labs-code--design.md/examples/totality-festival/DESIGN.md

name, colors, typography, rounded, spacing, components

name	colors	typography	rounded	spacing	components
Totality Festival Design System	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #121318 #121318 #38393f #0d0e13 #1a1b21 #1e1f25 #292a2f #34343a #e3e1e9 #d0c6ab #e3e1e9 #2f3036 #999077 #4d4732 #e9c400 #fff6df #3a3000 #ffd700 #705e00 #705d00 #bdf4ff #00363d #00e3fd #00616d #fcf3ff #3b2754 #e7d1ff #6b5586 #ffb4ab #690005 #93000a #ffdad6 #ffe16d #e9c400 #221b00 #544600 #9cf0ff #00daf3 #001f24 #004f58 #eedbff #d6bcf4 #25113e #523d6c #121318 #e3e1e9 #34343a	headline-xl headline-lg headline-md body-lg body-md label-md fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 72px 700 80px -0.04em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 48px 600 56px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 32px 600 40px 0em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 18px 400 28px 0em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 16px 400 24px 0em fontFamily fontSize fontWeight lineHeight letterSpacing Space Grotesk 14px 500 20px 0.1em	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px	unit container-max gutter margin-mobile margin-desktop 8px 1280px 24px 16px 64px	button-primary button-primary-hover button-secondary button-secondary-hover card-glass-level-2 card-glass-interactive-hover input-field list-item-hover hero-headline badge-celestial backgroundColor textColor typography rounded padding height {colors.primary} {colors.on-primary} {typography.label-md} {rounded.lg} 12px 48px backgroundColor {colors.primary-fixed} backgroundColor textColor typography rounded padding height transparent {colors.secondary} {typography.label-md} {rounded.lg} 12px 48px backgroundColor rgba(0, 227, 253, 0.1) backgroundColor rounded padding rgba(52, 52, 58, 0.2) {rounded.xl} {spacing.gutter} backgroundColor rgba(56, 57, 63, 0.4) backgroundColor textColor typography rounded padding {colors.surface-container-lowest} {colors.on-surface} {typography.body-md} {rounded.lg} 12px backgroundColor textColor rounded padding {colors.surface-container-high} {colors.primary} {rounded.md} 8px textColor typography {colors.primary} {typography.headline-xl} backgroundColor textColor typography rounded padding {colors.tertiary-container} {colors.on-tertiary-container} {typography.label-md} {rounded.full} 4px

Brand & Style

The design system captures the visceral tension and awe of a solar eclipse. It targets an audience of celestial enthusiasts, music lovers, and seekers of rare experiences. The aesthetic is "Cosmic Premium," blending the stark mystery of deep space with the explosive brilliance of the solar corona.

To achieve this, the design system utilizes Glassmorphism and High-Contrast movements. Surfaces appear as translucent obsidian slabs floating over nebula-like gradients, creating a sense of immense depth. High-energy accents represent the "diamond ring" effect, ensuring that while the interface is dark, it feels luminous and alive rather than heavy or muted.

Colors

The palette is anchored in the transition from shadow to light.

• Primary (Amber/White-Gold): Represents the solar corona and the "diamond ring" flash. Used for critical CTAs and high-importance highlights.
• Secondary (Soft Cyan): Represents the atmospheric thinning and the ethereal glow of the sky during totality. Used for interactive states and secondary information.
• Tertiary (Deep Indigo): Provides the "midnight" depth, used for subtle atmospheric gradients and deep backgrounds.
• Neutral (Obsidian/Charcoal): A near-black foundation that ensures the vibrant accents pop with maximum intensity.

Gradient usage is mandatory: use radial gradients for backgrounds to simulate the circular nature of the eclipse, moving from Neutral at the edges to Tertiary or Secondary in the focal centers.

Typography

This design system uses a dual-font strategy to balance cinematic impact with utility.

• Space Grotesk is the voice of the festival. Its geometric, technical quirks suggest a futuristic and astronomical tone. It should be used for all headers and labels. Large headings should use tight letter spacing to feel "locked" and monumental.
• Inter provides a neutral, highly legible counterpoint for long-form content and descriptions, ensuring that even in low-light environments, the information remains accessible.

For a truly cinematic feel, apply a subtle text-shadow or "glow" to headline-xl elements when they appear on the darkest backgrounds, using a low-opacity version of the Primary color.

Layout & Spacing

The layout philosophy follows a Fixed Grid model for desktop to maintain a prestigious, editorial feel, while transitioning to a fluid model for mobile.

A 12-column grid is used for desktop layouts, with generous outer margins to simulate the isolation of a celestial body in the void. Spacing is governed by an 8px base unit, but "negative space" is prioritized—elements should be allowed to breathe, echoing the vastness of space. Component groups should use tight internal spacing (e.g., 8px or 16px) but wide external margins (e.g., 64px or 80px) to create distinct "islands" of content.

Elevation & Depth

Depth in this design system is achieved through Glassmorphism and light-based layering rather than traditional drop shadows.

• Level 1 (Base): Deep obsidian/neutral background.
• Level 2 (Panels): Semi-transparent surfaces (10-20% opacity) with a 20px backdrop blur. These layers should have a 1px inner stroke of white at 10% opacity to define the edge, simulating a glass refraction.
• Level 3 (Interactive): Elements that are hovered or active should emit an "Ambient Glow." This is a soft, diffused shadow tinted with the Secondary or Primary color, creating the effect of light bleeding from behind the object.

Shapes

The shape language is "Soft-Technical." While the overall feel is geometric, a small corner radius is applied to all components to prevent the UI from feeling too aggressive or "sharp."

Buttons and input fields should utilize the rounded-lg (8px) setting for a modern feel. For specific decorative elements, such as image containers or featured cards, the rounded-xl (12px) setting can be used to soften the composition. Circles and perfect arcs are encouraged as supporting graphic elements to mirror the orbital theme of the festival.

Components

Action Elements

Buttons utilize Space Grotesk for a technical, high-impact feel; the Primary button mimics the "diamond ring" flash with a luminous amber glow on hover. Secondary buttons remain ethereal with a cyan outline, suggesting the sky's transition during totality.

Containers & Surfaces

Cards implement level-2 glassmorphism using a semi-transparent surface-variant fill and a fine 1px inner stroke to simulate light refraction on glass edges. For interactive states, cards should expand their "Ambient Glow" using the Secondary Cyan color to indicate focus.

Inputs & Selection

Input fields are anchored in the deepest surface-container-lowest to provide maximum contrast for entered text. Focus states use the Secondary Cyan border to maintain the cosmic color story without distracting from content.

Typography Application

headline-xl should always be paired with a subtle primary-colored glow when placed on dark backgrounds to ensure it feels "radiant" rather than static. List items use a tighter rounded-md corner to differentiate them from larger, more prominent layout containers.