# Lunar Observatory — Moon ERP Design Persona

**Date:** 2026-02-25
**Status:** Approved
**Concept:** Premium dark-first ERP with literal lunar motifs, glassmorphism, and ambient golden moonlight glow.

## Brand Mood
- Premium & Luxurious
- Dark financial control room bathed in moonlight
- Literal crescent moon motif throughout UI

## Target Audience
- Small business owners (clarity, beauty)
- Professional accountants (density, efficiency)

---

## 1. Color System

### Dark Mode (Primary)

| Token | Value | Purpose |
|-------|-------|---------|
| `--color-brand` | `#080c1a` | Deepest background |
| `--color-brand-dark` | `#040710` | Sidebar bottom gradient |
| `--color-brand-light` | `#111827` | Elevated surface (cards) |
| `--color-brand-mid` | `#1e293b` | Borders, dividers |
| `--color-accent` | `#f5a623` | Warmer gold |
| `--color-accent-dark` | `#d4911e` | Hover gold |
| `--color-accent-light` | `#ffd466` | Light gold highlights |
| `--color-accent-glow` | `rgba(245,166,35,0.12)` | Ambient glow |
| `--color-lunar-glow` | `rgba(245,166,35,0.06)` | Moonlight wash |
| `--color-star` | `rgba(255,255,255,0.4)` | Star dots |

### Light Mode (Secondary)
- Surface: `#fefcf7` (warm-tinted white) instead of `#ffffff`
- Surface-muted: `#faf8f3` (warm off-white)
- All other tokens same as current light mode

---

## 2. Login Page — "Moonrise"

- Full-screen dark bg (`#080c1a`) with CSS star-field (3 layers, parallax twinkle)
- Large crescent moon SVG in brand panel with gold glow
- Login form on glass card (`backdrop-filter: blur(20px)`)
- Gradient text: white → gold for "Moon ERP"
- Lunar halo ring animation around moon icon

---

## 3. Sidebar — "Control Panel"

- Glass: `rgba(8,12,26,0.85) + backdrop-filter: blur(16px)`
- Crescent-arc active indicator (rounded left bar)
- Thin gold top border with glow
- Custom crescent moon SVG logo (replaces pi-moon)
- Faint lunar glow behind active module icon

---

## 4. Topbar — "Observatory Bar"

- Glass: `rgba(8,12,26,0.75) + backdrop-filter: blur(16px)`
- Gold bottom border (1px)
- Profile avatar with gold glow ring
- Notification badge gold pulse when unread

---

## 5. Dashboard — "Mission Control"

- Hero: deep indigo gradient + animated CSS star dots + crescent SVG decoration
- Stat cards: dark glass with colored top-border, radial moonlight gradient from icon corner
- Chart cards: dark glass, gold/indigo/emerald chart palette
- Bottom cards: gradient headers + dark glass body, glow on hover

---

## 6. Data Tables — "Ledger"

- Header: very dark (`#080c1a`) with uppercase muted-gold text
- Row hover: lunar glow bg
- Selected: gold left-border, dark highlight
- Empty state: crescent moon SVG illustration

---

## 7. Dialogs & Forms — "Glass Panels"

- Dark glass dialogs with gold header divider
- Dark input bg (`#0a1628`), golden glow on focus
- Gold shimmer sweep animation on button hover

---

## 8. Micro-interactions

- Page transition: fade-up + scale
- Card hover: lift + glow intensification
- Button hover: gold shimmer sweep
- Loading: crescent moon rotation spinner
- Toasts: glass bg + colored left border

---

## 9. Typography

- Headings: letter-spacing 0.03em (premium feel)
- Financial numbers: JetBrains Mono, subtle gold tint for key figures
- Section titles: uppercase, 0.08em letter-spacing

---

## 10. Implementation Scope

### Files to modify:
1. `styles.scss` — color tokens, global overrides, new animations, star keyframes
2. `login.component.scss` + `.html` — moonrise redesign
3. `dashboard.component.scss` + `.html` — star field, crescent decoration
4. `sidebar.component.scss` + `.html` — glass effect, crescent logo
5. `topbar.component.scss` — glass effect, gold border
6. New: `src/assets/moon-crescent.svg` — brand crescent icon
7. ~10 feature SCSS files — glass card backgrounds

### No changes to:
- TypeScript logic
- NgRx store
- Routing
- API services
- No new dependencies