Palettes Color
The color system, built from three Figma components: the Palette box (a single swatch), the Palette (a 100–900 row per color family), and Theme Colors (all families stacked). All values pulled directly from the LUSTER Figma variables.
100
200
300
400
500
600
700
800
900
Figma Properties
Shades: 100 – 900 (9 steps)
Base shade: 500
Box: 44 × 51px
Item padding: 16px 12px
Gap: 12px
Shades: 100 – 900 (9 steps)
Base shade: 500
Box: 44 × 51px
Item padding: 16px 12px
Gap: 12px
Component · Theme Colors
All five palettes stacked — the complete theme color grid exactly as composed in Figma.
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
100
200
300
400
500
600
700
800
900
Design Tokens
| Token Name | Figma Variable | Default Value |
|---|---|---|
| --palettesItemPaddingX | palettes/item/padding/x | 12px |
| --palettesItemPaddingY | palettes/item/padding/y | 16px |
| --palettesItemBorderRadius | palettes/item/border/radius | 0px |
| --palettesGap | palettes/gap | 12px |
| --bodyFontSize | Typography/Body/Font/Size | 16px |
| --bodyFontLineHeight | Typography/Body/Font/LineHeight | 19px |
| --bodyFontWeight | Typography/Body/Font/Weight | 400 |
| --bodyFontFamily | Body/Font/Family | Inter |
| --palettesItem100Content | palettes/item/100/font/content | "100" |
| --palettesItem200Content | palettes/item/200/font/content | "200" |
| --palettesItem300Content | palettes/item/300/font/content | "300" |
| --palettesItem400Content | palettes/item/400/font/content | "400" |
| --palettesItem500Content | palettes/item/500/font/content | "500" |
| --palettesItem600Content | palettes/item/600/font/content | "600" |
| --palettesItem700Content | palettes/item/700/font/content | "700" |
| --palettesItem800Content | palettes/item/800/font/content | "800" |
| --palettesItem900Content | palettes/item/900/font/content | "900" |
| --palettesPrimary100BgColor | Palettes/Primary/100/Bg/Color | #F2EDFF |
| --palettesPrimary100FontColor | Palettes/Primary/100/Font/Color | #362373 |
| --palettesPrimary200BgColor | Palettes/Primary/200/Bg/Color | #DFD4FF |
| --palettesPrimary200FontColor | Palettes/Primary/200/Font/Color | #362373 |
| --palettesPrimary300BgColor | Palettes/Primary/300/Bg/Color | #C5B2FF |
| --palettesPrimary300FontColor | Palettes/Primary/300/Font/Color | #362373 |
| --palettesPrimary400BgColor | Palettes/Primary/400/Bg/Color | #AB8FFF |
| --palettesPrimary400FontColor | Palettes/Primary/400/Font/Color | #362373 |
| --palettesPrimary500BgColor | Palettes/Primary/500/Bg/Color | #916DFF |
| --palettesPrimary500FontColor | Palettes/Primary/500/Font/Color | #F2EDFF |
| --palettesPrimary600BgColor | Palettes/Primary/600/Bg/Color | #794DFF |
| --palettesPrimary600FontColor | Palettes/Primary/600/Font/Color | #F2EDFF |
| --palettesPrimary700BgColor | Palettes/Primary/700/Bg/Color | #6741D9 |
| --palettesPrimary700FontColor | Palettes/Primary/700/Font/Color | #F2EDFF |
| --palettesPrimary800BgColor | Palettes/Primary/800/Bg/Color | #5637B5 |
| --palettesPrimary800FontColor | Palettes/Primary/800/Font/Color | #F2EDFF |
| --palettesPrimary900BgColor | Palettes/Primary/900/Bg/Color | #452C91 |
| --palettesPrimary900FontColor | Palettes/Primary/900/Font/Color | #F2EDFF |
| --palettesSecondary100BgColor | Palettes/Secondary/100/Bg/Color | #F1F1F2 |
| --palettesSecondary100FontColor | Palettes/Secondary/100/Font/Color | #353339 |
| --palettesSecondary200BgColor | Palettes/Secondary/200/Bg/Color | #DEDDE0 |
| --palettesSecondary200FontColor | Palettes/Secondary/200/Font/Color | #353339 |
| --palettesSecondary300BgColor | Palettes/Secondary/300/Bg/Color | #C4C2C8 |
| --palettesSecondary300FontColor | Palettes/Secondary/300/Font/Color | #353339 |
| --palettesSecondary400BgColor | Palettes/Secondary/400/Bg/Color | #A9A6AE |
| --palettesSecondary400FontColor | Palettes/Secondary/400/Font/Color | #353339 |
| --palettesSecondary500BgColor | Palettes/Secondary/500/Bg/Color | #8F8B96 |
| --palettesSecondary500FontColor | Palettes/Secondary/500/Font/Color | #F1F1F2 |
| --palettesSecondary600BgColor | Palettes/Secondary/600/Bg/Color | #76717F |
| --palettesSecondary600FontColor | Palettes/Secondary/600/Font/Color | #F1F1F2 |
| --palettesSecondary700BgColor | Palettes/Secondary/700/Bg/Color | #64606C |
| --palettesSecondary700FontColor | Palettes/Secondary/700/Font/Color | #F1F1F2 |
| --palettesSecondary800BgColor | Palettes/Secondary/800/Bg/Color | #54505A |
| --palettesSecondary800FontColor | Palettes/Secondary/800/Font/Color | #F1F1F2 |
| --palettesSecondary900BgColor | Palettes/Secondary/900/Bg/Color | #434048 |
| --palettesSecondary900FontColor | Palettes/Secondary/900/Font/Color | #F1F1F2 |
| --palettesSuccess100BgColor | Palettes/Success/100/Bg/Color | #E6FAED |
| --palettesSuccess100FontColor | Palettes/Success/100/Font/Color | #005B22 |
| --palettesSuccess200BgColor | Palettes/Success/200/Bg/Color | #C2F2D4 |
| --palettesSuccess200FontColor | Palettes/Success/200/Font/Color | #005B22 |
| --palettesSuccess300BgColor | Palettes/Success/300/Bg/Color | #91E8B2 |
| --palettesSuccess300FontColor | Palettes/Success/300/Font/Color | #005B22 |
| --palettesSuccess400BgColor | Palettes/Success/400/Bg/Color | #5EDE8E |
| --palettesSuccess400FontColor | Palettes/Success/400/Font/Color | #005B22 |
| --palettesSuccess500BgColor | Palettes/Success/500/Bg/Color | #2ED46B |
| --palettesSuccess500FontColor | Palettes/Success/500/Font/Color | #E6FAED |
| --palettesSuccess600BgColor | Palettes/Success/600/Bg/Color | #00CA4B |
| --palettesSuccess600FontColor | Palettes/Success/600/Font/Color | #E6FAED |
| --palettesSuccess700BgColor | Palettes/Success/700/Bg/Color | #00AC40 |
| --palettesSuccess700FontColor | Palettes/Success/700/Font/Color | #E6FAED |
| --palettesSuccess800BgColor | Palettes/Success/800/Bg/Color | #008F35 |
| --palettesSuccess800FontColor | Palettes/Success/800/Font/Color | #E6FAED |
| --palettesSuccess900BgColor | Palettes/Success/900/Bg/Color | #00732B |
| --palettesSuccess900FontColor | Palettes/Success/900/Font/Color | #E6FAED |
| --palettesWarning100BgColor | Palettes/Warning/100/Bg/Color | #FDF7E6 |
| --palettesWarning100FontColor | Palettes/Warning/100/Font/Color | #6B4F00 |
| --palettesWarning200BgColor | Palettes/Warning/200/Bg/Color | #FBECC2 |
| --palettesWarning200FontColor | Palettes/Warning/200/Font/Color | #6B4F00 |
| --palettesWarning300BgColor | Palettes/Warning/300/Bg/Color | #F7DD91 |
| --palettesWarning300FontColor | Palettes/Warning/300/Font/Color | #6B4F00 |
| --palettesWarning400BgColor | Palettes/Warning/400/Bg/Color | #F4CD5E |
| --palettesWarning400FontColor | Palettes/Warning/400/Font/Color | #6B4F00 |
| --palettesWarning500BgColor | Palettes/Warning/500/Bg/Color | #F0BE2E |
| --palettesWarning500FontColor | Palettes/Warning/500/Font/Color | #FDF7E6 |
| --palettesWarning600BgColor | Palettes/Warning/600/Bg/Color | #EDB000 |
| --palettesWarning600FontColor | Palettes/Warning/600/Font/Color | #FDF7E6 |
| --palettesWarning700BgColor | Palettes/Warning/700/Bg/Color | #C99600 |
| --palettesWarning700FontColor | Palettes/Warning/700/Font/Color | #FDF7E6 |
| --palettesWarning800BgColor | Palettes/Warning/800/Bg/Color | #A87D00 |
| --palettesWarning800FontColor | Palettes/Warning/800/Font/Color | #FDF7E6 |
| --palettesWarning900BgColor | Palettes/Warning/900/Bg/Color | #876400 |
| --palettesWarning900FontColor | Palettes/Warning/900/Font/Color | #FDF7E6 |
| --palettesDanger100BgColor | Palettes/Danger/100/Bg/Color | #FEE9E9 |
| --palettesDanger100FontColor | Palettes/Danger/100/Font/Color | #6D1212 |
| --palettesDanger200BgColor | Palettes/Danger/200/Bg/Color | #FCCBCB |
| --palettesDanger200FontColor | Palettes/Danger/200/Font/Color | #6D1212 |
| --palettesDanger300BgColor | Palettes/Danger/300/Bg/Color | #FAA2A2 |
| --palettesDanger300FontColor | Palettes/Danger/300/Font/Color | #6D1212 |
| --palettesDanger400BgColor | Palettes/Danger/400/Bg/Color | #F77777 |
| --palettesDanger400FontColor | Palettes/Danger/400/Font/Color | #6D1212 |
| --palettesDanger500BgColor | Palettes/Danger/500/Bg/Color | #F54E4E |
| --palettesDanger500FontColor | Palettes/Danger/500/Font/Color | #FEE9E9 |
| --palettesDanger600BgColor | Palettes/Danger/600/Bg/Color | #F32727 |
| --palettesDanger600FontColor | Palettes/Danger/600/Font/Color | #FEE9E9 |
| --palettesDanger700BgColor | Palettes/Danger/700/Bg/Color | #CF2121 |
| --palettesDanger700FontColor | Palettes/Danger/700/Font/Color | #FEE9E9 |
| --palettesDanger800BgColor | Palettes/Danger/800/Bg/Color | #AD1C1C |
| --palettesDanger800FontColor | Palettes/Danger/800/Font/Color | #FEE9E9 |
| --palettesDanger900BgColor | Palettes/Danger/900/Bg/Color | #8B1616 |
| --palettesDanger900FontColor | Palettes/Danger/900/Font/Color | #FEE9E9 |
Usage Guidelines
✓ DO
Use the 500 shade as the base brand color; 600–700 for hover/active.
✓ DO
Pair each background shade with its matched font color for accessible contrast.
✗ DON'T
Don't hardcode hex values — reference the palette tokens instead.
✗ DON'T
Don't use light shades (100–300) for text on white — contrast is too low.
Implementation
Values shown are the Diamond brand, Light mode defaults (the Figma file's default mode). Other brands (Amber, Opal) and Dark mode resolve to different values via the Color Theme & Component Brand collections.
/* Color palettes — generated from LUSTER Figma variables */
:root {
--palettesPrimary100: #F2EDFF;
--palettesPrimary200: #DFD4FF;
--palettesPrimary300: #C5B2FF;
--palettesPrimary400: #AB8FFF;
--palettesPrimary500: #916DFF;
--palettesPrimary600: #794DFF;
--palettesPrimary700: #6741D9;
--palettesPrimary800: #5637B5;
--palettesPrimary900: #452C91;
--palettesSecondary100: #F1F1F2;
--palettesSecondary200: #DEDDE0;
--palettesSecondary300: #C4C2C8;
--palettesSecondary400: #A9A6AE;
--palettesSecondary500: #8F8B96;
--palettesSecondary600: #76717F;
--palettesSecondary700: #64606C;
--palettesSecondary800: #54505A;
--palettesSecondary900: #434048;
--palettesSuccess100: #E6FAED;
--palettesSuccess200: #C2F2D4;
--palettesSuccess300: #91E8B2;
--palettesSuccess400: #5EDE8E;
--palettesSuccess500: #2ED46B;
--palettesSuccess600: #00CA4B;
--palettesSuccess700: #00AC40;
--palettesSuccess800: #008F35;
--palettesSuccess900: #00732B;
--palettesWarning100: #FDF7E6;
--palettesWarning200: #FBECC2;
--palettesWarning300: #F7DD91;
--palettesWarning400: #F4CD5E;
--palettesWarning500: #F0BE2E;
--palettesWarning600: #EDB000;
--palettesWarning700: #C99600;
--palettesWarning800: #A87D00;
--palettesWarning900: #876400;
--palettesDanger100: #FEE9E9;
--palettesDanger200: #FCCBCB;
--palettesDanger300: #FAA2A2;
--palettesDanger400: #F77777;
--palettesDanger500: #F54E4E;
--palettesDanger600: #F32727;
--palettesDanger700: #CF2121;
--palettesDanger800: #AD1C1C;
--palettesDanger900: #8B1616;
}