Design Principles

The Control Center follows Material Design 3 (MD3) principles combined with Apple HIG clarity standards. Every component is built with CSS custom properties (tokens) — no framework, no build step.

Note

Core rules:

1. Every color, radius, shadow, font is a --token — never hardcode
2. Dark mode = swap tokens via body.dark — components don’t change
3. Every component has transition for smooth theme switching
4. Cards hover with translateY(-2px) + shadow elevation
5. Status always uses the badge system (green/orange/red/gray)
6. Permission-controlled elements get data-perm="key"

File Structure

styles/main.css  ← All CSS tokens + components + dark mode
js/layout.js     ← Shared JS: navigation, polling, config
js/pages/*.js    ← Page-specific logic (home.js, network.js, etc.)
pages/*.html     ← HTML pages: structure, content, sidebar