Lumos Color System
Create beautiful, accessible color tokens for your design system with intelligent shade generation and semantic mapping
Color System
Create a complete design token system with primitives and semantic colors
Lumos DSM
primary
Main brand color, used for primary actions and key UI elements
#2196F3
50#EBF8FF
100#D1EBFF
200#A8D8FF
300#7CC4FF
400#51B0FF
500#2196F3
600#0B7CD6
700#0064B5
800#004D8C
900#003A6B
secondary
Complementary color, used for secondary actions and accents
#7540FF
50#F3EEFF
100#E4D9FF
200#C9B3FF
300#AD8DFF
400#9166FF
500#7540FF
600#5F33DB
700#4A26B7
800#371A93
900#251070
neutral
Grayscale colors for text, backgrounds, and borders
#6B7280
50#F9FAFB
100#F3F4F6
200#E5E7EB
300#D1D5DB
400#9CA3AF
500#6B7280
600#4B5563
700#374151
800#1F2937
900#111827
success
Indicates successful actions or positive status
#10B981
warning
Indicates warnings or actions that need attention
#F59E0B
error
Indicates errors or destructive actions
#EF4444
info
Indicates informational messages or status
#06B6D4
surface
Used for UI surfaces like cards, modals, and panels
#A1A1AA