Jinnga design system
ColourThe Zen Play palette: Warebit orange for energy, calm teal for tranquillity and elegance, gold for achievement, lime for progress, coral for danger, lavender as the scarce character colour, and cool mist-to-petrol neutrals so the background has no presence. Text on colour is white; the steps that carry text are darkened to 4.5:1.
The character colour
Lavender is the one colour that does not belong to the warm family of the rest. That dissonance gives Jinnga its character, and it only works because it is scarce: about 5 % of any screen. It lives in focus rings, selected items, achievement gradients, new badges and avatar rings. Only the pale lavender is ever used; badges on it carry ink text.
New
Primitive scalesGenerated in OKLCH at constant hue around each chosen colour; the step pinned to the chosen colour is marked.
brand
50
100
200
300
400
500
600
700
800
900
950
50 #fef4f1100 #ffe5dc200 #ffccbb300 #fead91400 #ff855b500 #ff6a32600 #cc480c700 #ae3900800 #8a2b00900 #681e00950 #440f00
calm
50
100
200
300
400
500
600
700
800
900
950
50 #e4fcff100 #bdf7ff200 #94eaf4300 #75d6e1400 #50bfcb500 #0fa3b1600 #05818c700 #03747e800 #005b64900 #01434a950 #002a2f
gold
50
100
200
300
400
500
600
700
800
900
950
50 #fff6e5100 #ffe8c0200 #ffd27e300 #f5b82e400 #d9a224500 #bd8c18600 #a07507700 #845f00800 #684a00900 #4d3600950 #312100
lime
50
100
200
300
400
500
600
700
800
900
950
50 #eaffdb100 #c8ff9e200 #aef079300 #9be15d400 #83c14a500 #70a83d600 #5c8e2e700 #4a7420800 #375c12900 #264404950 #152b00
coral
50
100
200
300
400
500
600
700
800
900
950
50 #fff4f3100 #ffe4e3200 #fecac9300 #feaaaa400 #ff8084500 #ff4d5e600 #d73649700 #b62539800 #951028900 #720019950 #4b000d
lavender
50
100
200
300
400
500
600
700
800
900
950
50 #f7f5ff100 #ece8fe200 #dbd2fe300 #c9b8ff400 #b498ff500 #9c83df600 #7d67b7700 #6b589e800 #54437f900 #3e3061950 #281a45
neutral
50
100
200
300
400
500
600
700
800
900
950
50 #f5f8f9100 #e4e9eb200 #d2d7d9300 #bdc2c4400 #a4a9aa500 #8b9295600 #707b7f700 #58666c800 #3e5057900 #263c44950 #102a33
Theme rolesComponents use only these. The same role resolves to a different primitive per theme.
backgroundlight #f5f8f9 · dark #102a33
surfacelight #ffffff · dark #263c44
surfaceRaisedlight #ffffff · dark #3e5057
surfaceSunkenlight #e4e9eb · dark #000000
borderlight #d2d7d9 · dark #3e5057
borderStronglight #707b7f · dark #8b9295
textlight #102a33 · dark #f5f8f9
textMutedlight #58666c · dark #bdc2c4
textOnColorlight #ffffff · dark #ffffff
primarylight #cc480c · dark #cc480c
primaryHoverlight #ae3900 · dark #ae3900
primaryActivelight #8a2b00 · dark #8a2b00
primarySubtlelight #fef4f1 · dark #440f00
accentlight #ff6a32 · dark #ff6a32
secondarylight #05818c · dark #05818c
secondaryHoverlight #03747e · dark #03747e
secondarySubtlelight #e4fcff · dark #002a2f
calmlight #0fa3b1 · dark #50bfcb
goldlight #f5b82e · dark #f5b82e
goldStronglight #845f00 · dark #845f00
limelight #9be15d · dark #9be15d
limeStronglight #4a7420 · dark #4a7420
characterlight #c9b8ff · dark #c9b8ff
characterSubtlelight #f7f5ff · dark #3e5057
textOnCharacterlight #102a33 · dark #102a33
focuslight #102a33 · dark #c9b8ff
focusGlowlight #c9b8ff · dark #c9b8ff
successlight #4a7420 · dark #9be15d
successSubtlelight #eaffdb · dark #152b00
warninglight #845f00 · dark #f5b82e
warningSubtlelight #fff6e5 · dark #312100
dangerlight #b62539 · dark #feaaaa
dangerActionlight #d73649 · dark #d73649
dangerSubtlelight #fff4f3 · dark #4b000d
infolight #03747e · dark #75d6e1
infoSubtlelight #e4fcff · dark #002a2f
overlaylight rgba(16, 42, 51, 0.6) · dark rgba(0, 0, 0, 0.65)
Rules
·White text on coloured surfaces, guaranteed by the text-carrying roles (primary, secondary, goldStrong, limeStrong, dangerAction).
·Bright steps (accent, calm, gold, lime) are for bars, rings, icons and gradients, never under small text.
·Status is never colour alone: an icon or text always accompanies it.
·A new role must be added to the contrast checks in the package, or it is unchecked.