Less Design tokens

Do more with Less


_design-tokens.less:

@gg-color-black: #000000
@gg-color-white: #FFFFFF
@gg-color-light-pink: #EB5F8E
@gg-color-light-green: #72B72A
@gg-color-light-blue: #35ADCE
@gg-color-yellow: #FCC31E
@gg-color-dark-pink: #AE0D21
@gg-color-dark-green: #007349
@gg-color-dark-blue: #00528A
@gg-color-orange: #EA5B25
@gg-color-graphite: #2F2E31
@gg-color-dove-grey: #666666
@gg-color-alto: #D0D0D0
@gg-color-wild-sand: #F5F5F5
@gg-color-gallery: #ECECEC
@gg-breakpoint-tiny: 320px
@gg-breakpoint-small: 360px
@gg-breakpoint-medium: 768px
@gg-breakpoint-large: 992px
@gg-grid-unit: 8px
@gg-icon-small: 16px
@gg-icon-medium: 24px
@gg-icon-large: 48px
@gg-icon-huge: 72px
@gg-icon-gargantuan: 120px
@gg-icon-colossal: 192px
@gg-image-tiny: 72px
@gg-image-small: 120px
@gg-image-medium: 192px
@gg-image-large: 312px
@gg-image-huge: 504px
@gg-layout-min-width: 320px
@gg-layout-max-width: 1140px
@gg-layout-header-height: 56px
@gg-spacer-fine: 4px
@gg-spacer-tiny: 8px
@gg-spacer-small: 16px
@gg-spacer-medium: 24px
@gg-spacer-large: 48px
@gg-spacer-huge: 72px
@gg-text-megaphone-font-size: 40px
@gg-text-megaphone-line-height: 48px
@gg-text-megaphone-font-weight: 700
@gg-text-megaphone-medium-breakpoint-font-size: 82px
@gg-text-megaphone-medium-breakpoint-line-height: 88px
@gg-text-megaphone-medium-breakpoint-letter-spacing: -.02em
@gg-text-shout-font-size: 32px
@gg-text-shout-line-height: 40px
@gg-text-shout-font-weight: 700
@gg-text-shout-medium-breakpoint-font-size: 54px
@gg-text-shout-medium-breakpoint-line-height: 64px
@gg-text-louder-font-size: 24px
@gg-text-louder-line-height: 32px
@gg-text-louder-font-weight: 700
@gg-text-louder-medium-breakpoint-font-size: 36px
@gg-text-louder-medium-breakpoint-line-height: 48px
@gg-text-loud-font-size: 20px
@gg-text-loud-line-height: 24px
@gg-text-loud-font-weight: 500
@gg-text-loud-medium-breakpoint-font-size: 24px
@gg-text-loud-medium-breakpoint-line-height: 32px
@gg-text-speak-up-font-size: 16px
@gg-text-speak-up-font-weight: 700
@gg-text-speak-up-line-height: 24px
@gg-text-speak-font-size: 16px
@gg-text-speak-font-weight: 400
@gg-text-speak-line-height: 24px
@gg-text-whisper-loud-font-size: 12px
@gg-text-whisper-loud-letter-spacing: .02em
@gg-text-whisper-loud-font-weight: 700
@gg-text-whisper-loud-line-height: 20px
@gg-text-whisper-font-size: 12px
@gg-text-whisper-letter-spacing: .02em
@gg-text-whisper-font-weight: 400
@gg-text-whisper-line-height: 20px