---
name: Ethereal Precision
colors:
  surface: '#f0fbfc'
  surface-dim: '#d1dcdd'
  surface-bright: '#f0fbfc'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#eaf6f7'
  surface-container: '#e5f0f1'
  surface-container-high: '#dfeaeb'
  surface-container-highest: '#d9e5e6'
  on-surface: '#131d1e'
  on-surface-variant: '#44474c'
  inverse-surface: '#283233'
  inverse-on-surface: '#e8f3f4'
  outline: '#74777d'
  outline-variant: '#c4c6cd'
  surface-tint: '#4f6073'
  primary: '#041627'
  on-primary: '#ffffff'
  primary-container: '#1a2b3c'
  on-primary-container: '#8192a7'
  inverse-primary: '#b7c8de'
  secondary: '#5e5e5c'
  on-secondary: '#ffffff'
  secondary-container: '#e1dfdc'
  on-secondary-container: '#636360'
  tertiary: '#121617'
  on-tertiary: '#ffffff'
  tertiary-container: '#272a2c'
  on-tertiary-container: '#8e9193'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#d2e4fb'
  primary-fixed-dim: '#b7c8de'
  on-primary-fixed: '#0b1d2d'
  on-primary-fixed-variant: '#38485a'
  secondary-fixed: '#e4e2df'
  secondary-fixed-dim: '#c8c6c4'
  on-secondary-fixed: '#1b1c1a'
  on-secondary-fixed-variant: '#474745'
  tertiary-fixed: '#e1e3e5'
  tertiary-fixed-dim: '#c4c7c9'
  on-tertiary-fixed: '#191c1e'
  on-tertiary-fixed-variant: '#444749'
  background: '#f0fbfc'
  on-background: '#131d1e'
  surface-variant: '#d9e5e6'
typography:
  headline-lg:
    fontFamily: Newsreader
    fontSize: 48px
    fontWeight: '300'
    lineHeight: '1.1'
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Newsreader
    fontSize: 32px
    fontWeight: '300'
    lineHeight: '1.2'
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Newsreader
    fontSize: 24px
    fontWeight: '400'
    lineHeight: '1.3'
    letterSpacing: 0.01em
  body-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: '300'
    lineHeight: '1.6'
    letterSpacing: 0.03em
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: '300'
    lineHeight: '1.6'
    letterSpacing: 0.02em
  label-caps:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: '500'
    lineHeight: '1.5'
    letterSpacing: 0.15em
  caption:
    fontFamily: Manrope
    fontSize: 13px
    fontWeight: '400'
    lineHeight: '1.4'
    letterSpacing: 0.02em
spacing:
  unit: 8px
  gutter: 32px
  margin-edge: 64px
  section-gap: 128px
  hairline: 0.5px
---

## Brand & Style

This design system is anchored in the concept of "Architectural Silence." It targets a high-discerning audience that values composure, intellectual depth, and the luxury of space. The brand personality is calm yet authoritative, utilizing an ultra-minimalist approach where every pixel is intentional and every void is meaningful.

The visual style is a hybrid of **Minimalism** and **Modern Editorial**. It rejects the clutter of standard UI patterns in favor of expansive negative space, hyper-refined hairlines, and a rejection of heavy fills. The emotional response is one of "expensive quiet"—the digital equivalent of a high-end gallery or a bespoke architectural firm. High-contrast functional elements are eschewed for subtle tonal shifts that demand and reward focused attention.

## Colors

The palette is restrained and low-vibrancy to ensure a meditative user experience.
- **Architectural Blue (#1A2B3C):** Used exclusively for primary typography, structural icons, and high-importance interactions. It provides the "anchor" for the design.
- **Warm White (#F7F5F2):** The primary canvas color. This slight warmth prevents the "clinical" feel of pure white, adding a sense of premium materiality.
- **Soft Grey (#E5E7E9):** Reserved for subtle background differentiation and secondary container fills.
- **Muted Slate (#707B7C):** Used for secondary text and disabled states, maintaining legibility without breaking the ethereal atmosphere.

Color application should be sparse; the "Architectural Blue" should feel like a deliberate strike of ink on a vast, textured paper.

## Typography

Typography is the cornerstone of this design system. We pair the authoritative, literary weight of **Newsreader** with the airy, technical precision of **Manrope**.

- **Newsreader:** Used for all headlines. It should always be set with slightly wider letter-spacing than default to emphasize its elegant, spacious nature. 
- **Manrope:** Chosen for body and interface elements for its modern, balanced, and neutral character. It should be used primarily in its lighter weights (300/400) to maintain the "airy" aesthetic.
- **Hierarchy:** High contrast in scale is encouraged—pair large, light-weight serif headlines with small, tracked-out sans-serif labels to create a sense of professional curation.

## Layout & Spacing

The layout philosophy follows a **Fixed Grid** with hyper-extended margins. To achieve the "Ethereal" look, the design system utilizes much larger spacing values than standard utility apps.

- **Negative Space:** Whitespace is treated as a structural element rather than a void. Section transitions should feel expansive (128px+).
- **The Hairline:** Use 0.5px strokes in Architectural Blue at 20% opacity for all dividers. These should feel like "penciled" architectural guidelines rather than heavy borders.
- **Rhythm:** An 8px base unit drives all padding and margins, but primary content should be centered within a 12-column grid that allows for significant "breathing room" on the flanks.

## Elevation & Depth

This design system avoids traditional drop shadows in favor of **Ambient Diffused Shadows** and **Tonal Layering**.

- **Depth through Tone:** Layers are created by shifting from the Warm White background to a Soft Grey surface. The transition should be subtle, almost imperceptible at a glance.
- **Shadows:** When necessary for floating elements (like modals), use extremely large blur radii (40px-60px) with very low opacity (5-8%) using a tint of Architectural Blue. The shadow should feel like a soft glow rather than an object blocking light.
- **Glassmorphism:** Use subtle backdrop blurs (4px-8px) on navigation bars to maintain the sense of "ethereal" transparency, ensuring the background colors bleed through softly.

## Shapes

The shape language is strictly **Sharp (0px)**. 

To maintain the architectural and "Expensive" aesthetic, the design system avoids rounded corners entirely. This creates a sense of precision, discipline, and structural integrity. All containers, buttons, and input fields must use 90-degree angles. The only exception is for circular elements such as avatars or radio buttons, which must be perfectly geometric.

## Components

- **Buttons:** Primary buttons are outlined with a 0.5px stroke of Architectural Blue or solid Architectural Blue with Warm White text. Hover states should involve a subtle shift in background opacity rather than a color change.
- **Input Fields:** Minimalist underlines (0.5px) rather than enclosed boxes. Labels use the `label-caps` typography style, positioned 8px above the input line.
- **Cards:** No heavy borders or shadows. Cards are defined by the `hairline` or a subtle tonal shift to Soft Grey. Padding inside cards should be generous (minimum 32px).
- **Chips/Tags:** Small, sharp-edged rectangles with a Soft Grey background and Architectural Blue text. No icons.
- **Lists:** Separated by full-bleed 0.5px hairlines. High vertical padding (24px+) between items to maintain the "expansive" feel.
- **Additional Component - The Scrim:** For overlays, use a high-blur (20px) backdrop filter with a 10% opacity Architectural Blue overlay to "dim" the world behind the active element.