• Docs
  • Blog

    • 0.24.0

    • Switch to dark mode
    Get Started
    Components
    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.

    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

    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.initialrgba(32, 25, 52, 0.8)
    page.bg.100cerberus.neutral.80
    page.bg.200cerberus.neutral.70
    page.bg.300cerberus.neutral.60
    page.bg.initialcerberus.brand.100
    page.border.100cerberus.neutral.60
    page.border.200cerberus.neutral.50
    page.border.initialcerberus.neutral.70
    page.surface.100cerberus.neutral.90
    page.surface.200cerberus.neutral.80
    page.surface.300cerberus.neutral.70
    page.surface.400cerberus.neutral.60
    page.surface.initialcerberus.neutral.100
    page.surface.inversecerberus.neutral.5
    page.text.100cerberus.neutral.20
    page.text.200cerberus.neutral.10
    page.text.300cerberus.neutral.white
    page.text.initialcerberus.brand.5
    page.text.inversecerberus.neutral.100

    Action

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

    action.bg.initialcerberus.brand.60
    action.bg.hovercerberus.brand.50
    action.bg.activecerberus.brand.70
    action.border.100cerberus.neutral.30
    action.border.initialcerberus.brand.30
    action.border.focuscerberus.brand.40
    action.ghost.initialcerberus.brand.100
    action.ghost.hovercerberus.brand.80
    action.ghost.activecerberus.brand.70
    action.navigation.initialcerberus.brand.30
    action.navigation.hovercerberus.brand.20
    action.navigation.visitedcerberus.brand.20
    action.text.100cerberus.brand.40
    action.text.200cerberus.brand.30
    action.text.initialcerberus.neutral.white
    action.text.inversecerberus.brand.5
    action.text.staticcerberus.brand.60

    Secondary Action

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

    secondaryAction.bg.initialcerberus.neutral.60
    secondaryAction.bg.hovercerberus.neutral.50
    secondaryAction.bg.activecerberus.brand.30
    secondaryAction.border.100cerberus.brand.70
    secondaryAction.border.initialcerberus.brand.50
    secondaryAction.ghost.initialcerberus.brand.100
    secondaryAction.ghost.hovercerberus.brand.90
    secondaryAction.ghost.activecerberus.brand.80
    secondaryAction.navigation.initialcerberus.brand.10
    secondaryAction.navigation.hovercerberus.brand.30
    secondaryAction.navigation.visitedcerberus.brand.20
    secondaryAction.text.100cerberus.brand.10
    secondaryAction.text.200cerberus.brand.30
    secondaryAction.text.initialcerberus.brand.20
    secondaryAction.text.staticcerberus.brand.40

    Info

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

    info.border.100cerberus.info.70
    info.border.initialcerberus.info.50
    info.bg.initialcerberus.info.70
    info.bg.hovercerberus.info.90
    info.bg.activecerberus.info.50
    info.ghost.initialcerberus.brand.100
    info.ghost.hovercerberus.info.90
    info.ghost.activecerberus.info.80
    info.surface.100cerberus.info.90
    info.surface.200cerberus.info.70
    info.surface.initialcerberus.info.80
    info.text.100cerberus.info.40
    info.text.200cerberus.info.10
    info.text.initialcerberus.info.50
    info.text.staticcerberus.info.60

    Success

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

    success.border.initialcerberus.success.50
    success.bg.initialcerberus.success.50
    success.bg.hovercerberus.success.50
    success.bg.activecerberus.success.40
    success.ghost.initialcerberus.brand.100
    success.ghost.hovercerberus.success.90
    success.ghost.activecerberus.success.80
    success.surface.100cerberus.success.90
    success.surface.200cerberus.success.80
    success.surface.initialcerberus.success.60
    success.text.100cerberus.success.30
    success.text.200cerberus.success.10
    success.text.initialcerberus.success.60
    success.text.inversecerberus.success.100
    success.text.staticcerberus.success.70

    Warning

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

    warning.border.initialcerberus.warning.20
    warning.bg.initialcerberus.warning.70
    warning.bg.hovercerberus.warning.60
    warning.bg.activecerberus.warning.40
    warning.ghost.initialcerberus.brand.100
    warning.ghost.hovercerberus.warning.90
    warning.ghost.activecerberus.warning.80
    warning.surface.100cerberus.warning.90
    warning.surface.200cerberus.warning.50
    warning.surface.initialcerberus.warning.70
    warning.text.100cerberus.warning.30
    warning.text.200cerberus.warning.100
    warning.text.initialcerberus.warning.40
    warning.text.inversecerberus.warning.100
    warning.text.staticcerberus.warning.80

    Danger

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

    danger.bg.initialcerberus.danger.70
    danger.bg.hovercerberus.danger.40
    danger.bg.activecerberus.danger.30
    danger.border.initialcerberus.danger.30
    danger.ghost.initialcerberus.brand.100
    danger.ghost.hovercerberus.danger.90
    danger.ghost.activecerberus.danger.80
    danger.surface.100cerberus.danger.90
    danger.surface.200cerberus.danger.70
    danger.surface.initialcerberus.danger.80
    danger.text.100cerberus.danger.30
    danger.text.200cerberus.danger.10
    danger.text.initialcerberus.danger.60
    danger.text.inversecerberus.danger.90
    danger.text.staticcerberus.danger.80

    Data-Visualization

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

    dataViz.diverging.50cerberus.warning.60
    dataViz.diverging.100cerberus.warning.50
    dataViz.diverging.200cerberus.warning.40
    dataViz.diverging.300cerberus.warning.30
    dataViz.diverging.400cerberus.warning.20
    dataViz.diverging.500cerberus.neutral.10
    dataViz.diverging.600cerberus.brand.30
    dataViz.diverging.700cerberus.brand.40
    dataViz.diverging.800cerberus.brand.50
    dataViz.diverging.900cerberus.brand.60
    dataViz.sequential.100cerberus.brand.80
    dataViz.sequential.200cerberus.brand.60
    dataViz.sequential.300cerberus.brand.50
    dataViz.sequential.400cerberus.brand.40
    dataViz.sequential.500cerberus.brand.20
    dataViz.sequential.600cerberus.brand.10
    dataViz.qualitative.100cerberus.brand.50
    dataViz.qualitative.200cerberus.warning.60
    dataViz.qualitative.300cerberus.success.60
    dataViz.qualitative.400cerberus.info.50
    dataViz.qualitative.500cerberus.brand.30
    dataViz.qualitative.600cerberus.teal.70
    dataViz.qualitative.700cerberus.neutral.40
    dataViz.progress.startcerberus.brand.40
    dataViz.progress.endcerberus.brand.70
    dataViz.progress.completecerberus.success.60

    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

    • Edit this page on Github
    Cerberus Design System | Docs