LifeOS Design System
Interactive showcase of visual identity, design tokens, color palette, and reusable UI components.
1. Central Color System
Main Background
#0F1117 (--bg-primary)
Sidebar Background
#151821 (--bg-sidebar)
Card Background
#1B1F2A (--bg-card)
Primary Accent
#818CF8 (--accent-primary)
Secondary Accent
#A78BFA (--accent-secondary)
Success State
#34D399 (--success)
Warning State
#FBBF24 (--warning)
Danger State
#F87171 (--danger)
2. Metric & Analytics Cards
Focus Index
88.4%
+4.2% vs last week
Active Habits
12 / 14
86% streak consistency
Study Hours
34.5 hrs
Target: 40 hrs / wk
Energy Level
7.8 / 10
Steady morning peak
3. Buttons & Action Styles
4. Feedback, Badges & Progress Bars
Status Badges & Progress Indicators
Indigo Accent
Completed
In Progress
High Priority
Archived
Alert & Notification States
Behavioral Insight Ready
Your focus metrics peaked between 9:00 AM and 11:30 AM over the past 5 days.
Daily Check-in Recorded
Your energy rating and evening reflection have been synchronized.
Habit Threshold Approaching
Reading routine has not yet been checked off for today.
5. Form Controls & Inputs
Give your action item a concise, actionable name.
6. Responsive Data Table
| Domain / Item | Category | Status | Cadence | Progress | Action |
|---|---|---|---|---|---|
| Distributed Systems Architecture | Study | On Track | Daily (Morning) |
|
|
| 30-Minute Aerobic Cardio | Health | Active | 5x per week |
|
|
| Monthly Financial Ledger Reconciliation | Finance | Due Soon | Monthly |
|
|
| Sleep Schedule Consistency (23:00 - 07:00) | Biometrics | Optimized | Daily |
|
7. Empty State & Loading Indicators
No Pending Decisions
You have resolved all major strategic choices for this review period. When a critical fork arises, log it here.
Loading States
Calculating multi-variable behavioral correlations...