DocsBlog

  • 1.8.0

  • Day

    Night

    Preview

    Switch mode

  • Cerberus

    Acheron

    Elysium

    Oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewTokensSemantic TokensRecipesSlot Recipes

Design Tokens

AnimationsColorsGradientsSpacingShadowsTypographyZ-Index

Colors

A list of colors available in Cerberus.

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

Accent

var(--cerberus-colors-accent-[level])
10#eefdfc
20#d8f9f7
30#b8f4f3
40#95eeed
50#72e9e7
60#41e3e0
70#3fb6b4
80#3b8180
90#1f5b5a
100#102d2d

Brand

var(--cerberus-colors-brand-[level])
5#fcfbfe
10#efe5f8
20#dfccf0
30#bb93e1
40#9f66d3
50#7f33c4
60#5f00b5
70#4c0091
80#39006d
90#260048
100#130024

Danger

var(--cerberus-colors-danger-[level])
10#ffebea
20#fed7d5
30#fdafab
40#fd8681
50#fc5e57
60#fb362d
70#d31d27
80#97201b
90#641612
100#320b09

Drop shadow

var(--cerberus-colors-drop-shadow-[level])
100rgba(22, 1, 38, 0.1)
200rgba(22, 1, 38, 0.15)
300rgba(22, 1, 38, 0.2)
400rgba(22, 1, 38, 0.25)
500rgba(5, 1, 8, 0.35)
600rgba(5, 1, 8, 0.5)
700rgba(5, 1, 8, 0.65)
800rgba(0, 0, 0, 0.35)
900rgba(0, 0, 0, 0.5)
1000rgba(0, 0, 0, 0.65)

Info

var(--cerberus-colors-info-[level])
10#e6f3fb
20#cce7f7
30#9acfee
40#67b8e6
50#35a0dd
60#0288d5
70#026daa
80#015280
90#013655
100#001b2b

Neutral

var(--cerberus-colors-neutral-[level])
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

Success

var(--cerberus-colors-success-[level])
10#e8f8ed
20#d0f0db
30#a0e0b7
40#71d192
50#41c16e
60#12b24a
70#0e8e3b
80#0b6b2c
90#07471e
100#04240f

Warning

var(--cerberus-colors-warning-[level])
10#fefbe9
20#fcf6d1
30#f9eda4
40#f7e376
50#f4da49
60#f1d11b
70#c1a716
80#917d10
90#60540b
100#302a05

Semantic Tokens

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.

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?]
NameDescription
PaletteThe category/context of where the color is used.
UsageHow the color is used within the context.
ProminenceOptional.The hierarchy of the color used within the page context.
InteractionOptional. 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.

page.backdrop.initialrgba(32.00000189244747, 25.000000409781933, 53.00000064074993, 0.800000011920929)
page.bg.100neutral.80
page.bg.200neutral.70
page.bg.300neutral.60
page.bg.initialbrand.100
page.border.100neutral.60
page.border.200neutral.50
page.border.initialneutral.70
page.surface.100neutral.90
page.surface.200neutral.80
page.surface.300neutral.70
page.surface.400neutral.60
page.surface.initialneutral.100
page.surface.inverseneutral.5
page.text.100neutral.20
page.text.200neutral.10
page.text.300neutral.white
page.text.initialbrand.5
page.text.inverseneutral.100

Action

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

On this page

Loading...

Loading...

Loading...

Loading...

On this page

  • Primitives
  • Semantic Tokens
  • Naming Convention
  • Page
  • Action
  • Secondary Action
  • Info
  • Success
  • Warning
  • Danger
  • Data-Visualization
  • Edit this page on Github