# Stellar Editorial

This document now tracks the design language that is actually implemented in the panel, with a small amount of forward-looking guidance where the code is still catching up.

## Current implementation status

Implemented today in `panel/src/index.css` and the active panel pages:

- dark "void and light" surface stack
- Celestial Gold primary color family
- Noto Serif, Manrope, Space Grotesk, and JetBrains Mono typography
- low-contrast "ghost border" treatment
- rounded surface hierarchy for cards, sidebars, and controls

Partially implemented or still aspirational:

- stronger asymmetry and editorial layouts across more pages
- decorative constellation/nebula treatments
- more consistent premium component states across every admin screen

## Design intent

Aurora's panel should feel like an elite astronomical academy rather than a default admin dashboard. The codebase already follows that direction through the theme tokens and typography system; new UI work should continue that tone instead of falling back to generic SaaS styling.

## Core tokens

Surface hierarchy:

- `--color-background`: `#0d1323`
- `--color-surface-container-low`: `#151b2c`
- `--color-surface-container-high`: `#24293b`
- `--color-surface-container-highest`: `#2f3446`

Primary accents:

- `--color-primary`: `#e9c349`
- `--color-primary-fixed-dim`: `#d4af37`
- `--color-primary-container`: `#3d2e00`

Typography:

- display: Noto Serif
- body: Manrope
- labels: Space Grotesk
- mono: JetBrains Mono

## Component guidance

- Prefer tonal separation over heavy borders.
- Use gold as a focused accent, not a flood color.
- Keep text contrast high and metadata quieter.
- Sidebar, cards, tables, and game views should feel like the same product family.
- Avoid plain white cards, Discord blurple defaults, and generic component-library styling.

## Practical rules for future work

- Start from the CSS tokens in `panel/src/index.css` instead of inventing new one-off colors.
- Preserve the current font roles unless there is a strong reason to change them.
- Use gradients, glow, or tonal depth sparingly and intentionally.
- Keep mobile behavior first-class; the existing layout already has mobile drawer behavior that new pages should respect.