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/
119 lines (117 loc) • 3.53 kB
text/less
// Do not edit directly
// Generated on Mon, 22 Jun 2020 09:00:36 GMT
@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;