Style Guide

In order to create a more transparent UI code, we introduced some great design principles and code styles from the community.

BEM

Use BEM to create structured class names.

<div class="box box--info">
  <header class="box__header">Tip</header>
  <div class="box__body">
    // ...
  </div>
</div>

Name	Hex	Description
Primary	#636AFF	Brand color
Info	#0069FF	Accent color
Success	#15CD72	Positive color
Danger	#FF2D20	Negative color
Warning	#ED6E33	Warning color

Name	Hex	Description
Black	#000000	Use Black to shade colors or add shadows with transparency
Dark	#212121	Primary color for heading, body text
Mute	#616161	Secondary color for text, meta info, icons
Thin	#DBDBDB	Color for borders, form controls, icons
Weak	#E5E5E5	Color for lines, cards
Shade	#EEEEEE	Color for disabled state
Light	#F7F7F7	Color for backgrounds
White	#FFFFFF	Use White to tint colors, white text on dark backgrounds

Use spacing to create layouts that feels comfortable

Type	Properties	Exammple
Stack Spacing for horizontal or vertical stack layouts	xxs: 2px
	xs: 4px
	sm: 8px
	md: 16px
	lg: 24px
	xl: 32px
	xxl: 64px
Square Spacing for square inset box layouts	xs: 4px
	sm: 8px
	md: 16px
	lg: 32px
	xl: 64px
Squish Spacing for squish inset box layouts
	xs: 4px, 8px
	sm: 6, 12px
	md: 8px, 16px
	lg: 12px, 24px
	xl: 16px, 32px