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.
- #00274C
- #FFCB05
- #9a3324
- #702082
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:
- #D8E1E9
- #e5e2d5
- #ddcdca
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 |
| | #00274C | main | A medium shade of an on-brand blue, ideally. Used for links by default | Theme |
| | #00162B | main-dark | A dark shade of the main hue, used for thematic backgrounds | Theme |
| | #D8E1E9 | main-light | A very light shade of the main hue, used for backgrounds primarily. | Theme |
| | #FFCB05 | second | Medium shade of what is usually a hot color like red, yellow, or orange | Theme |
| | #352a02 | second-dark | A darker shade of the secondary hue | Theme |
| | #e5e2d5 | second-light | A light shade of the secondary hue | Theme |
| | #9a3324 | third | The third brand/theme color in a medium shade | Theme |
| | #4d0c03 | third-dark | A dark shade of the third hue | Theme |
| | #ddcdca | third-light | A light shade of the third hue | Theme |
| | #702082 | 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 |