diff --git a/lib/bitstyles_phoenix/alpine3/sidebar.ex b/lib/bitstyles_phoenix/alpine3/sidebar.ex
index 328554f..f65749e 100644
--- a/lib/bitstyles_phoenix/alpine3/sidebar.ex
+++ b/lib/bitstyles_phoenix/alpine3/sidebar.ex
@@ -54,7 +54,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
         <div class="u-flex u-height-100vh" x-data="{ sidebarOpen: false }">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
                 <a href="#" class="u-padding-l">
                   <img src="assets/logo.svg" aria-hidden="true" width="100"/>
                   <span class="u-sr-only">
@@ -74,7 +74,7 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
                   </li>
                 </ul>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light" @click.away="sidebarOpen = false" id="sidebar-small" x-cloak="x-cloak" x-show="sidebarOpen" x-transition:enter="is-transitioning" x-transition:enter-end="is-on-screen" x-transition:enter-start="is-off-screen" x-transition:leave="is-transitioning" x-transition:leave-end="is-off-screen" x-transition:leave-start="is-on-screen">
                 <div class="u-flex">
                   <a href="#" class="u-flex-grow-1 u-padding-l">
                     <img src="assets/logo.svg" aria-hidden="true" width="100"/>
diff --git a/lib/bitstyles_phoenix/bitstyles.ex b/lib/bitstyles_phoenix/bitstyles.ex
index 6e92ab5..92679a2 100644
--- a/lib/bitstyles_phoenix/bitstyles.ex
+++ b/lib/bitstyles_phoenix/bitstyles.ex
@@ -41,6 +41,10 @@ defmodule BitstylesPhoenix.Bitstyles do
         "u-list-none" -> "a-list-reset"
         "a-badge--text" -> "a-badge--gray"
         "u-gap-l" -> "u-gap-m"
+        "u-fg-text-light" -> "u-fg-gray-30"
+        "u-fg-gray-light" -> "u-fg-gray-30"
+        "u-fg-text" -> "u-fg-gray-50"
+        "u-bg-gray-darker" -> "u-bg-gray-80"
         class -> class
       end
 
diff --git a/lib/bitstyles_phoenix/component/breadcrumbs.ex b/lib/bitstyles_phoenix/component/breadcrumbs.ex
index 50942bc..48222b3 100644
--- a/lib/bitstyles_phoenix/component/breadcrumbs.ex
+++ b/lib/bitstyles_phoenix/component/breadcrumbs.ex
@@ -47,21 +47,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
             <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
               <li class="u-margin-xs-right u-flex u-items-center">
                 Foo
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
               </li>
               <li class="u-margin-xs-right u-flex u-items-center">
                 Bar
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
               </li>
               <li class="u-margin-xs-right u-flex u-items-center">
                 Baz
-                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                   <use xlink:href="#icon-caret-right">
                   </use>
                 </svg>
@@ -123,21 +123,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
           <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center">
             <li class="u-margin-xs-right u-flex u-items-center">
               Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -173,21 +173,21 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
           <ol class="u-h6 u-list-none u-flex u-flex-wrap u-items-center u-fg-warning">
             <li class="u-margin-xs-right u-flex u-items-center u-fg-brand-2" data-baz="foo">
               Foo
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Bar
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
             </li>
             <li class="u-margin-xs-right u-flex u-items-center">
               Baz
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-gray-30 u-margin-xs-left" focusable="false" height="16" width="16">
+              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="a-icon a-icon--m u-fg-text-light u-margin-xs-left" focusable="false" height="16" width="16">
                 <use xlink:href="#icon-caret-right">
                 </use>
               </svg>
@@ -219,7 +219,7 @@ defmodule BitstylesPhoenix.Component.Breadcrumbs do
               {assigns[:item] && assigns_to_attributes(item, [:class]) || []}
             >
               <%= if assigns[:item], do: render_slot(item), else: item %>
-              <.ui_icon name="caret-right" size="m" class={classnames("u-fg-gray-30 u-margin-xs-left")} {@icon_extra} />
+              <.ui_icon name="caret-right" size="m" class={classnames("u-fg-text-light u-margin-xs-left")} {@icon_extra} />
             </li>
           <% end %>
         </ol>
diff --git a/lib/bitstyles_phoenix/component/description_list.ex b/lib/bitstyles_phoenix/component/description_list.ex
index 44920f8..1489bf9 100644
--- a/lib/bitstyles_phoenix/component/description_list.ex
+++ b/lib/bitstyles_phoenix/component/description_list.ex
@@ -20,7 +20,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
@@ -28,7 +28,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
               Inserted at
             </dt>
             <dd class="u-col-span-2">
@@ -64,7 +64,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
         """
         <dl class="a-dl extra" data-foo="baz">
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline u-fg-brand-2">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
               Length
             </dt>
             <dd class="u-col-span-2">
@@ -72,7 +72,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s u-fg-brand-1" data-foo="bar">
               Some
             </dt>
             <dd class="u-col-span-2 u-fg-brand-1" data-foo="bar">
@@ -80,7 +80,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
             </dd>
           </div>
           <div class="a-dl__item u-grid@m u-grid-cols-3 u-gap-l u-padding-m-y u-padding-m@m u-items-baseline">
-            <dt class="u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s">
+            <dt class="u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s">
               <pre>
                 Tag
               </pre>
@@ -162,7 +162,7 @@ defmodule BitstylesPhoenix.Component.DescriptionList do
     assigns = assign(assigns, extra: extra)
 
     ~H"""
-    <dt class={classnames(["u-font-medium u-h6 u-fg-gray-50 u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
+    <dt class={classnames(["u-font-medium u-h6 u-fg-text u-margin-xs-bottom@s", assigns[:class]])} {@extra}>
       <%= render_slot(@inner_block) %>
     </dt>
     """
diff --git a/lib/bitstyles_phoenix/component/sidebar.ex b/lib/bitstyles_phoenix/component/sidebar.ex
index 0aeeec4..decddd8 100644
--- a/lib/bitstyles_phoenix/component/sidebar.ex
+++ b/lib/bitstyles_phoenix/component/sidebar.ex
@@ -43,7 +43,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
                 Large header
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
@@ -80,7 +80,7 @@ defmodule BitstylesPhoenix.Component.Sidebar do
                   </div>
                 </div>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
                 Small header
                 <div class="u-flex-shrink-0 u-padding-xs-y u-margin-xs-left u-margin-xs-right u-flex u-flex-col u-border-gray-70-bottom u-margin-xs-bottom">
                   Menu
@@ -207,13 +207,13 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
                 Large header
                 <div>
                   Sidebar
                 </div>
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
                 Small header
                 <div>
                   Sidebar
@@ -247,9 +247,9 @@ defmodule BitstylesPhoenix.Component.Sidebar do
         <div class="u-flex u-height-100vh">
           <header role="banner" class="u-flex">
             <nav class="u-flex">
-              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-80 u-fg-gray-30">
+              <div class="u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col u-bg-gray-darker u-fg-text-light">
               </div>
-              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-80 u-fg-gray-30">
+              <div class="o-sidebar--small u-flex u-flex-col u-hidden@l u-bg-gray-darker u-fg-text-light">
               </div>
             </nav>
           </header>
@@ -264,8 +264,8 @@ defmodule BitstylesPhoenix.Component.Sidebar do
     transparent: false
   )
 
-  @default_bg "gray-80"
-  @default_fg "gray-30"
+  @default_bg "gray-darker"
+  @default_fg "text-light"
   @large_classes "u-hidden o-sidebar--large u-flex-shrink-0 u-padding-m-top u-flex@l u-flex-col"
   @small_classes "o-sidebar--small u-flex u-flex-col u-hidden@l"