diff --git a/tokens.css b/tokens.css
index da9fc4b..6fc8362 100644
--- a/tokens.css
+++ b/tokens.css
@@ -55,12 +55,37 @@
 	--cc-fg: var(--cc-text);
 	--cc-fg-muted: var(--cc-subtext0);
 
-	/* ── Typography ───────────────────────────────────────────── */
+	/* ── Brand gradient ramp ────────────────────────────────────
+	 * 3-stop gradient for per-product marketing surfaces (landing pages,
+	 * hero sections, CTA strips). Defaults to the house accent ramp.
+	 *
+	 * Per-product override (in product's own CSS, before importing tokens):
+	 *   :root {
+	 *     --cc-brand-1: var(--cc-mauve);
+	 *     --cc-brand-2: var(--cc-pink);
+	 *   }
+	 *
+	 * The composed --cc-brand-gradient auto-derives from the 3 stops.
+	 * Usage:
+	 *   background: var(--cc-brand-gradient);
+	 *   -webkit-background-clip: text; color: transparent;  /* gradient text */
+	 */
+	--cc-brand-1: var(--cc-mauve);
+	--cc-brand-2: var(--cc-pink);
+	--cc-brand-3: var(--cc-peach);
+	--cc-brand-gradient: linear-gradient(
+		120deg,
+		var(--cc-brand-1),
+		var(--cc-brand-2) 48%,
+		var(--cc-brand-3)
+	);
+
+	/* ── Typography ──────────────────────────────────────────── */
 	/* Fonts are loaded via <link> in app.html / VitePress head (not @import). */
 	--cc-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 	--cc-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
 
-	/* ── Radii & shadows ──────────────────────────────────────── */
+	/* ── Radii & shadows ────────────────────────────────────── */
 	--cc-radius-sm: 8px;
 	--cc-radius: 12px;
 	--cc-radius-lg: 16px;