WIITY.AI — COLOUR SPECIFICATIONS
All conversions are calculated from the hex value. For print, specify the Pantone
spot; the CMYK figures are conversions and will shift on uncoated stock.

SURFACES
  Navy     #0B1020   RGB 11 16 32   CMYK 66 50 0 87   Pantone 5255 C   Primary dark surface
  Navy 2   #121A33   RGB 18 26 51   CMYK 65 49 0 80                    Cards on dark
  Ice      #EEF3FB   RGB 238 243 251   CMYK 5 3 0 2       Pantone 656 C    Primary light surface
  White    #FFFFFF   RGB 255 255 255   CMYK 0 0 0 0                        Cards on light

RATIO RULE
  70% surface / 25% counter-surface / 5% signal.
  If a signal colour is more than 5% of a layout, something is shouting.

==========================================================================
COBALT  ·  Pantone 2727 C
==========================================================================
Role: Brand primary. The only colour that fills a button or colours a heading word.

  Step   HEX       RGB              CMYK             Contrast on Navy / on Ice
  100    #DCE5F9   220 229 249      12 8 0 2         15:1      1.1:1
  200    #B8CCF6   184 204 246      25 17 0 4        11.7:1    1.4:1
  300    #8AB0F5   138 176 245      44 28 0 4        8.7:1     2:1
  400    #5C93F6   92 147 246       63 40 0 4        6.3:1     2.7:1
  500    #3B82F6   59 130 246       76 47 0 4        5.1:1     3.3:1
  600    #2C68E7   44 104 231       81 55 0 9        3.8:1     4.4:1
  700    #1D4ED8   29 78 216        87 64 0 15       2.8:1     6:1
  800    #142F7C   20 47 124        84 62 0 51       1.6:1     10.9:1
  900    #0B1020   11 16 32         66 50 0 87       1:1       17:1

  500 is the Pantone match and the value to use on screen.
  700 (#1D4ED8) is the text-safe step for type on Ice.
  CSS: var(--cobalt-500) ... var(--cobalt-900)

==========================================================================
ACID LIME  ·  Pantone 380 C
==========================================================================
Role: Live / running. Dots, tints and progress fills only — never text, never a button.

  Step   HEX       RGB              CMYK             Contrast on Navy / on Ice
  100    #EAF3E7   234 243 231      4 0 5 5          16.7:1    1:1
  200    #E3F3C9   227 243 201      7 0 17 5         16.2:1    1.1:1
  300    #D9F397   217 243 151      11 0 38 5        15.5:1    1.1:1
  400    #CFF267   207 242 103      14 0 57 5        14.9:1    1.1:1
  500    #C8F250   200 242 80       17 0 67 5        14.7:1    1.2:1
  600    #ACD438   172 212 56       19 0 74 17       11:1      1.5:1
  700    #8FB520   143 181 32       21 0 82 29       7.9:1     2.1:1
  800    #4F6418   79 100 24        21 0 76 61       2.9:1     5.9:1
  900    #0F120F   15 18 15         17 0 17 93       1:1       16.9:1

  500 is the Pantone match and the value to use on screen.
  700 (#8FB520) is the text-safe step for type on Ice.
  CSS: var(--acid-lime-500) ... var(--acid-lime-900)

==========================================================================
MAGENTA  ·  Pantone 806 C
==========================================================================
Role: "For you" — needs a human. Dots and tints only.

  Step   HEX       RGB              CMYK             Contrast on Navy / on Ice
  100    #F0DDF1   240 221 241      0 8 0 5          14.7:1    1.2:1
  200    #F3BDE1   243 189 225      0 22 7 5         11.9:1    1.4:1
  300    #F58BC8   245 139 200      0 43 18 4        8.5:1     2:1
  400    #FC5BB4   252 91 180       0 64 29 1        6.6:1     2.6:1
  500    #FF3FA4   255 63 164       0 75 36 0        5.9:1     2.9:1
  600    #E22B8F   226 43 143       0 81 37 11       4.5:1     3.8:1
  700    #C4177A   196 23 122       0 88 38 23       3.4:1     5:1
  800    #6F1147   111 17 71        0 85 36 56       1.7:1     10.2:1
  900    #1A0B14   26 11 20         0 58 23 90       1:1       17.1:1

  500 is the Pantone match and the value to use on screen.
  700 (#C4177A) is the text-safe step for type on Ice.
  CSS: var(--magenta-500) ... var(--magenta-900)

==========================================================================
TERRACOTTA  ·  Pantone 7580 C
==========================================================================
Role: The only alert colour. Expired, overdue, failed.

  Step   HEX       RGB              CMYK             Contrast on Navy / on Ice
  100    #E9E2E6   233 226 230      0 3 1 9          14.9:1    1.1:1
  200    #E1C9C7   225 201 199      0 11 12 12       12.1:1    1.4:1
  300    #D6A6A0   214 166 160      0 22 25 16       8.9:1     1.9:1
  400    #CB8272   203 130 114      0 36 44 20       6.3:1     2.7:1
  500    #C2664F   194 102 79       0 47 59 24       4.8:1     3.6:1
  600    #A85440   168 84 64        0 50 62 34       3.6:1     4.7:1
  700    #8E4231   142 66 49        0 54 65 44       2.7:1     6.3:1
  800    #54291F   84 41 31         0 51 63 67       1.5:1     11:1
  900    #1A100D   26 16 13         0 38 50 90       1:1       16.8:1

  500 is the Pantone match and the value to use on screen.
  700 (#8E4231) is the text-safe step for type on Ice.
  CSS: var(--terracotta-500) ... var(--terracotta-900)

==========================================================================
AMBER  ·  Pantone 143 C
==========================================================================
Role: Reserved for a future feature line. Not in current UI.

  Step   HEX       RGB              CMYK             Contrast on Navy / on Ice
  100    #EDE9E4   237 233 228      0 2 4 7          15.7:1    1.1:1
  200    #ECDBC1   236 219 193      0 7 18 7         13.9:1    1.2:1
  300    #E9C88A   233 200 138      0 14 41 9        11.8:1    1.4:1
  400    #E7B060   231 176 96       0 24 58 9        9.7:1     1.7:1
  500    #E5A33A   229 163 58       0 29 75 10       8.7:1     2:1
  600    #CC8D25   204 141 37       0 31 82 20       6.7:1     2.5:1
  700    #B3760F   179 118 15       0 34 92 30       5:1       3.4:1
  800    #67450C   103 69 12        0 33 88 60       2.2:1     7.7:1
  900    #1A1408   26 20 8          0 23 69 90       1:1       16.4:1

  500 is the Pantone match and the value to use on screen.
  700 (#B3760F) is the text-safe step for type on Ice.
  CSS: var(--amber-500) ... var(--amber-900)

==========================================================================
TEAL  ·  Pantone 3268 C
==========================================================================
Role: Reserved for a future feature line. Not in current UI.

  Step   HEX       RGB              CMYK             Contrast on Navy / on Ice
  100    #D7ECEE   215 236 238      10 1 0 7         15.4:1    1.1:1
  200    #B3E0DF   179 224 223      20 0 0 12        13.2:1    1.3:1
  300    #83D0C9   131 208 201      37 0 3 18        10.7:1    1.6:1
  400    #52C1B0   82 193 176       58 0 9 24        8.7:1     2:1
  500    #2BB5A0   43 181 160       76 0 12 29       7.4:1     2.3:1
  600    #219886   33 152 134       78 0 12 40       5.3:1     3.2:1
  700    #177A6C   23 122 108       81 0 11 52       3.6:1     4.7:1
  800    #104943   16 73 67         78 0 8 71        1.9:1     9.2:1
  900    #08181A   8 24 26          69 8 0 90        1:1       16.3:1

  500 is the Pantone match and the value to use on screen.
  700 (#177A6C) is the text-safe step for type on Ice.
  CSS: var(--teal-500) ... var(--teal-900)

==========================================================================
SLATE  ·  Pantone 5285 C
==========================================================================
Role: Secondary text, muted UI, hairlines.

  Step   HEX       RGB              CMYK             Contrast on Navy / on Ice
  100    #E2E7F2   226 231 242      7 5 0 5          15.3:1    1.1:1
  200    #D0D6E5   208 214 229      9 7 0 10         13:1      1.3:1
  300    #B6BED2   182 190 210      13 10 0 18       10.2:1    1.7:1
  400    #9EA6C0   158 166 192      18 14 0 25       7.8:1     2.2:1
  500    #8A94B0   138 148 176      22 16 0 31       6.3:1     2.7:1
  600    #747E9A   116 126 154      25 18 0 40       4.7:1     3.6:1
  700    #5E6883   94 104 131       28 21 0 49       3.4:1     5:1
  800    #353C52   53 60 82         35 27 0 68       1.7:1     9.8:1
  900    #0B1020   11 16 32         66 50 0 87       1:1       17:1

  500 is the Pantone match and the value to use on screen.
  700 (#5E6883) is the text-safe step for type on Ice.
  CSS: var(--slate-500) ... var(--slate-900)

SIGNAL ROLES — DO NOT MIX THESE UP
  Cobalt      the one primary action, links, active states, charts
  Acid lime   live / running / complete
  Magenta     "for you" — a human is needed
  Terracotta  the only alert: expired, overdue, failed
  Slate       secondary text and hairlines
  Amber, Teal reserved; not in current UI

ACCESSIBILITY
  Body text must clear 4.5:1. Headline-scale type may sit at 3:1.
  On Ice, use the 700 step for any coloured type.
  Lime and Magenta never carry text on either surface.
