Skip to main content

Colors

Overview​

The Buyur Design System color framework ensures visual consistency across light and dark modes. It is structured around Primitives, Alias (Semantic Colors), and Component Colors to support scalability, theming, and accessibility.

Principles​

  • Separation of Concerns – Base (primitive) colors are raw values; semantic tokens map them to functional roles.

  • Theming Support – Both Light and Dark modes are supported, with semantic tokens referencing the same primitives.

  • Consistency – Shared color naming and structure for backgrounds, text, borders, and surfaces.

  • Accessibility – Contrast-aware tokens for text and interactive elements.

  • Scalability – Component tokens reference alias tokens to ensure theme adaptability.

Color Structure​

1. Primitives​

Primitives define the foundational color palette (e.g., primary, secondary, success, warning, error, info, neutral, surface). These are raw HEX values (50–900 scales).

Example:

byr.primitve.color.primary.primary600 → #029062
byr.primitve.color.error.error500 → #e5484d
byr.primitve.color.neutral.neutral50 → #ffffff

2. Alias (Semantic Colors)​

Alias tokens map primitives to functional roles like background, text, border, and surface. They are theme-aware and defined for both Light and Dark modes.

Categories:

  • Background: backgroundPrimary, backgroundSecondary, backgroundElevated

  • Text: text, textMuted, textInverted, textOnPrimary

  • Border: border, borderSubtle, borderStrong, borderError

  • Surface: surface, surfaceMuted, surfaceElevated

Example (Light mode):

byr.alias.colors.background.backgroundPrimary → {byr.primitve.color.primary.primary600}
byr.alias.colors.text.textMuted → {byr.primitve.color.neutral.neutral600}

Example (Dark mode):

byr.alias.colors.background.backgroundPrimary → {byr.primitve.color.primary.primary600}
byr.alias.colors.text.text → {byr.primitve.color.neutral.neutral50}

3. Component Colors​

Component colors are specialized tokens that reference Alias colors. They ensure that buttons, inputs, modals, chips, and other UI components inherit theme support without redefining base values.

Example:

byr.components.button.buttonPrimaryBackground → {byr.alias.colors.background.backgroundPrimary}
byr.components.input.inputText → {byr.alias.colors.text.text}
byr.components.badge.badgeSuccessBackground → #60104e

Modes​

Light Mode​

  • Background Base: Neutral50 → #ffffff

  • Text Base: Neutral700 → #343a40

  • Primary Background: Primary600 → #029062

Dark Mode​

  • Background Base: Neutral900 → #101215

  • Text Base: Neutral50 → #ffffff

  • Primary Background: Primary600 → #029062

Token Naming Convention​

byr.[layer].[category].[name]

  • Primitives: byr.primitve.color.primary.primary600

  • Alias: byr.alias.colors.background.backgroundPrimary

  • Component: byr.components.button.buttonPrimaryBackground

Usage Guidelines​

  • Use alias tokens in design and development to ensure automatic theming support.

  • Use primitives only for creating new semantic tokens or extending the palette.

  • Use component tokens for direct component implementation (e.g., buttons, inputs).

\