# Color

Source: `specs/ux/tokens/Light.tokens.json`.

## Primitives

Grades are ordered by the source token scale. Higher grades are generally darker or stronger; `100`, `200`, and `250` grades are used for soft surfaces and content backgrounds.

### Purple

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#F2E6FE` | `VariableID:14785:20445` |
| 150 | `#EDD8FF` | `VariableID:14785:20444` |
| 200 | `#E2CFFC` | `VariableID:14785:20443` |
| 300 | `#C3A6FF` | `VariableID:14738:52595` |
| 350 | `#B692FF` | `VariableID:14738:47566` |
| 400 | `#AA80FF` | `VariableID:17193:104` |
| 500 | `#7F30E3` | `VariableID:14738:47567` |
| 600 | `#7021D4` | `VariableID:17193:105` |
| 700 | `#6117BE` | `VariableID:17193:106` |
| 800 | `#574E68` | `VariableID:16969:8913` |
| 850 | `#433A54` | `VariableID:16969:8912` |
| 900 | `#2F2640` | `VariableID:14785:20459` |

### Orange

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#FFF2EA` | `VariableID:16287:46761` |
| 200 | `#FFE7D8` | `VariableID:16958:209052` |
| 250 | `#FFD9C0` | `VariableID:16958:209053` |
| 300 | `#FFAD46` | `VariableID:14753:264812` |
| 350 | `#FF973C` | `VariableID:14753:264811` |
| 500 | `#FF8533` | `VariableID:14753:264810` |
| 600 | `#FF761A` | `VariableID:14753:264809` |
| 700 | `#FF6700` | `VariableID:14753:264808` |
| 800 | `#6A3A1B` | `VariableID:16958:209051` |
| 850 | `#5A3117` | `VariableID:16958:209050` |
| 900 | `#4A2812` | `VariableID:16287:55174` |

### Green

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#E4F8EE` | `VariableID:16287:46406` |
| 200 | `#D4F4E4` | `VariableID:16968:8809` |
| 250 | `#BFF0D6` | `VariableID:16968:8810` |
| 300 | `#28F094` | `VariableID:14753:264801` |
| 350 | `#1FDA8F` | `VariableID:14753:264800` |
| 400 | `#1DCB74` | `VariableID:14753:264799` |
| 500 | `#1DAF66` | `VariableID:14753:264798` |
| 600 | `#199959` | `VariableID:14753:264797` |
| 700 | `#16844D` | `VariableID:14753:264796` |
| 800 | `#335A45` | `VariableID:16968:8808` |
| 850 | `#294A39` | `VariableID:16967:9628` |
| 900 | `#203C2E` | `VariableID:16287:46748` |

### Red

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#FEEAEE` | `VariableID:16287:115560` |
| 200 | `#FFDCE3` | `VariableID:16962:209056` |
| 250 | `#FFC9D3` | `VariableID:16967:8808` |
| 300 | `#FF8091` | `VariableID:14753:264819` |
| 350 | `#FF667B` | `VariableID:14753:264818` |
| 400 | `#FF4760` | `VariableID:14753:264817` |
| 500 | `#FA2B55` | `VariableID:14753:264816` |
| 600 | `#F90637` | `VariableID:14753:264815` |
| 700 | `#E00532` | `VariableID:14753:264814` |
| 800 | `#6D1E2D` | `VariableID:16967:8810` |
| 850 | `#5A1724` | `VariableID:16967:8809` |
| 900 | `#49121C` | `VariableID:16287:128898` |

### Blackberry

Primitive path: `primitives.blackberry (bg)`.

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#F2E6FE` | `VariableID:16969:8816` |
| 200 | `#E7D2FF` | `VariableID:16969:8817` |
| 250 | `#DBBEFF` | `VariableID:16969:8818` |
| 800 | `#473C60` | `VariableID:16969:8815` |
| 850 | `#3A3050` | `VariableID:16969:8814` |
| 900 | `#2F2640` | `VariableID:16969:8813` |

### Mint

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#D8FBFD` | `VariableID:16994:8813` |
| 200 | `#C5F6F9` | `VariableID:16994:8812` |
| 250 | `#AEEEF3` | `VariableID:16994:8811` |
| 300 | `#3BE2EA` | `VariableID:17193:274293` |
| 350 | `#20D5DE` | `VariableID:17193:274292` |
| 400 | `#05C7D1` | `VariableID:16994:8817` |
| 500 | `#059DAE` | `VariableID:16994:8816` |
| 600 | `#048B9B` | `VariableID:17193:274290` |
| 700 | `#037988` | `VariableID:17193:274291` |
| 800 | `#185457` | `VariableID:16994:8810` |
| 850 | `#114447` | `VariableID:16994:8809` |
| 900 | `#0A3638` | `VariableID:16994:8808` |

### Sky

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#D8F2FD` | `VariableID:16994:10472` |
| 200 | `#C4EAFE` | `VariableID:16994:10471` |
| 250 | `#AEDFFD` | `VariableID:16994:10470` |
| 300 | `#92D2F3` | `VariableID:17193:274297` |
| 350 | `#7BC6EC` | `VariableID:17193:274296` |
| 400 | `#67BAE4` | `VariableID:16994:10469` |
| 500 | `#0088C2` | `VariableID:16994:10468` |
| 600 | `#0078AD` | `VariableID:17193:274298` |
| 700 | `#006999` | `VariableID:17193:274299` |
| 800 | `#205265` | `VariableID:16994:10467` |
| 850 | `#174252` | `VariableID:16994:10466` |
| 900 | `#103341` | `VariableID:16994:10465` |

### River

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#D1ECFF` | `VariableID:16998:8942` |
| 200 | `#BFE3FF` | `VariableID:16998:8941` |
| 250 | `#A8D7FF` | `VariableID:16998:8940` |
| 400 | `#74C7FF` | `VariableID:17064:11310` |
| 500 | `#0098FE` | `VariableID:16998:8938` |
| 600 | `#0089E5` | `VariableID:17193:274322` |
| 700 | `#007ACC` | `VariableID:17193:274323` |
| 800 | `#225471` | `VariableID:16998:8937` |
| 850 | `#19435F` | `VariableID:16998:8936` |
| 900 | `#12354F` | `VariableID:16998:8935` |

### Lavender

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#EFECFF` | `VariableID:17064:10094` |
| 200 | `#E4DEFF` | `VariableID:17064:10093` |
| 250 | `#D7CEFF` | `VariableID:17064:10092` |
| 300 | `#B7B2FF` | `VariableID:17196:107` |
| 350 | `#A6A0FF` | `VariableID:17196:106` |
| 400 | `#968FFF` | `VariableID:17064:10095` |
| 500 | `#7158FE` | `VariableID:17064:10091` |
| 600 | `#6247F0` | `VariableID:17196:108` |
| 700 | `#5538DE` | `VariableID:17196:109` |
| 800 | `#433F66` | `VariableID:17064:10090` |
| 850 | `#353252` | `VariableID:17064:10089` |
| 900 | `#2A2843` | `VariableID:17064:10088` |

### Raspberry

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#FCE8F3` | `VariableID:17064:10139` |
| 200 | `#F9DCEC` | `VariableID:17064:10138` |
| 250 | `#F5CCE2` | `VariableID:17064:10137` |
| 300 | `#FFBCE1` | `VariableID:17196:115` |
| 350 | `#FFABD9` | `VariableID:17196:114` |
| 400 | `#FF99D1` | `VariableID:17064:10136` |
| 500 | `#DC1984` | `VariableID:17064:10135` |
| 600 | `#C91475` | `VariableID:17196:112` |
| 700 | `#B10F66` | `VariableID:17196:113` |
| 800 | `#6A3352` | `VariableID:17064:10134` |
| 850 | `#572843` | `VariableID:17064:10133` |
| 900 | `#471F34` | `VariableID:17064:10132` |

### Gray

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 100 | `#F6F6F9` | `VariableID:14753:252222` |
| 200 | `#E0E0EB` | `VariableID:14753:252220` |
| 250 | `#D1D1E0` | `VariableID:14753:252219` |
| 300 | `#C4C4D4` | `VariableID:14753:252218` |
| 350 | `#B6B6C9` | `VariableID:14753:264302` |
| 400 | `#9D9DAE` | `VariableID:14753:252217` |
| 500 | `#8F8FA3` | `VariableID:14753:252216` |
| 600 | `#777788` | `VariableID:14753:252215` |
| 650 | `#5F5F6D` | `VariableID:14738:52593` |
| 700 | `#53535F` | `VariableID:14753:252568` |
| 750 | `#474752` | `VariableID:14753:252594` |
| 800 | `#3B3B44` | `VariableID:14753:252595` |
| 900 | `#2F2F37` | `VariableID:14753:252596` |

### Black

| Grade | Hex | Figma Variable ID |
| ---: | --- | --- |
| 800 | `#242429` | `VariableID:14753:229418` |
| 900 | `#18181B` | `VariableID:14738:229179` |

### Alpha Light

Primitive path: `alpha.light`.

| Grade | Hex | Alpha | Figma Variable ID |
| ---: | --- | ---: | --- |
| 0 | `#FFFFFF` | `0` | `VariableID:13896:4433` |
| 5 | `#FFFFFF` | `0.05` | `VariableID:13896:4438` |
| 10 | `#FFFFFF` | `0.1` | `VariableID:13896:4437` |
| 20 | `#FFFFFF` | `0.2` | `VariableID:13896:4436` |
| 25 | `#FFFFFF` | `0.25` | `VariableID:13896:4434` |
| 50 | `#FFFFFF` | `0.5` | `VariableID:13896:4431` |
| 75 | `#FFFFFF` | `0.75` | `VariableID:13896:4432` |
| 80 | `#FFFFFF` | `0.8` | `VariableID:13896:4430` |
| 100 | `#FFFFFF` | `1` | `VariableID:13896:4435` |

### Alpha Dark

Primitive path: `alpha.dark`.

| Grade | Hex | Alpha | Figma Variable ID |
| ---: | --- | ---: | --- |
| 0 | `#000000` | `0` | `VariableID:13893:18632` |
| 5 | `#000000` | `0.05` | `VariableID:13895:3071` |
| 10 | `#000000` | `0.1` | `VariableID:13895:3196` |
| 20 | `#000000` | `0.2` | `VariableID:13895:3072` |
| 25 | `#000000` | `0.25` | `VariableID:13895:3082` |
| 50 | `#000000` | `0.5` | `VariableID:13895:3081` |
| 75 | `#000000` | `0.75` | `VariableID:13895:3080` |
| 80 | `#000000` | `0.8` | `VariableID:13895:3089` |
| 100 | `#000000` | `1` | `VariableID:13895:3088` |