The admin is a screen product: there is no printed brand collateral in this scope. Anything the admin exports to paper or PDF (packing slips, labels, invoices) uses these colour values. The sRGB value is what the browser paints from the HSL triple; use the authored hex where it differs by a rounding step. Print in Archivo and IBM Plex at the same weights as on screen.
| Token | sRGB hex | Authored hex | RGB |
|---|---|---|---|
--background | #FFFFFF | #FFFFFF | 255, 255, 255 |
--foreground | #0F1524 | #0F1626 | 15, 21, 36 |
--card | #FFFFFF | #FFFFFF | 255, 255, 255 |
--card-foreground | #0F1524 | #0F1626 | 15, 21, 36 |
--popover | #FFFFFF | #FFFFFF | 255, 255, 255 |
--popover-foreground | #0F1524 | #0F1626 | 15, 21, 36 |
--primary | #0E172A | #0E1729 | 14, 23, 42 |
--primary-foreground | #FBFBF9 | #FAFAF8 | 251, 251, 249 |
--primary-hover | #1B2641 | #1A2540 | 27, 38, 65 |
--secondary | #FFFFFF | #FFFFFF | 255, 255, 255 |
--secondary-foreground | #0E172A | #0E1729 | 14, 23, 42 |
--muted | #F3F4F7 | #F4F5F8 | 243, 244, 247 |
--muted-foreground | #505B71 | #505A70 | 80, 91, 113 |
--accent | #EAEDF6 | #EBEEF6 | 234, 237, 246 |
--accent-foreground | #0E172A | #0E1729 | 14, 23, 42 |
--destructive | #A43240 | #A2323F | 164, 50, 64 |
--destructive-foreground | #FFFFFF | #FFFFFF | 255, 255, 255 |
--border | #E3E7ED | #E4E7ED | 227, 231, 237 |
--input | #8892A5 | #8892A5 | 136, 146, 165 |
--input-hover | #5F6A86 | #5F6A86 | 95, 106, 134 |
--secondary-border | #C2C7D1 | #C2C7D1 | 194, 199, 209 |
--secondary-border-hover | #ABB0BA | #ABB0BA | 171, 176, 186 |
--ring | #3F60A6 | #3F5FA6 | 63, 96, 166 |
--success | #20644B | #21654C | 32, 100, 75 |
--success-foreground | #FFFFFF | same | 255, 255, 255 |
--warning | #845610 | #83550F | 132, 86, 16 |
--warning-foreground | #FFFFFF | same | 255, 255, 255 |
--info | #335694 | #335794 | 51, 86, 148 |
--info-foreground | #FFFFFF | same | 255, 255, 255 |
--neutral | #575E70 | #575F72 | 87, 94, 112 |
--neutral-foreground | #FFFFFF | same | 255, 255, 255 |
--sidebar | #0E172A | #0E1729 | 14, 23, 42 |
--sidebar-foreground | #C8CEDA | #C9CEDA | 200, 206, 218 |
--sidebar-primary | #9DB3E2 | #9FB4E2 | 157, 179, 226 |
--sidebar-primary-foreground | #0E172A | same | 14, 23, 42 |
--sidebar-accent | #1C2845 | #1B2744 | 28, 40, 69 |
--sidebar-accent-foreground | #FBFBF9 | #FAFAF8 | 251, 251, 249 |
--sidebar-border | #26314B | #253049 | 38, 49, 75 |
--sidebar-ring | #9DB3E2 | same | 157, 179, 226 |
--chart-1 | #2F62C1 | #2F62C0 | 47, 98, 193 |
--chart-2 | #16A281 | #16A07F | 22, 162, 129 |
--chart-3 | #DB6B33 | #DB6B35 | 219, 107, 51 |
--chart-4 | #7B8DE0 | #7C8FE0 | 123, 141, 224 |
--chart-5 | #D2568C | #D2588C | 210, 86, 140 |
--chart-muted | #798AAF | #7A8BB0 | 121, 138, 175 |
--canvas | #ECEFF3 | #EDF0F4 | 236, 239, 243 |