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.

DESIGN.md 5.6 KB تاريخچه خام