---
name: Aureate Light
colors:
  surface: '#f9f9f7'
  surface-dim: '#dadad8'
  surface-bright: '#f9f9f7'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f4f4f2'
  surface-container: '#eeeeec'
  surface-container-high: '#e8e8e6'
  surface-container-highest: '#e2e3e1'
  on-surface: '#1a1c1b'
  on-surface-variant: '#4d4635'
  inverse-surface: '#2f3130'
  inverse-on-surface: '#f1f1ef'
  outline: '#7f7663'
  outline-variant: '#d0c5af'
  surface-tint: '#735c00'
  primary: '#735c00'
  on-primary: '#ffffff'
  primary-container: '#d4af37'
  on-primary-container: '#554300'
  inverse-primary: '#e9c349'
  secondary: '#5d5f5e'
  on-secondary: '#ffffff'
  secondary-container: '#e2e2e2'
  on-secondary-container: '#636564'
  tertiary: '#5d5f5f'
  on-tertiary: '#ffffff'
  tertiary-container: '#b2b3b3'
  on-tertiary-container: '#434546'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#ffe088'
  primary-fixed-dim: '#e9c349'
  on-primary-fixed: '#241a00'
  on-primary-fixed-variant: '#574500'
  secondary-fixed: '#e2e2e2'
  secondary-fixed-dim: '#c6c6c6'
  on-secondary-fixed: '#1a1c1c'
  on-secondary-fixed-variant: '#454747'
  tertiary-fixed: '#e2e2e2'
  tertiary-fixed-dim: '#c6c6c7'
  on-tertiary-fixed: '#1a1c1c'
  on-tertiary-fixed-variant: '#454747'
  background: '#f9f9f7'
  on-background: '#1a1c1b'
  surface-variant: '#e2e3e1'
typography:
  display-lg:
    fontFamily: Playfair Display
    fontSize: 48px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  display-lg-mobile:
    fontFamily: Playfair Display
    fontSize: 36px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Playfair Display
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.3'
  headline-sm:
    fontFamily: Playfair Display
    fontSize: 24px
    fontWeight: '600'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-caps:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1'
    letterSpacing: 0.1em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  base: 8px
  container-max: 1280px
  gutter: 24px
  margin-mobile: 16px
  margin-desktop: 64px
---

## Brand & Style

This design system embodies "Quiet Luxury"—a sophisticated, editorial aesthetic that balances heritage elegance with modern digital precision. The target audience includes high-net-worth individuals, connoisseurs of art and fashion, and users seeking a premium, high-trust environment. 

The visual style is a fusion of **Minimalism** and **Glassmorphism**. It prioritizes extreme clarity, generous white space, and a tactile "physicality" achieved through layered glass effects. The emotional response is one of calm, exclusivity, and impeccable craftsmanship. Every element feels intentional, light-filled, and expansive, moving away from heavy shadows toward ethereal luminescence.

## Colors

The palette is anchored in a high-contrast "Pure Light" foundation to maximize legibility and premium feel.

- **Background Palette**: Use `#F9F9F7` (Bone) as the global canvas color. Use `#FFFFFF` (Pure White) exclusively for elevated surface cards and active components to create a subtle hierarchy of depth.
- **Typography**: Primary text is rendered in `#121414` (Obsididan) to provide a grounded, authoritative contrast against the light background. Secondary text uses a 60% opacity of Obsidian.
- **Accent**: `#D4AF37` (Luxury Gold) is used sparingly for call-to-action buttons, active navigation states, and premium badges. 
- **Status/Feedback**: Use desaturated, sophisticated tones for status (e.g., a muted Sage for success, a soft Terracotta for error) to ensure they do not clash with the gold accent.

## Typography

The typography system relies on the interplay between the classic, high-contrast serifs of **Playfair Display** and the functional, neutral clarity of **Inter**.

- **Headlines**: Use Playfair Display for all headings. Tighten letter spacing slightly on larger display sizes to maintain a sleek, editorial look.
- **Body & Interface**: Use Inter for all functional text, body copy, and UI labels. This ensures the interface remains approachable and highly legible even at small scales.
- **Micro-copy**: Labels and overlines should use Inter in all-caps with generous letter spacing to evoke a sense of architectural labeling.

## Layout & Spacing

The layout follows a **Fixed Grid** philosophy for desktop to maintain the "magazine" feel, transitioning to a fluid model for mobile devices.

- **Grid**: A 12-column grid is used for desktop (1280px max-width). Gaps are generous (24px) to ensure content never feels crowded.
- **Rhythm**: All spacing follows an 8px base unit. Vertical rhythm is expansive; use double the standard padding for section headers to emphasize the luxury of space.
- **Responsive Behavior**: On mobile, margins reduce to 16px. Cards and glass elements should stretch to the edge of the screen or maintain a consistent 8px inset to emphasize their layered nature.

## Elevation & Depth

Depth in this design system is created through **Light-Mode Glassmorphism** rather than traditional heavy shadows.

- **Surfaces**: Use a backdrop filter (Blur: 12px-20px) with a semi-transparent white fill (Alpha: 0.7 to 0.9).
- **Borders**: All glass containers must have a "hairline" border: 1px width, with a white-to-transparent linear gradient to simulate a light-catching edge.
- **Shadows**: Use "Ambient Glows" instead of drop shadows. These are very soft, large-radius blurs (40px+) with extremely low opacity (0.04) using the Obsidian color to ground the element without making it look "dirty."
- **Layering**: Higher elevation levels are indicated by increased background blur and higher opacity white fills.

## Shapes

The shape language is **Soft** and restrained. We avoid the playfulness of heavy rounding in favor of a precision-cut look.

- **Primary Radius**: 4px (0.25rem) for small components like inputs and checkboxes.
- **Container Radius**: 8px (0.5rem) for cards, modals, and large surfaces.
- **Buttons**: May use a slight increase in roundedness (up to 8px) to distinguish them from structural containers, but should never be fully pill-shaped to maintain the architectural tone.

## Components

- **Buttons**: Primary buttons are solid Gold (#D4AF37) with White text. Secondary buttons use the glass style with an Obsidian border and text.
- **Input Fields**: Ghost-style with a 1px Obsidian border at 10% opacity. Upon focus, the border transitions to Gold. Labels sit above the field in `label-caps`.
- **Cards**: Pure White (#FFFFFF) with 80% opacity, a subtle 1px border, and a 20px backdrop blur. 
- **Chips/Badges**: Use a Bone (#F9F9F7) background with Obsidian text for standard states; use a light Gold tint for premium or active states.
- **Icons**: Use fine-line (1px or 1.5px stroke) icons in Obsidian. Ensure a minimum 24px tap target even if the visual icon is smaller.
- **Status Indicators**: Small, circular dots or low-saturation labels that sit harmoniously within the glass containers without disrupting the neutral palette.