diff --git a/docs/design/tokens.md b/docs/design/tokens.md
index 5220e977e..aa26c5589 100644
--- a/docs/design/tokens.md
+++ b/docs/design/tokens.md
@@ -13,49 +13,7 @@ TODO
 
 Spacing tokens are used to provide consistent spacing in your app.
 
-<div style="display: flex; flex-wrap: wrap; margin: 0 -20px;">
-  <div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
-    <span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--xxs); margin-bottom: 10px;"></span>
-    <br>
-    <code>--sl-spacing--xxs</code>
-  </div>
-
-  <div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
-    <span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--xs); margin-bottom: 10px;"></span>
-    <br>
-    <code>--sl-spacing--xs</code>
-  </div>
-
-  <div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
-    <span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--sm); margin-bottom: 10px;"></span>
-    <br>
-    <code>--sl-spacing--sm</code>
-  </div>
-
-  <div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
-    <span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--md); margin-bottom: 10px;"></span>
-    <br>
-    <code>--sl-spacing--md</code>
-  </div>
-
-  <div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
-    <span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--lg); margin-bottom: 10px;"></span>
-    <br>
-    <code>--sl-spacing--lg</code>
-  </div>
-
-  <div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
-    <span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--xl); margin-bottom: 10px;"></span>
-    <br>
-    <code>--sl-spacing--xl</code>
-  </div>
-
-  <div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
-    <span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--xxl); margin-bottom: 10px;"></span>
-    <br>
-    <code>--sl-spacing--xxl</code>
-  </div>
-</div>
+TODO
 
 
 ## Elevation
@@ -63,11 +21,11 @@ Spacing tokens are used to provide consistent spacing in your app.
 Elevation tokens are used to give elements the appearance of being raised off the page. They are especially useful for menus, popovers, dialogs, etc.
 
 <div style="display: flex; flex-wrap: wrap; margin: 0 -20px;">
-  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--xs);"><code>--sl-elevation--xs</code></div>
-  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--sm);"><code>--sl-elevation--sm</code></div>
-  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--md);"><code>--sl-elevation--md</code></div>
-  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--lg);"><code>--sl-elevation--lg</code></div>
-  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--xl);"><code>--sl-elevation--xl</code></div>
+  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-0);"><code>--sl-elevation-0</code></div>
+  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-1);"><code>--sl-elevation-1</code></div>
+  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-2);"><code>--sl-elevation-2</code></div>
+  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-3);"><code>--sl-elevation-3</code></div>
+  <div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-4);"><code>--sl-elevation-4</code></div>
 </div>
 
 ## Animation
diff --git a/docs/styles/docs.css b/docs/styles/docs.css
index 77991b48a..2291c9ed5 100644
--- a/docs/styles/docs.css
+++ b/docs/styles/docs.css
@@ -1,7 +1,7 @@
 body {
-  font-family: var(--sl-font-sans-serif);
+  font-family: var(--sl-font-sans);
   font-size: 16px;
-  font-weight: var(--sl-font-weight--normal);
+  font-weight: var(--sl-font-weight-normal);
 }
 
 .sidebar h1 {
@@ -102,7 +102,7 @@ body.close .sidebar-toggle {
 .content pre,
 .content pre > code {
   border-radius: 3px;
-  font-family: var(--sl-font-monospace);
+  font-family: var(--sl-font-mono);
   font-size: 0.825rem;
   color: var(--sl-color-gray-20);
   -webkit-font-smoothing: auto;
@@ -117,7 +117,7 @@ body.close .sidebar-toggle {
 
 .content code {
   background-color: transparent;
-  font-family: var(--sl-font-monospace);
+  font-family: var(--sl-font-mono);
   font-size: 0.875em;
   color: var(--sl-color-warning-50);
   padding: 0;
diff --git a/package-lock.json b/package-lock.json
index daa5e97e7..0ba1b5977 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3469,6 +3469,11 @@
         "remove-trailing-separator": "^1.0.1"
       }
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "now-and-later": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-2.0.1.tgz",
diff --git a/package.json b/package.json
index 97bc87445..ce75213d3 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "@stencil/core": "^1.9.2",
     "@stencil/sass": "^1.1.1",
+    "normalize.css": "^8.0.1",
     "popper.js": "^1.16.0",
     "resize-observer-polyfill": "^1.5.1",
     "tippy.js": "^5.1.3"
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index 1b8b8eea3..bfc5beaf5 100644
--- a/src/components/alert/alert.scss
+++ b/src/components/alert/alert.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 :host {
   display: block;
@@ -11,7 +11,7 @@
   background-color: var(--sl-color-white);
   border-left: solid 4px;
   border-radius: 0;
-  font-family: var(--sl-font-sans-serif);
+  font-family: var(--sl-font-sans);
   font-size: 14px;
   font-weight: var(--sl-font-weight-normal);
   line-height: 1.6;
@@ -73,13 +73,13 @@
     align-items: center;
 
     ::slotted(*) {
-      margin-left: var(--sl-spacing--lg);
+      margin-left: var(--sl-spacing-6);
     }
   }
 
   .sl-alert__body {
     flex: 1 1 auto;
-    padding: var(--sl-spacing--md) var(--sl-spacing--lg);
+    padding: var(--sl-spacing-5) var(--sl-spacing-6);
   }
 
   .sl-alert__close {
@@ -91,7 +91,7 @@
     font-size: inherit;
     font-weight: inherit;
     color: currentColor;
-    padding: 0 var(--sl-spacing--lg);
+    padding: 0 var(--sl-spacing-6);
     cursor: pointer;
     -webkit-appearance: none;
     transition: var(--sl-form-control-transition-speed) background-color, var(--sl-form-control-transition-speed) color;
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 4755620c6..34976711a 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -1,5 +1,5 @@
-@import 'reset';
-@import 'button.mixins.scss';
+@import 'component';
+@import 'mixins/button';
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Base styles
@@ -16,7 +16,7 @@
   border-style: solid;
   border-width: var(--sl-form-control-border-width);
   font-family: var(--sl-form-control-font-sans-serif);
-  font-weight: var(--sl-font-weight--bold);
+  font-weight: var(--sl-font-weight-semibold);
   user-select: none;
   white-space: nowrap;
   vertical-align: middle;
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index ae0d24c20..86e10a204 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 :host {
   display: inline-block;
@@ -9,7 +9,7 @@
   align-items: center;
   font-family: var(--sl-form-control-font-sans-serif);
   font-size: var(--sl-form-control-font-size--medium);
-  font-weight: var(--sl-font-weight--normal);
+  font-weight: var(--sl-font-weight-normal);
   color: var(--sl-form-control-color);
   vertical-align: middle;
   cursor: pointer;
diff --git a/src/components/dropdown-divider/dropdown-divider.scss b/src/components/dropdown-divider/dropdown-divider.scss
index 9a8700cf0..429607dc2 100644
--- a/src/components/dropdown-divider/dropdown-divider.scss
+++ b/src/components/dropdown-divider/dropdown-divider.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Base styles
diff --git a/src/components/dropdown-item/dropdown-item.scss b/src/components/dropdown-item/dropdown-item.scss
index f45417549..78af3ccfb 100644
--- a/src/components/dropdown-item/dropdown-item.scss
+++ b/src/components/dropdown-item/dropdown-item.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Base styles
diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss
index 3c5a04d27..b2ec70e5a 100644
--- a/src/components/dropdown/dropdown.scss
+++ b/src/components/dropdown/dropdown.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 :host {
   display: inline-block;
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index 047100c7e..83ce5989b 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Base styles
diff --git a/src/components/progress-bar/progress-bar.scss b/src/components/progress-bar/progress-bar.scss
index c80ad6830..11acf2d69 100644
--- a/src/components/progress-bar/progress-bar.scss
+++ b/src/components/progress-bar/progress-bar.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 :host {
   display: block;
@@ -14,9 +14,9 @@
 
 .sl-progress-bar__indicator {
   height: 100%;
-  font-family: var(--sl-font-sans-serif);
+  font-family: var(--sl-font-sans);
   font-size: 12px;
-  font-weight: var(--sl-font-weight--normal);
+  font-weight: var(--sl-font-weight-normal);
   background-color: var(--sl-color-primary-50);
   color: var(--sl-color-white);
   text-align: center;
diff --git a/src/components/progress-ring/progress-ring.scss b/src/components/progress-ring/progress-ring.scss
index f9a982c05..2a9324b1d 100644
--- a/src/components/progress-ring/progress-ring.scss
+++ b/src/components/progress-ring/progress-ring.scss
@@ -3,9 +3,9 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  font-family: var(--sl-font-sans-serif);
+  font-family: var(--sl-font-sans);
   font-size: 12px;
-  font-weight: var(--sl-font-weight--normal);
+  font-weight: var(--sl-font-weight-normal);
 }
 
 .sl-progress-ring__track {
diff --git a/src/components/radio/radio.scss b/src/components/radio/radio.scss
index a83bc0540..47954f7f1 100644
--- a/src/components/radio/radio.scss
+++ b/src/components/radio/radio.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 :host {
   display: inline-block;
@@ -9,7 +9,7 @@
   align-items: center;
   font-family: var(--sl-form-control-font-sans-serif);
   font-size: var(--sl-form-control-font-size--medium);
-  font-weight: var(--sl-font-weight--normal);
+  font-weight: var(--sl-font-weight-normal);
   color: var(--sl-form-control-color);
   vertical-align: middle;
   cursor: pointer;
diff --git a/src/components/range/range.scss b/src/components/range/range.scss
index b9e81dd52..c1593f7ba 100644
--- a/src/components/range/range.scss
+++ b/src/components/range/range.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 :host {
   --thumb-size: 20px;
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index 57f113c1f..e9db78407 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Base styles
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index d94b80ad3..5456ccfa1 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 :host {
   --height: var(--sl-form-control-checkbox-size);
diff --git a/src/components/tab-panel/tab-panel.scss b/src/components/tab-panel/tab-panel.scss
index 104a167a8..39f3f5904 100644
--- a/src/components/tab-panel/tab-panel.scss
+++ b/src/components/tab-panel/tab-panel.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 :host {
   display: block;
diff --git a/src/components/tab/tab.scss b/src/components/tab/tab.scss
index 7d521098e..6a3092555 100644
--- a/src/components/tab/tab.scss
+++ b/src/components/tab/tab.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 :host {
   --focus-ring-box-shadow: inset 0 0 0 var(--sl-focus-ring-width)
@@ -8,9 +8,9 @@
 }
 
 .sl-tab {
-  font-family: var(--sl-font-sans-serif);
+  font-family: var(--sl-font-sans);
   font-size: var(--sl-form-control-font-size--medium);
-  font-weight: var(--sl-font-weight--bold);
+  font-weight: var(--sl-font-weight-semibold);
   border-radius: 4px;
   color: var(--sl-color-gray-40);
   padding: 16px 20px;
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 8b196ff3d..5f9e0e67d 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -1,5 +1,5 @@
-@import 'reset';
-@import 'mixins';
+@import 'component';
+@import 'mixins/hide-scrollbar';
 
 :host {
   display: block;
diff --git a/src/components/textarea/textarea.scss b/src/components/textarea/textarea.scss
index df2a8fbde..6b39f7fe5 100644
--- a/src/components/textarea/textarea.scss
+++ b/src/components/textarea/textarea.scss
@@ -1,4 +1,4 @@
-@import 'reset';
+@import 'component';
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 // Base styles
diff --git a/src/components/tooltip/tooltip.scss b/src/components/tooltip/tooltip.scss
deleted file mode 100644
index 1a9d919a0..000000000
--- a/src/components/tooltip/tooltip.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-//
-// Tooltip styles are imported globally in shoelace.scss because we're using Tippy.js. This library appends tooltips
-// directly to the <body> element, so we need the styles to not be scoped to the component.
-//
-@import 'tippy.js/dist/tippy';
-
-.tippy-tooltip {
-  border-radius: var(--sl-tooltip-border-radius);
-  background-color: var(--sl-tooltip-background-color);
-
-  .tippy-arrow {
-    transform: scale(0.75);
-  }
-
-  &[data-placement^='top'] .tippy-arrow {
-    border-top-color: var(--sl-tooltip-background-color);
-  }
-
-  &[data-placement^='bottom'] .tippy-arrow {
-    border-bottom-color: var(--sl-tooltip-background-color);
-  }
-
-  &[data-placement^='left'] .tippy-arrow {
-    border-left-color: var(--sl-tooltip-background-color);
-  }
-
-  &[data-placement^='right'] .tippy-arrow {
-    border-right-color: var(--sl-tooltip-background-color);
-  }
-
-  .tippy-content {
-    font-family: var(--sl-tooltip-font-family);
-    font-size: var(--sl-tooltip-font-size);
-    font-weight: var(--sl-tooltip-font-weight);
-    line-height: var(--sl-tooltip-line-height);
-    color: var(--sl-tooltip-color);
-    padding: var(--sl-tooltip-padding-y) var(--sl-tooltip-padding-x);
-  }
-}
diff --git a/src/styles/reset.scss b/src/styles/component.scss
similarity index 100%
rename from src/styles/reset.scss
rename to src/styles/component.scss
diff --git a/src/components/button/button.mixins.scss b/src/styles/mixins/button.scss
similarity index 100%
rename from src/components/button/button.mixins.scss
rename to src/styles/mixins/button.scss
diff --git a/src/styles/mixins.scss b/src/styles/mixins/hide-scrollbar.scss
similarity index 100%
rename from src/styles/mixins.scss
rename to src/styles/mixins/hide-scrollbar.scss
diff --git a/src/styles/shoelace.scss b/src/styles/shoelace.scss
index 0f553fd66..7b24dd32c 100644
--- a/src/styles/shoelace.scss
+++ b/src/styles/shoelace.scss
@@ -1,83 +1,25 @@
-@import '../components/tooltip/tooltip';
+/*! Shoelace */
+@import './tokens/border-radius.scss';
+@import './tokens/color.scss';
+@import './tokens/elevation.scss';
+@import './tokens/spacing.scss';
+@import './tokens/transition.scss';
+@import './tokens/typography.scss';
+@import './tokens/z-index.scss';
 
+// Third-party libs
+@import 'node_modules/normalize.css/normalize';
+@import 'tippy.js/dist/tippy';
+
+//
+// TODO:
+//
+//  - eliminate what we can using spacing and other tokens
+//  - remove CSS vars that are only being used for customizations (we have ::part now)
+//  - Add new tokens based on what's left as necessary
+//
 :root {
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-  // Fonts
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-  --sl-font-monospace: Menlo, Monaco, 'Courier New', monospace;
-  --sl-font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-    'Helvetica Neue', sans-serif;
-  --sl-font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-  --sl-font-weight--light: 300;
-  --sl-font-weight--normal: 400;
-  --sl-font-weight--bold: 500;
-
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-  // Spacing
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-  --sl-spacing--xxs: 4px;
-  --sl-spacing--xs: 8px;
-  --sl-spacing--sm: 16px;
-  --sl-spacing--md: 32px;
-  --sl-spacing--lg: 48px;
-  --sl-spacing--xl: 64px;
-  --sl-spacing--xxl: 96px;
-
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-  // Elevation
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-  --sl-elevation--xs: 0 1px 2px rgba(0, 0, 0, 0.1);
-  --sl-elevation--sm: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --sl-elevation--md: 0 4px 8px rgba(0, 0, 0, 0.1);
-  --sl-elevation--lg: 0 8px 16px rgba(0, 0, 0, 0.1);
-  --sl-elevation--xl: 0 16px 32px rgba(0, 0, 0, 0.1);
-
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-  // Animation & Transitions
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-  --sl-transition--slow: 500ms;
-  --sl-transition--medium: 325ms;
-  --sl-transition--fast: 150ms;
-
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-  // Colors
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-  --sl-color-primary-hue: 203;
-  --sl-color-primary-saturation: 100%;
-  --sl-color-primary-text: var(--sl-color-white);
-
-  --sl-color-success-hue: 110;
-  --sl-color-success-saturation: 60%;
-  --sl-color-success-text: var(--sl-color-white);
-
-  --sl-color-info-hue: var(--sl-color-primary-hue);
-  --sl-color-info-saturation: 10%;
-  --sl-color-info-text: var(--sl-color-white);
-
-  --sl-color-warning-hue: 36;
-  --sl-color-warning-saturation: 90%;
-  --sl-color-warning-text: var(--sl-color-white);
-
-  --sl-color-danger-hue: 0;
-  --sl-color-danger-saturation: 80%;
-  --sl-color-danger-text: var(--sl-color-white);
-
-  --sl-color-gray-hue: var(--sl-color-primary-hue);
-  --sl-color-gray-saturation: 10%;
-  --sl-color-gray-text: var(--sl-color-white);
-
-  --sl-color-white: white;
-  --sl-color-black: black;
-
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Form controls
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
   --sl-focus-ring-alpha: 0.33;
   --sl-focus-ring-box-shadow: 0 0 0 var(--sl-focus-ring-width)
     hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
@@ -99,11 +41,11 @@
   --sl-form-control-color--focus: var(--sl-color-gray-30);
   --sl-form-control-color--hover: var(--sl-color-gray-30);
   --sl-form-control-color: var(--sl-color-gray-30);
-  --sl-form-control-font-family: var(--sl-font-sans-serif);
+  --sl-form-control-font-family: var(--sl-font-sans);
   --sl-form-control-font-size--large: 16px;
   --sl-form-control-font-size--medium: 14px;
   --sl-form-control-font-size--small: 12px;
-  --sl-form-control-font-weight: var(--sl-font-weight--normal);
+  --sl-form-control-font-weight: var(--sl-font-weight-normal);
   --sl-form-control-height--large: 50px;
   --sl-form-control-height--medium: 40px;
   --sl-form-control-height--small: 30px;
@@ -115,16 +57,13 @@
   --sl-form-control-placeholder-color: var(--sl-color-gray-60);
   --sl-form-control-transition-speed: 150ms;
 
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Menus
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
   --sl-menu-background-color: var(--sl-color-white);
   --sl-menu-border-color: var(--sl-color-gray-90);
   --sl-menu-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  --sl-menu-font-family: var(--sl-font-sans-serif);
+  --sl-menu-font-family: var(--sl-font-sans);
   --sl-menu-font-size: var(--text-size-default);
-  --sl-menu-font-weight: var(--sl-font-weight--normal);
+  --sl-menu-font-weight: var(--sl-font-weight-normal);
   --sl-menu-padding-x: 30px;
   --sl-menu-padding-y: 10px;
   --sl-menu-transition-speed: 150ms;
@@ -137,10 +76,7 @@
   --sl-menu-item-color: var(--sl-color-gray-40);
   --sl-menu-item-transition-speed: 150ms;
 
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Tooltips
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
   --sl-tooltip-background-color: var(--sl-color-gray-10);
   --sl-tooltip-border-radius: 4px;
   --sl-tooltip-color: var(--sl-color-white);
@@ -150,128 +86,46 @@
   --sl-tooltip-line-height: 1.4;
   --sl-tooltip-padding-x: 10px;
   --sl-tooltip-padding-y: 5px;
-
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-  // 🐉 Here be color palettes for each theme color. No need to change these...update hues & saturations instead!
-  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-  --sl-color-primary-05: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 5%);
-  --sl-color-primary-10: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 10%);
-  --sl-color-primary-15: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 15%);
-  --sl-color-primary-20: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 20%);
-  --sl-color-primary-25: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 25%);
-  --sl-color-primary-30: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 30%);
-  --sl-color-primary-35: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 35%);
-  --sl-color-primary-40: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 40%);
-  --sl-color-primary-45: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 45%);
-  --sl-color-primary-50: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%);
-  --sl-color-primary-55: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 55%);
-  --sl-color-primary-60: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 60%);
-  --sl-color-primary-65: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 65%);
-  --sl-color-primary-70: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 70%);
-  --sl-color-primary-75: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 75%);
-  --sl-color-primary-80: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 80%);
-  --sl-color-primary-85: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 85%);
-  --sl-color-primary-90: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 90%);
-  --sl-color-primary-95: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 95%);
-
-  --sl-color-success-05: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 5%);
-  --sl-color-success-10: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 10%);
-  --sl-color-success-15: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 15%);
-  --sl-color-success-20: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 20%);
-  --sl-color-success-25: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 25%);
-  --sl-color-success-30: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 30%);
-  --sl-color-success-35: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 35%);
-  --sl-color-success-40: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 40%);
-  --sl-color-success-45: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 45%);
-  --sl-color-success-50: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%);
-  --sl-color-success-55: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 55%);
-  --sl-color-success-60: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 60%);
-  --sl-color-success-65: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 65%);
-  --sl-color-success-70: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 70%);
-  --sl-color-success-75: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 75%);
-  --sl-color-success-80: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 80%);
-  --sl-color-success-85: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 85%);
-  --sl-color-success-90: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 90%);
-  --sl-color-success-95: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 95%);
-
-  --sl-color-info-05: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 5%);
-  --sl-color-info-10: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 10%);
-  --sl-color-info-15: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 15%);
-  --sl-color-info-20: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 20%);
-  --sl-color-info-25: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 25%);
-  --sl-color-info-30: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 30%);
-  --sl-color-info-35: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 35%);
-  --sl-color-info-40: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 40%);
-  --sl-color-info-45: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 45%);
-  --sl-color-info-50: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 50%);
-  --sl-color-info-55: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 55%);
-  --sl-color-info-60: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 60%);
-  --sl-color-info-65: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 65%);
-  --sl-color-info-70: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 70%);
-  --sl-color-info-75: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 75%);
-  --sl-color-info-80: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 80%);
-  --sl-color-info-85: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 85%);
-  --sl-color-info-90: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 90%);
-  --sl-color-info-95: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 95%);
-
-  --sl-color-warning-05: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 5%);
-  --sl-color-warning-10: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 10%);
-  --sl-color-warning-15: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 15%);
-  --sl-color-warning-20: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 20%);
-  --sl-color-warning-25: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 25%);
-  --sl-color-warning-30: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 30%);
-  --sl-color-warning-35: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 35%);
-  --sl-color-warning-40: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 40%);
-  --sl-color-warning-45: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 45%);
-  --sl-color-warning-50: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 50%);
-  --sl-color-warning-55: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 55%);
-  --sl-color-warning-60: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 60%);
-  --sl-color-warning-65: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 65%);
-  --sl-color-warning-70: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 70%);
-  --sl-color-warning-75: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 75%);
-  --sl-color-warning-80: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 80%);
-  --sl-color-warning-85: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 85%);
-  --sl-color-warning-90: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 90%);
-  --sl-color-warning-95: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 95%);
-
-  --sl-color-danger-05: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 5%);
-  --sl-color-danger-10: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 10%);
-  --sl-color-danger-15: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 15%);
-  --sl-color-danger-20: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 20%);
-  --sl-color-danger-25: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 25%);
-  --sl-color-danger-30: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 30%);
-  --sl-color-danger-35: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 35%);
-  --sl-color-danger-40: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 40%);
-  --sl-color-danger-45: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 45%);
-  --sl-color-danger-50: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%);
-  --sl-color-danger-55: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 55%);
-  --sl-color-danger-60: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 60%);
-  --sl-color-danger-65: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 65%);
-  --sl-color-danger-70: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 70%);
-  --sl-color-danger-75: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 75%);
-  --sl-color-danger-80: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 80%);
-  --sl-color-danger-85: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 85%);
-  --sl-color-danger-90: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 90%);
-  --sl-color-danger-95: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 95%);
-
-  --sl-color-gray-05: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 5%);
-  --sl-color-gray-10: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 10%);
-  --sl-color-gray-15: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 15%);
-  --sl-color-gray-20: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%);
-  --sl-color-gray-25: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 25%);
-  --sl-color-gray-30: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 30%);
-  --sl-color-gray-35: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 35%);
-  --sl-color-gray-40: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 40%);
-  --sl-color-gray-45: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 45%);
-  --sl-color-gray-50: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%);
-  --sl-color-gray-55: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 55%);
-  --sl-color-gray-60: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 60%);
-  --sl-color-gray-65: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 65%);
-  --sl-color-gray-70: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 70%);
-  --sl-color-gray-75: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 75%);
-  --sl-color-gray-80: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 80%);
-  --sl-color-gray-85: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 85%);
-  --sl-color-gray-90: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 90%);
-  --sl-color-gray-95: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 95%);
+}
+
+// Base styles
+body {
+  font-family: var(--sl-font-body);
+  font-weight: var(--sl-font-weight-body);
+  font-size: 16px;
+}
+
+// Customize tooltips using our own tokens
+.tippy-tooltip {
+  border-radius: var(--sl-tooltip-border-radius);
+  background-color: var(--sl-tooltip-background-color);
+
+  .tippy-arrow {
+    transform: scale(0.75);
+  }
+
+  &[data-placement^='top'] .tippy-arrow {
+    border-top-color: var(--sl-tooltip-background-color);
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow {
+    border-bottom-color: var(--sl-tooltip-background-color);
+  }
+
+  &[data-placement^='left'] .tippy-arrow {
+    border-left-color: var(--sl-tooltip-background-color);
+  }
+
+  &[data-placement^='right'] .tippy-arrow {
+    border-right-color: var(--sl-tooltip-background-color);
+  }
+
+  .tippy-content {
+    font-family: var(--sl-tooltip-font-family);
+    font-size: var(--sl-tooltip-font-size);
+    font-weight: var(--sl-tooltip-font-weight);
+    line-height: var(--sl-tooltip-line-height);
+    color: var(--sl-tooltip-color);
+    padding: var(--sl-tooltip-padding-y) var(--sl-tooltip-padding-x);
+  }
 }
diff --git a/src/styles/tokens/border-radius.scss b/src/styles/tokens/border-radius.scss
new file mode 100644
index 000000000..9bb56bdb0
--- /dev/null
+++ b/src/styles/tokens/border-radius.scss
@@ -0,0 +1,10 @@
+:host {
+  --sl-border-radius-0: 0;
+  --sl-border-radius-1: 0.125rem;
+  --sl-border-radius-2: 0.25rem;
+  --sl-border-radius-3: 0.5rem;
+  --sl-border-radius-4: 1rem;
+
+  --sl-border-radius-circle: 50%;
+  --sl-border-radius-pill: 9999px;
+}
diff --git a/src/styles/tokens/color.scss b/src/styles/tokens/color.scss
new file mode 100644
index 000000000..ad099338e
--- /dev/null
+++ b/src/styles/tokens/color.scss
@@ -0,0 +1,152 @@
+:root {
+  --sl-color-primary-hue: 203;
+  --sl-color-primary-saturation: 100%;
+  --sl-color-primary-text: var(--sl-color-white);
+
+  --sl-color-success-hue: 110;
+  --sl-color-success-saturation: 60%;
+  --sl-color-success-text: var(--sl-color-white);
+
+  --sl-color-info-hue: var(--sl-color-primary-hue);
+  --sl-color-info-saturation: 10%;
+  --sl-color-info-text: var(--sl-color-white);
+
+  --sl-color-warning-hue: 36;
+  --sl-color-warning-saturation: 90%;
+  --sl-color-warning-text: var(--sl-color-white);
+
+  --sl-color-danger-hue: 0;
+  --sl-color-danger-saturation: 80%;
+  --sl-color-danger-text: var(--sl-color-white);
+
+  --sl-color-gray-hue: var(--sl-color-primary-hue);
+  --sl-color-gray-saturation: 10%;
+  --sl-color-gray-text: var(--sl-color-white);
+
+  --sl-color-white: white;
+  --sl-color-black: black;
+
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  // 🐉 Here be color palettes. No need to change these...just update hues and saturations above!
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+  --sl-color-primary-05: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 5%);
+  --sl-color-primary-10: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 10%);
+  --sl-color-primary-15: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 15%);
+  --sl-color-primary-20: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 20%);
+  --sl-color-primary-25: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 25%);
+  --sl-color-primary-30: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 30%);
+  --sl-color-primary-35: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 35%);
+  --sl-color-primary-40: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 40%);
+  --sl-color-primary-45: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 45%);
+  --sl-color-primary-50: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%);
+  --sl-color-primary-55: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 55%);
+  --sl-color-primary-60: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 60%);
+  --sl-color-primary-65: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 65%);
+  --sl-color-primary-70: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 70%);
+  --sl-color-primary-75: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 75%);
+  --sl-color-primary-80: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 80%);
+  --sl-color-primary-85: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 85%);
+  --sl-color-primary-90: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 90%);
+  --sl-color-primary-95: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 95%);
+
+  --sl-color-success-05: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 5%);
+  --sl-color-success-10: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 10%);
+  --sl-color-success-15: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 15%);
+  --sl-color-success-20: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 20%);
+  --sl-color-success-25: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 25%);
+  --sl-color-success-30: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 30%);
+  --sl-color-success-35: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 35%);
+  --sl-color-success-40: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 40%);
+  --sl-color-success-45: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 45%);
+  --sl-color-success-50: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%);
+  --sl-color-success-55: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 55%);
+  --sl-color-success-60: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 60%);
+  --sl-color-success-65: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 65%);
+  --sl-color-success-70: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 70%);
+  --sl-color-success-75: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 75%);
+  --sl-color-success-80: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 80%);
+  --sl-color-success-85: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 85%);
+  --sl-color-success-90: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 90%);
+  --sl-color-success-95: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 95%);
+
+  --sl-color-info-05: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 5%);
+  --sl-color-info-10: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 10%);
+  --sl-color-info-15: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 15%);
+  --sl-color-info-20: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 20%);
+  --sl-color-info-25: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 25%);
+  --sl-color-info-30: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 30%);
+  --sl-color-info-35: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 35%);
+  --sl-color-info-40: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 40%);
+  --sl-color-info-45: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 45%);
+  --sl-color-info-50: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 50%);
+  --sl-color-info-55: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 55%);
+  --sl-color-info-60: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 60%);
+  --sl-color-info-65: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 65%);
+  --sl-color-info-70: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 70%);
+  --sl-color-info-75: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 75%);
+  --sl-color-info-80: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 80%);
+  --sl-color-info-85: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 85%);
+  --sl-color-info-90: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 90%);
+  --sl-color-info-95: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 95%);
+
+  --sl-color-warning-05: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 5%);
+  --sl-color-warning-10: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 10%);
+  --sl-color-warning-15: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 15%);
+  --sl-color-warning-20: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 20%);
+  --sl-color-warning-25: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 25%);
+  --sl-color-warning-30: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 30%);
+  --sl-color-warning-35: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 35%);
+  --sl-color-warning-40: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 40%);
+  --sl-color-warning-45: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 45%);
+  --sl-color-warning-50: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 50%);
+  --sl-color-warning-55: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 55%);
+  --sl-color-warning-60: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 60%);
+  --sl-color-warning-65: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 65%);
+  --sl-color-warning-70: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 70%);
+  --sl-color-warning-75: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 75%);
+  --sl-color-warning-80: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 80%);
+  --sl-color-warning-85: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 85%);
+  --sl-color-warning-90: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 90%);
+  --sl-color-warning-95: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 95%);
+
+  --sl-color-danger-05: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 5%);
+  --sl-color-danger-10: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 10%);
+  --sl-color-danger-15: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 15%);
+  --sl-color-danger-20: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 20%);
+  --sl-color-danger-25: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 25%);
+  --sl-color-danger-30: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 30%);
+  --sl-color-danger-35: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 35%);
+  --sl-color-danger-40: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 40%);
+  --sl-color-danger-45: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 45%);
+  --sl-color-danger-50: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%);
+  --sl-color-danger-55: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 55%);
+  --sl-color-danger-60: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 60%);
+  --sl-color-danger-65: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 65%);
+  --sl-color-danger-70: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 70%);
+  --sl-color-danger-75: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 75%);
+  --sl-color-danger-80: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 80%);
+  --sl-color-danger-85: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 85%);
+  --sl-color-danger-90: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 90%);
+  --sl-color-danger-95: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 95%);
+
+  --sl-color-gray-05: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 5%);
+  --sl-color-gray-10: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 10%);
+  --sl-color-gray-15: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 15%);
+  --sl-color-gray-20: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%);
+  --sl-color-gray-25: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 25%);
+  --sl-color-gray-30: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 30%);
+  --sl-color-gray-35: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 35%);
+  --sl-color-gray-40: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 40%);
+  --sl-color-gray-45: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 45%);
+  --sl-color-gray-50: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%);
+  --sl-color-gray-55: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 55%);
+  --sl-color-gray-60: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 60%);
+  --sl-color-gray-65: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 65%);
+  --sl-color-gray-70: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 70%);
+  --sl-color-gray-75: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 75%);
+  --sl-color-gray-80: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 80%);
+  --sl-color-gray-85: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 85%);
+  --sl-color-gray-90: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 90%);
+  --sl-color-gray-95: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 95%);
+}
diff --git a/src/styles/tokens/elevation.scss b/src/styles/tokens/elevation.scss
new file mode 100644
index 000000000..6a7658f13
--- /dev/null
+++ b/src/styles/tokens/elevation.scss
@@ -0,0 +1,7 @@
+:root {
+  --sl-shadow-0: none;
+  --sl-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --sl-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.2);
+  --sl-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.2);
+  --sl-shadow-4: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
diff --git a/src/styles/tokens/spacing.scss b/src/styles/tokens/spacing.scss
new file mode 100644
index 000000000..6201fd61c
--- /dev/null
+++ b/src/styles/tokens/spacing.scss
@@ -0,0 +1,15 @@
+:root {
+  --sl-spacing-0: 0;
+  --sl-spacing-1: 0.25rem;
+  --sl-spacing-2: 0.5rem;
+  --sl-spacing-3: 0.75rem;
+  --sl-spacing-4: 1rem;
+  --sl-spacing-5: 1.25rem;
+  --sl-spacing-6: 1.5rem;
+  --sl-spacing-7: 2rem;
+  --sl-spacing-8: 2.5rem;
+  --sl-spacing-9: 3rem;
+  --sl-spacing-10: 3.5rem;
+  --sl-spacing-11: 4rem;
+  --sl-spacing-12: 4.5rem;
+}
diff --git a/src/styles/tokens/transition.scss b/src/styles/tokens/transition.scss
new file mode 100644
index 000000000..f8e9d9d25
--- /dev/null
+++ b/src/styles/tokens/transition.scss
@@ -0,0 +1,7 @@
+:root {
+  --sl-transition-slower: 1000ms;
+  --sl-transition-slow: 500ms;
+  --sl-transition-default: 250ms;
+  --sl-transition-fast: 100ms;
+  --sl-transition-faster: 50ms;
+}
diff --git a/src/styles/tokens/typography.scss b/src/styles/tokens/typography.scss
new file mode 100644
index 000000000..a6abe8f3f
--- /dev/null
+++ b/src/styles/tokens/typography.scss
@@ -0,0 +1,50 @@
+:root {
+  // Font families
+  --sl-font-mono: Menlo, Monaco, 'Courier New', monospace;
+  --sl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+  --sl-font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
+  --sl-font-heading: var(--sl-font-sans);
+  --sl-font-body: var(--sl-font-sans);
+
+  // Font sizes
+  --sl-font-size-0: 0.75rem;
+  --sl-font-size-1: 0.875rem;
+  --sl-font-size-2: 1rem;
+  --sl-font-size-3: 1.125rem;
+  --sl-font-size-4: 1.25rem;
+  --sl-font-size-5: 1.5rem;
+  --sl-font-size-6: 1.75rem;
+  --sl-font-size-7: 2rem;
+  --sl-font-size-8: 2.25rem;
+  --sl-font-size-9: 0.2625rem;
+  --sl-font-size-10: 3rem;
+  --sl-font-size-11: 3.375rem;
+  --sl-font-size-12: 3.75rem;
+  --sl-font-size-13: 4.25rem;
+  --sl-font-size-14: 4.75rem;
+  --sl-font-size-15: 5.25rem;
+  --sl-font-size-16: 5.75rem;
+
+  // Font weights
+  --sl-font-weight-light: 300;
+  --sl-font-weight-normal: 400;
+  --sl-font-weight-semibold: 500;
+  --sl-font-weight-bold: 600;
+
+  --sl-font-weight-body: var(--sl-font-weight-default);
+
+  // Letter spacings
+  --sl-letter-spacing-dense: -0.015em;
+  --sl-letter-spacing-normal: normal;
+  --sl-letter-spacing-loose: 0.075em;
+
+  // Line heights
+  --sl-line-height-dense: 1.25;
+  --sl-line-height-normal: 1.5;
+  --sl-line-height-loose: 1.75;
+
+  --sl-line-height-body: var(--sl-line-height-default);
+  --sl-line-height-heading: var(--sl-line-height-dense);
+}
diff --git a/src/styles/tokens/z-index.scss b/src/styles/tokens/z-index.scss
new file mode 100644
index 000000000..f302e7d3e
--- /dev/null
+++ b/src/styles/tokens/z-index.scss
@@ -0,0 +1,6 @@
+:root {
+  --sl-z-index-default: 1;
+  --sl-z-index-panel: 80;
+  --sl-z-index-notification: 90;
+  --sl-z-index-dialog: 100;
+}