---
name: Liquid Digital
colors:
  surface: '#131318'
  surface-dim: '#131318'
  surface-bright: '#39383e'
  surface-container-lowest: '#0e0e13'
  surface-container-low: '#1b1b20'
  surface-container: '#1f1f25'
  surface-container-high: '#2a292f'
  surface-container-highest: '#35343a'
  on-surface: '#e4e1e9'
  on-surface-variant: '#d4c0d7'
  inverse-surface: '#e4e1e9'
  inverse-on-surface: '#303036'
  outline: '#9d8ba0'
  outline-variant: '#514255'
  surface-tint: '#ecb2ff'
  primary: '#ecb2ff'
  on-primary: '#520071'
  primary-container: '#bd00ff'
  on-primary-container: '#ffffff'
  inverse-primary: '#9900cf'
  secondary: '#d3fbff'
  on-secondary: '#00363a'
  secondary-container: '#00eefc'
  on-secondary-container: '#00686f'
  tertiary: '#cac1ed'
  on-tertiary: '#322b4f'
  tertiary-container: '#797199'
  on-tertiary-container: '#ffffff'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#f8d8ff'
  primary-fixed-dim: '#ecb2ff'
  on-primary-fixed: '#320047'
  on-primary-fixed-variant: '#74009f'
  secondary-fixed: '#7df4ff'
  secondary-fixed-dim: '#00dbe9'
  on-secondary-fixed: '#002022'
  on-secondary-fixed-variant: '#004f54'
  tertiary-fixed: '#e6deff'
  tertiary-fixed-dim: '#cac1ed'
  on-tertiary-fixed: '#1d1639'
  on-tertiary-fixed-variant: '#484267'
  background: '#131318'
  on-background: '#e4e1e9'
  surface-variant: '#35343a'
typography:
  headline-xl:
    fontFamily: Epilogue
    fontSize: 80px
    fontWeight: '800'
    lineHeight: '1.1'
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: Epilogue
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Epilogue
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.3'
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
  technical-sm:
    fontFamily: Space Grotesk
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1.4'
    letterSpacing: 0.05em
  technical-xs:
    fontFamily: Space Grotesk
    fontSize: 12px
    fontWeight: '400'
    lineHeight: '1.4'
    letterSpacing: 0.1em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  gutter: 24px
  margin-page: 64px
  container-max: 1440px
---

## Brand & Style

This design system embodies the concept of "Digital Liquidity"—a state where high-tech precision meets organic movement. Designed for a visionary creative agency, it focuses on immersive storytelling through depth and light.

The style is rooted in **Glassmorphism**, utilizing heavily blurred background surfaces to create a sense of infinite space. It avoids rigid boxes in favor of fluid, organic shapes and iridescent light leaks that suggest a living, breathing interface. The emotional goal is to evoke awe, signaling a brand that operates at the bleeding edge of the future.

## Colors

The palette simulates a deep space environment illuminated by synthetic light. 
- **Deep Space Indigo (#120B2E):** Used for primary container backgrounds and deep shadows.
- **Iridescent Purple (#BD00FF):** The primary brand expression, used for interactive states and fluid gradient meshes.
- **Glowing Cyan (#00F0FF):** A high-contrast accent color reserved for critical calls to action and "active" indicators.
- **Glass Base:** A semi-transparent neutral used for frosted surfaces, allowing the vibrant background gradients to bleed through.

## Typography

This design system utilizes a high-contrast typographic pairing to balance creative expression with technical rigor.
- **Headlines:** Set in **Epilogue**, utilizing its wide, geometric presence for a bold, editorial feel. Heavy weights and tight tracking are preferred for a "monolithic" appearance.
- **Body:** **Inter** provides maximum legibility against dark, complex backgrounds.
- **Technical Details:** **Space Grotesk** is used for labels, metadata, and technical specs, providing a futuristic, monospaced rhythm that anchors the more fluid visual elements.

## Layout & Spacing

The layout philosophy follows a **fluid grid** model with generous white space (or "dark space") to let elements breathe. 
- Use a 12-column grid for desktop views.
- Section spacing should be aggressive (120px+) to maintain the "visionary" aesthetic.
- Components should favor internal padding over external margins to preserve the integrity of glassmorphic containers.
- Elements are often placed off-center or with asymmetrical offsets to mimic fluid movement.

## Elevation & Depth

Depth is not communicated through traditional drop shadows, but through **Tonal Layers and Glassmorphism**.
- **Level 1 (Base):** Deep indigo backgrounds with blurred iridescent mesh gradients.
- **Level 2 (Containers):** Frosted glass surfaces with a `backdrop-filter: blur(20px)`. Borders are 1px semi-transparent white (10% opacity) to define edges.
- **Level 3 (Interactive):** Elements that "glow." Use `box-shadow` with high blur radii (40px+) and low opacity in the primary iridescent purple or cyan to simulate light emission rather than a physical shadow.

## Shapes

The shape language is a mix of geometric foundations and organic accents.
- **Containers:** Standardized with `rounded-lg` (1rem) to maintain a modern, friendly feel.
- **Fluid Shapes:** Use large, non-standardized SVG blobs in the background to break the grid.
- **Interactive Elements:** Buttons and tags utilize "soft" corners to contrast with the sharp technical typography.

## Components

- **Buttons:** Primary buttons feature a subtle gradient of Purple to Cyan. Ghost buttons use a 1px iridescent border. All buttons should have a hover state that increases the "inner glow."
- **Cards:** Glassmorphic containers with a 1px top-down linear gradient border (White to Transparent) to simulate a "rim light."
- **Chips/Tags:** Small, Space Grotesk-capped labels with a low-opacity Cyan background and a high-contrast Cyan text color.
- **Input Fields:** Dark, recessed backgrounds with a Cyan bottom-border that glows when the field is focused.
- **Background Mesh:** A custom component that renders 3-4 moving, blurred blobs of color beneath the UI layers.
- **Cursors:** Custom circular cursor with an "invert" blend mode or a trailing blur effect to enhance the fluid personality.