# 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.