# Design System Specification: The Ethereal Interface ## 1. Overview & Creative North Star: "The Digital Curator" This design system moves away from the rigid, boxed-in constraints of traditional web frameworks to embrace a philosophy we call **The Digital Curator**. Inspired by high-end iOS editorial layouts and the precision of Swiss minimalism, the North Star of this system is *effortless clarity*. We do not use lines to contain content; we use light, space, and depth to organize it. The interface should feel like a series of meticulously arranged glass panes floating over a soft, infinite canvas. By prioritizing intentional asymmetry and varying tonal depths, we create a signature experience that feels bespoke, premium, and human-centric. --- ## 2. Colors & Tonal Architecture The palette is rooted in a sophisticated "Lucid Blue" (#2563eb) and a spectrum of soft, cool grays. ### The "No-Line" Rule **Explicit Instruction:** Sectioning via 1px solid borders is strictly prohibited. Physical boundaries must be defined solely through background color shifts or tonal transitions. Use `surface_container_low` sections against a `surface` background to create structure without visual "noise." ### Surface Hierarchy & Nesting Treat the UI as a physical stack. The depth of a component is determined by its color token: * **Base Layer:** `surface` (#f9f9fe) – The infinite canvas. * **Sectioning:** `surface_container_low` (#f3f3f8) – Subtle grouping of related content. * **Primary Containers:** `surface_container_lowest` (#ffffff) – High-contrast "pops" for cards and interactive elements. * **Floating Elements:** `surface_bright` with 80% opacity and `backdrop-filter: blur(20px)`. ### The "Glass & Gradient" Rule To inject "soul" into the interface: * **Action Gradients:** Primary CTAs should transition subtly from `primary_container` (#2563eb) to `primary` (#004ac6) at a 135° angle. * **Glassmorphism:** Headers and navigation bars must use a semi-transparent `surface_container_lowest` with a heavy backdrop blur to allow content colors to bleed through, creating a sense of environmental integration. --- ## 3. Typography: Editorial Authority We utilize **SF Pro** (or **PingFang SC** for regional optimization) to maintain an authoritative yet approachable voice. The hierarchy is designed to favor extreme contrast—large, bold headlines paired with generous tracking in labels. * **Display (Display-LG/MD/SM):** Set with -0.02em letter spacing. These are your "hooks." Use them sparingly to break the grid. * **Headlines (Headline-LG/MD/SM):** The backbone of the editorial flow. Ensure at least 32px of vertical breathing room above these. * **Body (Body-LG/MD/SM):** Optimized for readability. Use `on_surface_variant` (#434655) for secondary body text to reduce visual weight. * **Labels (Label-MD/SM):** All-caps with +0.05em tracking when used for category tags to provide a premium, "metadata" feel. --- ## 4. Elevation & Depth: Tonal Layering Traditional shadows are heavy; we use **Ambient Light** principles. * **The Layering Principle:** Instead of shadows, place a `surface_container_lowest` card on top of a `surface_container_low` background. The slight shift in hex value creates a "soft lift." * **Ambient Shadows:** For floating modals or menus, use a multi-layered shadow: `0 10px 40px rgba(26, 28, 31, 0.06)`. The color is a tint of `on_surface`, never pure black. * **The "Ghost Border" Fallback:** If accessibility requires a border, use `outline_variant` (#c3c6d7) at **15% opacity**. It should be felt, not seen. * **Corner Radii:** Apply a consistent `xl` (1.5rem / 24px) for large containers and `lg` (1rem / 16px) for standard cards to mimic the hardware curvature of modern iOS devices. --- ## 5. Components ### Buttons & Interaction * **Primary:** Gradient fill (`primary_container` to `primary`), white text, 16px radius. * **Secondary:** `surface_container_high` background with `on_surface` text. No border. * **Tertiary:** Ghost style. No background, `primary` text weight at "Medium." ### Cards & Lists * **The "No-Divider" Rule:** Vertical lists must never use horizontal lines. Use 16px–24px of vertical padding (`spacing-scale`) or alternating tonal backgrounds to separate items. * **Cards:** Use `surface_container_lowest` with an `xl` corner radius. Content inside should have at least 24px of internal padding. ### Input Fields * **Form Style:** Use a "filled" approach rather than outlined. Use `surface_container_low` as the base. Upon focus, transition the background to `surface_container_lowest` and apply a 2px `primary` "Ghost Border" (20% opacity). ### iOS Navigation Patterns * **Bottom Sheets:** Use for secondary actions. Must include a "grabber" (a 36x5mm pill in `outline_variant`). * **Tab Bars:** 100% width, `surface_container_lowest` with 85% opacity and `backdrop-filter: blur(30px)`. Icons should use `primary` for active states and `outline` for inactive. --- ## 6. Do's and Don'ts ### Do: * **Do** embrace negative space. If a layout feels "empty," it is likely working. * **Do** use asymmetrical margins (e.g., a wider left margin for headlines) to create an editorial feel. * **Do** use `primary_fixed_dim` for subtle accent backgrounds behind icons. ### Don't: * **Don't** use 1px solid borders to separate sections. Use color tokens `surface` vs `surface_container`. * **Don't** use pure black (#000000) for text. Use `on_surface` (#1a1c1f) to maintain a premium softness. * **Don't** use standard "drop shadows." If it looks like a 2010 web app, the blur radius is too small and the opacity is too high. 1，根据@xx 下的设计生成相关react-native页面 2，严格遵循 expo,expo-router 模式 3，更具@xx 下的设计和@De 生成tailwind.config.js 里的通用颜色，尺寸等.颜色尽量使用 tailwind 里已命名颜色 4，然后使用 nativewind/tailwndcss 来构建最终react-native页面 5，参考@xx 下的 react-native 页面模版