---
name: Slate & Aurora
colors:
  surface: '#0b1326'
  surface-dim: '#0b1326'
  surface-bright: '#31394d'
  surface-container-lowest: '#060e20'
  surface-container-low: '#131b2e'
  surface-container: '#171f33'
  surface-container-high: '#222a3d'
  surface-container-highest: '#2d3449'
  on-surface: '#dae2fd'
  on-surface-variant: '#cbc3d7'
  inverse-surface: '#dae2fd'
  inverse-on-surface: '#283044'
  outline: '#958ea0'
  outline-variant: '#494454'
  surface-tint: '#d0bcff'
  primary: '#d0bcff'
  on-primary: '#3c0091'
  primary-container: '#a078ff'
  on-primary-container: '#340080'
  inverse-primary: '#6d3bd7'
  secondary: '#4edea3'
  on-secondary: '#003824'
  secondary-container: '#00a572'
  on-secondary-container: '#00311f'
  tertiary: '#ffafd3'
  on-tertiary: '#620040'
  tertiary-container: '#e364a7'
  on-tertiary-container: '#560038'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#e9ddff'
  primary-fixed-dim: '#d0bcff'
  on-primary-fixed: '#23005c'
  on-primary-fixed-variant: '#5516be'
  secondary-fixed: '#6ffbbe'
  secondary-fixed-dim: '#4edea3'
  on-secondary-fixed: '#002113'
  on-secondary-fixed-variant: '#005236'
  tertiary-fixed: '#ffd8e7'
  tertiary-fixed-dim: '#ffafd3'
  on-tertiary-fixed: '#3d0026'
  on-tertiary-fixed-variant: '#85145a'
  background: '#0b1326'
  on-background: '#dae2fd'
  surface-variant: '#2d3449'
typography:
  display-lg:
    fontFamily: Manrope
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Manrope
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Manrope
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.3'
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1.4'
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1.4'
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 4px
  margin-mobile: 20px
  gutter: 16px
  touch-target-min: 48px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 32px
---

## Brand & Style
The design system is engineered to evoke a sense of "Quiet Luxury" through a mobile-first lens. It focuses on high-end performance and a premium aesthetic that balances minimalist structure with avant-garde digital effects. The personality is sophisticated, confident, and technologically advanced.

The visual style merges **Minimalism** with **Subtle Glassmorphism**. By using heavy whitespace and a restricted neutral palette, the design system allows vibrant accent pops to signify intent and interactivity. The "Novelty" aspect is introduced through blurred background layers and precision-engineered micro-interactions that make the interface feel tactile yet weightless.

## Colors
This design system utilizes a "Deep Dark" foundational palette to maximize the vibrance of its accent colors. 

- **Primary (Electric Violet):** Used for primary actions, active states, and brand-critical moments.
- **Secondary (Aurora Green):** Used for success states, growth indicators, and secondary high-visibility actions.
- **Neutrals (Deep Slate):** A range of cool, desaturated blues and greys used for surfaces, borders, and text to maintain a premium, nocturnal feel.
- **Semantic Hierarchy:** High contrast is maintained by using pure white (`#FFFFFF`) for primary titles and Slate-400 (`#94A3B8`) for secondary meta-data.

## Typography
The typography strategy utilizes **Manrope** for headlines to provide a sophisticated, geometric flair that feels modern and custom. **Inter** is used for body and functional labels to ensure maximum legibility and performance across all mobile devices.

Tightened letter-spacing is applied to large display text to create a compact, "editorial" look. Body text maintains a generous line height to ensure readability against dark backgrounds.

## Layout & Spacing
This design system employs a **Fluid Grid** optimized for mobile viewports. Layouts are built on a 4px baseline shift to maintain a rigorous mathematical rhythm. 

Standard mobile margins are set at 20px to provide breathing room, while internal gutters stay at 16px. Touch targets are strictly enforced at a 48px minimum height/width to ensure accessibility. Vertical rhythm is established through a series of "Stack" tokens that define consistent spacing between logical sections.

## Elevation & Depth
Depth is created through **Glassmorphism** and **Ambient Shadows**. Instead of traditional solid shadows, this design system uses:

1.  **Backdrop Blurs:** 12px to 20px blur radius on surfaces with 60-80% opacity to create a "frosted" effect over background content.
2.  **Inner Glows:** 1px semi-transparent white top-borders on cards to simulate light hitting an edge.
3.  **Soft Tinted Shadows:** Deep Indigo/Slate shadows with high diffusion (30px+ blur) and low opacity (15%) to make elements appear as if they are floating rather than sitting on a flat plane.

## Shapes
The shape language is defined by **Rounded (0.5rem)** corners for standard components, providing a friendly yet professional demeanor. 

- **Cards/Containers:** Use `rounded-lg` (1rem) to create a distinct enclosure for content.
- **Interactive Inputs:** Use `rounded-md` (0.5rem) to maintain a crisp, functional appearance.
- **Buttons:** Utilize the `rounded-xl` (1.5rem) or fully pill-shaped styles to emphasize touchability and distinguish them from informational containers.

## Components
- **Buttons:** Primary buttons use a solid Electric Violet fill with white text. Secondary buttons use a glass-morphic background with a subtle 1px slate border.
- **Chips:** Small, high-contrast labels with Aurora Green backgrounds for "Active" or "New" statuses.
- **Lists:** Clean rows with 1px Slate-800 dividers. Chevron icons should be used to indicate drill-down capability.
- **Input Fields:** Dark slate backgrounds with 2px borders that transition from Slate-700 to Electric Violet upon focus.
- **Cards:** The core container of the system. They feature a `0.5` opacity background, 20px backdrop-blur, and a soft outer glow. 
- **Navigation:** A fixed bottom navigation bar with blurred transparency, ensuring the content scrolls elegantly behind the interactive anchors.