Color
Color plays a big part in bringing a brand together. Here is the palette of the base scheme, right next to each other. If you can't feel a brand impression or at least get a hint at a mood, it might be worthwhile to revisit the scheme.
- #0081a7
- #f07167
- #00afb9
- #6100a7
Often the brand palette is used more subtly, via the light versions of the brand shades. These washed-out or pastel tones should also work together to give you a hint of the brand:
- #ccf4ff
- #ffcfcc
- #ccfcff
Here are all the brand colors, broken out in logical groupings.
| Palette | Value | Name | Description | Category |
|---|---|---|---|---|
| | #222 | black | Black or near-black, typically used for body text against a white background. | Monochrome |
| | #555 | grey-dark | A dark grey used for less text contrast in places, and some light-on-dark sections | Monochrome |
| | #aaa | grey | A medium grey has lots of utility throughout; borders, text, everything | Monochrome |
| | #f7f7f7 | grey-light | Especially used for alternating sections with white background, but also versatile | Monochrome |
| | #fff | white | The one, the only, white. | Monochrome |
| | #0081a7 | main | A medium shade of an on-brand blue, ideally. Used for links by default | Theme |
| | #002733 | main-dark | A dark shade of the main hue, used for thematic backgrounds | Theme |
| | #ccf4ff | main-light | A very light shade of the main hue, used for backgrounds primarily. | Theme |
| | #f07167 | second | Medium shade of what is usually a hot color like red, yellow, or orange | Theme |
| | #331716 | second-dark | A darker shade of the secondary hue | Theme |
| | #ffcfcc | second-light | A light shade of the secondary hue | Theme |
| | #00afb9 | third | The third brand/theme color in a medium shade | Theme |
| | #003033 | third-dark | A dark shade of the third hue | Theme |
| | #ccfcff | third-light | A light shade of the third hue | Theme |
| | #6100a7 | accent | A special color, often a medium shade. If the brand has a purple or teal, it is great here | Theme |
| | #004085 | status | Text color for status alerts | UI |
| | #cce5ff | status-background | Background color for status alerts | UI |
| | #856404 | warning | Text color for warning alerts | UI |
| | #fff3cd | warning-background | Background color for warning alerts | UI |
| | #721c24 | error | Text color for error alerts | UI |
| | #f8d7da | error-background | Background color for error alerts | UI |