diff --git a/assets/app.css b/assets/app.css
index 9aca377..98da271 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -1,7 +1,6 @@
-body {
-    margin: 0 auto;
-    padding: 2rem 1rem;
-    max-width: 40rem;
-    font-family: system-ui, sans-serif;
-    line-height: 1.5;
-}
+@layer reset, tokens, base, components;
+
+@import url("reset.css") layer(reset);
+@import url("tokens.css") layer(tokens);
+@import url("base.css") layer(base);
+@import url("components.css") layer(components);
diff --git a/assets/base.css b/assets/base.css
new file mode 100644
index 0000000..638a592
--- /dev/null
+++ b/assets/base.css
@@ -0,0 +1,58 @@
+body {
+    margin-inline: auto;
+    padding: var(--space-6) var(--space-4);
+    max-inline-size: var(--measure);
+
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: 1.5;
+}
+
+h1,
+h2,
+h3 {
+    line-height: 1.2;
+}
+
+h1 {
+    font-size: var(--text-2xl);
+}
+h2 {
+    font-size: var(--text-xl);
+}
+h3 {
+    font-size: var(--text-lg);
+}
+
+:is(h1, h2, h3, p, form, ul, ol, pre, table) + * {
+    margin-block-start: var(--space-4);
+}
+
+a {
+    color: var(--accent);
+
+    &:hover {
+        color: var(--accent-hover);
+    }
+}
+
+code,
+pre {
+    font-family: var(--font-mono);
+}
+
+:focus-visible {
+    outline: var(--ring);
+    outline-offset: var(--ring-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 1ms !important;
+        transition-duration: 1ms !important;
+    }
+}
diff --git a/assets/components.css b/assets/components.css
new file mode 100644
index 0000000..a574ab4
--- /dev/null
+++ b/assets/components.css
@@ -0,0 +1 @@
+/* Soon (tm) */
diff --git a/assets/reset.css b/assets/reset.css
new file mode 100644
index 0000000..52e2c8b
--- /dev/null
+++ b/assets/reset.css
@@ -0,0 +1,34 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+* {
+    margin: 0;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+    display: block;
+    max-inline-size: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+    font: inherit;
+    color: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4 {
+    overflow-wrap: break-word;
+}
diff --git a/assets/tokens.css b/assets/tokens.css
new file mode 100644
index 0000000..87c0d17
--- /dev/null
+++ b/assets/tokens.css
@@ -0,0 +1,36 @@
+/* This file defines design tokens as CSS variables that should generally be used
+   in place of hard-coded values in the rest of the stylesheet. */
+
+:root {
+    color-scheme: light dark;
+
+    /* padding, margin, gap, etc. */
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.5rem;
+    --space-6: 2rem;
+    --space-7: 3rem;
+
+    /* font-size */
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.25rem;
+    --text-xl: 1.5rem;
+    --text-2xl: 2rem;
+
+    /* font-family */
+    --font-sans: system-ui, sans-serif;
+    --font-mono: ui-monospace, monospace;
+
+    --bg: light-dark(oklch(100% 0 0), oklch(0% 0 0));
+    --surface: light-dark(oklch(96% 0 0), oklch(22% 0 0));
+    --border: light-dark(oklch(85% 0 0), oklch(33% 0 0));
+
+    --text: light-dark(oklch(25% 0 0), oklch(93% 0 0));
+    --text-muted: oklch(from var(--text) l c h / 0.65);
+
+    --ring: 2px solid var(--accent);
+    --ring-offset: 2px;
+}