Color

TIP

Colors can be changed by configuring theme of bigin-ui and unocss. Please refer to Getting Started for more information.

Branding

Main color, mostly use for actions

primary

P1

P2

P3

P4

P5

Elementary

Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)

blue

B1

B2

B3

B4

B5

teal

T1

T2

T3

T4

T5

green

G1

G2

G3

G4

G5

yellow

Y1

Y2

Y3

Y4

Y5

orange

O1

O2

O3

O4

O5

red

R1

R2

R3

R4

R5

Neutral

Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.

white

N1

N2

N3

N4

N5

N6

N7

N8

N9

black

Others

Shadow Level 1

Shadow Level 2

Shadow Level 3

Overlay

Mask