73 lines
5.4 KiB
Markdown
73 lines
5.4 KiB
Markdown
# 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. |