Pricing
Buy Now
Privacy Policy Terms of Service
Copyright © 2026 Buzzy. All rights reserved.

Color System

Examples and documentation for the color system component

Global Color System

This demonstrates the global color system that provides consistent color themes across all UI components. Colors work seamlessly with the sizing system for flexible component styling.

Brand Colors

Primary Color

Primary brand color for main actions and branding.

Primary Badge
Accent Color

Accent color for secondary actions and highlights.

Accent Badge
Secondary Color

Secondary color for less prominent elements.

Secondary Badge

Status Colors

Success Color

Success color for positive actions and confirmations.

Success Badge
Warning Color

Warning color for cautionary messages and actions.

Warning Badge
Danger Color

Danger color for destructive actions and errors.

Danger Badge
Info Color

Info color for informational messages and actions.

Info Badge

Neutral Colors

Gray Color

Gray color for neutral and muted elements.

Gray Badge
Muted Color

Muted color for subtle and background elements.

Muted Badge
Light Color

Light color for subtle backgrounds and borders.

Light Badge
White Color

White color for clean, minimal designs.

White Badge

Theme Colors

Updates Color

Updates color for system notifications and updates.

Updates Badge
Inbox Color

Inbox color for messaging and communication features.

Inbox Badge
Rosy Color

Rosy color for warm, friendly interfaces.

Rosy Badge
Sea Color

Sea color for calm, professional interfaces.

Sea Badge

Color Variants

Primary Color Variants

Different variants of the primary color:

Primary
Outline
Filled
Solid
Success Color Variants

Different variants of the success color:

Success
Outline
Filled
Solid

Size + Color Combinations

Small Primary Card

Small card with primary color showing how sizes and colors work together.

SM Badge
Large Success Card

Large card with success color demonstrating the flexibility of the system.

LG Badge
Extra Large Warning Card

Extra large card with warning color showing maximum emphasis.

XL Badge

Code Examples

Basic Color Usage
<x-ui.card color="primary">...</x-ui.card>
<x-ui.button color="success">...</x-ui.button>
<x-ui.badge color="warning">...</x-ui.badge>
Color + Size Combinations
<x-ui.card color="primary" size="lg">...</x-ui.card>
<x-ui.button color="success" size="sm">...</x-ui.button>
<x-ui.badge color="warning" size="xl">...</x-ui.badge>
Color + Variant Combinations
<x-ui.button color="primary" variant="outline">...</x-ui.button>
<x-ui.badge color="success" variant="filled">...</x-ui.badge>
<x-ui.card color="warning" variant="solid">...</x-ui.card>

Available Color Themes

Brand Colors
primary, accent, secondary
Status Colors
success, warning, danger, info
Neutral Colors
gray, muted, light, white, black
Theme Colors
updates, inbox, rosy, sea, trend
Social Colors
facebook, twitter, instagram, linkedin
Utility Colors
blue, pink, create, rss, github