diff --git a/libs/core/.stylelintignore b/libs/core/.stylelintignore
index c55e68da1..c4f496037 100644
--- a/libs/core/.stylelintignore
+++ b/libs/core/.stylelintignore
@@ -1,2 +1,3 @@
 src/global/styles/_fonts.scss
-src/global/styles/tokens/semantic/*.scss
\ No newline at end of file
+src/global/styles/tokens/semantic/*.scss
+src/global/styles/base.scss
diff --git a/libs/core/src/components/pds-accordion/pds-accordion.tsx b/libs/core/src/components/pds-accordion/pds-accordion.tsx
index 0ae290395..8552b4cdd 100644
--- a/libs/core/src/components/pds-accordion/pds-accordion.tsx
+++ b/libs/core/src/components/pds-accordion/pds-accordion.tsx
@@ -8,7 +8,7 @@ import { downSmall } from '@pine-ds/icons/icons';
  */
 @Component({
   tag: 'pds-accordion',
-  styleUrl: 'pds-accordion.scss',
+  styleUrls: ['../../global/styles/base.scss','pds-accordion.scss'],
   shadow: true,
 })
 export class PdsAccordion {
diff --git a/libs/core/src/components/pds-accordion/stories/pds-accordion.stories.js b/libs/core/src/components/pds-accordion/stories/pds-accordion.stories.js
index 896a3f6a6..af9358a5a 100644
--- a/libs/core/src/components/pds-accordion/stories/pds-accordion.stories.js
+++ b/libs/core/src/components/pds-accordion/stories/pds-accordion.stories.js
@@ -13,21 +13,17 @@ export default {
 
 const BaseTemplate = (args) => html`
 	<pds-accordion component-id="${args.componentId}" open="${args.isOpen}">
-    <pds-row align-items="center" slot="label">
-      <pds-box align-items="center">
-        <pds-icon name="product"></pds-icon>
-        <span style="display: inline-block; margin-left: 8px;">Products</span>
-      </pds-box>
-    </pds-row>
-    <pds-row>
-      <pds-box direction="column" gap="xs" padding="xs">
-        <pds-link variant="plain" href="#">All products</pds-link>
-        <pds-link variant="plain" href="#">Courses</pds-link>
-        <pds-link variant="plain" href="#">Coaching</pds-link>
-        <pds-link variant="plain" href="#">Community</pds-link>
-        <pds-link variant="plain" href="#">Podcasts</pds-link>
-      </pds-box>
-    </pds-row>
+    <pds-box align-items="center" slot="label">
+      <pds-icon name="product"></pds-icon>
+      <span style="display: inline-block; margin-left: 8px;">Products</span>
+    </pds-box>
+    <pds-box direction="column" gap="xs" padding="xs">
+      <pds-link variant="plain" href="#">All products</pds-link>
+      <pds-link variant="plain" href="#">Courses</pds-link>
+      <pds-link variant="plain" href="#">Coaching</pds-link>
+      <pds-link variant="plain" href="#">Community</pds-link>
+      <pds-link variant="plain" href="#">Podcasts</pds-link>
+    </pds-box>
   </pds-accordion>
 `;
 
diff --git a/libs/core/src/components/pds-avatar/pds-avatar.tsx b/libs/core/src/components/pds-avatar/pds-avatar.tsx
index 7bc21c0bc..ee31d632b 100644
--- a/libs/core/src/components/pds-avatar/pds-avatar.tsx
+++ b/libs/core/src/components/pds-avatar/pds-avatar.tsx
@@ -6,7 +6,7 @@ import { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';
 */
 @Component({
   tag: 'pds-avatar',
-  styleUrl: 'pds-avatar.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-avatar.scss'],
   shadow: true,
 })
 export class PdsAvatar {
diff --git a/libs/core/src/components/pds-button/pds-button.scss b/libs/core/src/components/pds-button/pds-button.scss
index 66cd9a6a6..d6d8585bc 100644
--- a/libs/core/src/components/pds-button/pds-button.scss
+++ b/libs/core/src/components/pds-button/pds-button.scss
@@ -67,6 +67,7 @@
   padding: var(--spacing-padding-block) var(--spacing-padding-inline);
 
   pds-icon {
+    color: currentColor;
     fill: currentColor;
     margin-inline-end: var(--spacing-icon-margin-inline-end);
   }
diff --git a/libs/core/src/components/pds-button/pds-button.tsx b/libs/core/src/components/pds-button/pds-button.tsx
index 8402fdf81..ae757b292 100644
--- a/libs/core/src/components/pds-button/pds-button.tsx
+++ b/libs/core/src/components/pds-button/pds-button.tsx
@@ -11,7 +11,7 @@ import { caretDown } from '@pine-ds/icons/icons';
 
 @Component({
   tag: 'pds-button',
-  styleUrl: 'pds-button.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-button.scss'],
   shadow: true,
 })
 export class PdsButton {
diff --git a/libs/core/src/components/pds-checkbox/pds-checkbox.tsx b/libs/core/src/components/pds-checkbox/pds-checkbox.tsx
index 0e771ea49..bcbab8b90 100644
--- a/libs/core/src/components/pds-checkbox/pds-checkbox.tsx
+++ b/libs/core/src/components/pds-checkbox/pds-checkbox.tsx
@@ -5,7 +5,7 @@ import { CheckboxChangeEventDetail } from './checkbox-interface';
 
 @Component({
   tag: 'pds-checkbox',
-  styleUrl: 'pds-checkbox.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-checkbox.scss'],
   shadow: true,
 })
 export class PdsCheckbox {
diff --git a/libs/core/src/components/pds-chip/pds-chip.tsx b/libs/core/src/components/pds-chip/pds-chip.tsx
index 26f0942c8..960dfca06 100644
--- a/libs/core/src/components/pds-chip/pds-chip.tsx
+++ b/libs/core/src/components/pds-chip/pds-chip.tsx
@@ -3,7 +3,7 @@ import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';
 
 @Component({
   tag: 'pds-chip',
-  styleUrl: 'pds-chip.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-chip.scss'],
   shadow: true,
 })
 export class PdsChip {
diff --git a/libs/core/src/components/pds-copytext/pds-copytext.tsx b/libs/core/src/components/pds-copytext/pds-copytext.tsx
index 03527fe0d..1e97a86c0 100644
--- a/libs/core/src/components/pds-copytext/pds-copytext.tsx
+++ b/libs/core/src/components/pds-copytext/pds-copytext.tsx
@@ -4,7 +4,7 @@ import { copy as copyIcon } from '@pine-ds/icons/icons';
 
 @Component({
   tag: 'pds-copytext',
-  styleUrl: 'pds-copytext.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-copytext.scss'],
   shadow: true,
 })
 export class PdsCopytext {
diff --git a/libs/core/src/components/pds-divider/pds-divider.tsx b/libs/core/src/components/pds-divider/pds-divider.tsx
index bd67812e6..d7b17c780 100644
--- a/libs/core/src/components/pds-divider/pds-divider.tsx
+++ b/libs/core/src/components/pds-divider/pds-divider.tsx
@@ -2,7 +2,7 @@ import { Component, Prop, Host, h } from '@stencil/core';
 
 @Component({
   tag: 'pds-divider',
-  styleUrl: 'pds-divider.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-divider.scss'],
   shadow: true,
 })
 export class PdsDivider {
diff --git a/libs/core/src/components/pds-image/pds-image.tsx b/libs/core/src/components/pds-image/pds-image.tsx
index a7a437551..57e60b630 100644
--- a/libs/core/src/components/pds-image/pds-image.tsx
+++ b/libs/core/src/components/pds-image/pds-image.tsx
@@ -2,7 +2,7 @@ import { Component, Host, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'pds-image',
-  styleUrl: 'pds-image.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-image.scss'],
   shadow: true,
 })
 export class PdsImage {
diff --git a/libs/core/src/components/pds-input/pds-input.tsx b/libs/core/src/components/pds-input/pds-input.tsx
index c48804172..d8decb832 100644
--- a/libs/core/src/components/pds-input/pds-input.tsx
+++ b/libs/core/src/components/pds-input/pds-input.tsx
@@ -4,7 +4,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label';
 
 @Component({
   tag: 'pds-input',
-  styleUrl: 'pds-input.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-input.scss'],
   shadow: true,
 })
 export class PdsInput {
diff --git a/libs/core/src/components/pds-link/pds-link.tsx b/libs/core/src/components/pds-link/pds-link.tsx
index d725a850c..67bef3f0b 100644
--- a/libs/core/src/components/pds-link/pds-link.tsx
+++ b/libs/core/src/components/pds-link/pds-link.tsx
@@ -8,7 +8,7 @@ import { launch } from '@pine-ds/icons/icons';
  */
 @Component({
   tag: 'pds-link',
-  styleUrl: 'pds-link.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-link.scss'],
   shadow: true,
 })
 export class PdsLink {
diff --git a/libs/core/src/components/pds-loader/pds-loader.tsx b/libs/core/src/components/pds-loader/pds-loader.tsx
index 65d2550ac..6824c61f6 100644
--- a/libs/core/src/components/pds-loader/pds-loader.tsx
+++ b/libs/core/src/components/pds-loader/pds-loader.tsx
@@ -6,7 +6,7 @@ import { Component, Host, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'pds-loader',
-  styleUrl: 'pds-loader.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-loader.scss'],
   shadow: true,
 })
 export class PdsLoader {
diff --git a/libs/core/src/components/pds-progress/pds-progress.tsx b/libs/core/src/components/pds-progress/pds-progress.tsx
index 4bacaf764..c658c61ad 100644
--- a/libs/core/src/components/pds-progress/pds-progress.tsx
+++ b/libs/core/src/components/pds-progress/pds-progress.tsx
@@ -2,7 +2,7 @@ import { Component, Host, h, Prop } from '@stencil/core';
 
 @Component({
   tag: 'pds-progress',
-  styleUrl: 'pds-progress.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-progress.scss'],
   shadow: true,
 })
 export class PdsProgress {
diff --git a/libs/core/src/components/pds-radio/pds-radio.tsx b/libs/core/src/components/pds-radio/pds-radio.tsx
index 9b153650a..82bb8c31f 100644
--- a/libs/core/src/components/pds-radio/pds-radio.tsx
+++ b/libs/core/src/components/pds-radio/pds-radio.tsx
@@ -4,7 +4,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label';
 
 @Component({
   tag: 'pds-radio',
-  styleUrl: 'pds-radio.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-radio.scss'],
   scoped: true,
 })
 export class PdsRadio {
diff --git a/libs/core/src/components/pds-sortable/pds-sortable.tsx b/libs/core/src/components/pds-sortable/pds-sortable.tsx
index 217c74ea9..04fa80f26 100644
--- a/libs/core/src/components/pds-sortable/pds-sortable.tsx
+++ b/libs/core/src/components/pds-sortable/pds-sortable.tsx
@@ -4,7 +4,7 @@ import Sortable from 'sortablejs';
 
 @Component({
   tag: 'pds-sortable',
-  styleUrl: 'pds-sortable.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-sortable.scss'],
   scoped: true,
 })
 export class PdsSortable {
diff --git a/libs/core/src/components/pds-switch/pds-switch.tsx b/libs/core/src/components/pds-switch/pds-switch.tsx
index d2285d3a9..864a52c3a 100644
--- a/libs/core/src/components/pds-switch/pds-switch.tsx
+++ b/libs/core/src/components/pds-switch/pds-switch.tsx
@@ -4,7 +4,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label';
 
 @Component({
   tag: 'pds-switch',
-  styleUrl: 'pds-switch.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-switch.scss'],
   shadow: true,
 })
 export class PdsSwitch {
diff --git a/libs/core/src/components/pds-table/pds-table-body/pds-table-body.tsx b/libs/core/src/components/pds-table/pds-table-body/pds-table-body.tsx
index 13c496f5c..247aa206c 100644
--- a/libs/core/src/components/pds-table/pds-table-body/pds-table-body.tsx
+++ b/libs/core/src/components/pds-table/pds-table-body/pds-table-body.tsx
@@ -2,7 +2,7 @@ import { Component, Host, h } from '@stencil/core';
 
 @Component({
   tag: 'pds-table-body',
-  styleUrl: 'pds-table-body.scss',
+  styleUrls: ['../../../global/styles/base.scss', 'pds-table-body.scss'],
   shadow: true,
 })
 export class PdsTableBody {
diff --git a/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.tsx b/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.tsx
index 49bd97a37..63c93ba59 100644
--- a/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.tsx
+++ b/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.tsx
@@ -2,7 +2,7 @@ import { Component, Element, Host, Prop, State, h } from '@stencil/core';
 
 @Component({
   tag: 'pds-table-cell',
-  styleUrl: 'pds-table-cell.scss',
+  styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'],
   shadow: true,
 })
 export class PdsTableCell {
diff --git a/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx b/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx
index d4fd2eed1..5d93a8118 100644
--- a/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx
+++ b/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx
@@ -4,7 +4,7 @@ import { downSmall, upSmall } from '@pine-ds/icons/icons';
 
 @Component({
   tag: 'pds-table-head-cell',
-  styleUrl: 'pds-table-head-cell.scss',
+  styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'],
   shadow: true,
 })
 export class PdsTableHeadCell {
diff --git a/libs/core/src/components/pds-table/pds-table-head/pds-table-head.tsx b/libs/core/src/components/pds-table/pds-table-head/pds-table-head.tsx
index 61a8d1ae7..a3c93d35b 100644
--- a/libs/core/src/components/pds-table/pds-table-head/pds-table-head.tsx
+++ b/libs/core/src/components/pds-table/pds-table-head/pds-table-head.tsx
@@ -3,7 +3,7 @@ import { closest } from '@utils/closest';
 
 @Component({
   tag: 'pds-table-head',
-  styleUrl: 'pds-table-head.scss',
+  styleUrls: ['../../../global/styles/base.scss', 'pds-table-head.scss'],
   shadow: true,
 })
 export class PdsTableHead {
diff --git a/libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx b/libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx
index 730c1d2b1..6aa8c21a0 100644
--- a/libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx
+++ b/libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx
@@ -4,7 +4,7 @@ import { closest } from '../../../utils/closest';
 
 @Component({
   tag: 'pds-table-row',
-  styleUrl: 'pds-table-row.scss',
+  styleUrls: ['../../../global/styles/base.scss', 'pds-table-row.scss'],
   shadow: true,
 })
 export class PdsTableRow {
diff --git a/libs/core/src/components/pds-table/pds-table.tsx b/libs/core/src/components/pds-table/pds-table.tsx
index fc9a654db..84c8545ff 100644
--- a/libs/core/src/components/pds-table/pds-table.tsx
+++ b/libs/core/src/components/pds-table/pds-table.tsx
@@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen }
 
 @Component({
   tag: 'pds-table',
-  styleUrl: 'pds-table.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-table.scss'],
   shadow: true,
 })
 export class PdsTable {
diff --git a/libs/core/src/components/pds-tabs/pds-tabs.tsx b/libs/core/src/components/pds-tabs/pds-tabs.tsx
index 55bdf7a35..9a155fad3 100644
--- a/libs/core/src/components/pds-tabs/pds-tabs.tsx
+++ b/libs/core/src/components/pds-tabs/pds-tabs.tsx
@@ -6,7 +6,7 @@ import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';
  */
 @Component({
   tag: 'pds-tabs',
-  styleUrl: 'pds-tabs.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-tabs.scss'],
   shadow: true,
 })
 export class PdsTabs {
diff --git a/libs/core/src/components/pds-textarea/pds-textarea.tsx b/libs/core/src/components/pds-textarea/pds-textarea.tsx
index 3c0479c23..1f7b19645 100644
--- a/libs/core/src/components/pds-textarea/pds-textarea.tsx
+++ b/libs/core/src/components/pds-textarea/pds-textarea.tsx
@@ -5,7 +5,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label';
 
 @Component({
   tag: 'pds-textarea',
-  styleUrl: 'pds-textarea.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'],
   shadow: true,
 })
 export class PdsTextarea {
diff --git a/libs/core/src/components/pds-tooltip/pds-tooltip.tsx b/libs/core/src/components/pds-tooltip/pds-tooltip.tsx
index b57851ddf..ee6471b0d 100644
--- a/libs/core/src/components/pds-tooltip/pds-tooltip.tsx
+++ b/libs/core/src/components/pds-tooltip/pds-tooltip.tsx
@@ -10,7 +10,7 @@ import {
 
 @Component({
   tag: 'pds-tooltip',
-  styleUrl: 'pds-tooltip.scss',
+  styleUrls: ['../../global/styles/base.scss', 'pds-tooltip.scss'],
   shadow: true,
 })
 export class PdsTooltip {
diff --git a/libs/core/src/global/styles/app.scss b/libs/core/src/global/styles/app.scss
index 9051f7f59..eadec10ff 100644
--- a/libs/core/src/global/styles/app.scss
+++ b/libs/core/src/global/styles/app.scss
@@ -1,2 +1,2 @@
-@use 'fonts';
 @use 'tokens/index';
+@use 'fonts';
diff --git a/libs/core/src/global/styles/base.scss b/libs/core/src/global/styles/base.scss
new file mode 100644
index 000000000..8c501850b
--- /dev/null
+++ b/libs/core/src/global/styles/base.scss
@@ -0,0 +1,120 @@
+// TODO: replace core tokens with semantic
+// Heading color + outline
+
+/*
+  Josh's Custom CSS Reset
+  https://www.joshwcomeau.com/css/custom-css-reset/
+*/
+:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {
+  box-sizing: border-box;
+}
+
+:where(*:not(slot)) {
+  margin: 0;
+}
+
+:where(img, picture, video, canvas, svg) {
+  display: block;
+  max-width: 100%;
+}
+
+:where(input, button, textarea, select) {
+  font: inherit;
+}
+
+:where(p, h1, h2, h3, h4, h5, h6) {
+  overflow-wrap: break-word;
+}
+
+/*
+  Additional Reset Styles
+*/
+:where(a:not([href]):not([class])) {
+  color: currentColor;
+  text-decoration: none;
+}
+
+:where(a:not([href]):not([class]):hover) {
+  color: currentColor;
+  text-decoration: none;
+}
+
+:where(ul[role='list'], ol[role='list']) {
+  list-style: none;
+}
+
+:where(table) {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/*
+  Mercury Base Styles
+*/
+// Typography
+:where(*:not(slot)) {
+  font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--pine-font-family-heading);
+  color: var(--pine-color-grey-950);
+}
+
+:where(h1) {
+  font: var(--pine-typography-heading-h1);
+  letter-spacing: var(--pine-letter-spacing-heading-h1);
+}
+
+:where(h2) {
+  font: var(--pine-typography-heading-h2);
+  letter-spacing: var(--pine-letter-spacing-heading-h2);
+}
+
+:where(h3) {
+  font: var(--pine-typography-heading-h3);
+  letter-spacing: var(--pine-letter-spacing-heading-h3);
+}
+
+:where(h4) {
+  font: var(--pine-typography-heading-h4);
+  letter-spacing: var(--pine-letter-spacing-heading-h4);
+}
+
+:where(h5) {
+  font: var(--pine-typography-heading-h5);
+  letter-spacing: var(--pine-letter-spacing-heading-h5);
+}
+
+:where(h6) {
+  font: var(--pine-typography-heading-h6);
+  letter-spacing: var(--pine-letter-spacing-heading-h6);
+}
+
+:where(p) {
+  font: var(--pine-typography-body-md-default);
+  letter-spacing: var(--pine-letter-spacing-body-md);
+}
+
+:where(code, kbd, pre, samp) {
+  font-family: monospace;
+}
+
+// Accessibility
+:where([role="button"]) {
+  cursor: pointer;
+}
+
+:where(:focus) {
+  outline: 0;
+}
+
+:where(:focus-visible) {
+  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);
+}
+
+// Misc.
+:where([hidden]) {
+  display: none !important;
+}
diff --git a/libs/core/src/global/styles/tokens/index.scss b/libs/core/src/global/styles/tokens/index.scss
index fa563517f..ca86b10ec 100644
--- a/libs/core/src/global/styles/tokens/index.scss
+++ b/libs/core/src/global/styles/tokens/index.scss
@@ -1,3 +1,2 @@
 @use 'core/core';
-// Reenable semantic tokens when audit is conducted
-// @use 'semantic/semantic';
+@use 'semantic/semantic';