Scalable design system based on BEM
Variables
--color-brand
#FFCC00
--color-action
#FFDB4D
--color-selection
#FFEBA0
--color-hover
#FFF6CB
--color-inverse
rgba(0, 0, 0, 0.9)
--color-border
rgba(0, 0, 0, 0.05)
--color-border-control
rgba(0, 0, 0, 0.12)
--color-ghost
#F3F1ED
--color-default
#FFFFFF
--color-default-android
#F9F9F9
--color-tone
rgba(0,0,0,0.90)
--color-disable
rgba(0,0,0,0.08)
--color-success
#00985F
--color-alert
#FF3333
--color-normal
#DDE3E5
--color-typo-primary
#000000
--color-typo-promo
rgba(0, 0, 0, 0.7)
--color-typo-secondary
rgba(0, 0, 0, 0.60)
--color-typo-ghost
rgba(0, 0, 0, 0.30)
--color-typo-inverse
#FFFFFF
--color-typo-success
#00985F
--color-typo-alert
#FF3333
--color-typo-disable
rgba(0,0,0,0.30)
--color-link
#0070F0
--color-link-hover
#CC0000
--color-link-minor
#666699
--color-typo-letter
#FF0000
--space-xxxxl
48px
--space-xxxl
40px
--space-xxl
32px
--space-xl
24px
--space-l
20px
--space-m
16px
--space-s
12px
--space-xs
8px
--space-xxs
4px
--space-xxxs
2px