Difference between revisions of "Branding"
Jump to navigation
Jump to search
(→Icons) |
|||
| (9 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
==Palette== | ==Palette== | ||
| − | + | {| class="wikitable" style="vertical-align:bottom;" | |
| + | |- style="font-weight:bold;" | ||
| + | ! Color Name | ||
| + | ! Dark Blue | ||
| + | ! Light Blue | ||
| + | ! Dark Grey | ||
| + | ! Light Grey | ||
| + | ! Gold | ||
| + | ! Orange | ||
| + | |- | ||
| + | | style="font-weight:bold;" | Color | ||
| + | | style="background-color:#00234F;" | | ||
| + | | style="background-color:#2E7BB1;" | | ||
| + | | style="background-color:#818283;" | | ||
| + | | style="background-color:#DDDEDF;" | | ||
| + | | style="background-color:#F3AB0D;" | | ||
| + | | style="background-color:#DE7904;" | | ||
| + | |- | ||
| + | | style="font-weight:bold;" | Hex Code | ||
| + | | #00234F | ||
| + | | #2E7BB1 | ||
| + | | #818283 | ||
| + | | #DDDEDF | ||
| + | | #F3AB27 | ||
| + | | #DE7904 | ||
| + | |- | ||
| + | | style="font-weight:bold;" | RGB | ||
| + | | 0,35,79 | ||
| + | | 46,123,177 | ||
| + | | 129,130,131 | ||
| + | | 221,222,223 | ||
| + | | 243,171,39 | ||
| + | | 222,121,4 | ||
| + | |} | ||
===Inspiration=== | ===Inspiration=== | ||
| Line 14: | Line 47: | ||
{| class="wikitable sortable" | {| class="wikitable sortable" | ||
| − | |- style="vertical-align:bottom;" | + | |- style="font-weight:bold; vertical-align:bottom;" |
! University | ! University | ||
! Dark Blue | ! Dark Blue | ||
| Line 52: | Line 85: | ||
| #9D9D9D | | #9D9D9D | ||
| #EBEEEE | | #EBEEEE | ||
| + | | style="vertical-align:bottom;" | | ||
| style="vertical-align:bottom;" | #EC7300 | | style="vertical-align:bottom;" | #EC7300 | ||
| − | |||
|- style="vertical-align:bottom;" | |- style="vertical-align:bottom;" | ||
| Rice | | Rice | ||
| Line 61: | Line 94: | ||
| #E0E2E6 | | #E0E2E6 | ||
| #E9A139 | | #E9A139 | ||
| − | | | + | | |
|- style="vertical-align:bottom;" | |- style="vertical-align:bottom;" | ||
| Georgetown | | Georgetown | ||
| Line 70: | Line 103: | ||
| | | | ||
| | | | ||
| − | |- style="vertical-align:bottom;" | + | |- style="font-weight:bold; vertical-align:bottom;" |
| − | | | + | | Average |
| #00234F | | #00234F | ||
| #2E7BB1 | | #2E7BB1 | ||
| #818283 | | #818283 | ||
| #DDDEDF | | #DDDEDF | ||
| − | | # | + | | #F3AB27 |
| − | | # | + | | #DE7904 |
|} | |} | ||
Note that UBC has hex codes and RBG codes that don't match. I used the hex codes. A spreadsheet doing the math is in E:\projects\WebDesign\Colors.xlsx | Note that UBC has hex codes and RBG codes that don't match. I used the hex codes. A spreadsheet doing the math is in E:\projects\WebDesign\Colors.xlsx | ||
| + | |||
| + | ==Icons== | ||
| + | |||
| + | There are some very good icon repositories online. I used https://remixicon.com/, which provides icons under the Apache license. Specifically, I chose (show in 48px): | ||
| + | *[[File:Book-open-fill.svg]] book-open | ||
| + | *[[File:user-3-fill.svg]] user-3 | ||
| + | *[[File:Settings-5-fill.svg]] settings-5 | ||
==See also== | ==See also== | ||
The [[McNair Center Branding]] used a variant on the Baker Institute's colors, which had obvious issues. | The [[McNair Center Branding]] used a variant on the Baker Institute's colors, which had obvious issues. | ||
Latest revision as of 12:04, 18 September 2020
Contents
Palette
| Color Name | Dark Blue | Light Blue | Dark Grey | Light Grey | Gold | Orange |
|---|---|---|---|---|---|---|
| Color | ||||||
| Hex Code | #00234F | #2E7BB1 | #818283 | #DDDEDF | #F3AB27 | #DE7904 |
| RGB | 0,35,79 | 46,123,177 | 129,130,131 | 221,222,223 | 243,171,39 | 222,121,4 |
Inspiration
The colors are inspired in part by my universities:
- UCL is orange and black: https://www.ucl.ac.uk/cam/brand/guidelines/colour
- UBC is blue and grey: https://brand.ubc.ca/guidelines/downloads/ubc-colour-and-fonts/
- U.C. Berkeley is blue and gold: https://brand.berkeley.edu/colors/
- Imperial College London is blue and grey: https://www.imperial.ac.uk/brand-style-guide/visual-identity/brand-colours/
- Rice University is blue and grey: https://brand.rice.edu/design-elements
- Georgetown University is blue and grey: https://www.georgetown.edu/color-guide/
| University | Dark Blue | Light Blue | Dark Grey | Light Grey | Gold | Orange |
|---|---|---|---|---|---|---|
| UCL | #EA7600 | |||||
| UBC | #002145 | #00A7E1 | ||||
| Berkeley | #003262 | #3B7EA1 | #888888 | #EEEEEE | #FDB515 | #C4820E |
| Imperial | #002147 | #003E74 | #9D9D9D | #EBEEEE | #EC7300 | |
| Rice | #00205B | #ADC7DC | #7C7E7F | #E0E2E6 | #E9A139 | |
| Georgetown | #041E42 | #003DA5 | #63666A | #BBBCBC | ||
| Average | #00234F | #2E7BB1 | #818283 | #DDDEDF | #F3AB27 | #DE7904 |
Note that UBC has hex codes and RBG codes that don't match. I used the hex codes. A spreadsheet doing the math is in E:\projects\WebDesign\Colors.xlsx
Icons
There are some very good icon repositories online. I used https://remixicon.com/, which provides icons under the Apache license. Specifically, I chose (show in 48px):
book-open
user-3
settings-5
See also
The McNair Center Branding used a variant on the Baker Institute's colors, which had obvious issues.
