aurorabot/docs/new-design/DESIGN.md

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.