Overview
The color system provides semantic tokens that automatically adapt to dark and light modes. Always use semantic token class names - never hardcode hex values.
Key Principles
- Semantic tokens adapt automatically to dark/light modes
- Always pair surface tokens with their foreground counterparts
- Use status colors for their intended purpose (success, warning, error, info)
- Brand gradient reserved for 1-2 featured elements per page
Semantic Tokens
Semantic tokens map to CSS variables that change based on theme. Use these Tailwind classes instead of hex colors.
Surface Tokens
Background colors for page areas, containers, and inputs
backgroundbg-backgroundforegroundtext-foregroundcardbg-cardcard-foregroundtext-card-foregroundpopoverbg-popoverpopover-foregroundtext-popover-foregroundmutedbg-mutedmuted-foregroundtext-muted-foregroundelevatedbg-elevatedelevated-foregroundtext-elevated-foregroundsidebarbg-sidebartopbarbg-topbarfieldbg-fieldAction Tokens
Colors for interactive elements and buttons
primarybg-primaryprimary-foregroundtext-primary-foregroundprimary-hoverhover:bg-primary-hoversecondarybg-secondarysecondary-foregroundtext-secondary-foregroundsecondary-hoverhover:bg-secondary-hoverStatus Tokens
Semantic colors for feedback and state indicators
destructivebg-destructivedestructive-foregroundtext-destructive-foregrounddestructive-hoverhover:bg-destructive-hoversuccessbg-successsuccess-foregroundtext-success-foregroundsuccess-hoverhover:bg-success-hoverwarningbg-warningwarning-foregroundtext-warning-foregroundwarning-hoverhover:bg-warning-hoverinfobg-infoinfo-foregroundtext-info-foregroundinfo-hoverhover:bg-info-hoverForm Tokens
Colors for form elements and focus states
borderborder-borderinputborder-inputringring-ringplaceholderplaceholder:text-placeholderInteractive Tokens
States for interactive elements
hoverhover:bg-hoverselectedbg-selectedaccentbg-accentaccent-foregroundtext-accent-foregrounddisabledbg-disableddisabled-foregroundtext-disabled-foregroundLink Tokens
Colors for text links
linktext-linklink-hoverhover:text-link-hoverlink-visitedtext-link-visitedUtility Tokens
Additional layout and utility colors
overlaybg-overlay/50dividerborder-dividerscrollbar-activescrollbar-thumb-activeChart Colors
Data visualization colors optimized for each theme mode
chart-1fill-chart-1chart-2fill-chart-2chart-3fill-chart-3chart-4fill-chart-4chart-5fill-chart-5chart-6fill-chart-6User Role Colors
Standardized colors for user role badges and indicators
These colors are defined in @/ui/config/roles.ts and are the single source of truth for role visual styling. Use these for badges, indicators, and any role-related UI.
#cd4747faUserSecret
#4867a1faUserShield
#7759a1faUserCog
#64697afaUserCheck
#888f9ffaGlobe
Import: import { ROLE_VISUAL_CONFIG } from '@/ui/config/roles'
Brand Palette
The full brand color palette with 11 shades per hue (50-950). Use semantic tokens when possible; use palette colors for custom decorative elements.
Orange is the primary brand color. The gradient uses Pink, Teal, and Purple.
Gray
Red
Orange(Primary Brand)
Yellow
Green
Teal
Blue
Purple
Pink
Brand Gradient & Effects
The signature Centercode gradient and shadow system
Signature Gradient
The brand gradient (pink → teal → purple) creates visual emphasis. Limit to 1-2 featured elements per page.
pink-400teal-300purple-700Gradient Card Border
Gradient Rule
Apply .rule-gradient class for a 2px horizontal gradient line.
Shadow System
Shadows provide elevation hierarchy. Use shadow-xs through shadow-lg.
Usage Guidelines
Always Use
- Semantic token classes (bg-primary, text-muted-foreground)
- Surface + foreground pairs for proper contrast
- Status colors for their intended meaning
Never Use
- Hardcoded hex values in components
- Arbitrary Tailwind values (bg-[#hex])
- Status colors for decorative purposes