klytos-design-system

name	klytos-design-system
description	Design principles, color philosophy, component composition patterns, and rules for maintaining visual consistency across the Klytos admin panel. Reference this BEFORE writing any HTML/CSS in admin pages. Covers design tokens, color usage, layout rules, button hierarchy, form patterns, badges, responsive design, CSS architecture, and checklist for new admin pages.

Klytos Design System

Design Principles

1. Dark-first — Dark mode is the default. All designs start dark, light mode adapts.
2. Warm neutrals — Backgrounds use warm-neutral tones (#1a1a1a, #262626, #333333), NOT cold navy/slate.
3. Generous whitespace — Prefer spacing over density. Use --klytos-space-lg (1.5rem) for section padding.
4. Subtle borders — Borders are barely visible separators (#3a3a3a dark, #e0e0e0 light), never heavy.
5. Blue accent — Interactive elements use --klytos-accent blue. Status colors (green/yellow/red) for feedback only.
6. Sidebar always dark — Even in light mode, the sidebar stays dark.
7. System font stack — No custom font loading. Use the system sans-serif (--klytos-font-sans).

---

Color Usage Rules

When to use each token

Token	Use for
--klytos-bg	Page background
--klytos-bg-elevated	Cards, modals, dropdowns (things that "float")