first commit

Made-with: Cursor

context/design.md

@@ -0,0 +1,78 @@
+# Design System Specification: The Sovereign Editorial
+
+## 1. Overview & Creative North Star
+The "Sovereign Editorial" is the creative North Star for this design system. It moves away from the chaotic, high-frequency aesthetic of "crypto-hype" and instead leans into the quiet authority of a diplomatic institution. This is not a "trading platform"; it is an Embassy.
+
+The system breaks the standard "web template" look by utilizing **Intentional Asymmetry** and **Tonal Depth**. We prioritize a high-end, editorial feel through expansive whitespace (using the `20` and `24` spacing tokens), overlapping elements that break the grid, and a typography scale that treats information as a curated exhibition rather than a data dump.
+
+---
+
+## 2. Colors: Tonal Depth & The "No-Line" Rule
+The palette is rooted in a "Rich Black" foundation, using `surface` (`#131313`) as the canvas.
+
+### The "No-Line" Rule
+**Explicit Instruction:** 1px solid borders for sectioning are strictly prohibited.
+Structure must be defined solely through:
+- **Background Shifts:** Placing a `surface-container-low` section against a `surface` background.
+- **Negative Space:** Using large gaps from the Spacing Scale (e.g., `12` or `16`) to imply boundaries.
+
+### Surface Hierarchy & Nesting
+Treat the UI as a series of physical layers, like stacked sheets of obsidian glass.
+- **Base Layer:** `surface` (`#131313`)
+- **Secondary Sectioning:** `surface-container-low` (`#1c1b1b`)
+- **Interactive/Floating Cards:** `surface-container-high` (`#2a2a2a`)
+- **The "Glass & Gradient" Rule:** For primary CTAs and hero highlights, use a subtle linear gradient from `primary` (`#ffb874`) to `primary-container` (`#f7931a`). Floating navigation or "pinned" elements must use `surface-bright` with a 15px backdrop-blur to create a premium glassmorphism effect.
+
+---
+
+## 3. Typography: Authority Through Scale
+We use **Inter** (as the modern web equivalent to San Francisco) to provide a neutral, trustworthy foundation. The hierarchy is designed to feel like a high-end broadsheet.
+
+- **Display (The Statement):** Use `display-lg` (3.5rem) for hero statements. Tighten letter-spacing to `-0.02em` for a "premium print" look.
+- **Headline (The Narrative):** `headline-lg` (2rem) and `headline-md` (1.75rem) provide the educational structure.
+- **Body (The Education):** `body-lg` (1rem) is the workhorse. We prioritize a line-height of 1.6 to ensure readability for long-form educational content.
+- **Labels (The Metadata):** `label-md` (0.75rem) should be used in uppercase with `0.05em` letter spacing for a technical, diplomatic feel.
+
+---
+
+## 4. Elevation & Depth: Tonal Layering
+Traditional drop shadows are replaced by **Ambient Occlusion** and **Material Stacking**.
+
+- **The Layering Principle:** To lift a card, do not add a shadow. Instead, place a `surface-container-lowest` (`#0e0e0e`) element inside a `surface-container` (`#201f1f`) section. The shift in value creates a natural perception of depth.
+- **Ambient Shadows:** When a "floating" modal is necessary, use a blur of `40px` with an 8% opacity of the `on-surface` color. It should feel like a soft glow rather than a harsh shadow.
+- **The "Ghost Border" Fallback:** If accessibility requires a stroke (e.g., input fields), use `outline-variant` at 15% opacity. Never use 100% opaque borders.
+
+---
+
+## 5. Components
+
+### Buttons
+- **Primary:** Gradient background (`primary` to `primary_container`), `on-primary` text. Shape: `md` (0.75rem) corner radius.
+- **Secondary:** `surface-container-highest` background with `on-surface` text. No border.
+- **Tertiary:** Text-only using `primary_fixed_dim`, strictly for low-priority actions.
+
+### Cards & Lists
+- **The Divider Ban:** Dividers are forbidden. Separate list items using `spacing-4` (1.4rem) of vertical whitespace or by alternating background colors between `surface-container-low` and `surface-container-lowest`.
+- **Cards:** Always use `rounded-lg` (1rem). Content should have a minimum internal padding of `spacing-6` (2rem).
+
+### Input Fields
+- **State:** Background should be `surface-container-highest`.
+- **Focus:** Transition the "Ghost Border" from 15% to 40% opacity of the `primary` color. Do not use heavy glow effects.
+
+### Signature Components for the Embassy
+- **The "Knowledge Card":** A large-format card using `surface-container-low` with an asymmetrical layout—typography pushed to the left, and a subtle, desaturated Bitcoin icon overlapping the right edge at 5% opacity.
+- **The "Trust Indicator":** A persistent, glassmorphic "Status" bar at the bottom of mobile screens, providing real-time network reassurance without cluttering the main content.
+
+---
+
+## 6. Do’s and Don’ts
+
+### Do:
+- **Use "Aggressive" Whitespace:** If a section feels "almost right," double the padding.
+- **Embrace Asymmetry:** Align headings to the left while keeping body text centered in a narrower column to create visual interest.
+- **Mobile-First Layering:** On mobile, stack containers vertically, using `surface-container-lowest` to "ground" the footer.
+
+### Don’t:
+- **Don’t use "Crypto-Green/Red":** Use `error` (`#ffb4ab`) sparingly for critical warnings only. Educational growth is signaled by Bitcoin Orange, not "Stock Market Green."
+- **Don’t use Dividers:** If you need a line to separate content, you have failed to use the Spacing Scale correctly.
+- **Don’t Over-Animate:** Transitions should be "Snappy & Subtle" (200ms ease-out). Avoid bouncing or heavy staggered entrances.