Get Started
Components
Styling
Theming

Colors

A list of colors available in Cerberus.

Semantic Tokens

Cerberus provides a set of semantic colors that drive our themes.

Page

Used for pages, layouts, and any other container that is relative to a page.

page.backdrop.initial
page.bg.100
page.bg.200
page.bg.300
page.bg.initial
page.border.100
page.border.200
page.border.initial
page.surface.100
page.surface.200
page.surface.300
page.surface.400
page.surface.initial
page.surface.inverse
page.text.100
page.text.200
page.text.300
page.text.initial
page.text.inverse

Action

The primary palette for actions, such as buttons, links, and other interactive elements.

action.bg.initial
action.bg.hover
action.bg.active
action.border.100
action.border.initial
action.border.focus
action.ghost.initial
action.ghost.hover
action.ghost.active
action.navigation.initial
action.navigation.hover
action.navigation.visited
action.text.100
action.text.200
action.text.initial
action.text.inverse
action.text.static

Secondary Action

The secondary palette for actions, such as buttons, links, and other interactive elements.

secondaryAction.bg.initial
secondaryAction.bg.hover
secondaryAction.bg.active
secondaryAction.border.100
secondaryAction.border.initial
secondaryAction.ghost.initial
secondaryAction.ghost.hover
secondaryAction.ghost.active
secondaryAction.navigation.initial
secondaryAction.navigation.hover
secondaryAction.navigation.visited
secondaryAction.text.100
secondaryAction.text.200
secondaryAction.text.initial
secondaryAction.text.static

Info

Used for informational elements, such as badges, tags, and other non-interactive elements.

info.border.initial
info.bg.initial
info.bg.hover
info.bg.active
info.ghost.initial
info.ghost.hover
info.ghost.active
info.surface.100
info.surface.200
info.surface.initial
info.text.100
info.text.200
info.text.initial
info.text.static

Success

Used for success states, such as success messages, notifications, and other positive feedback.

success.border.initial
success.bg.initial
success.bg.hover
success.bg.active
success.ghost.initial
success.ghost.hover
success.ghost.active
success.surface.100
success.surface.200
success.surface.initial
success.text.100
success.text.200
success.text.initial
success.text.inverse
success.text.static

Warning

Used for warning states, such as warning messages, notifications, and other cautionary feedback.

warning.border.initial
warning.bg.initial
warning.bg.hover
warning.bg.active
warning.ghost.initial
warning.ghost.hover
warning.ghost.active
warning.surface.100
warning.surface.200
warning.surface.initial
warning.text.100
warning.text.200
warning.text.initial
warning.text.inverse
warning.text.static

Danger

Used for danger states, such as error messages, notifications, and other negative feedback.

danger.bg.initial
danger.bg.hover
danger.bg.active
danger.border.initial
danger.ghost.initial
danger.ghost.hover
danger.ghost.active
danger.surface.100
danger.surface.200
danger.surface.initial
danger.text.100
danger.text.200
danger.text.initial
danger.text.inverse
danger.text.static

Data-Visualization

Used for data visualization elements, such as charts, graphs, and other visual representations of data.

dataViz.diverging.50
dataViz.diverging.100
dataViz.diverging.200
dataViz.diverging.300
dataViz.diverging.400
dataViz.diverging.500
dataViz.diverging.600
dataViz.diverging.700
dataViz.diverging.800
dataViz.diverging.900
dataViz.sequential.100
dataViz.sequential.200
dataViz.sequential.300
dataViz.sequential.400
dataViz.sequential.500
dataViz.sequential.600
dataViz.qualitative.100
dataViz.qualitative.200
dataViz.qualitative.300
dataViz.qualitative.400
dataViz.qualitative.500
dataViz.qualitative.600
dataViz.qualitative.700
dataViz.progress.start
dataViz.progress.end
dataViz.progress.complete

Naming Convention

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
[palette?].[usage].[prominence?].[interaction?]
NameDescription
PaletteThe category/context of where the color is used.
UsageHow the color is used within the context.
ProminenceThe hierarchy of the color used within the page context.
InteractionThe element interaction type the color should be applied to.

On this page