uStyle styleguide

Primary palette _colors.scss

Our colours (with a "u", we're a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.

Best practices

Do not rely only on colour to provide information. A green circle means little, a green circle with "success" in the middle gives actual information.
Make sure your text is sufficiently contrasted against its background

c-uswitch-navy - #141424

c-darker-grey - #53535e

c-dark-grey - #7c7c84

c-grey - #a7a7ac

c-light-grey - #c6c6c8

c-super-light-grey - #e2e2e2

c-white - #fff

c-error-red - #d64226

c-success-green - #2aaa5b

c-blue-base - #84a6ff

c-blue-75 - #a3bcff

c-blue-50 - #c1d3ff

c-blue-25 - #e0e9ff

c-purple-base - #ac96de

c-purple-75 - #c1b0e6

c-purple-50 - #d5cbef

c-purple-25 - #eae5f7

c-green-base - #91ca50

c-green-75 - #acd77c

c-green-50 - #c8e4a7

c-green-25 - #e3f2d3

c-red-base - #ff7585

c-red-75 - #ff97a3

c-red-50 - #ffbac2

c-red-25 - #ffdde0

c-pink-base - #ff80da

c-pink-75 - #ffa0e3

c-pink-50 - #ffbfec

c-pink-25 - #ffdff6

c-yellow-base - #ffd555

c-yellow-75 - #ffdf80

c-yellow-50 - #ffeaaa

c-yellow-25 - #fff4d5

c-orange-base - #fa5

c-orange-75 - #ffbf80

c-orange-50 - #ffd4aa

c-orange-25 - #ffead5

c-black-base - #141424

c-black-75 - #4f4f5b

c-black-50 - #898991

c-black-25 - #c4c4c8

Secondary palette _colors.scss

c-light-yellow - #f7f146

c-light-orange - #f7c95a

c-light-red - #ff8a83

c-light-pink - #ff99e8

c-light-purple - #acb0ff

c-light-blue - #7edce9

c-light-green - #b6e554

c-dark-yellow - #ffd555

c-dark-orange - #fa5

c-dark-red - #fd7687

c-dark-pink - #ff75d4

c-dark-purple - #ac96de

c-dark-blue - #84a6ff

c-dark-green - #82ca50

Colours

Primary palette Github: _colors.scss