Color System
Complete color palette documentation for the BizKitHub platform. Click any color swatch to copy its HEX code to clipboard.
Primary Brand Color
The signature orange #ec6c50 is the primary identifier of the BizKitHub platform. Use it for key UI elements, buttons, links, and highlights. See the Logo Documentation for complete brand guidelines.
Core Colors
Foundation colors used across the platform
Primary
Main brand color for CTAs and highlights
Secondary
Light accent background
Font
Primary text color
Header
Navigation background
Gray Light
Surface color
Gray
Background color
Light Theme
Color scales optimized for light mode interfaces
Primary Scale
Blue primary color ramp for interactive elements
primary50
primary100
primary200
primary300
primary400
primary500
Brand primary
primary600
primary700
primary800
Text Colors
Typography color hierarchy
textPrimary
textSecondary
textTertiary
textInverse
Neutral Gray Scale
Versatile grays for backgrounds, borders, and subtle text
neutralGray900
neutralGray800
neutralGray700
neutralGray600
neutralGray500
neutralGray400
neutralGray300
neutralGray200
neutralGray100
neutralGray50
neutralGray25
Content Colors
Hierarchical content color scale for layered interfaces
content01
content02
content03
content04
content05
content06
content07
content08
content09
content10
content11
Status Colors
Semantic colors for feedback states
errorPrimary
Error state
errorHover
Error hover
errorDisabled
Error disabled
successPrimary
Success state
successHover
Success hover
successDisabled
Success disabled
Dark Theme
Adjusted colors for dark mode interfaces
brandPrimary
textPrimary
textSecondary
textInverse
primary50
primary100
primary200
primary300
primary400
primary500
Brand primary
primary600
primary700
primary800
errorPrimary
Legacy Colors
Deprecated colors maintained for backward compatibility
These colors are being phased out. For new projects, use the Core, Light Theme, or Dark Theme color palettes above.
appLightBackground
appLightFont
appDarkBackground
appDarkSecondaryBackground
appDarkActiveBackground
appDarkHoverBackground
appDarkSeparator
appDarkText
appDarkTextHover
appDarkSystemContentBackground
appDarkSystemHeader
appDarkSystemHeaderBorder
black
blackBackground
blackDark
white
whiteLightBackground
grayLight
grayUltraLight
grayDark
warningBackground
warningBorder
pastelButtonBlue
pastelBlue
pastelBlueLight
red
orange
prideRed
prideOrange
prideYellow
prideGreen
prideBlue
pridePurple
Accessibility Guidelines
Our color system is designed with accessibility in mind, meeting WCAG 2.1 standards for all users.
WCAG 2.1 Compliance
- AA Level: Minimum 4.5:1 contrast ratio for normal text
- AAA Level: Preferred 7:1 ratio for enhanced readability
- Large Text: Minimum 3:1 for text 18pt+ or 14pt+ bold
- UI Components: Minimum 3:1 for interactive elements
Design Philosophy
- Light theme is the default for optimal accessibility
- Dark headers (#1d2125) maintain visual hierarchy
- Consistent color usage across all applications
- Never rely on color alone to convey information
Best Practices
- Use primary orange (#ec6c50) for main CTAs
- Maintain proper text-to-background contrast
- Test colors in different lighting conditions
- Use semantic color tokens in code
What to Avoid
- Using too many colors simultaneously
- Low contrast color combinations
- Legacy colors in new projects
- Pure black (#000) or white (#fff) for body text
Need help with color implementation?
Check out our logo and brand guidelines for complete visual identity documentation.