---
name: Luminous Clarity
colors:
  surface: '#faf9ff'
  surface-dim: '#d2daf1'
  surface-bright: '#faf9ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f1f3ff'
  surface-container: '#e9edff'
  surface-container-high: '#e1e8ff'
  surface-container-highest: '#dbe2fa'
  on-surface: '#131b2c'
  on-surface-variant: '#434654'
  inverse-surface: '#283042'
  inverse-on-surface: '#edf0ff'
  outline: '#737686'
  outline-variant: '#c3c5d7'
  surface-tint: '#1a53d6'
  primary: '#1550d3'
  on-primary: '#ffffff'
  primary-container: '#3c6bed'
  on-primary-container: '#fffbff'
  inverse-primary: '#b5c4ff'
  secondary: '#583dde'
  on-secondary: '#ffffff'
  secondary-container: '#715af8'
  on-secondary-container: '#fffbff'
  tertiary: '#595c60'
  on-tertiary: '#ffffff'
  tertiary-container: '#727578'
  on-tertiary-container: '#fcfcff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dce1ff'
  primary-fixed-dim: '#b5c4ff'
  on-primary-fixed: '#00164d'
  on-primary-fixed-variant: '#003cad'
  secondary-fixed: '#e5deff'
  secondary-fixed-dim: '#c8bfff'
  on-secondary-fixed: '#190064'
  on-secondary-fixed-variant: '#421dc9'
  tertiary-fixed: '#e0e3e6'
  tertiary-fixed-dim: '#c4c7ca'
  on-tertiary-fixed: '#181c1f'
  on-tertiary-fixed-variant: '#44474a'
  background: '#faf9ff'
  on-background: '#131b2c'
  surface-variant: '#dbe2fa'
typography:
  display-xl:
    fontFamily: Manrope
    fontSize: 64px
    fontWeight: '800'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Manrope
    fontSize: 40px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Manrope
    fontSize: 28px
    fontWeight: '600'
    lineHeight: '1.3'
  body-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-base:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: '600'
    lineHeight: '1'
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  container-max: 1200px
  gutter: 24px
  section-padding: 120px
  card-padding: 32px
---

## Brand & Style
The design system is anchored in the concept of "Intellectual Serenity." It aims to evoke the feeling of a focused, high-end study environment—quiet, organized, and filled with natural light. The target audience consists of lifelong learners and professionals who value structured knowledge over chaotic information.

The visual style is a fusion of **Apple-inspired Minimalism** and **Glassmorphism**. It prioritizes extreme legibility and breathability, using negative space not just as a gap, but as a structural element that reduces cognitive load. The aesthetic avoids the "aggressive" tropes of AI (heavy glows and dark modes) in favor of a "Calm Tech" approach that feels like a premium productivity tool rather than a futuristic novelty.

## Colors
The color palette uses a "High-Key" approach. The primary **Calm Technology Blue** serves as the anchor for interactive elements, while the **Subtle Blue-Purple** accent is reserved for AI-assisted features and high-value highlights. 

Backgrounds transition between pure white and a soft blue-white to define different content zones without needing heavy borders. Text utilizes a Deep Navy rather than pure black to maintain a softer, more premium contrast ratio that is easier on the eyes during long learning sessions.

## Typography
This design system employs **Manrope** for its geometric yet warm characteristics, echoing the polished look of high-end consumer tech landing pages. For Chinese typesetting, pair this with a high-quality, weighted Sans-Serif (like PingFang SC) using optical kerning. 

The hierarchy is dramatic; large display headings create an editorial feel, while body text maintains generous line-heights to ensure the "structured learning" content remains approachable and digestible.

## Layout & Spacing
The layout follows a **Fixed Grid** philosophy for desktop (12 columns) to maintain the "launch page" precision, transitioning to a fluid model for mobile. 

Spacing is intentionally oversized. Sections should be separated by significant vertical gaps (120px+) to allow the user's mind to reset between concepts. Within components, use a consistent 8px base grid. Content should be centered with wide margins, creating a "gallery" feel where every piece of information feels curated and important.

## Elevation & Depth
Depth is created through **Glassmorphism** and **Ambient Shadows** rather than traditional layers.
- **Surface Level 0:** The soft blue-white canvas (#F6F8FC).
- **Surface Level 1 (Floating Cards):** Pure white background with a very soft, high-blur shadow (0px 20px 40px rgba(18, 26, 43, 0.04)).
- **Surface Level 2 (Glass Overlays):** Semi-transparent white (rgba(255, 255, 255, 0.7)) with a 20px backdrop-blur and a subtle 1px white border.

Incorporate a subtle geometric dot-grid pattern in the background of Level 0 to provide a "blueprint" or "structured" feel to the learning environment.

## Shapes
The shape language is strictly "iOS-style" squircle-adjacent. Use a base radius of 16px (1rem) for standard components and 24px-32px for large containers. This high level of roundedness removes "visual sharpness," reinforcing the calm and friendly nature of the AI assistant. Interactive elements like buttons should feel tactile and "pill-like" when small, or softly rectangular when large.

## Components
- **Primary Buttons:** Use the accent gradient with white text. Apply a subtle lift effect (shadow increases) on hover.
- **Glass Cards:** Used for "Learning Modules." Feature a 1px white inner stroke to catch the light, mimicking physical glass.
- **AI Input Field:** A floating, pill-shaped bar with a soft inner shadow and a subtle blue-purple glow when focused, signaling "AI Activity."
- **Progress Indicators:** Use thin, elegant lines with rounded caps. The "filled" state should use the primary blue.
- **Micro-interactions:** Elements should fade and slide upward 10px when appearing, mimicking the smooth motion of a premium OS.
- **Chips/Tags:** Small, semi-transparent blue fills with Deep Navy text, used for categorizing learning topics.