google-labs-code--design.md/examples/atmospheric-glass/DESIGN.md

name, colors, typography, rounded, spacing, components

name	colors	typography	rounded	spacing	components
Atmospheric Glass	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 #0b1326 #0b1326 #31394d #060e20 #131b2e #171f33 #222a3d #2d3449 #dae2fd #c4c7c8 #dae2fd #283044 #8e9192 #444748 #c6c6c7 #ffffff #2f3131 #e2e2e2 #636565 #5d5f5f #adc9eb #14324e #304b68 #9fbbdd #ffffff #620040 #ffd8e7 #ab3779 #ffb4ab #690005 #93000a #ffdad6 #e2e2e2 #c6c6c7 #1a1c1c #454747 #d0e4ff #adc9eb #001d35 #2d4965 #ffd8e7 #ffafd3 #3d0026 #85145a #0b1326 #dae2fd #2d3449	display-lg headline-lg headline-md body-lg body-md label-sm fontFamily fontSize fontWeight lineHeight letterSpacing Inter 84px 700 90px -0.04em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 32px 600 40px -0.02em fontFamily fontSize fontWeight lineHeight Inter 24px 500 32px fontFamily fontSize fontWeight lineHeight Inter 18px 400 28px fontFamily fontSize fontWeight lineHeight Inter 16px 400 24px fontFamily fontSize fontWeight lineHeight letterSpacing Inter 12px 600 16px 0.05em	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	unit container-padding card-gap section-margin glass-padding 8px 24px 16px 40px 20px	glass-card-standard glass-card-elevated button-primary button-primary-hover button-ghost input-field weather-display-large metric-label list-item-interactive list-item-interactive-hover backgroundColor textColor rounded padding rgba(255, 255, 255, 0.1) {colors.primary} {rounded.lg} {spacing.glass-padding} backgroundColor textColor rounded padding rgba(255, 255, 255, 0.2) {colors.primary} {rounded.xl} {spacing.glass-padding} backgroundColor textColor typography rounded height padding {colors.primary} {colors.on-primary} {typography.label-sm} {rounded.xl} 48px 0 24px backgroundColor {colors.primary-fixed-dim} backgroundColor textColor typography rounded rgba(255, 255, 255, 0.05) {colors.primary} {typography.label-sm} {rounded.xl} backgroundColor textColor typography rounded padding height rgba(255, 255, 255, 0.1) {colors.primary} {typography.body-md} {rounded.xl} 20px 48px textColor typography {colors.primary} {typography.display-lg} textColor typography {colors.on-surface-variant} {typography.label-sm} backgroundColor rounded padding transparent {rounded.md} 12px backgroundColor rgba(255, 255, 255, 0.1)

Brand & Style

This design system centers on a high-fidelity Glassmorphism aesthetic designed to evoke a sense of clarity, depth, and modern sophistication. The brand personality is ethereal yet functional, transforming complex meteorological data into a serene visual experience.

The UI relies on a "vibrant-minimalist" approach: the background provides the energy through multi-colored abstract gradients (pinks, purples, and blues), while the interface elements act as frosted crystalline lenses that focus the user's attention. The emotional response is intended to be calm and premium, utilizing transparency and blur to simulate physical layers of glass floating in a fluid, digital space.

Colors

The color strategy prioritizes luminosity and contrast. Because the background is a vibrant, multi-colored abstract composition, the UI components utilize a monochromatic white palette with varying alpha channels to maintain legibility.

• Primary Canvas: A multi-stop linear or radial gradient background featuring Deep Blue (#1E3A8A), Vivid Purple (#7E22CE), and Soft Pink (#DB2777).
• Surface Alpha: Component backgrounds are never solid. They range from rgba(255, 255, 255, 0.1) for secondary depth to 0.2 for primary interaction areas.
• Accents: Semantic colors for weather conditions (e.g., Warning Yellow, Rain Blue) should be applied with high saturation but low opacity fills to maintain the glass effect.
• Text: Strictly white (#FFFFFF) or high-tint silver (#E2E8F0) to ensure WCAG compliance against the vibrant background.

Typography

The design system utilizes Inter for its neutral, geometric clarity which balances the organic nature of the blurred backgrounds.

• Hierarchy: Large display sizes are used for temperature readings to create a clear focal point.
• Legibility: On frosted glass, font weight is increased by one tier (e.g., using Medium instead of Regular) to counteract the visual noise of the background blur.
• Treatment: Subtle text-shadows (0px 2px 4px rgba(0,0,0,0.15)) may be applied to small labels to ensure they "pop" against lighter areas of the background gradient.

Layout & Spacing

The layout follows a fluid, contextual model. Elements are grouped into "Glass Containers" that float within the safe areas of the viewport.

• Rhythm: An 8px base grid governs all dimensions.
• Grouping: Related weather metrics (humidity, wind, UV index) are housed in a CSS grid or flex layout with 16px gaps.
• Negative Space: Generous outer margins (24px+) are maintained to ensure the vibrant background is visible, reinforcing the "floating" nature of the interface.

Elevation & Depth

Depth in this design system is not achieved through darkness, but through the physics of light and refraction.

• The Glass Stack:
  • Level 1 (Base): Dynamic background gradient with a slight grain texture.
  • Level 2 (Standard Card): backdrop-filter: blur(20px), background: rgba(255, 255, 255, 0.1).
  • Level 3 (Elevated/Modals): backdrop-filter: blur(40px), background: rgba(255, 255, 255, 0.2).
• Edge Definition: Every glass surface must have a 1px solid border at rgba(255, 255, 255, 0.2). A secondary inner "shine" border (top and left only) can be used to simulate a light source.
• Shadows: Use extremely soft, spread-out shadows (box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1)) to separate the glass layers from the background without making the UI feel "heavy."

Shapes

The shape language is organic and approachable. This design system uses "Rounded" (Level 2) settings to complement the fluid nature of the background.

• Cards: Use 1rem (16px) for standard weather cards.
• Action Elements: Buttons and search bars use rounded-xl (1.5rem / 24px) to create a soft, tactile feel.
• Icons: Weather iconography should be line-based with rounded caps (2px stroke width) to match the border weights of the containers.

Components

Glass Containers

Standard cards use a 20px blur for general metrics, while elevated cards (modals or focal points) use 40px blur and higher opacity to sit physically higher in the stack. All glass elements must feature a 1px white border to simulate light refraction on the edges.

Action Elements

Buttons use the rounded-xl setting to maintain a soft, organic feel. Primary buttons are solid white for maximum contrast, while ghost buttons utilize backdrop filters to remain integrated with the atmospheric background.

Inputs & Interaction

Interactive list items and text inputs use subtle hover states and light blurs rather than solid color changes, preserving the "crystalline" transparency of the UI.

Typography Application

Large weather displays utilize subtle text shadows to maintain legibility against the unpredictable colors of the background gradient. Metric labels should remain secondary in hierarchy using the silver-tinted on-surface-variant color.