diff --git a/lib/utilities/README.md b/lib/utilities/README.md
index 1e1ba60569..6d7bf6975d 100755
--- a/lib/utilities/README.md
+++ b/lib/utilities/README.md
@@ -34,6 +34,8 @@
 <div class="surface"></div>
 <div class="surface-strong"></div>
 <div class="inverse"></div>
+<div class="white"></div>
+<div class="black"></div>
 ```
 
 ### Solid
@@ -41,7 +43,6 @@
 #### Accent
 
 ```html:example: blocks
-<div class="primary"></div>
 <div class="secondary"></div>
 <div class="success"></div>
 <div class="warning"></div>
@@ -61,7 +62,6 @@
 #### Grays
 
 ```html:example: blocks
-<div class="white"></div>
 <div class="bright"></div>
 <div class="lightest"></div>
 <div class="lighter"></div>
@@ -71,9 +71,7 @@
 <div class="darker"></div>
 <div class="darkest"></div>
 <div class="inky"></div>
-<div class="black"></div>
 <hr>
-<div class="white state"></div>
 <div class="bright state"></div>
 <div class="lightest state"></div>
 <div class="lighter state"></div>
@@ -83,7 +81,6 @@
 <div class="darker state"></div>
 <div class="darkest state"></div>
 <div class="inky state"></div>
-<div class="black state"></div>
 ```
 
 ### Ghost
@@ -161,7 +158,6 @@
 <div class="darker-pale"></div>
 <div class="darkest-pale"></div>
 <div class="inky-pale"></div>
-<div class="black-pale"></div>
 <hr>
 <h4>Accent State</h4>
 <div class="primary-pale state"></div>
@@ -181,7 +177,6 @@
 <div class="darker-pale state"></div>
 <div class="darkest-pale state"></div>
 <div class="inky-pale state"></div>
-<div class="black-pale state"></div>
 ```
 
 ## Text Colors
diff --git a/lib/utilities/src/interactivity/state.css b/lib/utilities/src/interactivity/state.css
index ee8fa01d3f..0b671e8804 100755
--- a/lib/utilities/src/interactivity/state.css
+++ b/lib/utilities/src/interactivity/state.css
@@ -12,22 +12,27 @@
         transform: scale(var(--state-scale));
         transition-property: opacity, transform, box-shadow;
     }
-    .-state:hover::before,
-    .-state:active::before,
-    .-state:focus-visible::before {
-        @apply -opacity-100 -scale-100;
-    }
     .-state:focus-visible {
         @apply -outline-none;
     }
+    .-state:hover::before,
+    .-state:active::before,
     .-state:focus-visible::before {
-        background: var(--state-focus-color);
-        @apply -ring -ring-focus;
+        @apply -scale-100;
+    }
+    .-state:hover::before {
+        opacity: var(--state-hover-opacity, 1);
     }
     .-state:active::before {
-        background: var(--state-active-color);
+        background: var(--state-active-color, var(--state-color));
+        opacity: var(--state-active-opacity, .6);
         --tw-ring-color: var(--state-ring-color, currentColor);
-        @apply -ring -duration-700 -opacity-80;
+        @apply -ring -duration-700;
+    }
+    .-state:focus-visible::before {
+        background: var(--state-focus-color, var(--state-color));
+        opacity: var(--state-focus-opacity, 1);
+        @apply -ring -ring-focus;
     }
     .-state[disabled]::before,
     .-state.disabled::before {
diff --git a/lib/utilities/src/main.ts b/lib/utilities/src/main.ts
index f98cafd168..5fb05196e3 100755
--- a/lib/utilities/src/main.ts
+++ b/lib/utilities/src/main.ts
@@ -3,7 +3,7 @@ import './interactivity/index.css';
 import './layout/index.css';
 import './spacing/index.css';
 import './sizing/index.css';
-import './skin';
+import './skin/index.css';
 import './typography/index.css';
 import './backgrounds/index.css';
 import './borders/index.css';
diff --git a/lib/utilities/src/skin/ghost.css b/lib/utilities/src/skin/ghost.css
index 593924b341..e6f1eed882 100644
--- a/lib/utilities/src/skin/ghost.css
+++ b/lib/utilities/src/skin/ghost.css
@@ -7,34 +7,37 @@
 .important-ghost,
 .special-ghost {
   @apply -skin;
-  --skin-ring-opacity: 0;
+  --tw-ring-opacity: 0;
   --tw-bg-opacity: 0;
-  --skin-text: var(--skin-color, var(--color-fore-rgb));
-  --skin-hover-bg: var(--skin-color);
-  --skin-hover-bg-opacity: .1;
-  --state-color: transparent;
+  --skin-text: var(--skin-color, inherit);
+  --skin-bg: transparent;
+  --skin-ring: transparent;
+
+  --skin-color: rgba(var(--skin-ghost-rgb), 1);
+  --state-color: rgba(var(--skin-ghost-rgb), .1);
 }
 .ghost {
-  --skin-hover-bg: var(--color-gray-500-rgb);
+  --skin-ghost-rgb: var(--color-fore-rgb);
+  --skin-text: inherit;
 }
 .primary-ghost {
-  --skin-color: var(--color-primary-500-rgb);
+  --skin-ghost-rgb: var(--color-primary-500-rgb);
 }
 .secondary-ghost {
-  --skin-color: var(--color-secondary-500-rgb);
+  --skin-ghost-rgb: var(--color-secondary-500-rgb);
 }
 .success-ghost {
-  --skin-color: var(--color-success-500-rgb);
+  --skin-ghost-rgb: var(--color-success-500-rgb);
 }
 .warning-ghost {
-  --skin-color: var(--color-warning-500-rgb);
+  --skin-ghost-rgb: var(--color-warning-500-rgb);
 }
 .danger-ghost {
-  --skin-color: var(--color-danger-500-rgb);
+  --skin-ghost-rgb: var(--color-danger-500-rgb);
 }
 .important-ghost {
-  --skin-color: var(--color-important-500-rgb);
+  --skin-ghost-rgb: var(--color-important-500-rgb);
 }
 .special-ghost {
-  --skin-color: var(--color-special-500-rgb);
+  --skin-ghost-rgb: var(--color-special-500-rgb);
 }
diff --git a/lib/utilities/src/skin/index.css b/lib/utilities/src/skin/index.css
new file mode 100644
index 0000000000..85f664b645
--- /dev/null
+++ b/lib/utilities/src/skin/index.css
@@ -0,0 +1,6 @@
+@import './surface.css';
+@import './skin.css';
+@import './solid.css';
+@import './pale.css';
+@import './outline.css';
+@import './ghost.css';
diff --git a/lib/utilities/src/skin/index.ts b/lib/utilities/src/skin/index.ts
deleted file mode 100644
index 9cb101a5d8..0000000000
--- a/lib/utilities/src/skin/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import './surface.css';
-import './skin.css';
-import './solid.css';
-import './pale.css';
-import './outline.css';
-import './ghost.css';
diff --git a/lib/utilities/src/skin/outline.css b/lib/utilities/src/skin/outline.css
index 966149dd87..07090cf227 100755
--- a/lib/utilities/src/skin/outline.css
+++ b/lib/utilities/src/skin/outline.css
@@ -6,58 +6,47 @@
 .danger-outline,
 .important-outline,
 .special-outline,
-.white-outline,
-.bright-outline,
-.lightest-outline,
-.lighter-outline,
 .light-gray-outline,
 .gray-outline,
-.dark-gray-outline,
-.darker-outline,
-.darkest-outline,
-.inky-outline,
-.black-outline {
+.dark-gray-outline {
   @apply -skin;
-  --tw-bg-opacity: 0.01;
-  --tw-ring-color: currentColor;
-  --skin-ring-opacity: 1;
-  --skin-text: var(--skin-color);
-  --skin-bg: var(--skin-color);
-  --skin-hover-bg-opacity: .1;
-  --state-color: transparent;
+  --skin-text: var(--skin-color, inherit);
+  --skin-bg: transparent;
+  --skin-color: rgba(var(--skin-outline-rgb), 1);
+  --state-color: rgba(var(--skin-outline-rgb), .1);
 }
 
 .outline {
-  --skin-hover-bg: var(--color-gray-500-rgb);
+  --skin-outline-rgb: var(--color-fore-500-rgb);
 }
 .primary-outline {
-  --skin-color: var(--color-primary-500-rgb);
+  --skin-outline-rgb: var(--color-primary-500-rgb);
 }
 .secondary-outline {
-  --skin-color: var(--color-secondary-500-rgb);
+  --skin-outline-rgb: var(--color-secondary-500-rgb);
 }
 .success-outline {
-  --skin-color: var(--color-success-500-rgb);
+  --skin-outline-rgb: var(--color-success-500-rgb);
 }
 .warning-outline {
-  --skin-color: var(--color-warning-500-rgb);
+  --skin-outline-rgb: var(--color-warning-500-rgb);
 }
 .danger-outline {
-  --skin-color: var(--color-danger-500-rgb);
+  --skin-outline-rgb: var(--color-danger-500-rgb);
 }
 .important-outline {
-  --skin-color: var(--color-important-500-rgb);
+  --skin-outline-rgb: var(--color-important-500-rgb);
 }
 .special-outline {
-  --skin-color: var(--color-special-500-rgb);
+  --skin-outline-rgb: var(--color-special-500-rgb);
 }
 
 .light-gray-outline {
-  --skin-text: var(--color-gray-400-rgb);
+  --skin-outline-rgb: var(--color-gray-400-rgb);
 }
 .gray-outline {
-  --skin-text: var(--color-gray-500-rgb);
+  --skin-outline-rgb: var(--color-gray-500-rgb);
 }
 .dark-gray-outline {
-  --skin-text: var(--color-gray-600-rgb);
+  --skin-outline-rgb: var(--color-gray-600-rgb);
 }
diff --git a/lib/utilities/src/skin/pale.css b/lib/utilities/src/skin/pale.css
index 6540db9bfb..d765eececc 100755
--- a/lib/utilities/src/skin/pale.css
+++ b/lib/utilities/src/skin/pale.css
@@ -6,7 +6,6 @@
 .danger-pale,
 .important-pale,
 .special-pale,
-.white-pale,
 .bright-pale,
 .lightest-pale,
 .lighter-pale,
@@ -15,73 +14,66 @@
 .dark-gray-pale,
 .darker-pale,
 .darkest-pale,
-.inky-pale,
-.black-pale {
+.inky-pale {
   @apply -skin;
-  --tw-bg-opacity: 0.1;
-  --skin-ring-opacity: 1;
-  --skin-text: var(--skin-color);
-  --skin-bg: var(--skin-color);
-  --skin-hover-bg-opacity: .1;
+
+  --skin-color: rgba(var(--skin-pale-rgb), .1);
+  --skin-text: rgba(var(--skin-pale-rgb), 1);
 }
 
 .pale {
-  --skin-hover-bg: var(--color-gray-500-rgb);
+  --skin-pale-rgb: var(--color-gray-500-rgb);
 }
 .primary-pale {
-  --skin-color: var(--color-primary-500-rgb);
+  --skin-pale-rgb: var(--color-primary-500-rgb);
 }
 .secondary-pale {
-  --skin-color: var(--color-secondary-500-rgb);
+  --skin-pale-rgb: var(--color-secondary-500-rgb);
 }
 .success-pale {
-  --skin-color: var(--color-success-500-rgb);
+  --skin-pale-rgb: var(--color-success-500-rgb);
 }
 .warning-pale {
-  --skin-color: var(--color-warning-500-rgb);
+  --skin-pale-rgb: var(--color-warning-500-rgb);
 }
 .danger-pale {
-  --skin-color: var(--color-danger-500-rgb);
+  --skin-pale-rgb: var(--color-danger-500-rgb);
 }
 .important-pale {
-  --skin-color: var(--color-important-500-rgb);
+  --skin-pale-rgb: var(--color-important-500-rgb);
 }
 .special-pale {
-  --skin-color: var(--color-special-500-rgb);
+  --skin-pale-rgb: var(--color-special-500-rgb);
 }
 
-
 .bright-pale {
-  --skin-color: var(--color-gray-100-rgb);
+  --skin-pale-rgb: var(--color-gray-100-rgb);
   --skin-text: var(--color-gray-400-rgb);
 }
 .lightest-pale {
-  --skin-color: var(--color-gray-200-rgb);
+  --skin-pale-rgb: var(--color-gray-200-rgb);
   --skin-text: var(--color-gray-400-rgb);
 }
 .lighter-pale {
-  --skin-color: var(--color-gray-300-rgb);
+  --skin-pale-rgb: var(--color-gray-300-rgb);
   --skin-text: var(--color-gray-500-rgb);
 }
 .light-gray-pale {
-  --skin-color: var(--color-gray-400-rgb);
+  --skin-pale-rgb: var(--color-gray-400-rgb);
   --skin-text: var(--color-gray-500-rgb);
 }
 .gray-pale {
-  --skin-color: var(--color-gray-500-rgb);
+  --skin-pale-rgb: var(--color-gray-500-rgb);
 }
 .dark-gray-pale {
-  --skin-color: var(--color-gray-600-rgb);
+  --skin-pale-rgb: var(--color-gray-600-rgb);
 }
 .darker-pale {
-  --skin-color: var(--color-gray-700-rgb);
+  --skin-pale-rgb: var(--color-gray-700-rgb);
 }
 .darkest-pale {
-  --skin-color: var(--color-gray-800-rgb);
+  --skin-pale-rgb: var(--color-gray-800-rgb);
 }
 .inky-pale {
-  --skin-color: var(--color-gray-900-rgb);
-}
-.black-pale {
-  --skin-color: var(--color-black-rgb);
+  --skin-pale-rgb: var(--color-gray-900-rgb);
 }
diff --git a/lib/utilities/src/skin/skin.css b/lib/utilities/src/skin/skin.css
index 72f2e3e321..36181d18b8 100644
--- a/lib/utilities/src/skin/skin.css
+++ b/lib/utilities/src/skin/skin.css
@@ -2,22 +2,31 @@
 
 @layer utilities {
     .-skin {
-        --skin-bg: var(--skin-color);
-        --tw-ring-color: rgba(var(--skin-ring), var(--skin-ring-opacity));
+        /* --skin-color: unset;            /* Default colors. */
+        /* --skin-text: unset;             /* Text colors. */
+        --skin-bg: var(--skin-color);      /* Background colors. */
+        --skin-ring: var(--skin-color);    /* Ring colors. */
+        --skin-border: var(--skin-color);
+
+        --skin-hover-text: var(--skin-text);
+        --skin-hover-bg: var(--skin-bg);
+
+        --tw-ring-color: var(--skin-ring);
         --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-        --color-link-hover-rgb: var(--skin-text);
 
-        background-color: rgba(var(--skin-bg), var(--tw-bg-opacity));
-        background-image: var(--skin-bg-img);
-        color: rgba(var(--skin-text), var(--tw-text-opacity));
-        border: var(--skin-border-width) var(--skin-border-style) rgba(var(--skin-border, var(--skin-bg)), var(--tw-border-opacity));
+        --color-link-hover: var(--skin-text);
+
+        background-color: var(--skin-bg);
+        color: var(--skin-text);
+        border-color: var(--skin-border);
         box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 
         @apply -transition-[color,background-color,border-color,text-decoration-color,box-shadow];
     }
 
     .-skin:hover {
-        background-color: rgba(var(--skin-hover-bg, var(--skin-bg)), var(--skin-hover-bg-opacity, var(--tw-bg-opacity)))!important;
+        background-color: var(--skin-hover-bg);
+        color: var(--skin-hover-text);
     }
 }
 
diff --git a/lib/utilities/src/skin/solid.css b/lib/utilities/src/skin/solid.css
index f8cab789a4..52ad575c6a 100755
--- a/lib/utilities/src/skin/solid.css
+++ b/lib/utilities/src/skin/solid.css
@@ -5,7 +5,6 @@
 .danger,
 .important,
 .special,
-.white,
 .bright,
 .lightest,
 .lighter,
@@ -16,75 +15,66 @@
 .dark-gray,
 .darker,
 .darkest,
-.inky,
-.black {
+.inky {
   @apply -skin;
-  --skin-text: var(--color-white-rgb);
-  --state-ring-color: rgb(var(--skin-color));
+  --skin-text: var(--color-fore-in-dark);
+  --state-ring-color: var(--skin-color);
 }
 
 .primary {
-  --skin-color: var(--color-primary-500-rgb);
+  --skin-color: var(--color-primary-500);
 }
 .secondary {
-  --skin-color: var(--color-secondary-500-rgb);
+  --skin-color: var(--color-secondary-500);
 }
 .success {
-  --skin-color: var(--color-success-500-rgb);
+  --skin-color: var(--color-success-500);
 }
 .warning {
-  --skin-color: var(--color-warning-500-rgb);
+  --skin-color: var(--color-warning-500);
 }
 .danger {
-  --skin-color: var(--color-danger-500-rgb);
+  --skin-color: var(--color-danger-500);
 }
 .important {
-  --skin-color: var(--color-important-500-rgb);
+  --skin-color: var(--color-important-500);
 }
 .special {
-  --skin-color: var(--color-special-500-rgb);
+  --skin-color: var(--color-special-500);
 }
 
-.white {
-  --skin-color: var(--color-white-rgb);
-  --skin-text: var(--color-fore-light-rgb);
-  --state-ring-color: rgb(var(--skin-text));
-}
 .bright {
-  --skin-color: var(--color-gray-100-rgb);
-  --skin-text: var(--color-fore-rgb);
-  --state-ring-color: rgb(var(--skin-text));
+  --skin-color: var(--color-gray-100);
+  --skin-text: var(--color-fore);
+  --state-ring-color: var(--skin-text);
 }
 .lightest {
-  --skin-color: var(--color-gray-200-rgb);
-  --skin-text: var(--color-fore-rgb);
-  --state-ring-color: rgb(var(--skin-text));
+  --skin-color: var(--color-gray-200);
+  --skin-text: var(--color-fore);
+  --state-ring-color: var(--skin-text);
 }
 .lighter {
-  --skin-color: var(--color-gray-300-rgb);
-  --skin-text: var(--color-fore-rgb);
-  --state-ring-color: rgb(var(--skin-text));
+  --skin-color: var(--color-gray-300);
+  --skin-text: var(--color-fore);
+  --state-ring-color: var(--skin-text);
 }
 .light-gray,
 .lighten /* .lighten is deprecated */ {
-  --skin-color: var(--color-gray-400-rgb);
+  --skin-color: var(--color-gray-400);
 }
 .gray {
-  --skin-color: var(--color-gray-500-rgb);
+  --skin-color: var(--color-gray-500);
 }
 .dark-gray,
 .darken /* .darken is deprecated */ {
-  --skin-color: var(--color-gray-600-rgb);
+  --skin-color: var(--color-gray-600);
 }
 .darker {
-  --skin-color: var(--color-gray-700-rgb);
+  --skin-color: var(--color-gray-700);
 }
 .darkest {
-  --skin-color: var(--color-gray-800-rgb);
+  --skin-color: var(--color-gray-800);
 }
 .inky {
-  --skin-color: var(--color-gray-900-rgb);
-}
-.black {
-  --skin-color: var(--color-black-rgb);
+  --skin-color: var(--color-gray-900);
 }
diff --git a/lib/utilities/src/skin/surface.css b/lib/utilities/src/skin/surface.css
index e8f726b35b..b9ff8b63fc 100644
--- a/lib/utilities/src/skin/surface.css
+++ b/lib/utilities/src/skin/surface.css
@@ -19,3 +19,9 @@
 .inverse {
   @apply -bg-inverse -text-canvas;
 }
+.white {
+  @apply -bg-white -text-fore-in-light -ring-white;
+}
+.black {
+  @apply -bg-black -text-fore-in-dark -ring-black;
+}
diff --git a/lib/utilities/src/vars.css b/lib/utilities/src/vars.css
index 13c4340f26..8b2c6d60f4 100755
--- a/lib/utilities/src/vars.css
+++ b/lib/utilities/src/vars.css
@@ -1,8 +1,6 @@
 :root {
   --state-color: rgba(0,0,0,.05);
   --state-scale: .9;
-  --state-active-color: rgba(0,0,0,.1);
-  --state-focus-color: rgba(0,0,0,.125);
   --opacity-disabled: .65;
   --opacity-muted: .5;
 }