Cerberus provides a set of palettes that have an intentional purpose which contribtutes to the
overall theme. This creates a clear, consistent color scheme that can be easily customized.
Warning
We recommend always using Semantic Tokens and not primtives for color values. Primitives will eventually become private and are static by nature (e.g., they have no context of the theme or color mode).
Naming Convention
Cerberus uses a naming convention for semantic tokens to ensure clarity and maintainability. Each color is named based on its purpose and context, making it easier to understand its intended use.
Semantic token naming convention:
[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
Optional.The hierarchy of the color used within the page context.
Interaction
Optional. The element interaction type the color should be applied to.
Page
Used for pages, layouts, and any other container that is relative to a page.
The primary palette for actions, such as buttons, links, and other interactive elements.
action.bg.initialbrand.60
action.bg.hoverbrand.50
action.bg.activebrand.70
action.border.100neutral.30
action.border.initialbrand.30
action.border.focusbrand.40
action.ghost.initialbrand.100
action.ghost.hoverbrand.80
action.ghost.activebrand.70
action.navigation.initialbrand.30
action.navigation.hoverbrand.20
action.navigation.visitedneutral.20
action.text.100brand.40
action.text.200brand.30
action.text.initialbrand.5
action.text.inversebrand.5
action.text.staticbrand.60
Secondary Action
The secondary palette for actions, such as buttons, links, and other interactive elements.
secondaryAction.bg.initialneutral.60
secondaryAction.bg.hoverneutral.50
secondaryAction.bg.activebrand.30
secondaryAction.border.100brand.70
secondaryAction.border.initialbrand.50
secondaryAction.ghost.initialbrand.100
secondaryAction.ghost.hoverneutral.80
secondaryAction.ghost.activeneutral.80
secondaryAction.navigation.initialbrand.10
secondaryAction.navigation.hoverbrand.30
secondaryAction.navigation.visitedbrand.20
secondaryAction.text.100brand.10
secondaryAction.text.200brand.30
secondaryAction.text.initialbrand.20
secondaryAction.text.staticbrand.40
Info
Used for informational elements, such as badges, tags, and other non-interactive elements.
info.border.100info.70
info.border.initialinfo.50
info.bg.initialinfo.70
info.bg.hoverinfo.90
info.bg.activeinfo.50
info.ghost.initialbrand.100
info.ghost.hoverinfo.90
info.ghost.activeinfo.80
info.surface.100info.90
info.surface.200info.70
info.surface.initialinfo.80
info.text.100info.40
info.text.200info.10
info.text.initialinfo.50
info.text.staticinfo.60
Success
Used for success states, such as success messages, notifications, and other positive feedback.
success.border.initialsuccess.50
success.bg.initialsuccess.50
success.bg.hoversuccess.60
success.bg.activesuccess.40
success.ghost.initialbrand.100
success.ghost.hoversuccess.90
success.ghost.activesuccess.80
success.surface.100success.90
success.surface.200success.80
success.surface.initialsuccess.60
success.text.100success.30
success.text.200success.10
success.text.initialsuccess.60
success.text.inversesuccess.100
success.text.staticsuccess.70
Warning
Used for warning states, such as warning messages, notifications, and other cautionary feedback.
warning.border.initialwarning.20
warning.bg.initialwarning.70
warning.bg.hoverwarning.60
warning.bg.activewarning.40
warning.ghost.initialbrand.100
warning.ghost.hoverwarning.90
warning.ghost.activewarning.80
warning.surface.100warning.90
warning.surface.200warning.50
warning.surface.initialwarning.70
warning.text.100warning.30
warning.text.200warning.100
warning.text.initialwarning.40
warning.text.inversewarning.100
warning.text.staticwarning.80
Danger
Used for danger states, such as error messages, notifications, and other negative feedback.
danger.bg.initialdanger.70
danger.bg.hoverdanger.50
danger.bg.activedanger.30
danger.border.initialdanger.30
danger.ghost.initialbrand.100
danger.ghost.hoverdanger.90
danger.ghost.activedanger.80
danger.surface.100danger.90
danger.surface.200danger.70
danger.surface.initialdanger.80
danger.text.100danger.20
danger.text.200danger.10
danger.text.initialdanger.60
danger.text.inversedanger.100
danger.text.staticdanger.80
Data-Visualization
Used for data visualization elements, such as charts, graphs, and other visual representations of data.
dataViz.diverging.50warning.60
dataViz.diverging.100warning.50
dataViz.diverging.200warning.40
dataViz.diverging.300warning.30
dataViz.diverging.400warning.20
dataViz.diverging.500neutral.10
dataViz.diverging.600brand.30
dataViz.diverging.700brand.40
dataViz.diverging.800brand.50
dataViz.diverging.900brand.60
dataViz.sequential.100brand.80
dataViz.sequential.200brand.60
dataViz.sequential.300brand.50
dataViz.sequential.400brand.40
dataViz.sequential.500brand.20
dataViz.sequential.600brand.10
dataViz.qualitative.100brand.50
dataViz.qualitative.200warning.60
dataViz.qualitative.300success.60
dataViz.qualitative.400info.50
dataViz.qualitative.500brand.30
dataViz.qualitative.600accent.70
dataViz.qualitative.700neutral.40
dataViz.progress.startbrand.40
dataViz.progress.endbrand.70
dataViz.progress.completesuccess.60
Primitives
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.
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