diff --git a/main.go b/main.go
index ba2af87..57efe0f 100644
--- a/main.go
+++ b/main.go
@@ -139,6 +139,11 @@ func main() {
 						Href: "/plain-text-lists",
 						Page: pager("plain-text-lists.md"),
 					},
+					{
+						Text: "Styles",
+						Href: "/styles",
+						Page: pager("styles.md"),
+					},
 				},
 			},
 
diff --git a/posts/styles.md b/posts/styles.md
new file mode 100644
index 0000000..b59fc3e
--- /dev/null
+++ b/posts/styles.md
@@ -0,0 +1,5 @@
+---
+title: styles
+description: pico.sh styles
+template: styles.page.tmpl
+---
diff --git a/static/smol.css b/static/smol.css
index ce53adb..053db20 100644
--- a/static/smol.css
+++ b/static/smol.css
@@ -41,7 +41,7 @@
     --main-hue: 250;
     --white: #f2f2f2;
     --white-light: #f2f2f2;
-    --white-dark: #c6c6c6;
+    --white-dark: #e8e8e8;
     --code: #414558;
     --pre: #252525;
     --bg-color: #282a36;
@@ -111,6 +111,21 @@ code {
   padding: 0.1rem 0.3rem;
 }
 
+.pill {
+  border: 1px solid var(--link-color);
+  color: var(--link-color);
+}
+
+.pill-alert {
+  border: 1px solid var(--hover);
+  color: var(--hover);
+}
+
+.pill-info {
+  border: 1px solid var(--visited);
+  color: var(--visited);
+}
+
 pre {
   font-size: 14px;
   border-radius: 5px;
diff --git a/tmpl/styles.page.tmpl b/tmpl/styles.page.tmpl
new file mode 100644
index 0000000..5a54c73
--- /dev/null
+++ b/tmpl/styles.page.tmpl
@@ -0,0 +1,23 @@
+{{template "base" .}}
+
+{{define "title"}}{{.Data.Title}}{{end}}
+
+{{define "meta"}}
+<meta name="description" content="{{.Data.Description}}" />
+{{end}}
+
+{{define "attrs"}}class="container"{{end}}
+
+{{define "body"}}
+{{template "nav" .}}
+<div class="group">
+  <div><code class="pill">example</code></div>
+  <div><code class="pill">example longer</code></div>
+
+  <div><code class="pill-alert">example</code></div>
+  <div><code class="pill-alert">example longer</code></div>
+
+  <div><code class="pill-info">example</code></div>
+  <div><code class="pill-info">example longer</code></div>
+</div>
+{{end}}