Brand Guidelines
Colours
Our colours are broken down into the colours of our logo, text colours, primary and secondary. For most cases our primary colours should be all you will need.
Logo Colours
Bloody Pigeon
Hex: #DA0D15 | RGB: 85, 5, 8 | CMYK: 0, 94, 90, 15
Dead Pigeon
Hex: #9A1921 | RGB: 60, 10, 13 | CMYK: 0, 84, 79, 40
When to use
The two colours of the Codeweavers logo, should only be used within approved illustrations and designs.;
Text Colours
cw-grey-100
Use as main text colour and for CTAs
Hex: #222222 | RGB: 13, 13, 13 | CMYK: 0, 0, 0, 87
cw-grey-300
Use for label text
Hex: #636C77 | RGB: 99, 108, 119 | CMYK: 17, 9, 0, 53
cw-grey-400
Used for disabled text
Hex: #A9B0BB | RGB: 169, 176, 187 | CMYK: 10, 6, 0, 27
Links
cw-link
Use for the main CTAs
Hex: #196AE3 | RGB: 25, 106, 227 | CMYK: 89, 53, 0, 11
cw-link-hover
Use for main CTAs on hover/focused/active
Hex: #0F55C9 | RGB: 15, 85, 201 | CMYK: 93, 58, 0, 21
cw-grey-200
Use for secondary CTAs
Hex: #414A54 | RGB: 65, 74, 84 | CMYK: 23, 12, 0, 67
cw-grey-100
Use for secondary CTA on hover/focused/active
Hex: #222222 | RGB: 34, 34, 34 | CMYK: 0, 0, 0, 87
When to use
The primary colours should be all you need, however they can be used alongside our secondary colours.;
Notifications
cw-danger
Use for error messages
Hex: #D0021B | RGB: 208, 2, 27 | CMYK: 0, 99, 87, 18
cw-warning
Use for warning messages
Hex: #FBB828 | RGB: 251, 184, 40 | CMYK: 0, 27, 84, 2
cw-success
Use for success messages
Hex: #16CF82 | RGB: 22, 207, 130 | CMYK: 89, 0, 37, 19
cw-info
Use for generic messages or information
Hex: #8DD2FF | RGB: 141, 210, 255 | CMYK: 45, 18, 0, 0
Greys
cw-grey-100
Use for secondary CTA on hover/focused/active and main text
Hex: #222222 | RGB: 34, 34, 34 | CMYK: 0, 0, 0, 87
cw-grey-200
Use for secondary CTAs
Hex: #414A54 | RGB: 65, 74, 84 | CMYK: 23, 12, 0, 67
cw-grey-300
Use for label text
Hex: #636C77 | RGB: 99, 108, 119 | CMYK: 17, 9, 0, 53
cw-grey-400
Use for input borders & disabled text
Hex: #A9B0BB | RGB: 169, 176, 187 | CMYK: 10, 6, 0, 27
cw-grey-500
Use for box borders & disabled backgrounds
Hex: #E9EDF1 | RGB: 233, 237, 241 | CMYK: 3, 2, 0, 5
cw-grey-600
Use for box backgrounds
Hex: #F4F6F8 | RGB: 244, 246, 248 | CMYK: 2, 1, 0, 3