diff --git a/addons/rose/addon/styles/rose/components/_button.scss b/addons/rose/addon/styles/rose/components/_button.scss
index c94a3ec03..472e02563 100644
--- a/addons/rose/addon/styles/rose/components/_button.scss
+++ b/addons/rose/addon/styles/rose/components/_button.scss
@@ -95,7 +95,7 @@
   (
     color: var(--info),
     border-color: transparent,
-    background-color: var(--subtle)
+    background-color: var(--subtle),
   ),
   (
     background-color: var(--ui-gray-subtler-5),
@@ -132,5 +132,4 @@
     cursor: not-allowed;
     opacity: var(--opacity-1);
   }
-
 }
diff --git a/addons/rose/addon/styles/rose/variables/_opacity.scss b/addons/rose/addon/styles/rose/variables/_opacity.scss
index a52a096e2..b09027ff5 100644
--- a/addons/rose/addon/styles/rose/variables/_opacity.scss
+++ b/addons/rose/addon/styles/rose/variables/_opacity.scss
@@ -5,6 +5,7 @@
 
 // Light Mode
 :root {
+  --opacity-5: 0.025;
   --opacity-4: 0.05;
   --opacity-3: 0.1;
   --opacity-2: 0.25;
@@ -16,6 +17,7 @@
 // light mode.
 @media (prefers-color-scheme: dark) {
   :root {
+    --opacity-5: 0.025;
     --opacity-4: 0.025;
     --opacity-3: 0.05;
     --opacity-2: 0.125;
diff --git a/addons/rose/addon/styles/rose/variables/color/_css.scss b/addons/rose/addon/styles/rose/variables/color/_css.scss
index efd549ed6..765b71ac7 100644
--- a/addons/rose/addon/styles/rose/variables/color/_css.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_css.scss
@@ -79,12 +79,6 @@
 // Dark Mode
 @media (prefers-color-scheme: dark) {
   :root {
-    // opacities
-    --opacity-4: 0.025;
-    --opacity-3: 0.05;
-    --opacity-2: 0.15;
-    --opacity-1: 0.35;
-
     // poles
     --subtle: #{color(ui-cool-gray, 800)};
     --stark: var(--white);
diff --git a/addons/rose/addon/styles/rose/variables/color/_sass.scss b/addons/rose/addon/styles/rose/variables/color/_sass.scss
index 1b11456b1..7be70fcfc 100644
--- a/addons/rose/addon/styles/rose/variables/color/_sass.scss
+++ b/addons/rose/addon/styles/rose/variables/color/_sass.scss
@@ -43,30 +43,60 @@ $color-values: (
     900: #1f2124,
   ),
   ui-cool-gray: (
+    010: #fdfdfe,
+    050: #f7fafc,
+    100: #ebeef5,
+    200: #d3dbe5,
+    300: #b4bdcc,
+    400: #949fb0,
     500: map.get($colors, ui-cool-gray),
+    600: #5a6370,
+    700: #3c434d,
     800: #1d2126,
     900: #060708,
   ),
   green: (
     010: #fafdfa,
+    050: #ecf7ed,
     100: #c6e9c9,
+    200: #a0dba5,
+    300: #7acc81,
+    400: #54be5d,
     500: map.get($colors, green),
+    600: #26912f,
+    700: #1e7125,
     800: #15501a,
+    900: #0d3010,
   ),
   yellow: (
     010: #fffdf6,
+    050: #fffbed,
     100: #fdeeba,
+    200: #fce48c,
+    300: #fbd95e,
+    400: #face30,
     500: map.get($colors, yellow),
+    600: #cda102,
+    700: #a07d02,
     800: #725a01,
+    900: #453601,
   ),
   orange: (
     010: #fffcfa,
+    050: #fef4ec,
     100: #fde0c8,
+    200: #fccca4,
+    300: #fbb77f,
+    400: #faa35b,
     500: map.get($colors, orange),
+    600: #cd762e,
+    700: #a05c23,
     800: #724119,
+    900: #45270f,
   ),
   blue: (
     010: #fbfcff,
+    050: #f0f5ff,
     100: #bfd4ff,
     200: #8ab1ff,
     300: #5b92ff,
@@ -79,12 +109,16 @@ $color-values: (
   ),
   red: (
     010: #fdfafb,
+    050: #f9ecee,
     100: #efc7cc,
     200: #e5a2aa,
     300: #db7d88,
     400: #d15866,
     500: map.get($colors, red),
+    600: #a32b39,
+    700: #7f222c,
     800: #5b1820,
+    900: #370f13,
   ),
 ) !default;
 
diff --git a/addons/rose/stories/style-guide.stories.js b/addons/rose/stories/style-guide.stories.js
new file mode 100644
index 000000000..bfab579a8
--- /dev/null
+++ b/addons/rose/stories/style-guide.stories.js
@@ -0,0 +1,269 @@
+import { hbs } from 'ember-cli-htmlbars';
+
+export default {
+  title: 'Style Guide',
+};
+
+export const Colors = () => ({
+  template: hbs`
+    <style type="text/css">
+      body {
+        padding: 2rem;
+        font-family: sans-serif;
+        line-height: 1.5rem;
+        color: var(--stark);
+        background-color: var(--subtle);
+      }
+      h1 {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+      }
+      h2 {
+        font-size: 1.5rem;
+        margin: 1rem 0;
+      }
+      h3 {
+        font-size: 0.85rem;
+        margin: 0.5rem 0;
+      }
+      p {
+        max-width: 725px;
+        margin-bottom: 2rem;
+      }
+      code {
+        display: block;
+        font-size: 0.55rem;
+        font-family: "Andale Mono", monospace;
+        max-width: 100%;
+        overflow-x: scroll;
+        color: var(--ui-gray);
+      }
+      .side-by-side {
+        display: flex;
+      }
+      section {
+        padding-right: 2rem;
+      }
+      .swatches {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+      }
+      .swatch {
+        width: 6rem;
+        //border: 1px solid var(--ui-gray-subtler-4);
+        border-radius: 4px;
+        margin: 0 0.5rem 0.5rem 0;
+        box-shadow: 0px 3px 6px rgba(var(--stark-components), var(--opacity-3));
+      }
+      .swatch-chip {
+        height: 5rem;
+        border: 0.5rem solid var(--subtle);
+        border-radius: 4px;
+      }
+      .swatch-detail {
+        border-top: 1px solid var(--ui-gray-subtler-4);
+        padding: 0.5rem;
+      }
+    </style>
+
+    <section>
+      <h1>Colors</h1>
+      <p>
+        Find the color you need and copy the CSS custom property variable into
+        your stylesheet.
+        Use only these variables when specifying colors.  This ensures
+        consistency and dark mode compatibility.
+      </p>
+    </section>
+
+    <div class="side-by-side">
+      <section>
+        <h2>Relative Poles</h2>
+        <p>
+          These colors depend on light or dark mode.  Use these most often
+          when specifying primary foreground and backround colors.
+        </p>
+        <ul class="swatches">
+          <li class="swatch">
+            <div class="swatch-chip" style="background-color: var(--subtle);"></div>
+            <div class="swatch-detail">
+              <code>var(--subtle)</code>
+            </div>
+          </li>
+
+          <li class="swatch">
+            <div class="swatch-chip" style="background-color: var(--stark);"></div>
+            <div class="swatch-detail">
+              <code>var(--stark)</code>
+            </div>
+          </li>
+        </ul>
+      </section>
+      <section>
+        <h2>Absolute Colors</h2>
+        <p>
+          Colors sometimes <strong>don't change in dark mode</strong>.  Use these
+          values sparingly.
+        </p>
+        <ul class="swatches">
+          <li class="swatch">
+            <div class="swatch-chip" style="background-color: var(--white);"></div>
+            <div class="swatch-detail">
+              <code>var(--white)</code>
+            </div>
+          </li>
+
+          <li class="swatch">
+            <div class="swatch-chip" style="background-color: var(--black);"></div>
+            <div class="swatch-detail">
+              <code>var(--black)</code>
+            </div>
+          </li>
+        </ul>
+      </section>
+    </div>
+
+    <section>
+      <h2>Theme Colors</h2>
+      <h3>Info</h3>
+      <ul class="swatches">
+        {{#each colors.info as |color|}}
+          <li class="swatch">
+            <div class="swatch-chip" style="background-color: var(--{{color}});"></div>
+            <div class="swatch-detail">
+              <code>var(--{{color}})</code>
+            </div>
+          </li>
+        {{/each}}
+      </ul>
+    </section>
+    <div class="side-by-side">
+      <section>
+        <h3>Alert</h3>
+        <ul class="swatches">
+          {{#each colors.alert as |color|}}
+            <li class="swatch">
+              <div class="swatch-chip" style="background-color: var(--{{color}});"></div>
+              <div class="swatch-detail">
+                <code>var(--{{color}})</code>
+              </div>
+            </li>
+          {{/each}}
+        </ul>
+      </section>
+      <section>
+        <h3>Warning</h3>
+        <ul class="swatches">
+          {{#each colors.warning as |color|}}
+            <li class="swatch">
+              <div class="swatch-chip" style="background-color: var(--{{color}});"></div>
+              <div class="swatch-detail">
+                <code>var(--{{color}})</code>
+              </div>
+            </li>
+          {{/each}}
+        </ul>
+      </section>
+    </div>
+    <div class="side-by-side">
+      <section>
+        <h3>Failure</h3>
+        <ul class="swatches">
+          {{#each colors.failure as |color|}}
+            <li class="swatch">
+              <div class="swatch-chip" style="background-color: var(--{{color}});"></div>
+              <div class="swatch-detail">
+                <code>var(--{{color}})</code>
+              </div>
+            </li>
+          {{/each}}
+        </ul>
+      </section>
+      <section>
+        <h3>Success</h3>
+        <ul class="swatches">
+          {{#each colors.success as |color|}}
+            <li class="swatch">
+              <div class="swatch-chip" style="background-color: var(--{{color}});"></div>
+              <div class="swatch-detail">
+                <code>var(--{{color}})</code>
+              </div>
+            </li>
+          {{/each}}
+        </ul>
+      </section>
+    </div>
+    <section>
+      <h3>UI Border</h3>
+      <ul class="swatches">
+        {{#each colors.ui-border as |color|}}
+          <li class="swatch">
+            <div class="swatch-chip" style="background-color: var(--{{color}});"></div>
+            <div class="swatch-detail">
+              <code>var(--{{color}})</code>
+            </div>
+          </li>
+        {{/each}}
+      </ul>
+      <h3>UI Gray</h3>
+      <ul class="swatches">
+        {{#each colors.ui-gray as |color|}}
+          <li class="swatch">
+            <div class="swatch-chip" style="background-color: var(--{{color}});"></div>
+            <div class="swatch-detail">
+              <code>var(--{{color}})</code>
+            </div>
+          </li>
+        {{/each}}
+      </ul>
+    </section>
+  `,
+  context: {
+    colors: {
+      relative: ['subtle', 'stark'],
+      absolute: ['white', 'black'],
+      info: [
+        'info-subtler-3',
+        'info-subtler-2',
+        'info-subtler-1',
+        'info',
+        'info-starker-1',
+        'info-starker-2',
+      ],
+      alert: ['alert-subtler-2', 'alert-subtler-1', 'alert', 'alert-starker-1'],
+      warning: [
+        'warning-subtler-2',
+        'warning-subtler-1',
+        'warning',
+        'warning-starker-1',
+      ],
+      failure: [
+        'failure-subtler-2',
+        'failure-subtler-1',
+        'failure',
+        'failure-starker-1',
+      ],
+      success: [
+        'success-subtler-2',
+        'success-subtler-1',
+        'success',
+        'success-starker-1',
+      ],
+      'ui-border': ['ui-border-subtler-1', 'ui-border'],
+      'ui-gray': [
+        'ui-gray-subtler-6',
+        'ui-gray-subtler-5',
+        'ui-gray-subtler-4',
+        'ui-gray-subtler-3',
+        'ui-gray-subtler-2',
+        'ui-gray-subtler-1',
+        'ui-gray',
+        'ui-gray-starker-1',
+        'ui-gray-starker-2',
+        'ui-gray-starker-3',
+        'ui-gray-starker-4',
+      ],
+    },
+  },
+});