diff --git a/cspell.json b/cspell.json
index 2172b208f..cac686efd 100644
--- a/cspell.json
+++ b/cspell.json
@@ -109,6 +109,7 @@
     "novalidate",
     "npmdir",
     "Numberish",
+    "oklab",
     "oklch",
     "outdir",
     "ParamagicDev",
diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk
index c6340b487..d15ee2cd5 100644
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -74,13 +74,13 @@
       </header>
 
       <div class="sidebar-buttons">
-        <wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
+        <wa-button outline size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
           <wa-icon slot="prefix" name="github"></wa-icon> Code
         </wa-button>
-        <wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
+        <wa-button outline size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
           <wa-icon slot="prefix" name="star-fill"></wa-icon> Star
         </wa-button>
-        <wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
+        <wa-button outline size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
           <wa-icon slot="prefix" name="twitter"></wa-icon> Follow
         </wa-button>
       </div>
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 38036fbc2..d391709ec 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -1095,14 +1095,26 @@ html.sidebar-open #menu-toggle {
 }
 
 .repo-button--github wa-icon {
+  color: var(--wa-color-black);
+}
+
+.repo-button--github:hover wa-icon {
   color: var(--wa-color-white);
 }
 
 .repo-button--star wa-icon {
+  color: var(--wa-color-yellow-70);
+}
+
+.repo-button--star:hover wa-icon {
   color: var(--wa-color-yellow-80);
 }
 
 .repo-button--twitter wa-icon {
+  color: var(--wa-color-blue-60);
+}
+
+.repo-button--twitter:hover wa-icon {
   color: var(--wa-color-blue-70);
 }
 
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index 6b07ebc20..a9d924001 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -16,10 +16,7 @@ export default css`
     display: flex;
     align-items: stretch;
     border-radius: var(--wa-corners-1x);
-    font-family: var(--wa-font-family-body);
-    font-size: var(--wa-font-size-m);
-    font-weight: var(--wa-font-size-normal);
-    line-height: var(--wa-font-line-height-regular);
+    font: inherit;
     margin: inherit;
   }
 
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index c466b85de..ecbbd3795 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -18,9 +18,8 @@ export default css`
     width: var(--size);
     height: var(--size);
     background-color: var(--wa-color-neutral-fill-vivid);
-    font-family: var(--wa-font-family-body);
+    font: inherit;
     font-size: calc(var(--size) * 0.5);
-    font-weight: var(--wa-font-weight-normal);
     color: var(--wa-color-neutral-text-on-vivid);
     user-select: none;
     vertical-align: middle;
diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
index 47e9f211b..a6ff9cd25 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -11,9 +11,8 @@ export default css`
   .breadcrumb-item {
     display: inline-flex;
     align-items: center;
-    font-family: var(--wa-font-family-body);
+    font: inherit;
     font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-medium);
     color: var(--wa-color-neutral-text-on-surface);
     line-height: var(--wa-line-height-regular);
     white-space: nowrap;
@@ -21,10 +20,7 @@ export default css`
 
   .breadcrumb-item__label {
     display: inline-block;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
+    font: inherit;
     text-decoration: none;
     color: inherit;
     background: none;
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index f0b65b8a6..5b39f8079 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -17,8 +17,7 @@ export default css`
     justify-content: center;
     width: 100%;
     border: none;
-    font-family: var(--wa-font-family-body);
-    font-weight: var(--wa-font-weight-action);
+    font: inherit;
     text-decoration: none;
     user-select: none;
     white-space: nowrap;
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index e9e322e24..684612541 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -12,8 +12,7 @@ export default css`
     position: relative;
     display: inline-flex;
     align-items: flex-start;
-    font-family: var(--wa-font-family-body);
-    font-weight: var(--wa-font-weight-normal);
+    font: inherit;
     color: var(--wa-form-controls-text-color);
     vertical-align: middle;
     cursor: pointer;
diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index e3ac95f8b..d37cc2fff 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -17,9 +17,7 @@ export default css`
 
   .color-picker {
     width: var(--grid-width);
-    font-family: var(--wa-font-family-body);
-    font-weight: var(--wa-font-weight-normal);
-    font-size: var(--wa-font-size-m);
+    font: inherit;
     color: var(--color);
     background-color: var(--wa-color-surface-raised);
     border-radius: var(--wa-corners-1x);
diff --git a/src/components/dropdown/dropdown.styles.ts b/src/components/dropdown/dropdown.styles.ts
index 5b6449957..c5ca79ec6 100644
--- a/src/components/dropdown/dropdown.styles.ts
+++ b/src/components/dropdown/dropdown.styles.ts
@@ -33,9 +33,7 @@ export default css`
   }
 
   .dropdown__panel {
-    font-family: var(--wa-font-family-body);
-    font-size: var(--wa-font-size-m);
-    font-weight: var(--wa-font-weight-normal);
+    font: inherit;
     box-shadow: var(--wa-shadow-level-3);
     border-radius: var(--wa-corners-1x);
     pointer-events: none;
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index bb8a67d79..e738db2a1 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -17,8 +17,7 @@ export default css`
     justify-content: start;
     position: relative;
     width: 100%;
-    font-family: var(--wa-font-family-body);
-    font-weight: var(--wa-font-weight-normal);
+    font: inherit;
     vertical-align: middle;
     overflow: hidden;
     cursor: text;
@@ -64,9 +63,7 @@ export default css`
     flex: 1 1 auto;
     min-width: 0;
     height: 100%;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
+    font: inherit;
     line-height: var(--wa-form-controls-value-line-height);
     color: var(--wa-form-controls-text-color);
     border: none;
diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index 38537227e..2de777921 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -18,10 +18,7 @@ export default css`
     position: relative;
     display: flex;
     align-items: stretch;
-    font-family: var(--wa-font-family-body);
-    font-size: var(--wa-font-size-m);
-    font-weight: var(--wa-font-weight-normal);
-    line-height: var(--wa-line-height-regular);
+    font: inherit;
     color: var(--wa-color-text-normal);
     padding: var(--wa-space-2xs) var(--wa-space-2xs);
     transition: var(--wa-transition-fast) fill;
diff --git a/src/components/menu-label/menu-label.styles.ts b/src/components/menu-label/menu-label.styles.ts
index 422a57a07..aec99516b 100644
--- a/src/components/menu-label/menu-label.styles.ts
+++ b/src/components/menu-label/menu-label.styles.ts
@@ -10,10 +10,7 @@ export default css`
 
   .menu-label {
     display: inline-block;
-    font-family: var(--wa-font-family-body);
-    font-size: var(--wa-font-size-m);
-    font-weight: var(--wa-font-weight-heavy);
-    line-height: var(--wa-line-height-regular);
+    font: inherit;
     color: var(--wa-color-neutral-text-on-surface);
     padding: var(--wa-space-2xs) var(--wa-space-xl);
     user-select: none;
diff --git a/src/components/option/option.styles.ts b/src/components/option/option.styles.ts
index d55852f17..3e8c156aa 100644
--- a/src/components/option/option.styles.ts
+++ b/src/components/option/option.styles.ts
@@ -17,10 +17,7 @@ export default css`
     position: relative;
     display: flex;
     align-items: center;
-    font-family: var(--wa-font-family-body);
-    font-size: var(--wa-font-size-m);
-    font-weight: var(--wa-font-weight-normal);
-    line-height: var(--wa-line-height-regular);
+    font: inherit;
     color: var(--wa-color-neutral-text-on-surface);
     padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-xs);
     transition: var(--wa-transition-fast) fill;
diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts
index 4a8a0d305..092d8f1cb 100644
--- a/src/components/progress-bar/progress-bar.styles.ts
+++ b/src/components/progress-bar/progress-bar.styles.ts
@@ -24,9 +24,7 @@ export default css`
 
   .progress-bar__indicator {
     height: 100%;
-    font-family: var(--wa-font-family-body);
-    font-size: var(--wa-font-size-xs);
-    font-weight: var(--wa-font-weight-regular);
+    font: inherit;
     background-color: var(--indicator-color);
     color: var(--label-color);
     text-align: center;
diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index 12717cbc8..911995391 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -15,9 +15,7 @@ export default css`
   .radio {
     display: inline-flex;
     align-items: top;
-    font-family: var(--wa-font-family-body);
-    font-size: var(--wa-font-size-m);
-    font-weight: var(--wa-font-weight-normal);
+    font: inherit;
     color: var(--wa-form-controls-text-color);
     vertical-align: middle;
     cursor: pointer;
diff --git a/src/components/range/range.styles.ts b/src/components/range/range.styles.ts
index 86bfffc52..5fa932792 100644
--- a/src/components/range/range.styles.ts
+++ b/src/components/range/range.styles.ts
@@ -148,9 +148,8 @@ export default css`
     left: 0;
     border-radius: var(--wa-corners-1x);
     background-color: var(--wa-color-neutral-fill-vivid);
-    font-family: var(--wa-font-family-body);
+    font: inherit;
     font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-regular);
     line-height: var(--wa-line-height-regular);
     color: var(--wa-color-neutral-text-on-vivid);
     opacity: 0;
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index 977f1acc5..d9e358510 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -40,8 +40,7 @@ export default css`
     position: relative;
     align-items: center;
     justify-content: start;
-    font-family: var(--wa-font-family-body);
-    font-weight: var(--wa-font-weight-normal);
+    font: inherit;
     vertical-align: middle;
     overflow: hidden;
     cursor: pointer;
@@ -282,9 +281,7 @@ export default css`
   .select__listbox {
     display: block;
     position: relative;
-    font-family: var(--wa-font-family-body);
-    font-size: var(--wa-font-size-m);
-    font-weight: var(--wa-font-weight-normal);
+    font: inherit;
     box-shadow: var(--wa-shadow-level-3);
     background: var(--wa-color-surface-raised);
     border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts
index 95357f8f6..d70041e70 100644
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -36,9 +36,7 @@ export default css`
     position: relative;
     display: inline-flex;
     align-items: center;
-    font-family: var(--wa-font-family-body);
-    font-weight: var(--wa-font-weight-normal);
-    font-size: inherit;
+    font: inherit;
     color: var(--wa-form-controls-text-color);
     vertical-align: middle;
     cursor: pointer;
diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts
index 3dbc80cf2..5d4d1801d 100644
--- a/src/components/tab/tab.styles.ts
+++ b/src/components/tab/tab.styles.ts
@@ -11,9 +11,7 @@ export default css`
   .tab {
     display: inline-flex;
     align-items: center;
-    font-family: var(--wa-font-family-body);
-    font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-action);
+    font: inherit;
     border-radius: var(--wa-corners-1x);
     color: var(--wa-color-neutral-text-on-surface);
     padding: var(--wa-space-m) var(--wa-space-l);
diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts
index 635c2f35d..05f9907ba 100644
--- a/src/components/textarea/textarea.styles.ts
+++ b/src/components/textarea/textarea.styles.ts
@@ -15,8 +15,7 @@ export default css`
     align-items: center;
     position: relative;
     width: 100%;
-    font-family: var(--wa-font-family-body);
-    font-weight: var(--wa-font-weight-normal);
+    font: inherit;
     color: var(--wa-form-controls-text-color);
     line-height: var(--wa-form-controls-value-line-height);
     vertical-align: middle;
@@ -61,10 +60,8 @@ export default css`
 
   .textarea__control {
     flex: 1 1 auto;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: 1.4;
+    font: inherit;
+    line-height: var(--wa-form-controls-value-line-height);
     color: var(--wa-form-controls-text-color);
     border: none;
     background: none;
diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts
index 234387a08..5cf421eb9 100644
--- a/src/components/tooltip/tooltip.styles.ts
+++ b/src/components/tooltip/tooltip.styles.ts
@@ -44,9 +44,8 @@ export default css`
     max-width: var(--max-width);
     border-radius: var(--wa-corners-1x);
     background-color: var(--wa-color-neutral-fill-vivid-alt);
-    font-family: var(--wa-font-family-body);
+    font: inherit;
     font-size: var(--wa-font-size-s);
-    font-weight: var(--wa-font-weight-regular);
     line-height: var(--wa-line-height-regular);
     color: var(--wa-color-neutral-text-on-vivid);
     padding: var(--wa-space-2xs) var(--wa-space-xs);
diff --git a/src/components/tree-item/tree-item.styles.ts b/src/components/tree-item/tree-item.styles.ts
index 6a5d6bdb5..1cb7fd6e1 100644
--- a/src/components/tree-item/tree-item.styles.ts
+++ b/src/components/tree-item/tree-item.styles.ts
@@ -35,10 +35,8 @@ export default css`
   .tree-item__expand-button,
   .tree-item__checkbox,
   .tree-item__label {
-    font-family: var(--wa-font-family-body);
+    font: inherit;
     font-size: var(--wa-font-size-m);
-    font-weight: var(--wa-font-weight-regular);
-    line-height: var(--wa-line-height-regular);
   }
 
   .tree-item__checkbox::part(base) {