--- url: /api/css/primitives.md --- # CSS: primitives `.instui-bg-primitive-color-white` — Opt-in utility classes for the raw primitive palette: `.instui-bg-`/`fg-`/`border-primitive-color-` paint a colour from the primitive colour tokens, plus `font-family`/`font-weight` utilities for the primitive font tokens. Kept out of the semantic utilities so overrides there stay semantic-only. **Group:** Plugins · **Source:** [generate.ts](https://github.com/thedannywahl/pantoken/blob/main/plugins/pantoken/primitives/scripts/generate.ts) ## Usage ```css @import "@pantoken/plugin-primitives/primitives.css"; ``` ## Examples ```html

Primitive-painted box.

``` ## Tokens consumed | Token | Type | Value | | --- | --- | --- | | `--instui-primitive-color-aurora-aurora10` | `` | `#D8FCEB` | | `--instui-primitive-color-aurora-aurora100` | `` | `#048660` | | `--instui-primitive-color-aurora-aurora110` | `` | `#057C58` | | `--instui-primitive-color-aurora-aurora120` | `` | `#007352` | | `--instui-primitive-color-aurora-aurora130` | `` | `#026648` | | `--instui-primitive-color-aurora-aurora140` | `` | `#035A40` | | `--instui-primitive-color-aurora-aurora150` | `` | `#014B34` | | `--instui-primitive-color-aurora-aurora160` | `` | `#01442F` | | `--instui-primitive-color-aurora-aurora170` | `` | `#033B29` | | `--instui-primitive-color-aurora-aurora180` | `` | `#0D271D` | | `--instui-primitive-color-aurora-aurora190` | `` | `#051F15` | | `--instui-primitive-color-aurora-aurora20` | `` | `#C8F3DF` | | `--instui-primitive-color-aurora-aurora200` | `` | `#00190F` | | `--instui-primitive-color-aurora-aurora30` | `` | `#B2EED3` | | `--instui-primitive-color-aurora-aurora40` | `` | `#58E1AD` | | `--instui-primitive-color-aurora-aurora50` | `` | `#2BC692` | | `--instui-primitive-color-aurora-aurora60` | `` | `#0ABC88` | | `--instui-primitive-color-aurora-aurora70` | `` | `#03A879` | | `--instui-primitive-color-aurora-aurora80` | `` | `#06986E` | | `--instui-primitive-color-aurora-aurora90` | `` | `#019067` | | `--instui-primitive-color-blue-blue10` | `` | `#EDF4FF` | | `--instui-primitive-color-blue-blue100` | `` | `#2B7ABC` | | `--instui-primitive-color-blue-blue110` | `` | `#2871AF` | | `--instui-primitive-color-blue-blue120` | `` | `#2369A4` | | `--instui-primitive-color-blue-blue130` | `` | `#1E5C90` | | `--instui-primitive-color-blue-blue140` | `` | `#1A5281` | | `--instui-primitive-color-blue-blue150` | `` | `#14446D` | | `--instui-primitive-color-blue-blue160` | `` | `#123E62` | | `--instui-primitive-color-blue-blue170` | `` | `#103656` | | `--instui-primitive-color-blue-blue180` | `` | `#112335` | | `--instui-primitive-color-blue-blue190` | `` | `#0A1C2D` | | `--instui-primitive-color-blue-blue20` | `` | `#DEEBFF` | | `--instui-primitive-color-blue-blue200` | `` | `#00142A` | | `--instui-primitive-color-blue-blue30` | `` | `#D0E3FF` | | `--instui-primitive-color-blue-blue40` | `` | `#ACCDF7` | | `--instui-primitive-color-blue-blue50` | `` | `#7FB4F1` | | `--instui-primitive-color-blue-blue60` | `` | `#6CAAEE` | | `--instui-primitive-color-blue-blue70` | `` | `#4798E3` | | `--instui-primitive-color-blue-blue80` | `` | `#338CD7` | | `--instui-primitive-color-blue-blue90` | `` | `#2D83CB` | | `--instui-primitive-color-green-green10` | `` | `#DBFCDF` | | `--instui-primitive-color-green-green100` | `` | `#03893D` | | `--instui-primitive-color-green-green110` | `` | `#037D37` | | `--instui-primitive-color-green-green120` | `` | `#017533` | | `--instui-primitive-color-green-green130` | `` | `#02672C` | | `--instui-primitive-color-green-green140` | `` | `#015B26` | | `--instui-primitive-color-green-green150` | `` | `#004D1F` | | `--instui-primitive-color-green-green160` | `` | `#01451B` | | `--instui-primitive-color-green-green170` | `` | `#033C18` | | `--instui-primitive-color-green-green180` | `` | `#0D2812` | | `--instui-primitive-color-green-green190` | `` | `#051F09` | | `--instui-primitive-color-green-green20` | `` | `#CAF4D0` | | `--instui-primitive-color-green-green200` | `` | `#011A05` | | `--instui-primitive-color-green-green30` | `` | `#B4EFBD` | | `--instui-primitive-color-green-green40` | `` | `#7EDD92` | | `--instui-primitive-color-green-green50` | `` | `#61C378` | | `--instui-primitive-color-green-green60` | `` | `#54B86D` | | `--instui-primitive-color-green-green70` | `` | `#3EA75B` | | `--instui-primitive-color-green-green80` | `` | `#2D984E` | | `--instui-primitive-color-green-green90` | `` | `#1E9045` | | `--instui-primitive-color-grey-grey10` | `` | `#F2F4F5` | | `--instui-primitive-color-grey-grey100` | `` | `#6A7883` | | `--instui-primitive-color-grey-grey110` | `` | `#5F6E7A` | | `--instui-primitive-color-grey-grey120` | `` | `#576773` | | `--instui-primitive-color-grey-grey130` | `` | `#4A5B68` | | `--instui-primitive-color-grey-grey140` | `` | `#3F515E` | | `--instui-primitive-color-grey-grey150` | `` | `#334450` | | `--instui-primitive-color-grey-grey160` | `` | `#2D3D49` | | `--instui-primitive-color-grey-grey170` | `` | `#273540` | | `--instui-primitive-color-grey-grey180` | `` | `#1C222B` | | `--instui-primitive-color-grey-grey190` | `` | `#171B21` | | `--instui-primitive-color-grey-grey20` | `` | `#E8EAEC` | | `--instui-primitive-color-grey-grey200` | `` | `#10141A` | | `--instui-primitive-color-grey-grey30` | `` | `#DFE1E3` | | `--instui-primitive-color-grey-grey40` | `` | `#C7CACD` | | `--instui-primitive-color-grey-grey50` | `` | `#AAB0B5` | | `--instui-primitive-color-grey-grey60` | `` | `#9EA6AD` | | `--instui-primitive-color-grey-grey70` | `` | `#8D959F` | | `--instui-primitive-color-grey-grey80` | `` | `#7E8792` | | `--instui-primitive-color-grey-grey90` | `` | `#737F8A` | | `--instui-primitive-color-grey-opacity10` | `` | `rgba(28,34,43,0.1)` | | `--instui-primitive-color-grey-opacity75` | `` | `rgba(28,34,43,0.75)` | | `--instui-primitive-color-honey-honey10` | `` | `#FCF2E4` | | `--instui-primitive-color-honey-honey100` | `` | `#996E00` | | `--instui-primitive-color-honey-honey110` | `` | `#8C6400` | | `--instui-primitive-color-honey-honey120` | `` | `#855F02` | | `--instui-primitive-color-honey-honey130` | `` | `#735200` | | `--instui-primitive-color-honey-honey140` | `` | `#664800` | | `--instui-primitive-color-honey-honey150` | `` | `#563D00` | | `--instui-primitive-color-honey-honey160` | `` | `#4D3600` | | `--instui-primitive-color-honey-honey170` | `` | `#432F01` | | `--instui-primitive-color-honey-honey180` | `` | `#2A200C` | | `--instui-primitive-color-honey-honey190` | `` | `#221905` | | `--instui-primitive-color-honey-honey20` | `` | `#F7E7CF` | | `--instui-primitive-color-honey-honey200` | `` | `#1C1200` | | `--instui-primitive-color-honey-honey30` | `` | `#F8DDB2` | | `--instui-primitive-color-honey-honey40` | `` | `#F0C16C` | | `--instui-primitive-color-honey-honey50` | `` | `#E0A300` | | `--instui-primitive-color-honey-honey60` | `` | `#D39901` | | `--instui-primitive-color-honey-honey70` | `` | `#BE8A01` | | `--instui-primitive-color-honey-honey80` | `` | `#AC7C00` | | `--instui-primitive-color-honey-honey90` | `` | `#A37600` | | `--instui-primitive-color-navy-navy10` | `` | `#EEF4FD` | | `--instui-primitive-color-navy-navy100` | `` | `#4C79AA` | | `--instui-primitive-color-navy-navy110` | `` | `#44709F` | | `--instui-primitive-color-navy-navy120` | `` | `#3E6895` | | `--instui-primitive-color-navy-navy130` | `` | `#345B84` | | `--instui-primitive-color-navy-navy140` | `` | `#2E5177` | | `--instui-primitive-color-navy-navy150` | `` | `#234465` | | `--instui-primitive-color-navy-navy160` | `` | `#213D5B` | | `--instui-primitive-color-navy-navy170` | `` | `#1D354F` | | `--instui-primitive-color-navy-navy180` | `` | `#0D2338` | | `--instui-primitive-color-navy-navy190` | `` | `#061C30` | | `--instui-primitive-color-navy-navy20` | `` | `#E2EAF7` | | `--instui-primitive-color-navy-navy200` | `` | `#00152A` | | `--instui-primitive-color-navy-navy30` | `` | `#D5E2F6` | | `--instui-primitive-color-navy-navy40` | `` | `#B6CCEA` | | `--instui-primitive-color-navy-navy50` | `` | `#96B2D8` | | `--instui-primitive-color-navy-navy60` | `` | `#86A8D5` | | `--instui-primitive-color-navy-navy70` | `` | `#7097C7` | | `--instui-primitive-color-navy-navy80` | `` | `#5F89BB` | | `--instui-primitive-color-navy-navy90` | `` | `#5581B3` | | `--instui-primitive-color-navy-opacity10` | `` | `rgba(35,68,101,0.1)` | | `--instui-primitive-color-orange-orange10` | `` | `#FCF1ED` | | `--instui-primitive-color-orange-orange100` | `` | `#CF4A00` | | `--instui-primitive-color-orange-orange110` | `` | `#BB4200` | | `--instui-primitive-color-orange-orange120` | `` | `#B23F01` | | `--instui-primitive-color-orange-orange130` | `` | `#9C3601` | | `--instui-primitive-color-orange-orange140` | `` | `#8A2F00` | | `--instui-primitive-color-orange-orange150` | `` | `#742700` | | `--instui-primitive-color-orange-orange160` | `` | `#682400` | | `--instui-primitive-color-orange-orange170` | `` | `#5A2002` | | `--instui-primitive-color-orange-orange180` | `` | `#321B0B` | | `--instui-primitive-color-orange-orange190` | `` | `#2B1405` | | `--instui-primitive-color-orange-orange20` | `` | `#FFE4D7` | | `--instui-primitive-color-orange-orange200` | `` | `#230D00` | | `--instui-primitive-color-orange-orange30` | `` | `#FBDACA` | | `--instui-primitive-color-orange-orange40` | `` | `#FDB998` | | `--instui-primitive-color-orange-orange50` | `` | `#FF905A` | | `--instui-primitive-color-orange-orange60` | `` | `#FF7E40` | | `--instui-primitive-color-orange-orange70` | `` | `#F16824` | | `--instui-primitive-color-orange-orange80` | `` | `#E55300` | | `--instui-primitive-color-orange-orange90` | `` | `#DA4E00` | | `--instui-primitive-color-plum-plum10` | `` | `#FAF1F6` | | `--instui-primitive-color-plum-plum100` | `` | `#C54396` | | `--instui-primitive-color-plum-plum110` | `` | `#B43D89` | | `--instui-primitive-color-plum-plum120` | `` | `#A83780` | | `--instui-primitive-color-plum-plum130` | `` | `#953171` | | `--instui-primitive-color-plum-plum140` | `` | `#852A64` | | `--instui-primitive-color-plum-plum150` | `` | `#702254` | | `--instui-primitive-color-plum-plum160` | `` | `#651E4C` | | `--instui-primitive-color-plum-plum170` | `` | `#591B42` | | `--instui-primitive-color-plum-plum180` | `` | `#351428` | | `--instui-primitive-color-plum-plum190` | `` | `#2F0E23` | | `--instui-primitive-color-plum-plum20` | `` | `#FAE3EF` | | `--instui-primitive-color-plum-plum200` | `` | `#26051A` | | `--instui-primitive-color-plum-plum30` | `` | `#F6D9E9` | | `--instui-primitive-color-plum-plum40` | `` | `#F0B9D7` | | `--instui-primitive-color-plum-plum50` | `` | `#EC93C6` | | `--instui-primitive-color-plum-plum60` | `` | `#E982BF` | | `--instui-primitive-color-plum-plum70` | `` | `#E665B4` | | `--instui-primitive-color-plum-plum80` | `` | `#DD4CA8` | | `--instui-primitive-color-plum-plum90` | `` | `#D0469F` | | `--instui-primitive-color-red-red10` | `` | `#FBF1EF` | | `--instui-primitive-color-red-red100` | `` | `#E62429` | | `--instui-primitive-color-red-red110` | `` | `#CF1F24` | | `--instui-primitive-color-red-red120` | `` | `#C51F22` | | `--instui-primitive-color-red-red130` | `` | `#AE161B` | | `--instui-primitive-color-red-red140` | `` | `#991418` | | `--instui-primitive-color-red-red150` | `` | `#810F12` | | `--instui-primitive-color-red-red160` | `` | `#750D0F` | | `--instui-primitive-color-red-red170` | `` | `#670C0C` | | `--instui-primitive-color-red-red180` | `` | `#38160D` | | `--instui-primitive-color-red-red190` | `` | `#311007` | | `--instui-primitive-color-red-red20` | `` | `#FFE3DE` | | `--instui-primitive-color-red-red200` | `` | `#270903` | | `--instui-primitive-color-red-red30` | `` | `#FFD8D0` | | `--instui-primitive-color-red-red40` | `` | `#FFB7A9` | | `--instui-primitive-color-red-red50` | `` | `#FA917F` | | `--instui-primitive-color-red-red60` | `` | `#FE7D6A` | | `--instui-primitive-color-red-red70` | `` | `#F56050` | | `--instui-primitive-color-red-red80` | `` | `#F14139` | | `--instui-primitive-color-red-red90` | `` | `#EC3532` | | `--instui-primitive-color-sea-sea10` | `` | `#E0F9FD` | | `--instui-primitive-color-sea-sea100` | `` | `#00828E` | | `--instui-primitive-color-sea-sea110` | `` | `#027887` | | `--instui-primitive-color-sea-sea120` | `` | `#02717E` | | `--instui-primitive-color-sea-sea130` | `` | `#01626E` | | `--instui-primitive-color-sea-sea140` | `` | `#015862` | | `--instui-primitive-color-sea-sea150` | `` | `#014A53` | | `--instui-primitive-color-sea-sea160` | `` | `#00424A` | | `--instui-primitive-color-sea-sea170` | `` | `#023941` | | `--instui-primitive-color-sea-sea180` | `` | `#0D262A` | | `--instui-primitive-color-sea-sea190` | `` | `#051E22` | | `--instui-primitive-color-sea-sea20` | `` | `#CFF0F6` | | `--instui-primitive-color-sea-sea200` | `` | `#00181B` | | `--instui-primitive-color-sea-sea30` | `` | `#BDE9F1` | | `--instui-primitive-color-sea-sea40` | `` | `#77D8E9` | | `--instui-primitive-color-sea-sea50` | `` | `#3CC0D4` | | `--instui-primitive-color-sea-sea60` | `` | `#07B7CB` | | `--instui-primitive-color-sea-sea70` | `` | `#04A4B7` | | `--instui-primitive-color-sea-sea80` | `` | `#0394A5` | | `--instui-primitive-color-sea-sea90` | `` | `#008C9C` | | `--instui-primitive-color-sky-sky10` | `` | `#E9F6FF` | | `--instui-primitive-color-sky-sky100` | `` | `#197EAB` | | `--instui-primitive-color-sky-sky110` | `` | `#17759F` | | `--instui-primitive-color-sky-sky120` | `` | `#116D94` | | `--instui-primitive-color-sky-sky130` | `` | `#0F5F82` | | `--instui-primitive-color-sky-sky140` | `` | `#0E5575` | | `--instui-primitive-color-sky-sky150` | `` | `#094762` | | `--instui-primitive-color-sky-sky160` | `` | `#084059` | | `--instui-primitive-color-sky-sky170` | `` | `#08384E` | | `--instui-primitive-color-sky-sky180` | `` | `#0E2431` | | `--instui-primitive-color-sky-sky190` | `` | `#071D29` | | `--instui-primitive-color-sky-sky20` | `` | `#D6EDFE` | | `--instui-primitive-color-sky-sky200` | `` | `#001623` | | `--instui-primitive-color-sky-sky30` | `` | `#C7E6FC` | | `--instui-primitive-color-sky-sky40` | `` | `#97D1F8` | | `--instui-primitive-color-sky-sky50` | `` | `#63B9EB` | | `--instui-primitive-color-sky-sky60` | `` | `#50B0E3` | | `--instui-primitive-color-sky-sky70` | `` | `#349ED2` | | `--instui-primitive-color-sky-sky80` | `` | `#1E90C3` | | `--instui-primitive-color-sky-sky90` | `` | `#1A87B8` | | `--instui-primitive-color-stone-stone10` | `` | `#F4F4F4` | | `--instui-primitive-color-stone-stone100` | `` | `#767676` | | `--instui-primitive-color-stone-stone110` | `` | `#6C6C6C` | | `--instui-primitive-color-stone-stone120` | `` | `#646464` | | `--instui-primitive-color-stone-stone130` | `` | `#585858` | | `--instui-primitive-color-stone-stone140` | `` | `#4E4E4E` | | `--instui-primitive-color-stone-stone150` | `` | `#414141` | | `--instui-primitive-color-stone-stone160` | `` | `#3A3A3A` | | `--instui-primitive-color-stone-stone170` | `` | `#333333` | | `--instui-primitive-color-stone-stone180` | `` | `#222222` | | `--instui-primitive-color-stone-stone190` | `` | `#1A1A1A` | | `--instui-primitive-color-stone-stone20` | `` | `#E9E9E9` | | `--instui-primitive-color-stone-stone200` | `` | `#141414` | | `--instui-primitive-color-stone-stone30` | `` | `#E1E1E1` | | `--instui-primitive-color-stone-stone40` | `` | `#C9C9C9` | | `--instui-primitive-color-stone-stone50` | `` | `#AFAFAF` | | `--instui-primitive-color-stone-stone60` | `` | `#A5A5A5` | | `--instui-primitive-color-stone-stone70` | `` | `#949494` | | `--instui-primitive-color-stone-stone80` | `` | `#858585` | | `--instui-primitive-color-stone-stone90` | `` | `#7D7D7D` | | `--instui-primitive-color-transparent` | `` | `#00000000` | | `--instui-primitive-color-violet-violet10` | `` | `#F7F2F8` | | `--instui-primitive-color-violet-violet100` | `` | `#9E58BD` | | `--instui-primitive-color-violet-violet110` | `` | `#944FB3` | | `--instui-primitive-color-violet-violet120` | `` | `#8A49A7` | | `--instui-primitive-color-violet-violet130` | `` | `#793F93` | | `--instui-primitive-color-violet-violet140` | `` | `#6D3984` | | `--instui-primitive-color-violet-violet150` | `` | `#5B2E6F` | | `--instui-primitive-color-violet-violet160` | `` | `#522965` | | `--instui-primitive-color-violet-violet170` | `` | `#482458` | | `--instui-primitive-color-violet-violet180` | `` | `#2C1834` | | `--instui-primitive-color-violet-violet190` | `` | `#26132E` | | `--instui-primitive-color-violet-violet20` | `` | `#F3E5F7` | | `--instui-primitive-color-violet-violet200` | `` | `#1D0A25` | | `--instui-primitive-color-violet-violet30` | `` | `#EEDBF4` | | `--instui-primitive-color-violet-violet40` | `` | `#DBC0E5` | | `--instui-primitive-color-violet-violet50` | `` | `#CAA1D9` | | `--instui-primitive-color-violet-violet60` | `` | `#C295D4` | | `--instui-primitive-color-violet-violet70` | `` | `#B680CC` | | `--instui-primitive-color-violet-violet80` | `` | `#AB6EC5` | | `--instui-primitive-color-violet-violet90` | `` | `#A464C0` | | `--instui-primitive-color-white` | `` | `#ffffff` | | `--instui-primitive-color-white-opacity10` | `` | `rgba(255,255,255,0.1)` | | `--instui-primitive-color-white-opacity20` | `` | `rgba(255,255,255,0.2)` | | `--instui-primitive-color-white-opacity75` | `` | `rgba(255,255,255,0.75)` | | `--instui-primitive-font-family-atkinson` | `[ \| ]#` | `Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif` | | `--instui-primitive-font-family-inclusive-sans` | `[ \| ]#` | `Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif` | | `--instui-primitive-font-family-lato` | `[ \| ]#` | `Lato, "Helvetica Neue", Helvetica, Arial, sans-serif` | | `--instui-primitive-font-family-menlo` | `[ \| ]#` | `Menlo, Consolas, Monaco, "Andale Mono", monospace` | | `--instui-primitive-font-weight-black` | `` | `900` | | `--instui-primitive-font-weight-bold` | `` | `700` | | `--instui-primitive-font-weight-extra-bold` | `` | `800` | | `--instui-primitive-font-weight-extra-light` | `` | `200` | | `--instui-primitive-font-weight-light` | `` | `300` | | `--instui-primitive-font-weight-medium` | `` | `500` | | `--instui-primitive-font-weight-regular` | `` | `400` | | `--instui-primitive-font-weight-semi-bold` | `` | `600` | | `--instui-primitive-font-weight-thin` | `` | `100` |