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-50 | 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-50 | 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-action-danger | error-500 | Destructive actions |
--mk-action-danger-hover | error-600 | Hovered destructive actions |
--mk-focus-ring | primary-600 | Focus ring color |
--mk-brand-identity | error-500 | Brand accent |
Primary palette
50
#F0F6FF
100
#D6E8FF
200
#B9D1F5
300
#8DB9F0
400
#5E99EA
500
#3D83E6
600 ★
#2C75E1
700
#235EB4
800
#1A4687
900
#133260
1000
#0C1F3E
★ = Default action / link color
Neutral palette
50
#F5F7F9
100
#E6EBF0
200
#CDD5DD
300
#ADBBC6
400
#8A9BAD
500
#6A7D8E
600
#4F6170
700
#374B59
800
#233543
900
#010F1A
1000
#000000
Semantic palettes
Success
50
#EEF8EA
100
#D3ECC8
200
#B8DEAC
300
#ACCF9F
400
#9ECB90
500
#96BF86
600
#76A566
700
#578A49
800
#3A6A2E
900
#1E4A18
1000
#0F250C
Warning
50
#FFFBEB
100
#FEF3C7
200
#FDE68A
300
#FCD34D
400
#FBBF24
500
#FFA700
600
#D97706
700
#B45309
800
#92400E
900
#78350F
1000
#3C1A07
Error
50
#FFF0F2
100
#FFD6DB
200
#FFB5BF
300
#FF8A97
400
#FF5470
500
#FF203F
600
#CC1835
700
#991326
800
#660D19
900
#3D0810
1000
#1A0307
Info
50
#EFF8FE
100
#DAEFFB
200
#B5DFF8
300
#80C8F1
400
#4DAFE8
500
#2599D7
600
#1A7CB5
700
#166290
800
#134F73
900
#0E3D58
1000
#071E2C
Extended palettes
Purple
50
#F5F3FF
100
#EDE9FE
200
#DDD6FE
300
#C4B5FD
400
#A78BFA
500
#8B5CF6
600
#7C3AED
700
#6D28D9
800
#5B21B6
900
#4C1D95
1000
#260E4A
Magenta
50
#FFF0F7
100
#FFD6EC
200
#FFB0D9
300
#FF79BE
400
#FF3DA2
500
#FF0980
600
#D60057
700
#A8004A
800
#7A0037
900
#4D0024
1000
#260012