Foundations
Color
A color palette for 8Bit Loot Interfaces
Overview
The 8Bit Loot Design System helps you apply color to components in a meaningful way. A limited selection of accessible colors, and tokenized color palettes help keep digital products colorful, yet accessible.
Palette
A collection of core colors and tints used as interface elements for 8Bit Loot.
8Bit Loot comes with two palette modes:
- Light (default)
- Dark
Primary
| Shades | Light Mode | Dark Mode |
|---|---|---|
| P-050 | #F9F1EC - AAA | #0F0C0A - AAA |
| P-100 | #F0DCD1 - AAA | #352217 - AAA |
| P-200 | #ECCFBD - AAA | #734326 - AAA |
| P-300 | #E19D73 - AAA | #A75A2A - AAA |
| P-400 | #E18E5C - AAA | #D96A26 - AA |
| P-500 | #D96A26 - AAA | #E18E5C |
| P-600 | #A75A2A - AA | #E19D73 |
| P-700 | #734326 | #ECCFBD |
| P-800 | #352217 | #F0DCD1 |
| P-900 | #0F0C0A | #F9F1EC |
Neutral
| Shades | Light Mode | Dark Mode |
|---|---|---|
| N-000 | #FFFFFF- AAA | #000000- AAA |
| N-050 | #F8F8F8- AAA | #141414- AAA |
| N-100 | #EBEBEB- AAA | #2F2F2F- AAA |
| N-200 | #D0D0D0- AAA | #4A4A4A- AAA |
| N-300 | #B5B5B5- AAA | #656565- AAA |
| N-400 | #9A9A9A- AAA | #808080- AA |
| N-500 | #808080- AA | #9A9A9A |
| N-600 | #656565 | #B5B5B5 |
| N-700 | #4A4A4A | #D0D0D0 |
| N-800 | #2F2F2F | #EBEBEB |
| N-900 | #141414 | #F8F8F8 |
| N-1000 | #000000 | #FFFFFF |
Information
| Shades | Light Mode | Dark Mode |
|---|---|---|
| I-050 | #DBFBFB - AAA | #054B61 - AAA |
| I-300 | #49DBDB - AAA | #0889A6 - AAA |
| I-600 | #0889A6 | #49DBDB |
| I-800 | #DBFBFB | #DBFBFB |
Warning
| Shades | Light Mode | Dark Mode |
|---|---|---|
| W-050 | #FEF8D8 - AAA | #7C5E03- AAA |
| W-300 | #DBC140 - AAA | #AE9204 - AA |
| W-600 | #AE9204 | #DBC140 |
| W-800 | #7C5E03 | #FEF8D8 |
Success
| Shades | Light Mode | Dark Mode |
|---|---|---|
| W-050 | #E3FCE3 - AAA | #035403 - AAA |
| W-300 | #28E028 - AAA | #08A008 - AA |
| W-600 | #08A008 | #28E028 |
| W-800 | #035403 | #E3FCE3 |
Error / Destructive
| Shades | Light Mode | Dark Mode |
|---|---|---|
| E-050 | #FCD9D9 - AAA | #940000 - AAA |
| E-300 | #EB7171 - AAA | #DF0C0C - AA |
| E-600 | #DF0C0C | #EB7171 |
| E-800 | #940000 | #FCD9D9 |
Overview
8Bit Loot must comply with all web accessibility standards.
8Bit Loot design system uses various forms to ensure combinations that provide enough contrast to be accessible and recommends complying with the minimum contrast ratios specified by WCAG 2.1 Level AA for text, icons, other indicators, and background colors.
check_circle
Do
Minimal contrast ratio: 4.5
Static content N-900
Action content P-600
cancel
Don't
Fail - low contrast
N-500 or below
P-500 or below