SendGrid Design Primitives

Global design primitives/tokens to be used across SendGrid's products, stored as json data.

Packages

• design-colors
• design-spacing
• design-typography

Current Usage

This package is currently being used for Style Guide and SendGrid.design.

Installation

npm install @sendgrid/design-primitives --save

Usage

Sass:

@import '@sendgrid/design-primitives/tokens/sg-style-guide/scss/base.scss';

.my-selector {
  color: $color-slate-20;
}

CSS:

@import '@sendgrid/design-primitives/tokens/sg-style-guide/css/base.css';

.my-selector {
  color: var(--color-slate-20);
}

JavaScript (ES6):

// Individual tokens
import { colfax } from '@sendgrid/design-primitives/tokens/sg-style-guide/es6/base.es6';

console.log(colfax);

// Token category
import { colors } from '@sendgrid/design-primitives/tokens/sg-style-guide/es6/base.es6';

console.log(colors.colorCodePurple);

// All tokens
import * as tokens from '@sendgrid/design-primitives/tokens/sg-style-guide/es6/base.es6';

JavaScript (CommonJS):

// Individual tokens
import { colfax } from '@sendgrid/design-primitives/tokens/sg-style-guide/common/base.common';

console.log(colfax);

// Token category
import { colors } from '@sendgrid/design-primitives/tokens/sg-style-guide/common/base.common';

console.log(colors.colorCodePurple);

// All tokens
import * as tokens from '@sendgrid/design-primitives/tokens/sg-style-guide/common/base.common';