Get StartedFoundationsComponentsPatternsIntegration
01.Get Started
02.Foundations
03.Components
04.Patterns
05.Integration
Color
Typography
Spacing
Icons
Motion
Accessibility

COLOR

PreviousDesign Tokens
TypographyNext
ELFBAR Design

V 0.1.0

A design system built for BMD teams.

Brand Marketing Department

Resources

  • GitHub
  • Storybook
  • Figma

Documentation

  • Changelog
  • Components
  • Tokens
  • Global market globe

Brands

  • ELFBAR Official
  • LostMary Official

Copyright © 2026 ELFBAR. All rights reserved.

The color system is organized in two layers: Core Palette provides raw color values, and Semantic Colors map those values to specific purposes. Use the brand switcher in the top-right corner to see differences between brands, and toggle the theme to view light/dark mode variations.

Core Palette

Accent 1Brand
10
20
30
40
50
60
70
80
90
100
Accent 2Brand
10
20
30
40
50
60
70
80
90
100
Accent 3Brand
10
20
30
40
50
60
70
80
90
100
Neutral
10
20
30
40
50
60
70
80
90
100
110
120
130
140
Blue
10
20
30
40
50
60
70
80
90
100
Green
10
20
30
40
50
60
70
80
90
100
Yellow
10
20
30
40
50
60
70
80
90
100
Red
10
20
30
40
50
60
70
80
90
100
Black(Opacity)
10
20
30
40
50
60
70
80
90
100
White(Opacity)
10
20
30
40
50
60
70
80
90
100