ios-projects/ZhiXi_App/ethereal_intelligence/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Ethereal Intelligence	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #f9f9fd #d9dade #f9f9fd #ffffff #f3f3f7 #ededf1 #e8e8ec #e2e2e6 #1a1c1f #414751 #2e3034 #f0f0f4 #717783 #c1c7d3 #0060ac #005da7 #ffffff #2976c7 #fdfcff #a4c9ff #8135c5 #ffffff #ba70ff #440076 #4648d4 #ffffff #6063ee #fffbff #ba1a1a #ffffff #ffdad6 #93000a #d4e3ff #a4c9ff #001c39 #004883 #f0dbff #deb7ff #2c0050 #670fac #e1e0ff #c0c1ff #07006c #2f2ebe #f9f9fd #1a1c1f #e2e2e6	h1 h2 h3 body-lg body-md label-caps fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 34px 700 1.2 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 28px 600 1.3 -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 22px 600 1.3 0 fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 17px 400 1.6 -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 15px 400 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 12px 600 1.0 0.05em	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	base xs sm md lg xl container-margin gutter 8px 4px 12px 24px 40px 64px 20px 16px

Brand & Style

The brand personality is centered on "Enlightened Learning"—a synthesis of high-tech AI capabilities and human-centric intuition. This design system targets a young, intellectually curious demographic that values depth over speed.

The visual style merges Apple Minimalism with Futuristic Glassmorphism. It prioritizes extreme "breathability" and a sense of calm focus. The UI should feel like a quiet, high-tech sanctuary for thought. Key attributes include high-blur translucency, expansive negative space, and a "light-as-air" depth model that avoids heavy physical metaphors in favor of ethereal, glowing digital surfaces.

Colors

The palette is anchored by a luminous off-white background to reduce eye strain and establish a premium feel. The primary and secondary colors are used sparingly for interactive elements and brand accents.

To represent the "AI-first" nature of the product, use a signature gradient (the "AI Glow") for progress indicators, active states, and special AI-driven insights. Functional neutrals follow Apple’s grayscale hierarchy but use a slight blue tint in the shadows to maintain the cool, sophisticated atmosphere.

Typography

Manrope provides a modern, geometric clarity that feels more "tech-forward" than standard San Francisco while maintaining excellent legibility.

The typographic hierarchy emphasizes whitespace through generous line heights (1.5x - 1.6x for body text). Headlines use slightly tighter tracking to feel "locked" and authoritative, while labels use expanded tracking for a premium, airy feel. Use "Ink-Black" (#1D1D1F) for primary text to ensure high contrast without the harshness of pure black.

Layout & Spacing

The layout follows a fluid, safe-area-driven model typical of iOS, but with significantly increased vertical margins to promote the "calm" atmosphere.

A 4-column grid is used for mobile portrait views. Elements should never feel "packed." Use the lg (40px) and xl (64px) spacing units to separate major content sections, creating a sense of luxury and focus. Component internal padding should be generous, typically starting at md (24px) for cards and containers.

Elevation & Depth

This design system utilizes Luminous Stratification rather than traditional heavy shadows.

• The Base: The #FBFBFF background acts as the canvas.
• Glassmorphism: AI-interaction zones and input fields use a high-saturation backdrop blur (20px-30px) with a 1px semi-transparent white border (0.1 opacity) to simulate frosted glass.
• Gentle Shadows: Floating cards use "Ambient Shadows"—extremely diffused (40px-60px blur), low-opacity (5%) shadows with a subtle tint of the primary blue to prevent a "dirty" look.
• AI Glow: The highest level of depth is reserved for active AI processes, which emit a soft, localized outer glow using the signature gradient.

Shapes

Shapes follow a "Squircle" logic to align with Apple’s hardware and software aesthetic.

Standard components (buttons, small cards) use a 16px (1rem) radius. Larger container cards use a 24px (1.5rem) radius. Interactive inputs use a fully rounded "pill" shape or the 16px standard to maintain consistency. The goal is to avoid sharp corners entirely, reinforcing the "human-centric" and "soft" brand personality.

Components

• Buttons: Primary buttons use the AI Glow gradient with white text. Secondary buttons are glass-morphic with a 1px border. All buttons have a high-press scale effect (shrink to 0.96) for tactile feedback.
• Input Fields: These are the centerpiece of the "AI-first" experience. Use a high-blur glass background with a subtle inner shadow. Place the cursor/caret in the primary blue.
• Cards: Content is housed in "Floating Containers"—white or ultra-light gray backgrounds with the previously defined ambient shadows and no visible border.
• Thin-Stroke Icons: Use a consistent 1.5pt or 2pt stroke weight. Icons should be open-ended and minimalist, avoiding fills unless in an active state.
• AI Learning Progress: Use a custom "Liquid Trace" component—a thin, glowing gradient line that pulses gently as the user moves through deep-learning modules.
• Chips/Tags: Small, pill-shaped elements with light blue or violet tinted backgrounds (0.1 opacity) and matching colored text.