SendBird UI kit

Colors

Primary-500 Secondary-500 Error-500

#491389 #066858 #DE360B

Primary-400 Secondary-400 Error-400

#6211C8 #027D69 #DE360B

Primary-300 Secondary-300 Error-300

#742DDD #259C72 #DE360B

Primary-200 Secondary-200 Error-200

#C2A9FA #69C085 #DE360B

Primary-100 Secondary-100 Error-100

#DBD1FF #A8E2AB #DE360B

Background-700 Overlay-01 Information

55%
#000000 #000000 #ADC9FF

Background-600 Overlay-02
32%
#161616 #000000

Background-500

#2C2C2C

Background-400

#393939

Background-300

#BDBDBD

Background-200
Doesn’t exist in current
#E0E0E0

Background-100
Current Background-200
#EEEEEE

Background-50
Current Background-100
#FFFFFF

On Background-Light

On Light-01 On Light-02 On Light-03 On Light-04

88% 50% 38% 12%

#000000 #000000 #000000 #000000

On Background-Dark

On Dark-01 On Dark-02 On Dark-03 On Dark-04

88% 50% 38% 12%

#FFFFFF #FFFFFF #FFFFFF #FFFFFF
SendBird UI kit

Theme

Light theme
Headline 2
In most cases, Background-50 to 300 are used in Light theme as background
Channel frozen color of each component.

Wed, Dec 21
Background-50 Background-100 Background-200 Background-300
Caption 1

Lorem ipsum dolor sit amet, #FFFFFF #EEEEEE #E0E0E0 #BDBDBD

consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Caption 3
On Light color set for the text or other elements on light background (50 to 300)

Caption 1
On Background-Light

On Light-01 On Light-02 On Light-03 On Light-04

88% 50% 38% 12%

#000000 #000000 #000000 #000000
Caption 3

Primary-300 and Secondary-300 are used in Light theme to accent and

Single line message
Caption 3
distinguish certain UI elements such as icon buttons, outoging message bubble,
and read receipt icons. Error-300 is for warning. Information is used for the
Single line message
channel frozen banner only now.

Single line message

Primary-300 Secondary-300 Error-300 Information

#742DDD #259C72 #DE360B #ADC9FF

Type a message
Current Error

Dark theme
Headline 2
In most cases, Background-400 to 700 are used in Dark theme as background
Channel frozen color of each component.

Wed, Dec 21
Background-400 Background-500 Background-600 Background-700
Caption 1

Lorem ipsum dolor sit amet, #393939 #2C2C2C #161616 #000000

consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut
labore et dolore magna aliqua. Caption 3
On Dark color set for the text or other elements on dark background (400 to 700)

Caption 1
On Background-Dark

On Dark-01 On Dark-02 On Dark-03 On Dark-04

88% 50% 38% 12%

#FFFFFF #FFFFFF #FFFFFF #FFFFFF
Caption 3

Primary-200 and Secondary-200 are used in Dark theme to accent and

Single line message
Caption 3
distinguish certain UI elements such as icon buttons, outoging message bubble,
and read receipt icons. Error-200 is for warning. Information is used for the
Single line message
channel frozen banner only now.

Single line message

Primary-200 Secondary-200 Error-200 Information

#C2A9FA #69C085 #DE360B #ADC9FF

Type a message
Current Error
SendBird UI kit

Theme anatomy

Light theme

On Light-01 Subtitle 1 125 Caption 2 On Light-02 Caption 1

Body 3 Maecenas sed diam eget risus Single line message
varius blandit sit amet non magna On Light-03 Enabled Caption 3

Caption 1
Background-50 Long pressed
Single line message
Caption 3

Headline 2 Primary-300
Enabled Single line message
Caption 3
Background-50
Long pressed Single line message
Caption 3

Caption 1
Enabled
On Light-01 Lorem ipsum dolor sit amet, 12 7 23

Background-100 consectetur adipiscing elit, sed do Selected

eiusmod tempor incididunt ut
labore et dolore magna aliqua. Caption 3
Enabled
Subtitle 2
On Dark-01
Secondary-300 Single line message Pressed
Caption 3 Primary-300 Subtitle 2
Elements are On Dark set when
Primary-300 is used as background. Subtitle 2
Background-50

Primary-300 Type a message On Light-01 Primary-200 or the one level higher

Background-100 than enabeld color is used for pressed
and selected states.
Background-50

Dark theme

On Dark-01 Subtitle 1 125 Caption 2 On Dark-02 Caption 1

Body 3 Maecenas sed diam eget risus Single line message
varius blandit sit amet non magna On Dark-03 Enabled Caption 3

Caption 1
Background-600 Long pressed
Single line message
Caption 3

Headline 2 Primary-200
Enabled Single line message
Caption 3
Background-500
Long pressed Single line message
Caption 3

Caption 1
Enabled
On Dark-01 Lorem ipsum dolor sit amet, 12 99 23

Background-400 consectetur adipiscing elit, sed do Selected

eiusmod tempor incididunt ut
labore et dolore magna aliqua. Caption 3
Enabled
Subtitle 2
On Light-01
Secondary-200 Single line message Pressed
Caption 3 Primary-200 Subtitle 2
Elements are On Light set when
Primary-200 is used as background. Subtitle 2
Background-600

Primary-200 Type a message On Dark-01 Primary-500 or the one level higher

Background-400 than enabled color is used for pressed
and selected states.
Background-500