98 lines
3.5 KiB
Markdown
98 lines
3.5 KiB
Markdown
|
# 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
|