Colors
The color system is built from a structured palette with semantic aliases. Use semantic tokens in components — never reference raw palette tokens directly in product code.
💡
Always prefer semantic tokens (e.g. --mk-text-primary) over raw palette tokens (e.g. --mk-color-neutral-900). Semantic tokens allow global theming.
Semantic tokens
These are the tokens you should use in components and product code.
| Token | Value | Usage |
|---|---|---|
--mk-bg-page | neutral-50 | Page background |
--mk-bg-surface | neutral-0 | Card / panel background |
--mk-bg-subtle | neutral-100 | Subtle backgrounds, hover states |
--mk-border-default | neutral-200 | Default borders |
--mk-border-strong | neutral-300 | Stronger emphasis borders |
--mk-text-primary | neutral-900 | Primary text |
--mk-text-secondary | neutral-600 | Secondary / helper text |
--mk-text-disabled | neutral-400 | Disabled text |
--mk-text-inverse | neutral-0 | Text on dark backgrounds |
--mk-text-link | primary-600 | Links |
--mk-text-link-hover | primary-700 | Hovered links |
--mk-action-primary | primary-600 | Primary actions |
--mk-action-primary-hover | primary-700 | Hovered primary actions |
--mk-focus-ring | primary-500 | Focus ring color |
Primary palette
50
#eff6ff
100
#dbeafe
200
#bfdbfe
300
#93c5fd
400
#60a5fa
500
#3b82f6
600 ★
#2563eb
700
#1d4ed8
800
#1e40af
900
#1e3a8a
950
#172554
★ = Default action / link color
Neutral palette
0
#ffffff
50
#f8fafc
100
#f1f5f9
200
#e2e8f0
300
#cbd5e1
400
#94a3b8
500
#64748b
600
#475569
700
#334155
800
#1e293b
900
#0f172a
Semantic palettes
Success
50
#f0fdf4
100
#dcfce7
500
#22c55e
600
#16a34a
700
#15803d
Warning
50
#fffbeb
100
#fef3c7
500
#f59e0b
600
#d97706
700
#b45309
Error
50
#fef2f2
100
#fee2e2
500
#ef4444
600
#dc2626
700
#b91c1c