Files
aurorabot/docs/new-design/DESIGN.md
syntaxbullet 6abbd4652a
Some checks failed
Deploy to Production / test (push) Failing after 33s
Refresh repository documentation
- Rewrite AGENTS and README files to match the current app layout
- Document API routes, trivia UI, and the active panel design language
2026-04-09 21:10:10 +02:00

61 lines
2.2 KiB
Markdown

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