Cerberus provides a comprehensive set of primitive colors (theme.tokens.colors) that serve as the foundation for all semantic tokens. These are the raw color values that semantic tokens reference.
Neutral
5#f9f9fb
10#eeedf2
15#e7e5eb
20#dedce5
30#a6a0b6
40#776f90
50#605579
60#392e55
70#2d2246
80#201935
90#130a2a
100#0c0420
white#ffffff
Brand
5#fcfbfe
10#efe5f8
20#dfccf0
30#bb93e1
40#9f66d3
50#7f33c4
60#5f00b5
70#4c0091
80#39006d
90#260048
100#130024
Teal
10#eefdfc
20#d8f9f7
30#b8f4f3
40#95eeed
50#72e9e7
60#41e3e0
70#3fb6b4
80#3b8180
90#1f5b5a
100#102d2d
Success
10#e8f8ed
20#d0f0db
30#a0e0b7
40#71d192
50#41c16e
60#12b24a
70#0e8e3b
80#0b6b2c
90#07471e
100#04240f
Danger
10#ffebea
20#fed7d5
30#fdafab
40#fd8681
50#fc5e57
60#fb362d
70#d31d27
80#97201b
90#641612
100#320b09
Warning
10#fefbe9
20#fcf6d1
30#f9eda4
40#f7e376
50#f4da49
60#f1d11b
70#c1a716
80#917d10
90#60540b
100#302a05
Info
10#e6f3fb
20#cce7f7
30#9acfee
40#67b8e6
50#35a0dd
60#0288d5
70#026daa
80#015280
90#013655
100#001b2b
Primitive colors are organized by color families and include numerical scales (e.g., neutral.0 to neutral.100) that provide fine-grained control over color variations. These colors form the building blocks that semantic tokens reference to create meaningful, contextual color usage.
How Primitives Relate to Semantic Tokens:
Semantic tokens like page.bg.initial reference primitive colors using token syntax: {colors.cerberus.neutral.5}
This creates a clear hierarchy: primitives → semantic tokens → component usage
Customizing primitive colors automatically updates all semantic tokens that reference them
Cerberus uses a consistent naming convention for colors to ensure clarity and maintainability. Each color is named based on its purpose and context, making it easier to understand its intended use.
Terminal window
1
[palette?].[usage].[prominence?].[interaction?]
Name
Description
Palette
The category/context of where the color is used.
Usage
How the color is used within the context.
Prominence
The hierarchy of the color used within the page context.
Interaction
The element interaction type the color should be applied to.