Argos Style - Design Guidelines
Colour Pallet
ACCESIBLE PALETTE
| Colour | Roles | Variable | Hex | RGB | Background |
|---|---|---|---|---|---|
| Accessible Red | $argos-red-accessible |
#D42114 | (238,49,36) | ||
| Rust | $argos-rust |
#C7390E | (199,57,14) | ||
| Green Primary | Primary | $argos-green-primary |
#008844 | (0,136,68) | |
| Green Kelly | Hover Only | $argos-green-kelly |
#00AA50 | (170,80,80) | |
| Navy Dark | On Hover | $argos-navy-dark |
#083467 | (8,52,103) | |
| Cobalt Blue | Links | $argos-blue-cobalt |
#0C509F | (12,80,100) | |
| Med. Cobalt | $argos-blue-cobalt-med |
#005BAA | (0,91,170) | ||
| Light Cobalt | $argos-blue-cobalt-light |
#1268B3 | (18,104,179) | ||
| Cerulean | Icon Btns | $argos-cerulean |
#3777BC | (55,119,188) | |
| Light Cerulean | $argos-cerulean-light |
#6699CC | (102,153,204) | ||
| Mauve | $argos-mauve |
#781F74 | (120,31,116) | ||
| Mauve Medium | $argos-mauve-med |
#913493 | (145,52,147) | ||
| Mauve Light | $argos-mauve-light |
#AA4E9E | (170,78,158) | ||
| Raw Sienna | $argos-raw-sienna |
#95664C | (149,102,76) |
NON-ACCESIBLE PALETTE
| Colour | Roles | Variable | Hex | RGB | Background |
|---|---|---|---|---|---|
| Argos Red | Argos Red | $argos-red |
#EE3124 | (238,49,36) | |
| Rose Dark | $argos-rose-dark |
#F04E6E | (240,78,110) | ||
| Rose | $argos-rose |
#F26F88 | (242,111,136) | ||
| Rose Light | $argos-rose-light |
#E892A4 | (232,146,164) | ||
| Lemon Dark | $argos-lemon-dark |
#FFDA00 | (255,218,0) | ||
| Lemon | $argos-lemon |
#FFE500 | (255,229,0) | ||
| Lemon Light | $argos-lemon-light |
#FFF200 | (255,242,0) | ||
| Teal | On Press | $argos-teal |
#06998C | (6,153,140) | |
| Teal Light | $argos-teal-light |
#00B5A3 | (0,181,163) | ||
| Aquamarine | $argos-aquamarine |
#43C1C5 | (67,193,197) | ||
| Blue True | $argos-blue-true |
#0089BC | (0,137,188) | ||
| Blue Jewel | $argos-blue-jewel |
#009FD0 | (0,159,208) | ||
| Cyan | $argos-cyan |
#00ADE7 | (0,173,231) | ||
| Argos Red | $argos-red |
#EE3124 | (238,49,36) | ||
| Orange Red | $argos-orange-red |
#F05325 | (240,83,37) | ||
| Orange Cadmium | $argos-orange-cadmium |
#F37325 | (243,115,37) | ||
| Orange Cadmium Light | $argos-orange-cadmium-light |
#F7941D | (247,148,29) | ||
| Lime | $argos-lime |
#97C21B | (151,194,27) | ||
| Lime Light | $argos-lime-light |
#BFD730 | (191,215,48) | ||
| Gold Dark | $argos-gold-dark |
#917B4C | (145,123,76) | ||
| Silver | $argos-silver |
#84888B | (132,136,139) | ||
| Stone | Label | $argos-stone |
#777777 | (119,119,119) |
BLACK & WHITES PALETTE
| Colour | Roles | Variable | Hex | RGB | Background |
|---|---|---|---|---|---|
| White Grey | Background | $argos-white-grey |
#FAFAFA | (250,250,250) | |
| Grey Light | $argos-grey-light |
#F5F5F5 | (245,245,245) | ||
| Grey | Border | $argos-grey |
#E4E4E4 | (228,228,228) | |
| Grey Medium | Headers | $argos-grey-medium |
#6E6B6C | (255,229,0) | |
| Grey Dark | Body Copy | $argos-grey-dark |
#262626 | (38,38,38) | |
| Charcoal | Inputs | $argos-charcoal |
#333333 | (51,51,51) | |
| Charcoal Medium | Product Name | $argos-charcoal-medium |
#210707 | (33,7,7) | |
| Black | H1 / H2 | $argos-black |
#000000 | (0,0,0) |