Sass Design tokens

Make it Sassy


_design-tokens.scss:

Included as a reference: you probably won’t need to use these as you should use the sass functions and mixins (ie getColour()).

$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-red: #D60000
$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