84 lines
6.2 KiB
Markdown
84 lines
6.2 KiB
Markdown
# Design System Specification: Stellar Editorial
|
||
|
||
## 1. Overview & Creative North Star: "The Celestial Curator"
|
||
This design system is built to evoke the atmosphere of an elite, secretive astronomical academy. We are moving away from the "utility-first" aesthetic of standard Discord bots toward a "Digital Editorial" experience.
|
||
|
||
**Creative North Star: The Celestial Curator**
|
||
The UI should feel like a high-end, leather-bound astronomical ledger reimagined for the 22nd century. We achieve this through "The Void & The Light"—using deep, expansive dark spaces contrasted against precise, shimmering accents. We reject the rigid, boxed-in layouts of traditional dashboards in favor of intentional asymmetry, overlapping layers, and a profound sense of depth. Every element should feel curated, prestigious, and slightly mysterious.
|
||
|
||
---
|
||
|
||
## 2. Colors: The Palette of the Night Sky
|
||
The color philosophy is rooted in "Atmospheric Depth." We use a hierarchy of midnight tones to create a sense of infinite space, punctuated by gold and starlight.
|
||
|
||
### The "No-Line" Rule
|
||
**Explicit Instruction:** Designers are prohibited from using 1px solid borders to define sections or containers. Layout boundaries must be defined exclusively through background color shifts. Use `surface-container-low` against a `surface` background to create a subtle "carved" effect, or `surface-container-high` to create "lift."
|
||
|
||
### Surface Hierarchy & Nesting
|
||
Instead of a flat grid, treat the UI as a series of nested celestial bodies.
|
||
* **Base Layer:** `surface` (#0d1323) – The infinite void.
|
||
* **Secondary Sections:** `surface-container-low` (#151b2c) – Softly recessed areas.
|
||
* **Interactive Cards:** `surface-container-high` (#24293b) – Elevated content.
|
||
* **Floating Modals:** `surface-container-highest` (#2f3446) – The closest layer to the viewer.
|
||
|
||
### The "Glass & Gradient" Rule
|
||
To capture the "Stellar Academy" prestige, use Glassmorphism for floating elements.
|
||
* **Formula:** Apply `surface-variant` at 40% opacity with a `24px` backdrop blur.
|
||
* **Signature Textures:** For primary CTAs and hero headers, utilize a linear gradient: `primary` (#e9c349) to `primary-fixed-dim` (#e9c349) at a 135-degree angle. This provides a "metallic brass" sheen that flat colors cannot replicate.
|
||
|
||
---
|
||
|
||
## 3. Typography: Academic Authority
|
||
The type system pairs the intellectual weight of a classic Serif with the technical precision of a modern Sans-Serif.
|
||
|
||
* **Display & Headlines (Noto Serif):** These are the "Ancient Manuscripts." Use `display-lg` to `headline-sm` for titles and major headers. This font conveys the "Elite Academy" prestige.
|
||
* **UI & Body (Manrope):** This is the "Modern Faculty." Use `title-lg` down to `body-sm` for all functional UI elements, descriptions, and system feedback.
|
||
* **Technical Labels (Space Grotesk):** Use `label-md` and `label-sm` for status tags, metadata, and numerical RPG stats. This adds a subtle "astronomical instrument" feel.
|
||
|
||
**Editorial Tip:** Use exaggerated tracking (0.1em) on `label-sm` in all-caps to enhance the high-end, premium feel.
|
||
|
||
---
|
||
|
||
## 4. Elevation & Depth: Tonal Layering
|
||
We do not use structural lines. We use light and shadow to imply existence.
|
||
|
||
* **The Layering Principle:** Depth is achieved by stacking. Place a `surface-container-lowest` card on a `surface-container-low` section. This creates a "soft-edge" transition that feels organic rather than digital.
|
||
* **Ambient Shadows:** For floating elements, use a shadow with a 40px blur, 0px offset, and 6% opacity using the `on-surface` color. This creates a "glow" rather than a "drop shadow," mimicking how light behaves in a dark vacuum.
|
||
* **The "Ghost Border" Fallback:** If a boundary is strictly required for accessibility, use a "Ghost Border": `outline-variant` (#45464c) at 15% opacity. Never use 100% opaque borders.
|
||
* **The Aurora Glow:** Use `primary-container` as a very large, soft radial gradient (600px+) behind key UI elements to create a "nebula" effect, grounding the component in space.
|
||
|
||
---
|
||
|
||
## 5. Components: Precision & Prestige
|
||
|
||
### Buttons
|
||
* **Primary:** A gradient-filled container (`primary` to `primary-fixed-dim`). No border. `label-md` (Space Grotesk) text in `on-primary`.
|
||
* **Secondary:** A "Ghost Border" container with `secondary` text. Upon hover, the background fills with 5% `secondary` white.
|
||
* **Tertiary:** Text-only in `primary`, but with a small `2px` gold dot (star) preceding the label.
|
||
|
||
### Cards & Lists
|
||
* **Rule:** Forbid the use of divider lines.
|
||
* **Separation:** Use `spacing-6` (2rem) of vertical white space to separate list items. If items must be grouped, use a subtle background shift to `surface-container-low`.
|
||
* **Visual Interest:** In the top-right corner of a "Highest" elevation card, place a subtle, 10% opacity constellation pattern SVG.
|
||
|
||
### Input Fields
|
||
* **Styling:** Inputs should not be boxes. Use a `surface-container-lowest` background with a `2px` bottom-only border in `outline-variant`.
|
||
* **Focus State:** The bottom border transitions to `primary` (gold) with a subtle `primary-container` outer glow.
|
||
|
||
### New Component: "The Astral Badge"
|
||
A specialized chip for RPG ranks.
|
||
* **Style:** `label-sm` text inside a `surface-container-highest` pill. It features a 1px "Ghost Border" and a tiny radial glow in the center-left using the `primary` color to represent a "guiding star."
|
||
|
||
---
|
||
|
||
## 6. Do's and Don'ts
|
||
|
||
### Do:
|
||
* **Embrace Asymmetry:** Align text to the left but place decorative "constellation" elements floating on the right to break the grid.
|
||
* **Use Generous Spacing:** Premium design requires "breathing room." Use `spacing-10` and `spacing-12` for section margins.
|
||
* **Tint Your Greys:** Ensure all "neutrals" are pulled from the `secondary` and `tertiary` tokens, which are infused with midnight blue and silver.
|
||
|
||
### Don't:
|
||
* **Don't use pure black (#000):** It kills the "depth" of the midnight blue theme. Use `surface-container-lowest`.
|
||
* **Don't use standard Discord "Blurple":** This system must feel like a custom application that exists outside the standard Discord ecosystem.
|
||
* **Don't use hard corners:** Stick strictly to the `Roundedness Scale`. Most containers should use `xl` (0.75rem) or `lg` (0.5rem) to maintain a sophisticated, approachable feel. |