diff --git a/src/styles/tokens/_typography.scss b/src/styles/tokens/_typography.scss
new file mode 100644
index 0000000..b59562b
--- /dev/null
+++ b/src/styles/tokens/_typography.scss
@@ -0,0 +1,112 @@
+// ─── Typography tokens ────────────────────────────────────────────────────────
+// Font: Geist (Vercel) — https://vercel.com/font
+// Values: size in px, line-height in px, letter-spacing as em
+
+:root {
+  // ── Font families ─────────────────────────────────────────────────────────
+  --nds-font-family-base: 'Geist', system-ui, -apple-system, sans-serif;
+  --nds-font-family-mono: 'Geist Mono', 'JetBrains Mono', monospace;
+
+  // ── Font weights ──────────────────────────────────────────────────────────
+  --nds-font-weight-medium:   500;
+  --nds-font-weight-semibold: 600;
+  --nds-font-weight-bold:     700;
+
+  // ── Body ──────────────────────────────────────────────────────────────────
+  --nds-type-body-small-size:           12px;
+  --nds-type-body-small-weight:         var(--nds-font-weight-medium);
+  --nds-type-body-small-line-height:    10px;
+  --nds-type-body-small-letter-spacing: 0.015em;
+
+  --nds-type-body-medium-size:           14px;
+  --nds-type-body-medium-weight:         var(--nds-font-weight-medium);
+  --nds-type-body-medium-line-height:    10px;
+  --nds-type-body-medium-letter-spacing: 0.015em;
+
+  --nds-type-body-large-size:           16px;
+  --nds-type-body-large-weight:         var(--nds-font-weight-medium);
+  --nds-type-body-large-line-height:    12px;
+  --nds-type-body-large-letter-spacing: 0.015em;
+
+  // ── Heading ───────────────────────────────────────────────────────────────
+  --nds-type-heading-small-size:           20px;
+  --nds-type-heading-small-weight:         var(--nds-font-weight-semibold);
+  --nds-type-heading-small-line-height:    15px;
+  --nds-type-heading-small-letter-spacing: 0.014em;
+
+  --nds-type-heading-medium-size:           24px;
+  --nds-type-heading-medium-weight:         var(--nds-font-weight-semibold);
+  --nds-type-heading-medium-line-height:    18px;
+  --nds-type-heading-medium-letter-spacing: 0.013em;
+
+  // ── Display ───────────────────────────────────────────────────────────────
+  --nds-type-display-small-size:           36px;
+  --nds-type-display-small-weight:         var(--nds-font-weight-bold);
+  --nds-type-display-small-line-height:    30px;
+  --nds-type-display-small-letter-spacing: 0.012em;
+
+  --nds-type-display-medium-size:           48px;
+  --nds-type-display-medium-weight:         var(--nds-font-weight-bold);
+  --nds-type-display-medium-line-height:    38px;
+  --nds-type-display-medium-letter-spacing: 0.011em;
+}
+
+// ─── SASS mixins ──────────────────────────────────────────────────────────────
+// Usage: @use 'path/to/tokens/typography' as typo;
+//        @include typo.body-small;
+
+@mixin body-small {
+  font-family: var(--nds-font-family-base);
+  font-size: var(--nds-type-body-small-size);
+  font-weight: var(--nds-type-body-small-weight);
+  line-height: var(--nds-type-body-small-line-height);
+  letter-spacing: var(--nds-type-body-small-letter-spacing);
+}
+
+@mixin body-medium {
+  font-family: var(--nds-font-family-base);
+  font-size: var(--nds-type-body-medium-size);
+  font-weight: var(--nds-type-body-medium-weight);
+  line-height: var(--nds-type-body-medium-line-height);
+  letter-spacing: var(--nds-type-body-medium-letter-spacing);
+}
+
+@mixin body-large {
+  font-family: var(--nds-font-family-base);
+  font-size: var(--nds-type-body-large-size);
+  font-weight: var(--nds-type-body-large-weight);
+  line-height: var(--nds-type-body-large-line-height);
+  letter-spacing: var(--nds-type-body-large-letter-spacing);
+}
+
+@mixin heading-small {
+  font-family: var(--nds-font-family-base);
+  font-size: var(--nds-type-heading-small-size);
+  font-weight: var(--nds-type-heading-small-weight);
+  line-height: var(--nds-type-heading-small-line-height);
+  letter-spacing: var(--nds-type-heading-small-letter-spacing);
+}
+
+@mixin heading-medium {
+  font-family: var(--nds-font-family-base);
+  font-size: var(--nds-type-heading-medium-size);
+  font-weight: var(--nds-type-heading-medium-weight);
+  line-height: var(--nds-type-heading-medium-line-height);
+  letter-spacing: var(--nds-type-heading-medium-letter-spacing);
+}
+
+@mixin display-small {
+  font-family: var(--nds-font-family-base);
+  font-size: var(--nds-type-display-small-size);
+  font-weight: var(--nds-type-display-small-weight);
+  line-height: var(--nds-type-display-small-line-height);
+  letter-spacing: var(--nds-type-display-small-letter-spacing);
+}
+
+@mixin display-medium {
+  font-family: var(--nds-font-family-base);
+  font-size: var(--nds-type-display-medium-size);
+  font-weight: var(--nds-type-display-medium-weight);
+  line-height: var(--nds-type-display-medium-line-height);
+  letter-spacing: var(--nds-type-display-medium-letter-spacing);
+}