Shihab Task Management — Design Language

Enterprise-restraint admin console. Cool blue-grays, deep navy primary, a permanent dark navy sidebar that stays dark in both themes, and three colored signals (RAG + Oracle) doing all the communicative work. Surfaces are flat with 1px borders and 8px corners; type is Inter throughout with uppercase-small-caps section labels.

Brand type: UI-rich admin product. Differentiation lives in the RAG status grammar and the persistent navy sidebar.

1. Hard rules

1. Never invent new color tokens. Use only the CSS custom properties declared in src/index.css. If you need a role that doesn't exist (e.g. "warning muted"), derive it from --rag-amber or --muted — don't add a new hex.
2. Sidebar is always dark navy. In both light and dark themes. Don't re-theme it to match --background. The contrast is part of the identity.
3. RAG is semantic, not decorative. Use --rag-green/amber/red (and their -bg variants) only for status: on-track / at-risk / off-track, or CSAT tiers. Never as buttons, never as chart fill for non-status data.
4. Oracle purple is AI-only. --oracle-accent and .oracle-badge are reserved for AI-assistant surfaces (Shihab AI chat, AI-generated fields). Don't use for UI chrome.
5. Section labels are uppercase, 14px/600, letter-spacing 0.7px. Never use sentence case for <h2>-level group headers.
6. Page titles are <h1> with .page-header. Screen-reader heading hierarchy starts at h1 on every page. (/knowledge-base currently violates this — fix when touched.)
7. 8px radius baseline. --radius: 0.5rem → cards 8px, buttons 6px via calc(var(--radius) - 2px), small pills 4px. Don't introduce 12/16/24.
8. RTL ready. Use logical properties (ps-4 not pl-4, me-2 not mr-2). The app ships Arabic and flips dir on the root.