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.
- #5e7c84
- #887364
- #4c8350
- #7f4c83
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:
- #d5f6ff
- #ffe6d5
- #afe9af
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 |
| | #5e7c84 | main | A medium shade of an on-brand blue, ideally. Used for links by default | Theme |
| | #05252b | main-dark | A dark shade of the main hue, used for thematic backgrounds | Theme |
| | #d5f6ff | main-light | A very light shade of the main hue, used for backgrounds primarily. | Theme |
| | #887364 | second | Medium shade of what is usually a hot color like red, yellow, or orange | Theme |
| | #2d1d10 | second-dark | A darker shade of the secondary hue | Theme |
| | #ffe6d5 | second-light | A light shade of the secondary hue | Theme |
| | #4c8350 | third | The third brand/theme color in a medium shade | Theme |
| | #195122 | third-dark | A dark shade of the third hue | Theme |
| | #afe9af | third-light | A light shade of the third hue | Theme |
| | #7f4c83 | 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 |