diff --git a/packages/design-tokens/.npmignore b/packages/design-tokens/.npmignore
new file mode 100644
index 00000000..037f4b09
--- /dev/null
+++ b/packages/design-tokens/.npmignore
@@ -0,0 +1,9 @@
+*.ts
+!*.d.ts
+*.spec.js
+*.spec.d.ts
+*.tsx
+*.mdx
+tsconfig.json
+__snapshots__
+jest.config.js
diff --git a/packages/design-tokens/design-tokens.mdx b/packages/design-tokens/design-tokens.mdx
new file mode 100644
index 00000000..29883a61
--- /dev/null
+++ b/packages/design-tokens/design-tokens.mdx
@@ -0,0 +1,172 @@
+---
+name: Design Tokens
+route: /design-tokens
+menu: Components
+---
+import { Playground } from 'docz';
+import {
+ absolute,
+ breakpoint,
+ defaultBorderRadius,
+ defaultBoxShadow,
+ defaultEasing,
+ centeredHorizontal,
+ focus,
+ fontFamilyRegular,
+ fontFamilyBold,
+ fontSizeExtraSmall,
+ fontSizeSmall,
+ fontSizeMedium,
+ fontSizeLarge,
+ fontSizeExtraLarge,
+ fontSizeGigantic,
+ opacity,
+ position,
+ relative
+} from './src';
+
+# Design Tokens
+
+## Typography
+
+### `fontFamilyRegular()`
+
+
+ {fontFamilyRegular()}
+
+
+### `fontFamilyBold()`
+
+ {fontFamilyBold()}
+
+
+### `fontSizeExtraSmall()`
+
+ {fontSizeExtraSmall()}
+
+
+### `fontSizeSmall()`
+
+ {fontSizeSmall()}
+
+
+### `fontSizeMedium()`
+
+ {fontSizeMedium()}
+
+
+### `fontSizeLarge()`
+
+ {fontSizeLarge()}
+
+
+### `fontSizeExtraLarge()`
+
+ {fontSizeExtraLarge()}
+
+
+### `fontSizeGigantic()`
+
+ {fontSizeGigantic()}
+
+
+## Breakpoints
+
+### `breakpoint('mobile-small')`
+
+ {breakpoint('mobile-small')}
+
+
+### `breakpoint('mobile-medium')`
+
+ {breakpoint('mobile-medium')}
+
+
+### `breakpoint('mobile-large')`
+
+ {breakpoint('mobile-large')}
+
+
+### `breakpoint('tablet-small')`
+
+ {breakpoint('tablet-small')}
+
+
+### `breakpoint('tablet-medium')`
+
+ {breakpoint('tablet-medium')}
+
+
+### `breakpoint('tablet-large')`
+
+ {breakpoint('tablet-large')}
+
+
+### `breakpoint('laptop-small')`
+
+ {breakpoint('laptop-small')}
+
+
+### `breakpoint('laptop-medium')`
+
+ {breakpoint('laptop-medium')}
+
+
+### `breakpoint('laptop-large')`
+
+ {breakpoint('laptop-large')}
+
+
+## Layout
+
+### `position('top-right')`
+
+ {position('top-right')}
+
+
+### `position('bottom-right')`
+
+ {position('bottom-right')}
+
+
+### `position('top-left')`
+
+ {position('top-left')}
+
+
+### `position('bottom-left')`
+
+ {position('bottom-left')}
+
+
+### `centeredHorizontal()`
+
+ {centeredHorizontal()}
+
+
+## Tokens
+
+### `defaultBoxShadow()`
+
+ {defaultBoxShadow()}
+
+
+### `defaultBorderRadius()`
+
+ {defaultBorderRadius()}
+
+
+### `focus()`
+
+ {focus()}
+
+
+### `defaultEasing()`
+
+ {defaultEasing()}
+
+
+### `opacity('#ffffff', 0.5)`
+
+ {opacity('#ffffff', 0.5)}
+
diff --git a/packages/design-tokens/jest.config.js b/packages/design-tokens/jest.config.js
new file mode 100644
index 00000000..990bd442
--- /dev/null
+++ b/packages/design-tokens/jest.config.js
@@ -0,0 +1 @@
+module.exports = require('../../jest.config');
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
new file mode 100644
index 00000000..2d85653f
--- /dev/null
+++ b/packages/design-tokens/package.json
@@ -0,0 +1,26 @@
+{
+ "name": "@lapidist/design-tokens",
+ "version": "0.0.0",
+ "description": "Design tokens for the Lapidist styleguide",
+ "author": "Brett Dorrans ",
+ "license": "MIT",
+ "main": "src/index.js",
+ "scripts": {
+ "build": "tsc -p tsconfig.json",
+ "test": "jest"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "dependencies": {
+ "@lapidist/theme-provider": "^1.5.0"
+ },
+ "release": {
+ "analyzeCommits": {
+ "preset": "angular",
+ "releaseRules": [
+ {"type": "build", "release": "minor"}
+ ]
+ }
+ }
+}
diff --git a/packages/design-tokens/src/design-tokens.spec.tsx b/packages/design-tokens/src/design-tokens.spec.tsx
new file mode 100644
index 00000000..c57f3940
--- /dev/null
+++ b/packages/design-tokens/src/design-tokens.spec.tsx
@@ -0,0 +1,2 @@
+// eslint-disable-next-line jest/no-disabled-tests
+test.skip('it works', () => {});
diff --git a/packages/design-tokens/src/index.tsx b/packages/design-tokens/src/index.tsx
new file mode 100644
index 00000000..c4ab83b4
--- /dev/null
+++ b/packages/design-tokens/src/index.tsx
@@ -0,0 +1,224 @@
+import { defaultTheme } from '@lapidist/theme-provider';
+
+export type Position =
+ | 'top-right'
+ | 'bottom-right'
+ | 'top-left'
+ | 'bottom-left';
+
+export type Device =
+ | 'mobile-small'
+ | 'mobile-medium'
+ | 'mobile-large'
+ | 'tablet-small'
+ | 'tablet-medium'
+ | 'tablet-large'
+ | 'laptop-small'
+ | 'laptop-medium'
+ | 'laptop-large';
+
+const r = (color: string): number => parseInt(color.slice(1, 3), 16);
+
+const g = (color: string): number => parseInt(color.slice(3, 5), 16);
+
+const b = (color: string): number => parseInt(color.slice(5, 7), 16);
+
+export const opacity = (color: string, opacity: number): string =>
+ `rgba(${r(color)}, ${g(color)}, ${b(color)}, ${opacity})`;
+
+export const stripUnit = (value: string): number =>
+ parseFloat(value.split('px')[0]);
+
+export const boxShadow = (
+ xOffset: string | number,
+ yOffset: string | number,
+ blurRadius: string | number,
+ color: string
+): string => `${xOffset} ${yOffset} ${blurRadius} ${color}`;
+
+export const breakpoint = (device: Device = 'laptop-large'): string => {
+ switch (device) {
+ case 'mobile-small':
+ return `(min-width: ${defaultTheme.breakpoints.mobile.s})`;
+ case 'mobile-medium':
+ return `(min-width: ${defaultTheme.breakpoints.mobile.m})`;
+ case 'mobile-large':
+ return `(min-width: ${defaultTheme.breakpoints.mobile.l})`;
+ case 'tablet-small':
+ return `(min-width: ${defaultTheme.breakpoints.tablet.s})`;
+ case 'tablet-medium':
+ return `(min-width: ${defaultTheme.breakpoints.tablet.m})`;
+ case 'tablet-large':
+ return `(min-width: ${defaultTheme.breakpoints.tablet.l})`;
+ case 'laptop-small':
+ return `(min-width: ${defaultTheme.breakpoints.laptop.s})`;
+ case 'laptop-medium':
+ return `(min-width: ${defaultTheme.breakpoints.laptop.m})`;
+ case 'laptop-large':
+ default:
+ return `(min-width: ${defaultTheme.breakpoints.laptop.l})`;
+ }
+};
+
+export const defaultAnimationDuration = (): string =>
+ `animation-duration: 0.8s`;
+
+export const defaultBoxShadow = (): string => `
+ box-shadow: ${boxShadow(
+ '0',
+ defaultTheme.sizing.xxxs,
+ defaultTheme.sizing.xs,
+ opacity(defaultTheme.colors.greys.light, 0.025)
+ )}, ${boxShadow(
+ '0',
+ defaultTheme.sizing.xxxs,
+ defaultTheme.sizing.xs,
+ opacity(defaultTheme.colors.greys.light, 0.035)
+)};
+`;
+
+export const defaultBorderRadius = (): string => `border-radius: 0`;
+
+export const defaultEasing = (): string => `cubic-bezier(0.6, 0.04, 0.98, 0.7)`;
+
+export const defaultTransition = (): string =>
+ `transition: all 0.12s ${defaultEasing()}`;
+
+export const slideRight = (): string => `
+ ${defaultAnimationDuration()}
+
+ animation-name: slide-right;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
+
+ @keyframes slide-right {
+ 0% { transform: translate3d(-100%,0,0) }
+ 80% { transform: translateZ(0) }
+ 90% { transform: translate3d(-5%,0,0) }
+ to { transform: translateZ(0) }
+ }
+`;
+
+export const thinking = (): string => `
+ ${defaultAnimationDuration()}
+
+ animation-name: thinking;
+ animation-iteration-count: infinite;
+ animation-timing-function: ease-in-out;
+
+ @keyframes thinking {
+ 0% { opacity: 1 }
+ 50% { opacity: 0.6 }
+ 100% { opacity: 1 }
+ }
+`;
+
+export const slideUpLeft = (): string => `
+ ${defaultAnimationDuration()}
+
+ animation-name: slide-up-left;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
+
+ @keyframes slide-up-left {
+ 0% { transform: translate3d(100%,100%,0) }
+ 80% { transform: translateZ(0) }
+ 90% { transform: translate3d(5%,5%,0) }
+ to { transform: translateZ(0) }
+ }
+`;
+
+export const slideDown = (): string => `
+ ${defaultAnimationDuration()}
+
+ animation-name: slide-down;
+ animation-iteration-count: 1;
+ animation-timing-function: linear;
+ animation-duration: 0.4s;
+
+ @keyframes slide-down {
+ 0% { transform: translate3d(0,-100%,0) }
+ 80% { transform: translateZ(0) }
+ 90% { transform: translate3d(0,-5%,0) }
+ to { transform: translateZ(0) }
+ }
+`;
+
+export const rotate = (): string => `
+ ${defaultAnimationDuration()}
+
+ animation-name: rotate-flip;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ animation-fill-mode: both;
+
+ @keyframes rotate-flip {
+ 0% { transform: scale(1) rotate(0) }
+ 50% { transform: scale(1.2) rotateZ(180deg) }
+ 100% { transform: scale(1) rotateZ(360deg) }
+ }
+`;
+
+export const focus = (): string => `
+ outline: ${defaultTheme.sizing.xxxs} transparent;
+ outline-offset: ${defaultTheme.sizing.xxxs};
+
+ :focus {
+ outline: ${defaultTheme.sizing.xxxs} solid ${defaultTheme.colors.yellows.base};
+ }
+`;
+
+export const relative = (): string => `position: relative`;
+
+export const absolute = (): string => `position: absolute`;
+
+export const position = (position: Position | 'fill-parent'): string => {
+ switch (position) {
+ case 'top-right':
+ return `${absolute()} top: 0; right: 0`;
+ case 'bottom-right':
+ return `${absolute()} bottom: 0; right: 0`;
+ case 'top-left':
+ return `${absolute()} top: 0; left: 0`;
+ case 'bottom-left':
+ return `${absolute()} bottom: 0; left: 0`;
+ case 'fill-parent':
+ default:
+ return `${absolute()} top: 0; right: 0; bottom: 0; left: 0`;
+ }
+};
+
+export const fontFamilyRegular = (): string =>
+ `font-family: 'SofiaProRegular', sans-serif`;
+
+export const fontFamilyBold = (): string =>
+ `font-family: 'SofiaProBold', sans-serif`;
+
+export const fontSizeExtraSmall = (): string =>
+ `font-size: ${defaultTheme.sizing.xs}`;
+
+export const fontSizeSmall = (): string =>
+ `font-size: ${defaultTheme.sizing.s}`;
+
+export const fontSizeMedium = (): string =>
+ `font-size: ${defaultTheme.sizing.m}`;
+
+export const fontSizeLarge = (): string =>
+ `font-size: ${defaultTheme.sizing.l}`;
+
+export const fontSizeExtraLarge = (): string =>
+ `font-size: ${defaultTheme.sizing.xl}`;
+
+export const fontSizeGigantic = (): string =>
+ `font-size: ${defaultTheme.sizing.xxl}`;
+
+export const centeredHorizontal = (): string => `margin: 0 auto`;
+
+export const fillParent = (): string => `
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%
+`;
diff --git a/packages/design-tokens/tsconfig.json b/packages/design-tokens/tsconfig.json
new file mode 100644
index 00000000..76e32b06
--- /dev/null
+++ b/packages/design-tokens/tsconfig.json
@@ -0,0 +1,5 @@
+{
+ "$schema": "http://json.schemastore.org/tsconfig",
+ "extends": "../../tsconfig.base.json",
+ "include": ["src/**/*.ts", "src/**/*.tsx"]
+}