startup-plan/技术设计/web-projects/设计文档.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Luminous Clarity	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 #faf9ff #d2daf1 #faf9ff #ffffff #f1f3ff #e9edff #e1e8ff #dbe2fa #131b2c #434654 #283042 #edf0ff #737686 #c3c5d7 #1a53d6 #1550d3 #ffffff #3c6bed #fffbff #b5c4ff #583dde #ffffff #715af8 #fffbff #595c60 #ffffff #727578 #fcfcff #ba1a1a #ffffff #ffdad6 #93000a #dce1ff #b5c4ff #00164d #003cad #e5deff #c8bfff #190064 #421dc9 #e0e3e6 #c4c7ca #181c1f #44474a #faf9ff #131b2c #dbe2fa	display-xl headline-lg headline-md body-lg body-base label-sm fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 64px 800 1.1 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 40px 700 1.2 -0.01em fontFamily fontSize fontWeight lineHeight Manrope 28px 600 1.3 fontFamily fontSize fontWeight lineHeight Manrope 18px 400 1.6 fontFamily fontSize fontWeight lineHeight Manrope 16px 400 1.6 fontFamily fontSize fontWeight lineHeight letterSpacing Inter 13px 600 1 0.05em	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	unit container-max gutter section-padding card-padding 8px 1200px 24px 120px 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.