DocsBlog

Get Started

Components

Data Grid

Signals

Styling

Theming

↑↓Navigate
↵Select
cmd + cCopy URL
EscClose

  • 1.8.1

  • Day

    Night

    Preview

    Switch mode

  • cerberus

    acheron

    elysium

    oceanus

Get Started
Components
Data Grid
Signals
Styling
Theming

Concepts

OverviewTokensSemantic TokensRecipesSlot Recipes

Design Tokens

AnimationsColorsGradientsSpacingShadowsFontZ-Index

Colors

A list of colors available in Cerberus.

View as Markdown
Open this page in Markdown
Anthropic
Open in Claude
Ask questions about this page
OpenAI
Open in ChatGPT
Ask questions about this page

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.

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?]
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(188, 186, 202, 0.5)rgba(188, 186, 202, 0.5)
page.bg.100neutral.5#f9f9fb
page.bg.200neutral.15#e7e5eb
page.bg.300neutral.20#dedce5
page.bg.initialneutral.white#ffffff
page.border.100brand.20#dfccf0
page.border.200neutral.20#dedce5
page.border.initialneutral.15#e7e5eb
page.surface.100neutral.white#ffffff
page.surface.200neutral.5#f9f9fb
page.surface.300neutral.10#eeedf2
page.surface.400neutral.15#e7e5eb
page.surface.initialbrand.5#fcfbfe
page.surface.inverseneutral.90#130a2a
page.text.100neutral.40#776f90
page.text.200neutral.60#392e55
page.text.300brand.100#130024
page.text.initialneutral.90#130a2a
page.text.inverseneutral.white#ffffff
page.text.staticneutral.60#392e55

Action

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

action.bg.initialbrand.60#5f00b5
action.bg.hoverbrand.50#7f33c4
action.bg.activebrand.40#9f66d3
action.border.100neutral.40#776f90
action.border.initialbrand.60#5f00b5
action.border.focusbrand.70#4c0091
action.ghost.initialrgba(255, 255, 255, 0)rgba(255, 255, 255, 0)
action.ghost.hoverbrand.10#efe5f8
action.ghost.activebrand.20#dfccf0
action.navigation.initialbrand.60#5f00b5
action.navigation.hoverbrand.50#7f33c4
action.navigation.visitedneutral.60#392e55
action.text.100brand.80#39006d
action.text.200brand.60#5f00b5
action.text.initialbrand.5#fcfbfe
action.text.inversebrand.100#130024
action.text.staticbrand.60#5f00b5

Secondary Action

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

secondaryAction.bg.initialbrand.20#dfccf0
secondaryAction.bg.hoverbrand.30#bb93e1
secondaryAction.bg.activebrand.40#9f66d3
secondaryAction.border.100brand.20#dfccf0
secondaryAction.border.initialbrand.30#bb93e1
secondaryAction.ghost.initialrgba(255, 255, 255, 0)rgba(255, 255, 255, 0)
secondaryAction.ghost.hoverneutral.10#eeedf2
secondaryAction.ghost.activeneutral.15#e7e5eb
secondaryAction.navigation.initialbrand.60#5f00b5
secondaryAction.navigation.hoverbrand.50#7f33c4
secondaryAction.navigation.visitedbrand.100#130024
secondaryAction.text.100brand.100#130024
secondaryAction.text.200brand.50#7f33c4
secondaryAction.text.initialbrand.90#260048
secondaryAction.text.staticbrand.40#9f66d3

Info

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

info.border.100info.40#67b8e6
info.border.initialinfo.60#0288d5
info.bg.initialinfo.30#9acfee
info.bg.hoverinfo.20#cce7f7
info.bg.activeinfo.50#35a0dd
info.ghost.initialrgba(255, 255, 255, 0)rgba(255, 255, 255, 0)
info.ghost.hoverinfo.20#cce7f7
info.ghost.activeinfo.30#9acfee
info.surface.100info.20#cce7f7
info.surface.200info.50#35a0dd
info.surface.initialinfo.30#9acfee
info.text.100info.80#015280
info.text.200info.100#001b2b
info.text.initialinfo.70#026daa
info.text.staticinfo.60#0288d5

Success

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

success.border.initialsuccess.70#0e8e3b
success.bg.initialsuccess.60#12b24a
success.bg.hoversuccess.70#0e8e3b
success.bg.activesuccess.80#0b6b2c
success.ghost.initialrgba(255, 255, 255, 0)rgba(255, 255, 255, 0)
success.ghost.hoversuccess.10#e8f8ed
success.ghost.activesuccess.20#d0f0db
success.surface.100success.20#d0f0db
success.surface.200success.60#12b24a
success.surface.initialsuccess.50#41c16e
success.text.100success.80#0b6b2c
success.text.200success.100#04240f
success.text.initialsuccess.60#12b24a
success.text.inversesuccess.10#e8f8ed
success.text.staticsuccess.70#0e8e3b

Warning

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

warning.border.initialwarning.50#f4da49
warning.bg.initialwarning.50#f4da49
warning.bg.hoverwarning.60#f1d11b
warning.bg.activewarning.70#c1a716
warning.ghost.initialrgba(255, 255, 255, 0)rgba(255, 255, 255, 0)
warning.ghost.hoverwarning.20#fcf6d1
warning.ghost.activewarning.30#f9eda4
warning.surface.100warning.20#fcf6d1
warning.surface.200warning.60#f1d11b
warning.surface.initialwarning.40#f7e376
warning.text.100warning.90#60540b
warning.text.200warning.100#302a05
warning.text.initialwarning.90#60540b
warning.text.inversewarning.20#fcf6d1
warning.text.staticwarning.80#917d10

Danger

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

danger.bg.initialdanger.60#fb362d
danger.bg.hoverdanger.70#d31d27
danger.bg.activedanger.90#641612
danger.border.initialdanger.50#fc5e57
danger.ghost.initialrgba(255, 255, 255, 0)rgba(255, 255, 255, 0)
danger.ghost.hoverdanger.10#ffebea
danger.ghost.activedanger.20#fed7d5
danger.surface.100danger.10#ffebea
danger.surface.200danger.60#fb362d
danger.surface.initialdanger.30#fdafab
danger.text.100danger.80#97201b
danger.text.200danger.100#320b09
danger.text.initialdanger.70#d31d27
danger.text.inversedanger.10#ffebea
danger.text.staticdanger.80#97201b

Data-Visualization

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

dataViz.diverging.50warning.60#f1d11b
dataViz.diverging.100warning.50#f4da49
dataViz.diverging.200warning.40#f7e376
dataViz.diverging.300warning.30#f9eda4
dataViz.diverging.400warning.20#fcf6d1
dataViz.diverging.500neutral.10#eeedf2
dataViz.diverging.600brand.30#bb93e1
dataViz.diverging.700brand.40#9f66d3
dataViz.diverging.800brand.50#7f33c4
dataViz.diverging.900brand.60#5f00b5
dataViz.sequential.100brand.10#efe5f8
dataViz.sequential.200brand.40#9f66d3
dataViz.sequential.300brand.50#7f33c4
dataViz.sequential.400brand.70#4c0091
dataViz.sequential.500brand.80#39006d
dataViz.sequential.600brand.90#260048
dataViz.qualitative.100brand.50#7f33c4
dataViz.qualitative.200warning.60#f1d11b
dataViz.qualitative.300success.60#12b24a
dataViz.qualitative.400info.50#35a0dd
dataViz.qualitative.500brand.30#bb93e1
dataViz.qualitative.600accent.70#3fb6b4
dataViz.qualitative.700neutral.40#776f90
dataViz.progress.startbrand.40#9f66d3
dataViz.progress.endbrand.70#4c0091
dataViz.progress.completesuccess.60#12b24a

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

On this page

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