Property name | Value |
---|---|
--c-white | rgb(255, 255, 255) |
--c-lightGray | rgb(246, 247, 248) |
--c-mediumGray | rgb(117, 117, 117) |
--c-darkGray | rgb(53, 62, 72) |
--c-coolGrayLight | rgb(228, 233, 237) |
--c-coolGrayLightTransp | rgba(41, 77, 107, 0.12) |
--c-coolGrayMedium | rgb(151, 159, 164) |
--c-coolGrayMediumTransp | rgba(84, 96, 107, 0.6) |
--c-red | rgb(241, 58, 89) |
--c-darkRed | rgb(211, 45, 74) |
--c-pink | rgb(255, 153, 209) |
--c-yellow | rgb(255, 229, 51) |
--c-lightBlue | rgb(77, 209, 237) |
--c-purple | rgb(55, 30, 172) |
--c-blue | rgb(0, 162, 199) |
--c-plum | rgb(112, 0, 176) |
--c-orange | rgb(255, 91, 15) |
--c-teal | rgb(0, 212, 128) |
--c-shamrock | rgb(89, 219, 51) |
--c-black | rgb(15, 23, 33) |
--c-facebook | rgb(59, 89, 152) |
--c-twitter | rgb(51, 204, 255) |
--c-linkedin | rgb(72, 117, 180) |
--c-tumblr | rgb(43, 73, 100) |
--c-flickr | rgb(254, 8, 131) |
--c-foursquare | rgb(12, 186, 223) |
--c-googleplus | rgb(198, 61, 45) |
--c-googleplusbutton | rgb(255, 255, 255) |
--c-instagram | rgb(78, 67, 60) |
--c-reddit | rgb(206, 227, 248) |
--c-wepay | rgb(72, 145, 220) |
--c-yahoo | rgb(123, 0, 153) |
--c-outlook | rgb(0, 114, 198) |
--c-textPrimary | rgb(46, 62, 72) |
--c-textSecondary | rgba(46, 62, 72, 0.6) |
--c-textTertiary | rgba(46, 62, 72, 0.35) |
--c-textHint | rgba(46, 62, 72, 0.35) |
--c-textDisabled | rgba(46, 62, 72, 0.12) |
--c-textPrimaryInverted | rgb(255, 255, 255) |
--c-textSecondaryInverted | rgba(255, 255, 255, 0.7) |
--c-textTertiaryInverted | rgba(255, 255, 255, 0.35) |
--c-textHintInverted | rgba(255, 255, 255, 0.35) |
--c-textDisabledInverted | rgba(255, 255, 255, 0.12) |
--c-attention | rgb(255, 91, 15) |
--c-success | rgb(0, 212, 128) |
--c-border | rgba(46, 62, 72, 0.12) |
--c-borderDark | rgba(46, 62, 72, 0.54) |
--c-borderInverted | rgba(255, 255, 255, 0.2) |
--c-borderDarkInverted | rgba(255, 255, 255, 0.7) |
--c-separator | rgba(46, 62, 72, 0.26) |
--c-highlight | rgba(0, 0, 255, 0.05) |
--c-selection | rgba(46, 62, 72, 0.05) |
--c-dimmingOverlay | rgba(46, 62, 72, 0.4) |
--c-tappable | rgba(56, 56, 15, 0.09) |
--c-tappableInverted | rgba(255, 246, 196, 0.27) |
--c-contentBG | rgb(255, 255, 255) |
--c-contentBGInverted | rgb(15, 23, 33) |
--c-collectionBG | rgb(246, 247, 248) |
Property name | Value |
---|---|
--font-family-normal | 'Graphik Meetup', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif |
--font-family-mono | Monaco, 'Andale Mono', 'Courier New', monospace |
--font-lineHeight-normal | 1.45 |
--font-lineHeight-largeText | 1.1 |
--font-lineHeight-smallText | 1.6 |
--font-lineHeight-runningText | 1.8 |
--font-size-tiny | 12px |
--font-size-small | 14px |
--font-size-normal | 16px |
--font-size-sectionTitle | 20px |
--font-size-big | 24px |
--font-size-display3 | 28px |
--font-size-display2 | 34px |
--font-size-display1 | 42px |
--font-size-title | 32px |
--font-weight-normal | 400 |
--font-weight-medium | 500 |
--font-weight-bold | 600 |
Property name | Value |
---|---|
--block-1 | 48px |
--block-2 | 72px |
--block-3 | 108px |
--block-4 | 160px |
--block-5 | 240px |
--block-6 | 384px |
--block-7 | 544px |
--breakpoint-s | 440px |
--breakpoint-m | 640px |
--breakpoint-l | 840px |
--breakpoint-xl | 1024px |
--radius-small | 2px |
--radius-normal | 4px |
--radius-large | 8px |
--space-1 | 16px |
--space-2 | 24px |
--space-3 | 36px |
--space-4 | 56px |
--space-5 | 80px |
--space-6 | 120px |
--space-7 | 184px |
--space-8 | 280px |
--space-half | 8px |
--space-double | 32px |
--space-quarter | 4px |
--width-modal | 440px |
--width-bounds | 840px |
--width-bounds-wide | 1100px |
--zindex-main | 0 |
--zindex-floatingContent | 10 |
--zindex-shade | 20 |
--zindex-shadeContent | 25 |
--zindex-modal | 30 |
--zindex-popup | 50 |
Property name | Value |
---|---|
--media-xs |
default:
16px
atMedium:
18px
atLarge:
20px
|
--media-s |
default:
24px
atMedium:
27px
atLarge:
30px
|
--media-m |
default:
36px
atMedium:
40px
atLarge:
45px
|
--media-l |
default:
48px
atMedium:
54px
atLarge:
60px
|
--media-xl |
default:
72px
atMedium:
81px
atLarge:
90px
|
--media-xxl |
default:
120px
atMedium:
135px
atLarge:
150px
|
--responsive-space |
default:
16px
atMedium:
18px
atLarge:
20px
|