Style Guide

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


Use BEM to create structured class names.

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


Theme Colors

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

Grey Colors

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
Spacing for horizontal or vertical stack layouts
xxs: 2px
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
xxl: 64px
Spacing for square inset box layouts
xs: 4px
sm: 8px
md: 16px
lg: 32px
xl: 64px
Spacing for squish inset box layouts
xs: 4px, 8px
sm: 6, 12px
md: 8px, 16px
lg: 12px, 24px
xl: 16px, 32px


Type Properties Example
Display lg: 64px Lorem
md: 48px Lorem
sm: 36px Lorem
Title xl: 32px Lorem
lg: 28px Lorem
md: 24px Lorem
sm: 20px Lorem
xs: 18px Lorem
Base lg: 18px Lorem
md: 16px Lorem
sm: 14px Lorem
Meta lg: 16px Lorem
md: 14px Lorem
sm: 12px Lorem