diff --git a/src/styles/themes/default.css b/src/styles/themes/default.css
index 0352e8651..e7c81abc9 100644
--- a/src/styles/themes/default.css
+++ b/src/styles/themes/default.css
@@ -1,487 +1,21 @@
+@import url('default/color.css');
+@import url('default/color-semantic.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/typography.css');
+@import url('default/rounding.css');
+@import url('default/shadows.css');
+@import url('default/transitions.css');
+@import url('default/groups.css');
+
 :root,
 :host,
 .wa-theme-default-light {
   color-scheme: light;
   color: var(--wa-color-text-normal);
-
-  /**
-   * Literal Colors
-   * Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
-   * Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
-   * A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
-   * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
-   * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
-   */
-  --wa-color-red-95: #ffefef;
-  --wa-color-red-90: #ffdddc;
-  --wa-color-red-80: #ffb7b6;
-  --wa-color-red-70: #fc9090;
-  --wa-color-red-60: #f2676c;
-  --wa-color-red-50: #de2d44;
-  --wa-color-red-40: #b11036;
-  --wa-color-red-30: #861a2f;
-  --wa-color-red-20: #641122;
-  --wa-color-red-10: #400712;
-  --wa-color-red-05: #2a030a;
-
-  --wa-color-yellow-95: #fdf3ba;
-  --wa-color-yellow-90: #fee590;
-  --wa-color-yellow-80: #fcc041;
-  --wa-color-yellow-70: #f39b00;
-  --wa-color-yellow-60: #e07b00;
-  --wa-color-yellow-50: #bb5a00;
-  --wa-color-yellow-40: #924200;
-  --wa-color-yellow-30: #743200;
-  --wa-color-yellow-20: #572300;
-  --wa-color-yellow-10: #361300;
-  --wa-color-yellow-05: #240b00;
-
-  --wa-color-green-95: #e2f9e2;
-  --wa-color-green-90: #c2f2c1;
-  --wa-color-green-80: #92da97;
-  --wa-color-green-70: #5dc36f;
-  --wa-color-green-60: #00ac49;
-  --wa-color-green-50: #008825;
-  --wa-color-green-40: #006800;
-  --wa-color-green-30: #005300;
-  --wa-color-green-20: #003c00;
-  --wa-color-green-10: #002400;
-  --wa-color-green-05: #001700;
-
-  --wa-color-blue-95: #ebf4ff;
-  --wa-color-blue-90: #d4e7ff;
-  --wa-color-blue-80: #a6ccff;
-  --wa-color-blue-70: #77b1ff;
-  --wa-color-blue-60: #4895fd;
-  --wa-color-blue-50: #0070ef;
-  --wa-color-blue-40: #0055b8;
-  --wa-color-blue-30: #004390;
-  --wa-color-blue-20: #00306c;
-  --wa-color-blue-10: #001c45;
-  --wa-color-blue-05: #00112f;
-
-  --wa-color-indigo-95: #f0f2fe;
-  --wa-color-indigo-90: #e2e4fc;
-  --wa-color-indigo-80: #c2c6f8;
-  --wa-color-indigo-70: #a5a9f2;
-  --wa-color-indigo-60: #8a8beb;
-  --wa-color-indigo-50: #6b65e2;
-  --wa-color-indigo-40: #5246c1;
-  --wa-color-indigo-30: #412eaa;
-  --wa-color-indigo-20: #321393;
-  --wa-color-indigo-10: #1c006a;
-  --wa-color-indigo-05: #130049;
-
-  --wa-color-violet-95: #f9effd;
-  --wa-color-violet-90: #f4defb;
-  --wa-color-violet-80: #e7baf7;
-  --wa-color-violet-70: #d996ef;
-  --wa-color-violet-60: #c674e1;
-  --wa-color-violet-50: #a94dc6;
-  --wa-color-violet-40: #8732a1;
-  --wa-color-violet-30: #6d2283;
-  --wa-color-violet-20: #521564;
-  --wa-color-violet-10: #330940;
-  --wa-color-violet-05: #22042b;
-
-  --wa-color-gray-95: #f1f2f3;
-  --wa-color-gray-90: #e4e5e9;
-  --wa-color-gray-80: #c7c9d0;
-  --wa-color-gray-70: #abaeb9;
-  --wa-color-gray-60: #9194a2;
-  --wa-color-gray-50: #717584;
-  --wa-color-gray-40: #545868;
-  --wa-color-gray-30: #424554;
-  --wa-color-gray-20: #2f323f;
-  --wa-color-gray-10: #1b1d26;
-  --wa-color-gray-05: #101219;
-
-  /**
-   * Foundational Colors
-   */
-
-  /* Surfaces are background layers that other content rests on.
-   * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
-  --wa-color-surface-raised: white;
-  --wa-color-surface-default: white;
-  --wa-color-surface-lowered: var(--wa-color-gray-95);
-  --wa-color-surface-border: var(--wa-color-gray-90);
-
-  /* Text colors are used for standard text elements.
-   * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
-  --wa-color-text-normal: var(--wa-color-gray-10);
-  --wa-color-text-quiet: var(--wa-color-gray-40);
-  --wa-color-text-link: var(--wa-color-blue-40);
-
-  /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
-  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);
-
-  /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
-   * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
-   * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
-  --wa-color-shadow: color-mix(
-    in oklab,
-    var(--wa-color-gray-05) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%),
-    transparent
-  );
-
-  /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
-   * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
-  --wa-color-focus: var(--wa-color-blue-60);
-
-  /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
-  --wa-color-mix-hover: black 10%;
-  --wa-color-mix-active: black 20%;
-
-  /**
-   * Semantic Colors
-   * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
-   * Within these groups, each color specifies a role -
-   *  *  Fill for background colors or areas larger than a few pixels
-   *  *  Border for borders, dividers, and other stroke-like elements
-   *  *  On for content displayed on a fill with the corresponding attention
-   * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
-  */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
-  --wa-color-brand-border-normal: var(--wa-color-blue-80);
-  --wa-color-brand-border-loud: var(--wa-color-blue-60);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
-  --wa-color-brand-on-normal: var(--wa-color-blue-30);
-  --wa-color-brand-on-loud: white;
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-95);
-  --wa-color-success-fill-normal: var(--wa-color-green-90);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-90);
-  --wa-color-success-border-normal: var(--wa-color-green-80);
-  --wa-color-success-border-loud: var(--wa-color-green-60);
-  --wa-color-success-on-quiet: var(--wa-color-green-40);
-  --wa-color-success-on-normal: var(--wa-color-green-30);
-  --wa-color-success-on-loud: white;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-on-loud: white;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
-  --wa-color-danger-fill-normal: var(--wa-color-red-90);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-90);
-  --wa-color-danger-border-normal: var(--wa-color-red-80);
-  --wa-color-danger-border-loud: var(--wa-color-red-60);
-  --wa-color-danger-on-quiet: var(--wa-color-red-40);
-  --wa-color-danger-on-normal: var(--wa-color-red-30);
-  --wa-color-danger-on-loud: white;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-on-loud: white;
-
-  /**
-   * Typography
-   */
-  --wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
-  --wa-font-family-heading: var(--wa-font-family-body);
-  --wa-font-family-code: ui-monospace, monospace;
-  --wa-font-family-longform: ui-serif, serif;
-
-  /* The default type scale is roughly based on the Major Second scale (x1.125),
-   * with each value rounded to the nearest whole pixel based on a 16px root font size.
-   * For larger font sizes, every other step on the scale is skipped in order to maximize variation.
-   * A multiplier is provided to uniformly increase or decrease all font sizes. */
-  --wa-font-size-multiplier: 1;
-  --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
-  --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
-  --wa-font-size-s: calc(0.875rem * var(--wa-font-size-multiplier)); /* 14px */
-  --wa-font-size-m: calc(1rem * var(--wa-font-size-multiplier)); /* 16px */
-  --wa-font-size-l: calc(1.25rem * var(--wa-font-size-multiplier)); /* 20px */
-  --wa-font-size-xl: calc(1.625rem * var(--wa-font-size-multiplier)); /* 26px */
-  --wa-font-size-2xl: calc(2rem * var(--wa-font-size-multiplier)); /* 32px */
-  --wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-multiplier)); /* 41px */
-  --wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-multiplier)); /* 52px */
-
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 500;
-  --wa-font-weight-bold: 600;
-
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-heading: var(--wa-font-weight-bold);
-  --wa-font-weight-action: var(--wa-font-weight-semibold);
-
-  --wa-line-height-condensed: 1.2;
-  --wa-line-height-normal: 1.6;
-  --wa-line-height-expanded: 2;
-
-  --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
-  --wa-link-decoration-hover: underline;
-
-  /**
-   * Spacing
-   */
-
-  /* A multiplier is provided to uniformly increase or decrease all spacing. */
-  --wa-space-multiplier: 1;
-  --wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
-  --wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
-  --wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
-  --wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
-  --wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
-  --wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
-  --wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
-  --wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
-  --wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
-
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* A multiplier is provided to uniformly increase or decrease all border widths. */
-  --wa-border-width-multiplier: 0.0625;
-  --wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
-  --wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
-  --wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
-
-  /* A multiplier is provided to uniformly increase or decrease all border radii. */
-  --wa-border-radius-multiplier: 0.375;
-  --wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem);
-  --wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
-  --wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
-
-  /* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
-  --wa-border-radius-pill: 9999px;
-  --wa-border-radius-circle: 50%;
-  --wa-border-radius-square: 0px;
-
-  /**
-   * Focus
-   */
-  --wa-focus-ring-style: solid;
-  --wa-focus-ring-width: 0.1875rem; /* 3px */
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
-  --wa-focus-ring-offset: 0.0625rem; /* 1px */
-
-  /**
-   * Shadows
-   * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
-   * A multiplier is provided for each shadow quality to uniformly scale all related values.
-   */
-
-  --wa-shadow-offset-x-multiplier: 0;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.5rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 4rem);
-
-  --wa-shadow-offset-y-multiplier: 0.125;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.5rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 4rem);
-
-  --wa-shadow-blur-multiplier: 0.125;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.5rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 2rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 4rem);
-
-  --wa-shadow-spread-multiplier: -0.0625;
-  --wa-shadow-spread-xs: calc(var(--wa-shadow-spread-multiplier) * 0.5rem);
-  --wa-shadow-spread-s: calc(var(--wa-shadow-spread-multiplier) * 1rem);
-  --wa-shadow-spread-m: calc(var(--wa-shadow-spread-multiplier) * 2rem);
-  --wa-shadow-spread-l: calc(var(--wa-shadow-spread-multiplier) * 4rem);
-
-  --wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-shadow-spread-xs) var(--wa-color-shadow);
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
-    var(--wa-shadow-spread-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
-    var(--wa-shadow-spread-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
-    var(--wa-shadow-spread-l) var(--wa-color-shadow);
-
-  /**
-   * Transitions
-   */
-  --wa-transition-easing: ease;
-
-  --wa-transition-slow: 300ms;
-  --wa-transition-normal: 150ms;
-  --wa-transition-fast: 75ms;
-
-  /**
-   * Component Groups
-   */
-
-  /* Form controls */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-border-style: var(--wa-border-style);
-  --wa-form-control-border-width: var(--wa-border-width-s);
-  --wa-form-control-border-radius: var(--wa-border-radius-s);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
-  --wa-form-control-label-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-placeholder-color: var(--wa-color-gray-60);
-
-  --wa-form-control-height-s: calc(
-    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
-
-  --wa-form-control-required-content: '*';
-  --wa-form-control-required-content-color: inherit;
-  --wa-form-control-required-content-offset: -0.1em;
-
-  /* Panels */
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-s);
-  --wa-panel-border-radius: var(--wa-border-radius-m);
-
-  /* Tooltips */
-  --wa-tooltip-arrow-size: 0.375rem;
-
-  --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
-
-  --wa-tooltip-border-radius: var(--wa-border-radius-s);
-
-  --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
-  --wa-tooltip-font-size: var(--wa-font-size-s);
-  --wa-tooltip-line-height: var(--wa-line-height-normal);
 }
 
 .wa-theme-default-dark,
 .wa-theme-default-dark :host {
   color-scheme: dark;
-  color: var(--wa-color-text-normal);
-
-  /**
-   * Foundational Colors
-   */
-  --wa-color-surface-raised: var(--wa-color-gray-10);
-  --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
-  --wa-color-surface-border: var(--wa-color-gray-20);
-
-  --wa-color-text-normal: var(--wa-color-gray-95);
-  --wa-color-text-quiet: var(--wa-color-gray-60);
-  --wa-color-text-link: var(--wa-color-blue-70);
-
-  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
-  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
-
-  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
-
-  --wa-color-focus: var(--wa-color-blue-60);
-
-  --wa-color-mix-hover: black 8%;
-  --wa-color-mix-active: black 16%;
-
-  /**
-   * Semantic Colors
-   */
-  --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
-  --wa-color-brand-fill-normal: var(--wa-color-blue-20);
-  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
-  --wa-color-brand-border-quiet: var(--wa-color-blue-20);
-  --wa-color-brand-border-normal: var(--wa-color-blue-30);
-  --wa-color-brand-border-loud: var(--wa-color-blue-40);
-  --wa-color-brand-on-quiet: var(--wa-color-blue-60);
-  --wa-color-brand-on-normal: var(--wa-color-blue-70);
-  --wa-color-brand-on-loud: white;
-
-  --wa-color-success-fill-quiet: var(--wa-color-green-10);
-  --wa-color-success-fill-normal: var(--wa-color-green-20);
-  --wa-color-success-fill-loud: var(--wa-color-green-50);
-  --wa-color-success-border-quiet: var(--wa-color-green-20);
-  --wa-color-success-border-normal: var(--wa-color-green-30);
-  --wa-color-success-border-loud: var(--wa-color-green-40);
-  --wa-color-success-on-quiet: var(--wa-color-green-60);
-  --wa-color-success-on-normal: var(--wa-color-green-70);
-  --wa-color-success-on-loud: white;
-
-  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
-  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
-  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
-  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
-  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
-  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
-  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
-  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
-  --wa-color-warning-on-loud: white;
-
-  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
-  --wa-color-danger-fill-normal: var(--wa-color-red-20);
-  --wa-color-danger-fill-loud: var(--wa-color-red-50);
-  --wa-color-danger-border-quiet: var(--wa-color-red-20);
-  --wa-color-danger-border-normal: var(--wa-color-red-30);
-  --wa-color-danger-border-loud: var(--wa-color-red-40);
-  --wa-color-danger-on-quiet: var(--wa-color-red-60);
-  --wa-color-danger-on-normal: var(--wa-color-red-70);
-  --wa-color-danger-on-loud: white;
-
-  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
-  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
-  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
-  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
-  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
-  --wa-color-neutral-border-loud: var(--wa-color-gray-40);
-  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
-  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
-  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
-
-  /**
-   * Component Groups
-   */
-
-  /* Form controls */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
-  --wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-
-  --wa-form-control-placeholder-color: var(--wa-color-gray-60);
-
-  --wa-form-control-required-content-color: inherit;
-
-  /* Tooltips */
-  --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
-
-  --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
 }
diff --git a/src/styles/themes/default/color-semantic.css b/src/styles/themes/default/color-semantic.css
new file mode 100644
index 000000000..907406451
--- /dev/null
+++ b/src/styles/themes/default/color-semantic.css
@@ -0,0 +1,180 @@
+/**
+ * Foundational Colors and Semantic Colors
+ */
+:where(:root, :host),
+.wa-theme-default-light {
+  /**
+   * Foundational Colors
+   */
+
+  /* Surfaces are background layers that other content rests on.
+   * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
+  --wa-color-surface-raised: white;
+  --wa-color-surface-default: white;
+  --wa-color-surface-lowered: var(--wa-color-gray-95);
+  --wa-color-surface-border: var(--wa-color-gray-90);
+
+  /* Text colors are used for standard text elements.
+   * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
+  --wa-color-text-normal: var(--wa-color-gray-10);
+  --wa-color-text-quiet: var(--wa-color-gray-40);
+  --wa-color-text-link: var(--wa-color-blue-40);
+
+  /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
+  --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-05) 50%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-80) 20%, transparent);
+
+  /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
+   * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
+   * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
+  --wa-color-shadow: color-mix(
+    in oklab,
+    var(--wa-color-gray-05) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%),
+    transparent
+  );
+
+  /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
+   * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
+  --wa-color-focus: var(--wa-color-blue-60);
+
+  /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
+  --wa-color-mix-hover: black 10%;
+  --wa-color-mix-active: black 20%;
+
+  /**
+   * Semantic Colors
+   * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
+   * Within these groups, each color specifies a role -
+   *  *  Fill for background colors or areas larger than a few pixels
+   *  *  Border for borders, dividers, and other stroke-like elements
+   *  *  On for content displayed on a fill with the corresponding attention
+   * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
+  */
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-90);
+  --wa-color-brand-border-normal: var(--wa-color-blue-80);
+  --wa-color-brand-border-loud: var(--wa-color-blue-60);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-40);
+  --wa-color-brand-on-normal: var(--wa-color-blue-30);
+  --wa-color-brand-on-loud: white;
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-95);
+  --wa-color-success-fill-normal: var(--wa-color-green-90);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-border-quiet: var(--wa-color-green-90);
+  --wa-color-success-border-normal: var(--wa-color-green-80);
+  --wa-color-success-border-loud: var(--wa-color-green-60);
+  --wa-color-success-on-quiet: var(--wa-color-green-40);
+  --wa-color-success-on-normal: var(--wa-color-green-30);
+  --wa-color-success-on-loud: white;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-90);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-80);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-60);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-40);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-on-loud: white;
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-95);
+  --wa-color-danger-fill-normal: var(--wa-color-red-90);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-border-quiet: var(--wa-color-red-90);
+  --wa-color-danger-border-normal: var(--wa-color-red-80);
+  --wa-color-danger-border-loud: var(--wa-color-red-60);
+  --wa-color-danger-on-quiet: var(--wa-color-red-40);
+  --wa-color-danger-on-normal: var(--wa-color-red-30);
+  --wa-color-danger-on-loud: white;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-20);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-80);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-60);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-on-loud: white;
+}
+
+.wa-theme-default-dark,
+:host-context(.wa-theme-default-dark) {
+  /**
+   * Foundational Colors
+   */
+  --wa-color-surface-raised: var(--wa-color-gray-10);
+  --wa-color-surface-default: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
+  --wa-color-surface-border: var(--wa-color-gray-20);
+
+  --wa-color-text-normal: var(--wa-color-gray-95);
+  --wa-color-text-quiet: var(--wa-color-gray-60);
+  --wa-color-text-link: var(--wa-color-blue-70);
+
+  --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
+  --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
+
+  --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
+
+  --wa-color-focus: var(--wa-color-blue-60);
+
+  --wa-color-mix-hover: black 8%;
+  --wa-color-mix-active: black 16%;
+
+  /**
+   * Semantic Colors
+   */
+  --wa-color-brand-fill-quiet: var(--wa-color-blue-10);
+  --wa-color-brand-fill-normal: var(--wa-color-blue-20);
+  --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+  --wa-color-brand-border-quiet: var(--wa-color-blue-20);
+  --wa-color-brand-border-normal: var(--wa-color-blue-30);
+  --wa-color-brand-border-loud: var(--wa-color-blue-40);
+  --wa-color-brand-on-quiet: var(--wa-color-blue-60);
+  --wa-color-brand-on-normal: var(--wa-color-blue-70);
+  --wa-color-brand-on-loud: white;
+
+  --wa-color-success-fill-quiet: var(--wa-color-green-10);
+  --wa-color-success-fill-normal: var(--wa-color-green-20);
+  --wa-color-success-fill-loud: var(--wa-color-green-50);
+  --wa-color-success-border-quiet: var(--wa-color-green-20);
+  --wa-color-success-border-normal: var(--wa-color-green-30);
+  --wa-color-success-border-loud: var(--wa-color-green-40);
+  --wa-color-success-on-quiet: var(--wa-color-green-60);
+  --wa-color-success-on-normal: var(--wa-color-green-70);
+  --wa-color-success-on-loud: white;
+
+  --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
+  --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
+  --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
+  --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
+  --wa-color-warning-border-normal: var(--wa-color-yellow-30);
+  --wa-color-warning-border-loud: var(--wa-color-yellow-40);
+  --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
+  --wa-color-warning-on-normal: var(--wa-color-yellow-70);
+  --wa-color-warning-on-loud: white;
+
+  --wa-color-danger-fill-quiet: var(--wa-color-red-10);
+  --wa-color-danger-fill-normal: var(--wa-color-red-20);
+  --wa-color-danger-fill-loud: var(--wa-color-red-50);
+  --wa-color-danger-border-quiet: var(--wa-color-red-20);
+  --wa-color-danger-border-normal: var(--wa-color-red-30);
+  --wa-color-danger-border-loud: var(--wa-color-red-40);
+  --wa-color-danger-on-quiet: var(--wa-color-red-60);
+  --wa-color-danger-on-normal: var(--wa-color-red-70);
+  --wa-color-danger-on-loud: white;
+
+  --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
+  --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
+  --wa-color-neutral-fill-loud: var(--wa-color-gray-90);
+  --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
+  --wa-color-neutral-border-normal: var(--wa-color-gray-30);
+  --wa-color-neutral-border-loud: var(--wa-color-gray-40);
+  --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
+  --wa-color-neutral-on-normal: var(--wa-color-gray-70);
+  --wa-color-neutral-on-loud: var(--wa-color-gray-05);
+}
diff --git a/src/styles/themes/default/color.css b/src/styles/themes/default/color.css
new file mode 100644
index 000000000..70d436b54
--- /dev/null
+++ b/src/styles/themes/default/color.css
@@ -0,0 +1,93 @@
+/**
+ * Literal Colors
+ * Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
+ * Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
+ * A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
+ * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
+ * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
+ */
+:where(:root, :host) {
+  --wa-color-red-95: #ffefef;
+  --wa-color-red-90: #ffdddc;
+  --wa-color-red-80: #ffb7b6;
+  --wa-color-red-70: #fc9090;
+  --wa-color-red-60: #f2676c;
+  --wa-color-red-50: #de2d44;
+  --wa-color-red-40: #b11036;
+  --wa-color-red-30: #861a2f;
+  --wa-color-red-20: #641122;
+  --wa-color-red-10: #400712;
+  --wa-color-red-05: #2a030a;
+
+  --wa-color-yellow-95: #fdf3ba;
+  --wa-color-yellow-90: #fee590;
+  --wa-color-yellow-80: #fcc041;
+  --wa-color-yellow-70: #f39b00;
+  --wa-color-yellow-60: #e07b00;
+  --wa-color-yellow-50: #bb5a00;
+  --wa-color-yellow-40: #924200;
+  --wa-color-yellow-30: #743200;
+  --wa-color-yellow-20: #572300;
+  --wa-color-yellow-10: #361300;
+  --wa-color-yellow-05: #240b00;
+
+  --wa-color-green-95: #e2f9e2;
+  --wa-color-green-90: #c2f2c1;
+  --wa-color-green-80: #92da97;
+  --wa-color-green-70: #5dc36f;
+  --wa-color-green-60: #00ac49;
+  --wa-color-green-50: #008825;
+  --wa-color-green-40: #006800;
+  --wa-color-green-30: #005300;
+  --wa-color-green-20: #003c00;
+  --wa-color-green-10: #002400;
+  --wa-color-green-05: #001700;
+
+  --wa-color-blue-95: #ebf4ff;
+  --wa-color-blue-90: #d4e7ff;
+  --wa-color-blue-80: #a6ccff;
+  --wa-color-blue-70: #77b1ff;
+  --wa-color-blue-60: #4895fd;
+  --wa-color-blue-50: #0070ef;
+  --wa-color-blue-40: #0055b8;
+  --wa-color-blue-30: #004390;
+  --wa-color-blue-20: #00306c;
+  --wa-color-blue-10: #001c45;
+  --wa-color-blue-05: #00112f;
+
+  --wa-color-indigo-95: #f0f2fe;
+  --wa-color-indigo-90: #e2e4fc;
+  --wa-color-indigo-80: #c2c6f8;
+  --wa-color-indigo-70: #a5a9f2;
+  --wa-color-indigo-60: #8a8beb;
+  --wa-color-indigo-50: #6b65e2;
+  --wa-color-indigo-40: #5246c1;
+  --wa-color-indigo-30: #412eaa;
+  --wa-color-indigo-20: #321393;
+  --wa-color-indigo-10: #1c006a;
+  --wa-color-indigo-05: #130049;
+
+  --wa-color-violet-95: #f9effd;
+  --wa-color-violet-90: #f4defb;
+  --wa-color-violet-80: #e7baf7;
+  --wa-color-violet-70: #d996ef;
+  --wa-color-violet-60: #c674e1;
+  --wa-color-violet-50: #a94dc6;
+  --wa-color-violet-40: #8732a1;
+  --wa-color-violet-30: #6d2283;
+  --wa-color-violet-20: #521564;
+  --wa-color-violet-10: #330940;
+  --wa-color-violet-05: #22042b;
+
+  --wa-color-gray-95: #f1f2f3;
+  --wa-color-gray-90: #e4e5e9;
+  --wa-color-gray-80: #c7c9d0;
+  --wa-color-gray-70: #abaeb9;
+  --wa-color-gray-60: #9194a2;
+  --wa-color-gray-50: #717584;
+  --wa-color-gray-40: #545868;
+  --wa-color-gray-30: #424554;
+  --wa-color-gray-20: #2f323f;
+  --wa-color-gray-10: #1b1d26;
+  --wa-color-gray-05: #101219;
+}
diff --git a/src/styles/themes/default/groups.css b/src/styles/themes/default/groups.css
new file mode 100644
index 000000000..f1fc68ef1
--- /dev/null
+++ b/src/styles/themes/default/groups.css
@@ -0,0 +1,77 @@
+/**
+* Component Groups
+*/
+:where(:root, :host),
+.wa-theme-default-light {
+  /* Form controls */
+  --wa-form-control-background-color: var(--wa-color-surface-default);
+
+  --wa-form-control-border-style: var(--wa-border-style);
+  --wa-form-control-border-width: var(--wa-border-width-s);
+  --wa-form-control-border-radius: var(--wa-border-radius-s);
+
+  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
+  --wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
+
+  --wa-form-control-label-color: var(--wa-color-text-normal);
+  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
+  --wa-form-control-label-line-height: var(--wa-line-height-condensed);
+
+  --wa-form-control-value-color: var(--wa-color-text-normal);
+  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
+  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
+
+  --wa-form-control-placeholder-color: var(--wa-color-gray-60);
+
+  --wa-form-control-height-s: calc(
+    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
+  );
+  --wa-form-control-height-m: calc(
+    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
+  );
+  --wa-form-control-height-l: calc(
+    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
+  );
+
+  --wa-form-control-required-content: '*';
+  --wa-form-control-required-content-color: inherit;
+  --wa-form-control-required-content-offset: -0.1em;
+
+  /* Panels */
+  --wa-panel-border-style: var(--wa-border-style);
+  --wa-panel-border-width: var(--wa-border-width-s);
+  --wa-panel-border-radius: var(--wa-border-radius-m);
+
+  /* Tooltips */
+  --wa-tooltip-arrow-size: 0.375rem;
+
+  --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
+
+  --wa-tooltip-border-radius: var(--wa-border-radius-s);
+
+  --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
+  --wa-tooltip-font-size: var(--wa-font-size-s);
+  --wa-tooltip-line-height: var(--wa-line-height-normal);
+}
+
+.wa-theme-default-dark,
+:host-context(.wa-theme-default-dark) {
+  /* Form controls */
+  --wa-form-control-background-color: var(--wa-color-surface-default);
+
+  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
+  --wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
+
+  --wa-form-control-label-color: var(--wa-color-text-normal);
+
+  --wa-form-control-value-color: var(--wa-color-text-normal);
+
+  --wa-form-control-placeholder-color: var(--wa-color-gray-60);
+
+  --wa-form-control-required-content-color: inherit;
+
+  /* Tooltips */
+  --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
+
+  --wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
+}
diff --git a/src/styles/themes/default/outlines.css b/src/styles/themes/default/outlines.css
new file mode 100644
index 000000000..643f5d40e
--- /dev/null
+++ b/src/styles/themes/default/outlines.css
@@ -0,0 +1,20 @@
+/**
+  * Borders and outlines
+  */
+:where(:root, :host) {
+  --wa-border-style: solid;
+
+  /* A multiplier is provided to uniformly increase or decrease all border widths. */
+  --wa-border-width-multiplier: 0.0625;
+  --wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
+  --wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
+  --wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
+
+  /**
+   * Focus
+   */
+  --wa-focus-ring-style: solid;
+  --wa-focus-ring-width: 0.1875rem; /* 3px */
+  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
+  --wa-focus-ring-offset: 0.0625rem; /* 1px */
+}
diff --git a/src/styles/themes/default/rounding.css b/src/styles/themes/default/rounding.css
new file mode 100644
index 000000000..ffc648886
--- /dev/null
+++ b/src/styles/themes/default/rounding.css
@@ -0,0 +1,16 @@
+/**
+* Rounding tokens
+*/
+:where(:root, :host) {
+  /* A multiplier is provided to uniformly increase or decrease all border radii. */
+  --wa-border-radius-multiplier: 0.375;
+  --wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem);
+  --wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
+  --wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
+  --wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
+
+  /* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
+  --wa-border-radius-pill: 9999px;
+  --wa-border-radius-circle: 50%;
+  --wa-border-radius-square: 0px;
+}
diff --git a/src/styles/themes/default/shadows.css b/src/styles/themes/default/shadows.css
new file mode 100644
index 000000000..a1cc6d5f3
--- /dev/null
+++ b/src/styles/themes/default/shadows.css
@@ -0,0 +1,39 @@
+/**
+ * Shadows
+ * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
+ * A multiplier is provided for each shadow quality to uniformly scale all related values.
+ */
+:where(:root, :host) {
+  --wa-shadow-offset-x-multiplier: 0;
+  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.5rem);
+  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
+  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
+  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 4rem);
+
+  --wa-shadow-offset-y-multiplier: 0.125;
+  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.5rem);
+  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
+  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
+  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 4rem);
+
+  --wa-shadow-blur-multiplier: 0.125;
+  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.5rem);
+  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
+  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 2rem);
+  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 4rem);
+
+  --wa-shadow-spread-multiplier: -0.0625;
+  --wa-shadow-spread-xs: calc(var(--wa-shadow-spread-multiplier) * 0.5rem);
+  --wa-shadow-spread-s: calc(var(--wa-shadow-spread-multiplier) * 1rem);
+  --wa-shadow-spread-m: calc(var(--wa-shadow-spread-multiplier) * 2rem);
+  --wa-shadow-spread-l: calc(var(--wa-shadow-spread-multiplier) * 4rem);
+
+  --wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
+    var(--wa-shadow-spread-xs) var(--wa-color-shadow);
+  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
+    var(--wa-shadow-spread-s) var(--wa-color-shadow);
+  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
+    var(--wa-shadow-spread-m) var(--wa-color-shadow);
+  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
+    var(--wa-shadow-spread-l) var(--wa-color-shadow);
+}
diff --git a/src/styles/themes/default/space.css b/src/styles/themes/default/space.css
new file mode 100644
index 000000000..4146a71b7
--- /dev/null
+++ b/src/styles/themes/default/space.css
@@ -0,0 +1,16 @@
+/**
+ * Spacing
+ */
+:where(:root, :host) {
+  /* A multiplier is provided to uniformly increase or decrease all spacing. */
+  --wa-space-multiplier: 1;
+  --wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
+  --wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
+  --wa-space-xs: calc(var(--wa-space-multiplier) * 0.5rem); /* 8px */
+  --wa-space-s: calc(var(--wa-space-multiplier) * 0.75rem); /* 12px */
+  --wa-space-m: calc(var(--wa-space-multiplier) * 1rem); /* 16px */
+  --wa-space-l: calc(var(--wa-space-multiplier) * 1.25rem); /* 20px */
+  --wa-space-xl: calc(var(--wa-space-multiplier) * 1.5rem); /* 24px */
+  --wa-space-2xl: calc(var(--wa-space-multiplier) * 2rem); /* 32px */
+  --wa-space-3xl: calc(var(--wa-space-multiplier) * 3rem); /* 48px */
+}
diff --git a/src/styles/themes/default/transitions.css b/src/styles/themes/default/transitions.css
new file mode 100644
index 000000000..23c99eaaf
--- /dev/null
+++ b/src/styles/themes/default/transitions.css
@@ -0,0 +1,9 @@
+/**
+ * Transitions
+ */
+:where(:root, :host) {
+  --wa-transition-easing: ease;
+  --wa-transition-slow: 300ms;
+  --wa-transition-normal: 150ms;
+  --wa-transition-fast: 75ms;
+}
diff --git a/src/styles/themes/default/typography.css b/src/styles/themes/default/typography.css
new file mode 100644
index 000000000..37664b8df
--- /dev/null
+++ b/src/styles/themes/default/typography.css
@@ -0,0 +1,40 @@
+/**
+ * Typography
+ */
+:where(:root, :host) {
+  --wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
+  --wa-font-family-heading: var(--wa-font-family-body);
+  --wa-font-family-code: ui-monospace, monospace;
+  --wa-font-family-longform: ui-serif, serif;
+
+  /* The default type scale is roughly based on the Major Second scale (x1.125),
+   * with each value rounded to the nearest whole pixel based on a 16px root font size.
+   * For larger font sizes, every other step on the scale is skipped in order to maximize variation.
+   * A multiplier is provided to uniformly increase or decrease all font sizes. */
+  --wa-font-size-multiplier: 1;
+  --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
+  --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
+  --wa-font-size-s: calc(0.875rem * var(--wa-font-size-multiplier)); /* 14px */
+  --wa-font-size-m: calc(1rem * var(--wa-font-size-multiplier)); /* 16px */
+  --wa-font-size-l: calc(1.25rem * var(--wa-font-size-multiplier)); /* 20px */
+  --wa-font-size-xl: calc(1.625rem * var(--wa-font-size-multiplier)); /* 26px */
+  --wa-font-size-2xl: calc(2rem * var(--wa-font-size-multiplier)); /* 32px */
+  --wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-multiplier)); /* 41px */
+  --wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-multiplier)); /* 52px */
+
+  --wa-font-weight-light: 300;
+  --wa-font-weight-normal: 400;
+  --wa-font-weight-semibold: 500;
+  --wa-font-weight-bold: 600;
+
+  --wa-font-weight-body: var(--wa-font-weight-normal);
+  --wa-font-weight-heading: var(--wa-font-weight-bold);
+  --wa-font-weight-action: var(--wa-font-weight-semibold);
+
+  --wa-line-height-condensed: 1.2;
+  --wa-line-height-normal: 1.6;
+  --wa-line-height-expanded: 2;
+
+  --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
+  --wa-link-decoration-hover: underline;
+}