Website and app design
Colours
The primary colours which are used on the WordPress websites are made up of colors of the crest excluding Cyan.
Hex: #004996
Hex: #fbba07
Hex: #e63027
Hex: #37474f
Hex: #0e7181
Full Palette
The colors palette follows the Tailwind approach which is literal color names (like red, blue, etc.) and a numeric scale (where 050 is light and 900 is dark) by default. The tailwind config file is available on request if needed.
- #E6F6FFwmp-blue-050
- #BAE3FFwmp-blue-100
- #7CC4FAwmp-blue-200
- #47A3F3wmp-blue-300
- #2186EBwmp-blue-400
- #0967D2wmp-blue-500
- #0552B5wmp-blue-600
- #004996wmp-blue-700
- #01337Dwmp-blue-800
- #002f62wmp-blue-900
- #fff9c4wmp-yellow-050
- #FFF3C4wmp-yellow-100
- #FCE588wmp-yellow-200
- #fbba07wmp-yellow-300
- #F7C948wmp-yellow-400
- #F0B429wmp-yellow-500
- #DE911Dwmp-yellow-600
- #CB6E17wmp-yellow-700
- #B44D12wmp-yellow-800
- #8D2B0Bwmp-yellow-900
- #E0FCFFwmp-cyan-050
- #BEF8FDwmp-cyan-100
- #87EAF2wmp-cyan-200
- #54D1DBwmp-cyan-300
- #38BEC9wmp-cyan-400
- #2CB1BCwmp-cyan-500
- #14919Bwmp-cyan-600
- #0e7181wmp-cyan-700
- #0A6C74wmp-cyan-800
- #044E54wmp-cyan-900
- #F5F7FAwmp-grey-050
- #ECEFF1wmp-grey-100
- #CBD2D9wmp-grey-200
- #9AA5B1wmp-grey-300
- #7B8794wmp-grey-400
- #616E7Cwmp-grey-500
- #52606Dwmp-grey-600
- #37474fwmp-grey-700
- #323F4Bwmp-grey-800
- #2A373Ewmp-grey-900
- #fff5f5wmp-red-050
- #FFBDBDwmp-red-100
- #FF9B9Bwmp-red-200
- #F86A6Awmp-red-300
- #e63027wmp-red-400
- #E12D39wmp-red-500
- #CF1124wmp-red-600
- #AB091Ewmp-red-700
- #8A041Awmp-red-800
- #610316wmp-red-900
- #f0fff4wmp-teal-050
- #C6F7E2wmp-teal-100
- #8EEDC7wmp-teal-200
- #65D6ADwmp-teal-300
- #35735Dwmp-teal-400
- #275343wmp-teal-500
- #199473wmp-teal-600
- #147D64wmp-teal-700
- #0C6B58wmp-teal-800
- #014D40wmp-teal-900
- #F5E1F7wmp-magenta-050
- #ECBDF2wmp-magenta-100
- #CE80D9wmp-magenta-200
- #BB61C7wmp-magenta-300
- #AD4BB8wmp-magenta-400
- #A23DADwmp-magenta-500
- #90279Cwmp-magenta-600
- #7D1C72wmp-magenta-700
- #671270wmp-magenta-800
- #4E0754wmp-magenta-900
- #fffwmp-white
- #000wmp-black
The color combination need to have at least a contrast off 4:5:1. As this is the AA standard a good site to use to work this out is https://colorable.jxnblk.com/
Header
The page header consist of placing the site secondary logo/crest to the left of the header. (This is available on request). Followed by 1px line next to the logo. Then the name of the website/app. The background uses the brand blue color #004996 the header also has a border bottom of 4px with the brand amber color of #fbba07.
Sample Headers
Fonts
The fonts which we suggest to use are:
- Helvetica
- Arial
- Open Sans
Where possible we use rem as the the font sizing metric. The primary color for body text is #37474f.
Links
For hyperlinks we use the following css property’s.
a,
a:link,
a:visited{color: #0e7181; text-decoration: underline; background-color: transparent;}
a:hover { color: #37474f; background-color:#fbba07; text-decoration: none;}
a:active,
a:focus {background-color: #fbba07; color: #37474f; boxShadow: 0 4px #212b32; outline: 0 4px #374e34;}