3.5 KiB
3.5 KiB
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-coverwithobject-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