6abbd4652a
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
2.2 KiB
2.2 KiB
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.cssinstead 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.