# Design System Strategy: The Luminous Ledger

## 1. Overview & Creative North Star
This design system is anchored by a Creative North Star we call **"The Luminous Ledger."** 

In the world of crypto-investment and high-stakes data, "standard" is the enemy of trust. To convey true authority and technical sophistication, this system moves away from generic administrative templates. Instead, we utilize an **Editorial-Cyberpunk** aesthetic: a marriage of high-precision data visualization and premium, layered depth. 

The experience is defined by **intentional asymmetry**. Rather than a rigid, repetitive grid, we use "weighted" layouts where primary data hubs command larger, more complex visual footprints, while secondary metrics are tucked into elegant, minimalist clusters. We break the "boxed-in" feel of traditional dashboards by allowing light—not lines—to define our boundaries.

## 2. Colors & Surface Philosophy
The palette is built on a foundation of obsidian and electric energy. We utilize Material Design’s tonal container logic to create a sense of physical space.

*   **Primary (`#00D1FF` / `primary`):** Our "Electric Blue." This is the pulse of the system. It should be used sparingly for high-action touchpoints and critical active states.
*   **Tertiary (`#39FF14` / `tertiary`):** The "Neon Trend." This is reserved strictly for positive financial growth and successful status indicators.
*   **Surface Hierarchy & Nesting:** We treat the UI as a series of stacked, semi-transparent sheets. 
    *   **Base:** `surface` (`#111417`) serves as the "infinite" floor.
    *   **Sections:** Use `surface-container-low` to define large content areas.
    *   **Cards:** Use `surface-container` or `surface-container-high` for nested elements.
*   **The "No-Line" Rule:** **1px solid borders are strictly prohibited for sectioning.** To separate a card from the background, you must use a background color shift (e.g., a `surface-container-highest` card sitting on a `surface` background) or a subtle tonal transition. Lines create visual clutter; color shifts create "air."
*   **The "Glass & Gradient" Rule:** For floating components (modals, dropdowns, or hover-cards), apply a `backdrop-filter: blur(12px)` over a semi-transparent `surface_variant`. 
*   **Signature Textures:** For primary call-to-actions, use a linear gradient transitioning from `primary` to `primary_container` at a 135-degree angle. This provides a "shimmer" effect that feels more expensive than a flat hex code.

## 3. Typography
Our typography pairing is designed to balance "Human Reliability" with "Machine Precision."

*   **The Display & Headline Scale (`Space Grotesk`):** We use Space Grotesk for all large-format text (`display-lg` through `headline-sm`). Its geometric, slightly wider stance suggests a futuristic, tech-forward orientation. Use tight letter-spacing (-0.02em) for headlines to create a "locked-in" professional look.
*   **The Body & Label Scale (`Inter`):** Inter is our workhorse. For data-heavy lists and financial readouts, use `body-md` and `label-sm`. Its high x-height ensures that even at small sizes (like crypto wallet addresses), legibility is never compromised.
*   **Editorial Hierarchy:** Use `display-md` for portfolio totals, paired with a `label-md` in `on_surface_variant` (slate gray) for the descriptor. The massive contrast in scale between the value and the label is what gives the system its high-end editorial feel.

## 4. Elevation & Depth
In this design system, depth is a functional tool, not a decoration.

*   **The Layering Principle:** Depth is achieved by "stacking" surface tiers. An inner module should always be at least one tier higher (`surface-container-high`) than its parent container (`surface-container-low`). This mimics a physical "lift" without the need for heavy shadows.
*   **Ambient Shadows:** When an element must "float" (like a global action button or a modal), use an extra-diffused shadow: `offset-y: 24px`, `blur: 48px`, `color: rgba(0, 209, 255, 0.06)`. Note the color: we use a tint of our `primary` blue for shadows to mimic the ambient light of the screen, rather than a muddy gray.
*   **The "Ghost Border" Fallback:** If a container requires definition against a similar background, use a "Ghost Border": `outline-variant` at 15% opacity. It should be felt, not seen.
*   **Glassmorphism:** Use `surface_container_lowest` with 80% opacity and a heavy blur for sidebars. This allows the neon pulses of background data viz to "bleed" through, keeping the user connected to the data stream at all times.

## 5. Components

### Buttons
*   **Primary:** Solid `primary` background with `on_primary` text. Apply a subtle 8px outer glow (`primary` color at 20% opacity) to suggest it is "powered on."
*   **Secondary:** Ghost style. No background, `outline` border at 20% opacity, `primary` text.
*   **Tertiary:** Text only, uppercase `label-md` with 1px letter spacing.

### Cards & Data Modules
*   **Constraint:** Zero dividers. Use vertical whitespace (1.5rem to 2rem) to separate content groups.
*   **Shape:** Use `md` (0.375rem) or `lg` (0.5rem) roundedness. Avoid `full` rounding for cards to maintain a "sharp/professional" tech vibe.

### Input Fields
*   **State:** The default state is a `surface-container-highest` fill with no border. On focus, the field should animate a 1px `primary` bottom-border and a subtle `primary` inner-glow. 

### Trend Indicators (The "Performance Pulse")
*   Positive trends use `tertiary` (Neon Green). Negative trends use `error` (Soft Red). Rather than just a colored number, use a small sparkline with a gradient area fill (color to transparent) to emphasize the "momentum" of the investment.

## 6. Do’s and Don’ts

### Do:
*   **Embrace Negative Space:** Allow data points to "breathe." High-wealth users value clarity over information density.
*   **Use Tonal Transitions:** Use a background shift of #111417 to #191C1F to separate a sidebar from a main content area.
*   **Type as UI:** Use different weights of `Inter` (Medium vs. Regular) to create hierarchy before reaching for a different color.

### Don't:
*   **No 100% Black:** Never use #000000. It kills the depth of the glassmorphism. Stick to the `surface` tokens.
*   **No Heavy Borders:** If you feel the need to draw a line, try adding 16px of padding instead.
*   **No Default Shadows:** Avoid the "drop shadow" look that makes elements feel like they are floating in a void. If it's not a modal, it shouldn't have a shadow; it should have a surface-tier shift.