Primitive tokens

Primitive tokens are the Design System base values that Consents accepts as design.tokens values. The Token column shows the exact short reference consumers should use; internal dependencies used to resolve aliases are not included.

This reference is generated from the MasStack DS replica 0.1.0, dated 2026-07-09. See Domain tokens to learn which families each public token can use.

Color primitives

Every color domain token accepts these primitives. Valid CSS colors are also accepted.

Blue colors

Token	Value
`blue.50`	`#EFF6FF`
`blue.100`	`#EDF4FF`
`blue.200`	`#AEC7EE`
`blue.300`	`#A2C1F8`
`blue.400`	`#82ABF5`
`blue.500`	`#6994FF`
`blue.600`	`#4686FF`
`blue.700`	`#447FED`
`blue.800`	`#3466F5`
`blue.900`	`#1D51E4`
`blue.950`	`#003EB7`

Common colors

Token	Value
`common.black`	`#000000`
`common.white`	`#FFFFFF`

Emerald colors

Token	Value
`emerald.50`	`#ECFDF5`
`emerald.100`	`#D1FAE5`
`emerald.200`	`#A7F3D0`
`emerald.300`	`#6EE7B7`
`emerald.400`	`#34D399`
`emerald.500`	`#10B981`
`emerald.600`	`#059669`
`emerald.700`	`#047857`
`emerald.800`	`#065F46`
`emerald.900`	`#064E3B`
`emerald.950`	`#002C22`

Fuchsia colors

Token	Value
`fuchsia.50`	`#FEF2F7`
`fuchsia.100`	`#FCE5F1`
`fuchsia.200`	`#F9CCE3`
`fuchsia.300`	`#F5A5CF`
`fuchsia.400`	`#F067AB`
`fuchsia.500`	`#E52E83`
`fuchsia.600`	`#D1126E`
`fuchsia.700`	`#B00C5C`
`fuchsia.800`	`#920A4D`
`fuchsia.900`	`#7A0940`
`fuchsia.950`	`#570B2F`

Green colors

Token	Value
`green.50`	`#F0FDF4`
`green.100`	`#F0FAE8`
`green.200`	`#D4EABE`
`green.300`	`#C0E19F`
`green.400`	`#A6D579`
`green.500`	`#92CC5C`
`green.600`	`#60B129`
`green.700`	`#5B9F2E`
`green.800`	`#4A9537`
`green.900`	`#3E8B4E`
`green.950`	`#296133`

Grey colors

Token	Value
`grey.50`	`#FAFAFA`
`grey.100`	`#F5F5F5`
`grey.200`	`#EEEEEE`
`grey.300`	`#E0E0E0`
`grey.400`	`#BDBDBD`
`grey.500`	`#9E9E9E`
`grey.600`	`#757575`
`grey.700`	`#616161`
`grey.800`	`#424242`
`grey.900`	`#1F1F1F`
`grey.950`	`#0A0A0A`

Neutral colors

Token	Value
`neutral.50`	`#FAFBFC`
`neutral.100`	`#F3F4F6`
`neutral.200`	`#E5E7EB`
`neutral.300`	`#D1D5DB`
`neutral.400`	`#9CA3AF`
`neutral.500`	`#6B7280`
`neutral.600`	`#4B5563`
`neutral.700`	`#374151`
`neutral.800`	`#1F2937`
`neutral.900`	`#1A2330`
`neutral.950`	`#111827`

Orange colors

Token	Value
`orange.50`	`#FFF7E9`
`orange.100`	`#FCEEE0`
`orange.200`	`#F8D1AD`
`orange.300`	`#ECAE75`
`orange.400`	`#F29C52`
`orange.500`	`#FF7901`
`orange.600`	`#E2681A`
`orange.700`	`#D55E35`
`orange.800`	`#C93A23`
`orange.900`	`#B03E1B`
`orange.950`	`#902906`

Purple colors

Token	Value
`purple.50`	`#FBF2F9`
`purple.100`	`#F2E5EF`
`purple.200`	`#DDBDD7`
`purple.300`	`#C792BE`
`purple.400`	`#B168A7`
`purple.500`	`#A14993`
`purple.600`	`#8E328A`
`purple.700`	`#7F3389`
`purple.800`	`#6C3588`
`purple.900`	`#5A3581`
`purple.950`	`#422B6E`

Red colors

Token	Value
`red.50`	`#FFF5F4`
`red.100`	`#F6DFDD`
`red.200`	`#F2A69E`
`red.300`	`#ED786A`
`red.400`	`#ED5E4E`
`red.500`	`#EC5561`
`red.600`	`#D53D46`
`red.700`	`#BF2828`
`red.800`	`#B72627`
`red.900`	`#A62319`
`red.950`	`#8A1910`

Slate colors

Token	Value
`slate.50`	`#F9FAFC`
`slate.100`	`#F1F5F9`
`slate.200`	`#E2E8F0`
`slate.300`	`#CBD5E1`
`slate.400`	`#94A3B8`
`slate.500`	`#64748B`
`slate.600`	`#475569`
`slate.700`	`#334155`
`slate.800`	`#1E293B`
`slate.900`	`#0F172A`
`slate.950`	`#0C0F18`

Yellow colors

Token	Value
`yellow.50`	`#FEFCE8`
`yellow.100`	`#FEF9C2`
`yellow.200`	`#FEF08A`
`yellow.300`	`#FFE86F`
`yellow.400`	`#FDE047`
`yellow.500`	`#FFE200`
`yellow.600`	`#EAB308`
`yellow.700`	`#CA8A04`
`yellow.800`	`#A16207`
`yellow.900`	`#854D0E`
`yellow.950`	`#713F12`

Spacing primitives

Numeric values are expressed in pixels. The Consents public catalog limits spacing to 80px.

Token	Value
`0`	0px
`25`	1px
`50`	2px
`100`	4px
`150`	6px
`200`	8px
`300`	12px
`400`	16px
`500`	20px
`600`	24px
`800`	32px
`1000`	40px
`1200`	48px
`1400`	56px
`1600`	64px
`2000`	80px

Size and radius primitives

Radius tokens accept these sizes except full. statement-help-icon-size is restricted to 400, 500, 600, and 800.

Token	Value
`0`	0px
`25`	1px
`50`	2px
`100`	4px
`150`	6px
`200`	8px
`300`	12px
`400`	16px
`500`	20px
`600`	24px
`800`	32px
`1000`	40px
`1400`	56px

Border primitives

Token	Value
`0`	0px
`50`	0.5px
`100`	1px
`120`	1.2px
`160`	1.6px
`200`	2px
`400`	4px
`600`	6px
`800`	8px

Font family primitives

The canonical API only allows the family to be overridden individually. Size, weight, line height, and letter spacing come from the complete semantic style.

Token	Value
`Inter`	`Inter`
`Menlo`	`Menlo`