If you encounter any problems with this design system, welcome to feedback by raising GitHub issues.
Token
Value*
Description
color-ink-primaryhsl(240deg, 15%, 15%)Primary ink color†
color-ink-secondaryhsl(240deg, 15%, 55%)Secondary ink color†
color-bg-primaryhsl(240deg, 15%, 100%)Primary (normal) background
color-bg-secondaryhsl(240deg, 15%, 97%)Secondary (darker) background
color-line-primaryhsl(240deg, 15%, 95%)Primary (normal) line color, suitable with primary background
color-line-secondaryhsl(240deg, 15%, 92%)Secondary (darker) line color, suitable with secondary background
color-accent-primaryhsl( 24deg, 100%, 50%)Primary accent color
color-accent-secondaryhsl( 48deg, 100%, 50%)Secondary accent color
color-accent-bghsl( 24deg, 100%, 97%)Background with accent color tint
color-error-primaryhsl(350deg, 100%, 40%)Primary error color
color-error-bghsl(350deg, 100%, 97%)Background with error color tint
* Text are usually specified with ink colors. Also, ink colors can be widely used as foreground element tints.
† Color values should be set in HSL model, of which the value logic is comprehensible for both designers and engineers.
Elementary token*
Value
Description
em-display32pxDisplay font size
em-headline24pxHeadline font size
em-body16pxBody font size
em-note14pxNote font size
em-caption12pxCaption font size
leading-display48pxDisplay line height
leading-headline32pxHeadline line height
leading-body24pxBody line height
leading-note20pxNote line height
leading-caption16pxCaption line height
font-weight-rg400†Regular weight
font-weight-md500†Medium weight
font-weight-sb600†Semibold weight
font-weight-eb800†Extrabold weight
Compound token‡
Value§
Description
text-display-rgem-display
leading-display
font-weight-rgRegular display scale
text-display-sbem-display
leading-display
font-weight-sbSemibold display scale
text-display-ebem-display
leading-display
font-weight-ebExtrabold display scale
text-headline-rgem-headline
leading-headline
font-weight-rgRegular headline scale
text-headline-sbem-headline
leading-headline
font-weight-sbSemibold headline scale
text-headline-ebem-headline
leading-headline
font-weight-ebExtrabold headline scale
text-body-rgem-body
leading-body
font-weight-rgRegular body scale
text-body-sbem-body
leading-body
font-weight-sbSemibold body scale
text-body-ebem-body
leading-body
font-weight-ebExtrabold body scale
text-note-rgem-note
leading-note
font-weight-rgRegular note scale
text-note-sbem-note
leading-note
font-weight-sbSemibold note scale
text-note-ebem-note
leading-note
font-weight-ebExtrabold note scale
text-caption-rgem-caption
leading-caption
font-weight-rgRegular caption scale
text-caption-sbem-caption
leading-caption
font-weight-sbSemibold caption scale
text-caption-ebem-caption
leading-caption
font-weight-ebExtrabold caption scale
* An elementary token is usually defined by a simple attribution with a specific value.
† Font weights set by numeric values are future-proof for variable fonts.
‡ An compound token can be composed of several elementary tokens, or can be generated by extending another token.
§ Tokens of text-* are defaultly based on font-family-basic.
Elementary token
Value
Description
elevation-shadow-color240deg, 15%, 15%HSL color value of shadows
elevation-shadow-10px 3px 8px hsla(elevation-shadow-color, 6%)
0px 1.5px 4px hsla(elevation-shadow-color, 6%)
0px 1px 2px hsla(elevation-shadow-color, 6%)
0px 0.5px 1px hsla(elevation-shadow-color, 6%)
0px 0px 0.5px hsla(elevation-shadow-color, 8%)Shadows* for elevation level 1
elevation-shadow-20px 8px 16px hsla(elevation-shadow-color, 4%)
0px 4px 12px hsla(elevation-shadow-color, 4%)
0px 2px 8px hsla(elevation-shadow-color, 4%)
0px 1px 4px hsla(elevation-shadow-color, 4%)
0px 0px 0.5px hsla(elevation-shadow-color, 8%)Shadows* for elevation level 2
elevation-shadow-30px 16px 24px hsla(elevation-shadow-color, 2%)
0px 8px 12px hsla(elevation-shadow-color, 2%)
0px 6px 8px hsla(elevation-shadow-color, 2%)
0px 4px 6px hsla(elevation-shadow-color, 3%)
0px 0px 0.5px hsla(elevation-shadow-color, 8%)Shadows* for elevation level 3
zindex-00†Z-axis level 0
zindex-1100†Z-axis level 1
zindex-2200†Z-axis level 2
zindex-3300†Z-axis level 3
zindex-4400†Z-axis level 4
zindex-5500†Z-axis level 5
zindex-6600†Z-axis level 6
zindex-7700†Z-axis level 7
zindex-8800†Z-axis level 8
zindex-9900†Z-axis level 9
Compound token
Value‡
Description
elevation-1box-shadow: elevation-shadow-1Elevation level 1
elevation-2box-shadow: elevation-shadow-2Elevation level 2
elevation-3box-shadow: elevation-shadow-3Elevation level 3
* Multiple shadow layers are used for generating smoother shadows as a CSS trick.
† The zindex-* tokens are used as a CSS value convention for z-index property.
‡ Currently, elevations mainly depend on CSS box-shadow with appropriate z-index.
Token
Value
Description
border-line-primary1px solid
color-line-primaryThin (default) primary border line
border-line-secondary1px solid
color-line-secondaryThin (default) secondary border line
border-accent1px solid
color-accent-primaryThin (default) accent border line
border-accent--medium2px solid
color-accent-primaryMedium accent border line
border-accent--thick4px solid
color-accent-primaryThick accent border line
border-corner-sm4px*Small border corner
border-corner-md8px*Medium border corner
border-corner-pill999em†Pill-shaped border corner
* The values of border-corner-* tokens are the corner radius sizes.
† A very large radius size, e.g. 999em, can be used to generate pill-shaped border corner according to border radii overlapping.