Colors used in Bragi
Theme picker
Make your own theme by chosing a key color, contrast and style
Or use the Material Theme Builder and upload the tokens.css from the exported bundle here ⬇️
Light theme
Accent colors
The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.
The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.
The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element. The tertiary color role is left for teams to use at their discretion and is intended to support broader color expression in products.
Neutral colors
The neutral key color is used to derive surface color roles for surfaces and surface containers, as well as colors used for high emphasis text and icons.
The neutral variant key color is used to derive color roles for medium emphasis elements like text, icons, and component outlines.
Dark theme
Generated palette
These are a sample of the colors in the generated palette. Tonal values picked for different roles depends on contrast settings and style.
Brand Colors
The colors below are the brand colors used to represent the company and increase brand awareness and recognizability.
| Name | CMYK | RGB | Pantone | HEX |
|---|---|---|---|---|
| Primary | (34, 0, 42, 36) | 107, 163, 95 | 7489 C | #6BA35F |
| Secondary | (76, 57, 0, 83) | 10, 18, 42 | 7547 C | #0A122A |
| Tertiary | (49, 24, 0, 39) | 79,117,155 | 5405 C | #4F759B |
| Light | (0, 0, 0, 3) | 244,245,245 | 656 C | #F4F5F5 |
| Dark | (15, 0, 23, 94) | 11,13,10 | black 6c C | #0b0d0a |