Color
Scales generated in OKLCH around the Jinnga favicon orange #FF6A32. Components use theme roles, never primitives. Every text role is checked against its surfaces for WCAG 2.2 AA in both themes.
Primitive scales
brand
50
100
200
300
400
500
600
700
800
900
950
neutral
50
100
200
300
400
500
600
700
800
900
950
success
50
100
200
300
400
500
600
700
800
900
950
warning
50
100
200
300
400
500
600
700
800
900
950
danger
50
100
200
300
400
500
600
700
800
900
950
info
50
100
200
300
400
500
600
700
800
900
950
Theme roles
Light
background{color.white} → #ffffffsurface{color.neutral.50} → #f9f6f5surfaceRaised{color.white} → #ffffffsurfaceSunken{color.neutral.100} → #eeeae9border{color.neutral.300} → #c9c2c0borderStrong{color.neutral.600} → #837b79text{color.neutral.950} → #262322textMuted{color.neutral.700} → #6b6462textOnPrimary{color.white} → #ffffffprimary{color.brand.600} → #c74e20primaryHover{color.brand.700} → #a54420primaryActive{color.brand.800} → #80361cprimarySubtle{color.brand.50} → #fef4f1accent{color.brand.500} → #ff6a32focus{color.info.600} → #3981c6success{color.success.700} → #2b7841successSubtle{color.success.50} → #e5ffe9warning{color.warning.800} → #6a4800warningSubtle{color.warning.50} → #fff5e8danger{color.danger.700} → #ab3a38dangerSubtle{color.danger.50} → #fef4f3info{color.info.700} → #3069a0infoSubtle{color.info.50} → #f1f8ffoverlayrgba(20, 14, 10, 0.55) → rgba(20, 14, 10, 0.55)Dark
background{color.neutral.950} → #262322surface{color.neutral.900} → #3d3a39surfaceRaised{color.neutral.800} → #534f4dsurfaceSunken{color.black} → #000000border{color.neutral.700} → #6b6462borderStrong{color.neutral.500} → #a69d9atext{color.neutral.50} → #f9f6f5textMuted{color.neutral.300} → #c9c2c0textOnPrimary{color.neutral.950} → #262322primary{color.brand.400} → #fe855cprimaryHover{color.brand.300} → #fead91primaryActive{color.brand.200} → #feccbbprimarySubtle{color.brand.950} → #3e1608accent{color.brand.500} → #ff6a32focus{color.info.300} → #96c9fesuccess{color.success.300} → #8dd99dsuccessSubtle{color.success.950} → #0c2b15warning{color.warning.300} → #efba64warningSubtle{color.warning.950} → #322000danger{color.danger.300} → #ffaba3dangerSubtle{color.danger.950} → #411211info{color.info.300} → #96c9feinfoSubtle{color.info.950} → #0e253coverlayrgba(0, 0, 0, 0.65) → rgba(0, 0, 0, 0.65)Contrast report
Generated by scripts/check.mjs; the build fails on any failing pair.
| Theme | Foreground | Background | Ratio | Minimum | Result |
|---|---|---|---|---|---|
| light | text | background | 15.6:1 | 4.5:1 | pass |
| light | text | surface | 14.51:1 | 4.5:1 | pass |
| light | text | surfaceRaised | 15.6:1 | 4.5:1 | pass |
| light | text | surfaceSunken | 13.06:1 | 4.5:1 | pass |
| light | textMuted | background | 5.79:1 | 4.5:1 | pass |
| light | textMuted | surface | 5.39:1 | 4.5:1 | pass |
| light | textOnPrimary | primary | 4.63:1 | 4.5:1 | pass |
| light | textOnPrimary | primaryHover | 6.09:1 | 4.5:1 | pass |
| light | textOnPrimary | primaryActive | 8.53:1 | 4.5:1 | pass |
| light | primary | background | 4.63:1 | 3:1 | pass |
| light | success | successSubtle | 5.13:1 | 4.5:1 | pass |
| light | warning | warningSubtle | 7.67:1 | 4.5:1 | pass |
| light | danger | dangerSubtle | 5.73:1 | 4.5:1 | pass |
| light | info | infoSubtle | 5.37:1 | 4.5:1 | pass |
| light | success | background | 5.43:1 | 4.5:1 | pass |
| light | warning | background | 8.27:1 | 4.5:1 | pass |
| light | danger | background | 6.19:1 | 4.5:1 | pass |
| light | info | background | 5.75:1 | 4.5:1 | pass |
| light | focus | background | 4.09:1 | 3:1 | pass |
| light | focus | surface | 3.81:1 | 3:1 | pass |
| light | borderStrong | background | 4.14:1 | 3:1 | pass |
| dark | text | background | 14.51:1 | 4.5:1 | pass |
| dark | text | surface | 10.48:1 | 4.5:1 | pass |
| dark | text | surfaceRaised | 7.53:1 | 4.5:1 | pass |
| dark | text | surfaceSunken | 19.53:1 | 4.5:1 | pass |
| dark | textMuted | background | 8.89:1 | 4.5:1 | pass |
| dark | textMuted | surface | 6.42:1 | 4.5:1 | pass |
| dark | textOnPrimary | primary | 6.48:1 | 4.5:1 | pass |
| dark | textOnPrimary | primaryHover | 8.62:1 | 4.5:1 | pass |
| dark | textOnPrimary | primaryActive | 10.82:1 | 4.5:1 | pass |
| dark | primary | background | 6.48:1 | 3:1 | pass |
| dark | success | successSubtle | 9.14:1 | 4.5:1 | pass |
| dark | warning | warningSubtle | 8.85:1 | 4.5:1 | pass |
| dark | danger | dangerSubtle | 8.8:1 | 4.5:1 | pass |
| dark | info | infoSubtle | 8.96:1 | 4.5:1 | pass |
| dark | success | background | 9.32:1 | 4.5:1 | pass |
| dark | warning | background | 8.82:1 | 4.5:1 | pass |
| dark | danger | background | 8.62:1 | 4.5:1 | pass |
| dark | info | background | 8.98:1 | 4.5:1 | pass |
| dark | focus | background | 8.98:1 | 3:1 | pass |
| dark | focus | surface | 6.49:1 | 3:1 | pass |
| dark | borderStrong | background | 5.88:1 | 3:1 | pass |