# ArchNest Design Rules — Must Follow on Every Page

These are hard-learned rules from the Glance page build. Apply to ALL pages.

---

## Sidebar

- **Expanded width**: 100px (NOT 80px)
- **Collapsed width**: 60px (NOT 50px)
- **Logo size**: 40px expanded, 28px collapsed — must have gold glow drop-shadow
- **Logo text "ARCHNEST"**: 9px, bold, tracking 2.5px, gold, with subtle glow
- **Nav icons**: 20px, strokeWidth 2 when active, 1.5 when inactive
- **Nav labels**: 10px, below icon, font-medium
- **Active indicator**: 3px gold left bar with glow shadow
- **System status**: at bottom, green dot with glow, text 8-9px
- **Manually collapsible** via toggle button (not just responsive)

## Top Bar

- **Page title**: 18px, bold, uppercase, tracking-wide, **TEXT COLOR IS GOLD (#C8A434)** — NOT white
- **Height**: 56px, sticky, z-40
- **Search bar**: 260px, 32px height, rounded-full, 12px text
- **Avatar**: 36px, gold border + gold glow shadow, initials inside
- **Dropdown menu**: Profile, Appearance, Security, Help & Support, Sign Out (red)

## Hero Banner (pages that have it: Glance, Infrastructure, Network, BookNest)

- **Image positioning**: `object-cover` with `object-position: center 30%` — shows upper portion (skyline), NOT centered
- **KPI status cards OVERLAP the bottom** of the banner (negative margin -mt-12)
- **Cards have backdrop-blur** and 95% opacity background for glass effect over banner
- **Banner height**: 200px on Glance, 120px on sub-pages (Infra, Network, BookNest)
- **No banner** on Terminal or Settings

## KPI Status Cards

- **Asymmetric widths**: Cards 1 and 4 are wider (1.3fr), cards 2 and 3 are narrower (1fr)
- **Grid**: `grid-cols-[1.3fr_1fr_1fr_1.3fr]` with 12px gap
- **Padding**: 16px (compact, not 20-24px)
- **Font sizes**: Title 10px uppercase tracking 1.5px, numbers 24px bold, subtitles 10px, breakdowns 9px
- **Icons in KPIs**: 16px, gold color
- **Dots in breakdowns**: 6px (1.5 tailwind) diameter

## Content Rows

- **Must align width-wise** with the KPI cards above — use consistent horizontal padding (px-8 for middle/bottom rows matches px-6 + px-2 on the banner area)
- **Middle row**: 3 columns 30%/40%/30%
- **Bottom row**: 2 columns 65%/35%

## No Footer

- The Glance page has **NO footer/status bar** at the bottom
- Other pages: check their specific .md spec

## Typography (exact sizes used)

| Element | Size | Weight | Color |
|---------|------|--------|-------|
| Page title | 18px | bold | gold |
| Card titles | 10-11px | medium | secondary (#7A7D85) |
| Large KPI numbers | 24px | bold | primary (#E8E6E0) |
| KPI subtitles | 10px | normal | secondary |
| Breakdown dots text | 9px | normal | secondary |
| Activity titles | 13px | medium | primary |
| Activity subtitles | 11px | normal | secondary |
| Timestamps | 11px | normal | secondary |
| Progress bar labels | 13px | normal | primary |
| Progress bar values | 12px | normal | secondary |

## Card Styling

- Background: #141518 at 95% opacity (with backdrop-blur when over banner)
- Border: 1px solid #1E2025
- Radius: 12px
- Padding: 16px for KPI cards, 20px for content cards
- Hover: border → gold, 0.2s ease transition
- **NO box-shadow** (flat design)

## Colors — Final

- Page bg: #0D0E10
- Card bg: #141518
- Sidebar bg: #0A0B0D
- Border: #1E2025
- Gold accent: #C8A434
- Success: #2ECC71
- Warning: #E67E22
- Danger: #E74C3C
- Text primary: #E8E6E0
- Text secondary: #7A7D85
- Teal: #1ABC9C

## Target Screen

- Primary design target: **16-inch display** (1920px+ viewport)
- Should feel spacious, not cramped
- Use the full width — don't constrain to a narrow container