chore: change styling

docs/new-design/DESIGN.md

@@ -0,0 +1,84 @@
+# 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.