datacom-design-tokens
Version:
### Getting Started 🚀 This contains the all the style tokens for the Datacom brand. The tokens can be built for 3 different platforms at the moment - web, android and ios. The tokens are stored as JSON files under `src/`. The brand colors are under `src/
123 lines (121 loc) • 3.89 kB
CSS
/**
* Do not edit directly
* Generated on Mon, 22 Jun 2020 09:00:36 GMT
*/
:root {
--color-accent-pink-20: #faccdf;
--color-accent-pink-40: #f599bf;
--color-accent-pink-60: #f0669f;
--color-accent-pink-80: #eb337f;
--color-accent-pink-base: #e60060;
--color-dark-blue-20: #ced0d7;
--color-dark-blue-40: #9da2af;
--color-dark-blue-60: #6c7488;
--color-dark-blue-80: #3b4660;
--color-dark-blue-base: #0a1839;
--color-datacom-blue-20: #ccd3e2;
--color-datacom-blue-40: #99a7c6;
--color-datacom-blue-60: #667ba9;
--color-datacom-blue-80: #334f8c;
--color-datacom-blue-base: #002470;
--color-action-blue: #0055ff;
--color-action-blue-hover: #003fbc;
--color-light-blue-20: #e3f3ff;
--color-light-blue-40: #c8e7ff;
--color-light-blue-60: #acdbff;
--color-light-blue-80: #91cfff;
--color-light-blue-base: #76c4ff;
--color-extra-light-blue-20: #fafcff;
--color-extra-light-blue-40: #f5f9ff;
--color-extra-light-blue-60: #eff6ff;
--color-extra-light-blue-80: #eaf3ff;
--color-extra-light-blue-base: #e5f1ff;
--color-accent-orange-20: #fcdbd4;
--color-accent-orange-40: #f9b7aa;
--color-accent-orange-60: #f69380;
--color-accent-orange-80: #f36f56;
--color-accent-orange-base: #f04c2c;
--color-rag-red: #cf364e;
--color-rag-amber: #f0b02c;
--color-rag-green: #40b549;
--color-datacom-black: #151515;
--color-darkest-grey: #333333;
--color-dark-grey: #666666;
--color-grey: #999999;
--color-light-grey: #dadada;
--color-extra-light-grey: #f0f0f0;
--color-white: #ffffff;
--color-error-red: #cf364e;
--font-14-size: 14px;
--font-14-line-height: 18px;
--font-16-size: 16px;
--font-16-line-height: 24px;
--font-18-size: 18px;
--font-18-line-height: 24px;
--font-24-size: 24px;
--font-24-line-height: 32px;
--font-32-size: 32px;
--font-32-line-height: 40px;
--font-40-size: 40px;
--font-40-line-height: 48px;
--font-48-size: 48px;
--font-48-line-height: 64px;
--font-64-size: 64px;
--font-64-line-height: 80px;
--font-80-size: 80px;
--font-80-line-height: 100px;
--font-color-default: #0a1839;
--font-color-cta: #0055ff;
--font-color-caption: #666666;
--font-h-1-size: 80px;
--font-h-1-line-height: 100px;
--font-h-2-size: 64px;
--font-h-2-line-height: 80px;
--font-h-3-size: 48px;
--font-h-3-line-height: 64px;
--font-h-4-size: 40px;
--font-h-4-line-height: 48px;
--font-h-5-size: 32px;
--font-h-5-line-height: 40px;
--font-h-6-size: 24px;
--font-h-6-line-height: 32px;
--font-cta-size: 18px;
--font-cta-line-height: 24px;
--font-body-size: 16px;
--font-body-line-height: 24px;
--font-captions-size: 14px;
--font-captions-line-height: 18px;
--breakpoint-mobile: 500px;
--breakpoint-tablet: 900px;
--breakpoint-desktop: 1300px;
--icon-20-size: 20px;
--icon-20-line-height: 20px;
--icon-24-size: 24px;
--icon-24-line-height: 24px;
--letter-spacing-large: -0.5px;
--letter-spacing-small: -0.2px;
--spacing-padding-01: 4px;
--spacing-padding-02: 8px;
--spacing-padding-03: 12px;
--spacing-padding-04: 16px;
--spacing-padding-05: 24px;
--spacing-padding-06: 32px;
--spacing-padding-07: 40px;
--spacing-padding-08: 48px;
--spacing-padding-09: 64px;
--spacing-layout-01: 12px;
--spacing-layout-02: 16px;
--spacing-layout-03: 24px;
--spacing-layout-04: 32px;
--spacing-layout-05: 40px;
--spacing-layout-06: 48px;
--spacing-layout-07: 64px;
--spacing-layout-08: 80px;
--spacing-layout-09: 120px;
--typography-font-family-200: 'Montserrat Extra Light', sans-serif;
--typography-font-family-300: 'Montserrat Light', sans-serif;
--typography-font-family-400: 'Montserrat Regular', sans-serif;
--typography-font-family-500: 'Montserrat Medium', sans-serif;
--typography-font-family-600: 'Montserrat Semi Bold', sans-serif;
--typography-font-family-700: 'Montserrat Bold', sans-serif;
}