Design System Strategy: The Nocturnal High-Precision Interface

1. Overview & Creative North Star: "The Financial Observatory"

Most trading platforms are cluttered, anxiety-inducing grids of flashing numbers. This design system rejects the "Bloomberg Terminal" chaos in favor of The Financial Observatory.

The Creative North Star is Atmospheric Precision. We treat the UI not as a flat dashboard, but as a sophisticated, multi-layered digital instrument. By leveraging deep tonal shifts and "glass" depth, we create an environment where the data glows with authority. We move beyond the "standard" dark mode by eliminating harsh borders and using intentional asymmetry to guide the eye toward high-velocity data points.

2. Colors & Surface Philosophy

The palette is built on a foundation of deep, ink-like navies to reduce eye strain during long trading sessions, accented by high-energy signals.

Tonal Hierarchy

Deep Core (Background): #0f131e (surface-dim). This is the "void" upon which all data sits.
The "No-Line" Rule: We explicitly prohibit 1px solid borders for sectioning. Use background shifts instead.
- Example: Place a surface-container-high (#262a35) panel directly onto a surface (#0f131e) background. The 4% tonal difference is enough to define the boundary without the "boxed-in" feeling of a line.
Surface Nesting:
- Level 0 (Background): surface (#0f131e)
- Level 1 (Main Panels): surface-container (#1b1f2b)
- Level 2 (In-Panel Cards/Inputs): surface-container-high (#262a35)
The Glass & Gradient Rule: Use primary-container (#2962ff) with a 15% opacity and a 20px backdrop-blur for floating modals. This creates a "frosted lens" effect that maintains the user's context of the market moving behind the window.

3. Typography: Editorial Authority

We use Inter as our sole typeface. Its tall x-height provides maximum legibility for dense numerical data.

Display Scale (The Pulse): Use display-md (2.75rem) for the primary portfolio balance. It should feel like a headline in a high-end financial magazine—confident and dominant.
Title Scale (The Metadata): title-sm (1rem) is the workhorse for asset names (e.g., BTC/USD).
Label Scale (The Data): label-sm (0.6875rem) is reserved for micro-data like timestamps or volume. Use on-surface-variant (#c3c5d8) to keep this information secondary.
Intentional Contrast: Pair a headline-sm title with a label-md subtitle using spacing-1 (0.2rem) to create a tight, professional information cluster.

4. Elevation & Depth: The Layering Principle

We do not use shadows to simulate height; we use light.

Ambient Shadows: For high-priority floating elements (like a "Buy" confirmation), use a diffused shadow: 0px 24px 48px rgba(0, 0, 0, 0.4). The shadow color must be the background color, not pure black, to maintain a natural "Nocturnal" feel.
The Ghost Border: If high-contrast accessibility is required, use outline-variant (#434656) at 15% opacity. This creates a "suggestion" of a border that guides the eye without cluttering the interface.
Signature Textures: Apply a subtle linear gradient to main Action Buttons—from primary (#b6c4ff) to primary-container (#2962ff). This creates a convex "lens" feel that makes the CTA feel tactile and premium.

5. Components: Precision Instruments

Buttons

Primary (The Execution): Rounded DEFAULT (0.5rem). Background: primary-container. Text: on-primary-container. Use the gradient texture mentioned above.
Tertiary (The Ghost): No background. Use primary text. This is for secondary actions like "View History."

Input Fields

The "Deep Well" Look: Background: surface-container-lowest (#0a0e19). No border. Roundness: sm (0.25rem). On focus, the background shifts to surface-container-high.
Error State: Use error (#ffb4ab) only for the helper text and a 1px error_container "Ghost Border."

Trading Cards & Lists

Strict No-Divider Rule: Never use a horizontal line to separate assets in a watchlist. Use spacing-4 (0.9rem) of vertical white space and a subtle background hover state (surface-bright) to define the row.
Market Chips: Use tertiary-container (#a46000) for "Warning" or "Limit Order" states to provide a sophisticated orange that doesn't feel like a cheap "Alert" icon.

Additional Trading Components

The Ticker Tape: A seamless, edge-to-edge surface-container-lowest bar at the top of the UI. Use label-md for price movement, utilizing tertiary for neutral/warning moves and primary for positive growth.

6. Do’s and Don’ts

Do

Do use surface-container-highest for "Active" states (e.g., a selected tab).
Do allow charts to breathe. Use spacing-10 (2.25rem) as a minimum margin between a chart and its control panels.
Do use the full (9999px) roundness for pill-shaped "Status" indicators (e.g., "Market Open").

Don't

Don't use pure white (#FFFFFF) for body text. Always use on-surface (#dfe2f2) to prevent retinal burn-in on OLED screens.
Don't use more than one display-lg element per screen. It diminishes the "High-End Editorial" hierarchy.
Don't use standard "Success Green." This system relies on the blue-to-orange primary and tertiary scales to maintain its unique visual signature.

5.4 KiB Raw Blame History Unescape Escape