diff --git a/CHANGELOG.md b/CHANGELOG.md
index 808fbf9..2d59d54 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Changed
+
+- Add example styles for tag component.
+
 ### Removed
 
 - The `fab` component was removed. It might have made sense to have it as a
diff --git a/demo/assets/css/_functions.scss b/demo/assets/css/_functions.scss
index b417943..5e4b8a7 100644
--- a/demo/assets/css/_functions.scss
+++ b/demo/assets/css/_functions.scss
@@ -12,7 +12,7 @@
  *    @use "../functions" as f;
  *
  *    .my-component {
- *      color: f.color(text, default);
+ *      color: f.color(text, default, normal);
  *    }
  *
  * Alternatively, use the tokens forwarded by _tokens.scss.
diff --git a/demo/assets/css/base/_general.scss b/demo/assets/css/base/_general.scss
index c8abc4e..1ac2611 100644
--- a/demo/assets/css/base/_general.scss
+++ b/demo/assets/css/base/_general.scss
@@ -12,7 +12,7 @@ body,
   font-family: f.font-family(main);
   font-size: f.base-size();
   line-height: f.lines(1);
-  color: f.color(text, default);
+  color: f.color(text, default, normal);
   background: f.color(background, foundation);
 }
 
diff --git a/demo/assets/css/components/_button.scss b/demo/assets/css/components/_button.scss
index cec7aa3..f1f05a7 100644
--- a/demo/assets/css/components/_button.scss
+++ b/demo/assets/css/components/_button.scss
@@ -15,10 +15,10 @@
 
   &:disabled,
   &.is-disabled {
-    color: f.color(text, disabled);
+    color: f.color(text, disabled, normal);
     cursor: not-allowed;
-    background: f.color(background, disabled);
-    border-color: f.color(border, disabled);
+    background: f.color(background, disabled, normal);
+    border-color: f.color(border, disabled, normal);
   }
 
   &:not(:disabled, .is-disabled) {
@@ -31,39 +31,39 @@
     }
 
     &.is-primary {
-      color: f.color(text, primary);
-      background: f.color(background, primary);
-      border-color: f.color(border, primary);
+      color: f.color(text, primary, subdued);
+      background: f.color(background, primary, normal);
+      border-color: f.color(border, primary, normal);
     }
 
     &.is-secondary {
-      color: f.color(text, secondary);
-      background: f.color(background, secondary);
-      border-color: f.color(border, secondary);
+      color: f.color(text, secondary, subdued);
+      background: f.color(background, secondary, normal);
+      border-color: f.color(border, secondary, normal);
     }
 
     &.is-info {
-      color: f.color(text, info);
-      background: f.color(background, info);
-      border-color: f.color(border, info);
+      color: f.color(text, info, subdued);
+      background: f.color(background, info, normal);
+      border-color: f.color(border, info, normal);
     }
 
     &.is-success {
-      color: f.color(text, success);
-      background: f.color(background, success);
-      border-color: f.color(border, success);
+      color: f.color(text, success, subdued);
+      background: f.color(background, success, normal);
+      border-color: f.color(border, success, normal);
     }
 
     &.is-warning {
-      color: f.color(text, warning);
-      background: f.color(background, warning);
-      border-color: f.color(border, warning);
+      color: f.color(text, warning, subdued);
+      background: f.color(background, warning, normal);
+      border-color: f.color(border, warning, normal);
     }
 
     &.is-danger {
-      color: f.color(text, danger);
-      background: f.color(background, danger);
-      border-color: f.color(border, danger);
+      color: f.color(text, danger, subdued);
+      background: f.color(background, danger, normal);
+      border-color: f.color(border, danger, normal);
     }
 
     &.is-outline {
@@ -78,27 +78,27 @@
     &.is-outline,
     &.is-text {
       &.is-primary {
-        color: f.color(border, primary);
+        color: f.color(border, primary, normal);
       }
 
       &.is-secondary {
-        color: f.color(border, secondary);
+        color: f.color(border, secondary, normal);
       }
 
       &.is-info {
-        color: f.color(border, info);
+        color: f.color(border, info, normal);
       }
 
       &.is-success {
-        color: f.color(border, success);
+        color: f.color(border, success, normal);
       }
 
       &.is-warning {
-        color: f.color(border, warning);
+        color: f.color(border, warning, normal);
       }
 
       &.is-danger {
-        color: f.color(border, danger);
+        color: f.color(border, danger, normal);
       }
     }
   }
diff --git a/demo/assets/css/components/_index.scss b/demo/assets/css/components/_index.scss
index 7d0afd2..75390d4 100644
--- a/demo/assets/css/components/_index.scss
+++ b/demo/assets/css/components/_index.scss
@@ -22,3 +22,4 @@
 @use "property-list";
 @use "skeleton";
 @use "tab-navigation";
+@use "tag";
diff --git a/demo/assets/css/components/_tab-navigation.scss b/demo/assets/css/components/_tab-navigation.scss
index df11c64..d7a0dce 100644
--- a/demo/assets/css/components/_tab-navigation.scss
+++ b/demo/assets/css/components/_tab-navigation.scss
@@ -17,14 +17,14 @@
       > a {
         display: block;
         padding: f.spacer(2) f.spacer(4);
-        color: f.color(text, secondary);
+        color: f.color(text, secondary, normal);
         text-decoration: none;
         border-top-left-radius: f.radius(m);
         border-top-right-radius: f.radius(m);
 
         &[aria-current] {
           font-weight: f.weight(medium);
-          background: f.color(background, secondary);
+          background: f.color(background, secondary, normal);
           border: f.border-width(s) solid f.color(border, neutral, "1");
           border-bottom-width: 0;
         }
diff --git a/demo/assets/css/components/_tag.scss b/demo/assets/css/components/_tag.scss
new file mode 100644
index 0000000..223fc86
--- /dev/null
+++ b/demo/assets/css/components/_tag.scss
@@ -0,0 +1,73 @@
+@use "../functions" as f;
+
+.tag {
+  display: inline-flex;
+  gap: f.spacer(1);
+  align-items: center;
+  justify-content: center;
+  padding: 0 f.spacer(2);
+  font-size: f.size(s);
+  line-height: f.lines(1);
+  color: f.color(text, default, normal);
+  background-color: f.color(background, disabled, normal);
+  border: f.border-width(s) solid f.color(border, neutral, "1");
+  border-radius: f.radius(s);
+
+  &.is-primary {
+    color: f.color(text, primary, normal);
+    background: f.color(background, primary, subdued);
+    border-color: f.color(border, primary, subdued);
+  }
+
+  &.is-secondary {
+    color: f.color(text, secondary, normal);
+    background: f.color(background, secondary, subdued);
+    border-color: f.color(border, secondary, subdued);
+  }
+
+  &.is-info {
+    color: f.color(text, info, normal);
+    background: f.color(background, info, subdued);
+    border-color: f.color(border, info, subdued);
+  }
+
+  &.is-success {
+    color: f.color(text, success, normal);
+    background: f.color(background, success, subdued);
+    border-color: f.color(border, success, subdued);
+  }
+
+  &.is-warning {
+    color: f.color(text, warning, normal);
+    background: f.color(background, warning, subdued);
+    border-color: f.color(border, warning, subdued);
+  }
+
+  &.is-danger {
+    color: f.color(text, danger, normal);
+    background: f.color(background, danger, subdued);
+    border-color: f.color(border, danger, subdued);
+  }
+
+  &.is-small {
+    padding: f.spacer(1);
+    font-size: f.size(xs);
+    line-height: f.lines(0.5);
+  }
+
+  &.is-medium {
+    font-size: f.size(m);
+  }
+
+  &.is-large {
+    padding: 0 f.spacer(4);
+    font-size: f.size(l);
+    line-height: f.lines(1.5);
+  }
+
+  &.is-pill {
+    padding-right: f.spacer(3);
+    padding-left: f.spacer(3);
+    border-radius: f.radius(pill);
+  }
+}
diff --git a/demo/assets/tokens/color/theme.light.mjs b/demo/assets/tokens/color/theme.light.mjs
index 0d99005..f030233 100644
--- a/demo/assets/tokens/color/theme.light.mjs
+++ b/demo/assets/tokens/color/theme.light.mjs
@@ -6,28 +6,65 @@ export default {
     $type: "color",
     text: {
       default: {
-        $value: "{color.base.black}",
+        normal: {
+          $value: "{color.base.black}",
+        },
       },
       primary: {
-        $value: "{color.base.white}",
+        normal: {
+          $value: "{color.blue.500}",
+        },
+        subdued: {
+          $value: "{color.base.white}",
+        },
       },
       secondary: {
-        $value: "{color.blue.600}",
+        normal: {
+          $value: "{color.blue.600}",
+        },
+        subdued: {
+          $value: "{color.blue.500}",
+        },
       },
       info: {
-        $value: "{color.base.white}",
+        normal: {
+          $value: "{color.indigo.500}",
+        },
+        subdued: {
+          $value: "{color.base.white}",
+        },
       },
       success: {
-        $value: "{color.base.white}",
+        normal: {
+          $value: "{color.green.500}",
+        },
+        subdued: {
+          $value: "{color.base.white}",
+        },
       },
       warning: {
-        $value: "{color.base.white}",
+        normal: {
+          $value: "{color.yellow.500}",
+        },
+        subdued: {
+          $value: "{color.base.white}",
+        },
       },
       danger: {
-        $value: "{color.base.white}",
+        normal: {
+          $value: "{color.red.500}",
+        },
+        subdued: {
+          $value: "{color.base.white}",
+        },
       },
       disabled: {
-        $value: "{color.gray.200}",
+        normal: {
+          $value: "{color.gray.500}",
+        },
+        subdued: {
+          $value: "{color.gray.200}",
+        },
       },
     },
     background: {
@@ -40,25 +77,57 @@ export default {
         },
       },
       primary: {
-        $value: "{color.blue.400}",
+        normal: {
+          $value: "{color.blue.400}",
+        },
+        subdued: {
+          $value: "{color.blue.0}",
+        },
       },
       secondary: {
-        $value: "{color.blue.0}",
+        normal: {
+          $value: "{color.blue.0}",
+        },
+        subdued: {
+          $value: "{color.blue.0}",
+        },
       },
       info: {
-        $value: "{color.indigo.400}",
+        normal: {
+          $value: "{color.indigo.400}",
+        },
+        subdued: {
+          $value: "{color.indigo.0}",
+        },
       },
       success: {
-        $value: "{color.green.400}",
+        normal: {
+          $value: "{color.green.400}",
+        },
+        subdued: {
+          $value: "{color.green.0}",
+        },
       },
       warning: {
-        $value: "{color.yellow.400}",
+        normal: {
+          $value: "{color.yellow.400}",
+        },
+        subdued: {
+          $value: "{color.yellow.0}",
+        },
       },
       danger: {
-        $value: "{color.red.400}",
+        normal: {
+          $value: "{color.red.400}",
+        },
+        subdued: {
+          $value: "{color.red.0}",
+        },
       },
       disabled: {
-        $value: "{color.gray.0}",
+        normal: {
+          $value: "{color.gray.0}",
+        },
       },
     },
     border: {
@@ -74,25 +143,57 @@ export default {
         },
       },
       primary: {
-        $value: "{color.blue.500}",
+        normal: {
+          $value: "{color.blue.500}",
+        },
+        subdued: {
+          $value: "{color.blue.100}",
+        },
       },
       secondary: {
-        $value: "{color.blue.200}",
+        normal: {
+          $value: "{color.blue.200}",
+        },
+        subdued: {
+          $value: "{color.blue.100}",
+        },
       },
       info: {
-        $value: "{color.indigo.500}",
+        normal: {
+          $value: "{color.indigo.500}",
+        },
+        subdued: {
+          $value: "{color.indigo.100}",
+        },
       },
       success: {
-        $value: "{color.green.500}",
+        normal: {
+          $value: "{color.green.500}",
+        },
+        subdued: {
+          $value: "{color.green.100}",
+        },
       },
       warning: {
-        $value: "{color.yellow.500}",
+        normal: {
+          $value: "{color.yellow.500}",
+        },
+        subdued: {
+          $value: "{color.yellow.100}",
+        },
       },
       danger: {
-        $value: "{color.red.500}",
+        normal: {
+          $value: "{color.red.500}",
+        },
+        subdued: {
+          $value: "{color.blue.100}",
+        },
       },
       disabled: {
-        $value: "{color.gray.100}",
+        normal: {
+          $value: "{color.gray.100}",
+        },
       },
     },
   },
diff --git a/lib/doggo/components/tag.ex b/lib/doggo/components/tag.ex
index 6bad491..b022c05 100644
--- a/lib/doggo/components/tag.ex
+++ b/lib/doggo/components/tag.ex
@@ -45,6 +45,11 @@ defmodule Doggo.Components.Tag do
     """
   end
 
+  @impl true
+  def css_path do
+    "components/_tag.scss"
+  end
+
   @impl true
   def config do
     [
diff --git a/lib/doggo/storybook/tag.ex b/lib/doggo/storybook/tag.ex
index 463b8e9..0df13cb 100644
--- a/lib/doggo/storybook/tag.ex
+++ b/lib/doggo/storybook/tag.ex
@@ -11,9 +11,9 @@ defmodule Doggo.Storybook.Tag do
     ]
   end
 
-  def modifier_variation_base(_id, _name, _value, _opts) do
+  def modifier_variation_base(_id, _name, value, _opts) do
     %{
-      slots: ["puppy"]
+      slots: [value || "nil"]
     }
   end
 end