Some checks failed
Deploy to Production / test (push) Failing after 33s
- Rewrite AGENTS and README files to match the current app layout - Document API routes, trivia UI, and the active panel design language
61 lines
2.2 KiB
Markdown
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.
|