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