diff --git a/resources/android/ButtonRenderer.kt b/resources/android/ButtonRenderer.kt
index ff40f60..dc96d90 100644
--- a/resources/android/ButtonRenderer.kt
+++ b/resources/android/ButtonRenderer.kt
@@ -20,6 +20,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.stateDescription
@@ -43,10 +44,13 @@ import com.nativephp.plugins.native_ui.NativeUITokens
  *   - secondary   → [FilledTonalButton] with theme.secondary / onSecondary
  *   - destructive → [Button] with theme.error / onError
  *   - ghost       → [TextButton] with theme.primary as content color
+ *   - any other   → like primary, in the `tint_color` / `label_color` PHP sends
+ *     for a variant that names a theme token (`variant="brand"`), or in
+ *     primary when it sent none
  *
- * All colors come from [LocalNativeUITheme]. No per-instance color/radius/shadow
- * overrides are honored — that's intentional (plan doc Model 3). For full visual
- * control, use `<pressable>`.
+ * All colors come from the theme: [LocalNativeUITheme], or the theme token a
+ * variant names. No per-instance color/radius/shadow overrides are honored —
+ * that's intentional (plan doc Model 3). For full visual control, use `<pressable>`.
  */
 object ButtonRenderer {
     @Composable
@@ -71,8 +75,20 @@ object ButtonRenderer {
         // rather than a CompositionLocal because nothing in the render tree
         // currently provides one — the store is backed by `mutableStateOf`, so
         // Compose recomposes automatically when PHP pushes a theme update.
-        val theme = if (isSystemInDarkTheme()) NativeUITheme.dark else NativeUITheme.light
+        val isDark = isSystemInDarkTheme()
+        val theme = if (isDark) NativeUITheme.dark else NativeUITheme.light
         val metrics = sizeMetrics(size, theme)
+
+        // A variant that names a theme token arrives with that token's colours,
+        // which PHP resolves and sends as `tint_color` and `label_color`, each
+        // with its `dark_` shade when that differs. The built-ins send neither.
+        fun tokenColor(key: String, fallback: Color): Color {
+            val shade = if (isDark && p.has("dark_$key")) "dark_$key" else key
+
+            return if (p.has(shade)) Color(p.getColor(shade, 0)) else fallback
+        }
+        val tint = tokenColor("tint_color", theme.primary)
+        val onTint = if (p.has("tint_color")) tokenColor("label_color", theme.onPrimary) else theme.onPrimary
         // Leading — button labels are single-line, so this is usually a no-op.
         val lineHeight = nuiLineHeightUnit(p.getFloat("line_height_px", 0f), p.getFloat("line_height", 0f), metrics.textSize.value)
 
@@ -183,15 +199,16 @@ object ButtonRenderer {
                     content = { content() },
                 )
 
-                // "primary" (default) and any unknown value fall through to filled primary.
+                // "primary" (default), a theme token and any unknown value fall
+                // through to filled primary, in the token's colours if it sent them.
                 else -> Button(
                     onClick = onClick,
                     enabled = enabled,
                     modifier = buttonModifier,
                     contentPadding = metrics.contentPadding,
                     colors = ButtonDefaults.buttonColors(
-                        containerColor = theme.primary,
-                        contentColor = theme.onPrimary,
+                        containerColor = tint,
+                        contentColor = onTint,
                         disabledContainerColor = theme.surfaceVariant,
                         disabledContentColor = theme.onSurfaceVariant,
                     ),
diff --git a/resources/ios/NativeUIButtonRenderer.swift b/resources/ios/NativeUIButtonRenderer.swift
index 312cab5..6e6ea13 100644
--- a/resources/ios/NativeUIButtonRenderer.swift
+++ b/resources/ios/NativeUIButtonRenderer.swift
@@ -11,6 +11,9 @@ import SwiftUI
 ///   - success     → `.buttonStyle(.borderedProminent)` + `.tint(theme.success)`
 ///   - accent      → `.buttonStyle(.borderedProminent)` + `.tint(theme.accent)`
 ///   - ghost       → `.buttonStyle(.plain)` + `.foregroundStyle(theme.primary)`
+///   - any other   → like primary, in the `tint_color` / `label_color` PHP sends
+///     for a variant that names a theme token (`variant="brand"`), or in
+///     primary when it sent none
 ///
 /// Tailwind `glass` family promotes the button to iOS 26's first-class
 /// glass styles when available, falling back to bordered styles on older iOS.
@@ -36,9 +39,10 @@ import SwiftUI
 /// `<button class="glass:prominent" variant="destructive">` reads as a
 /// destructive-tinted prominent glass button on iOS 26+.
 ///
-/// All colors come from the `\.nativeUITheme` environment. No per-instance
-/// color/radius/shadow overrides are honored — that's intentional (plan doc
-/// Model 3). For full visual control, use `<pressable>`.
+/// All colors come from the theme: the `\.nativeUITheme` environment, or the
+/// theme token a variant names. No per-instance color/radius/shadow overrides
+/// are honored — that's intentional (plan doc Model 3). For full visual
+/// control, use `<pressable>`.
 struct NativeUIButtonRenderer: View {
     let node: NativeUINode
     @ObservedObject private var themeStore = NativeUITheme.shared
@@ -80,6 +84,7 @@ struct NativeUIButtonRenderer: View {
 
         let metrics = sizeMetrics(for: size, theme: theme)
         let enabled = !disabled && !loading
+        let token = tokenColors(p, theme: theme)
 
         // Class-level text-size override. `text-xl` / `text-[28]` / etc.
         // arrive as a `font_size` prop. When set (>0), it wins over the
@@ -136,6 +141,7 @@ struct NativeUIButtonRenderer: View {
                 action: action,
                 content: content,
                 variant: variant,
+                token: token,
                 theme: theme,
                 metrics: metrics,
                 enabled: enabled,
@@ -147,6 +153,7 @@ struct NativeUIButtonRenderer: View {
                 action: action,
                 content: content,
                 variant: variant,
+                token: token,
                 theme: theme,
                 metrics: metrics,
                 enabled: enabled,
@@ -156,6 +163,23 @@ struct NativeUIButtonRenderer: View {
         }
     }
 
+    /// The fill and label of a variant that names a theme token.
+    private typealias TokenColors = (tint: Color, onTint: Color)
+
+    /// A token variant's colours, which PHP resolves from the theme and sends
+    /// as `tint_color` and `label_color`, each with its `dark_` shade when that
+    /// differs. Nil for the built-in variants.
+    private func tokenColors(_ p: GenericProps, theme: NativeUITokens) -> TokenColors? {
+        guard p.has("tint_color") else { return nil }
+
+        func color(_ key: String) -> Color {
+            let shade = colorScheme == .dark && p.has("dark_" + key) ? "dark_" + key : key
+            return Color(argb: p.getColor(shade))
+        }
+
+        return (color("tint_color"), p.has("label_color") ? color("label_color") : theme.onPrimary)
+    }
+
     // MARK: - Glass path (iOS 26 first-class, older iOS bordered fallback)
 
     @ViewBuilder
@@ -166,14 +190,15 @@ struct NativeUIButtonRenderer: View {
         action: @escaping () -> Void,
         content: ButtonContent,
         variant: String,
+        token: TokenColors?,
         theme: NativeUITokens,
         metrics: SizeMetrics,
         enabled: Bool,
         a11yLabel: String,
         a11yHint: String
     ) -> some View {
-        let tint = tintForVariant(variant, theme: theme)
-        let onTint = onTintForVariant(variant, theme: theme)
+        let tint = tintForVariant(variant, token: token, theme: theme)
+        let onTint = onTintForVariant(variant, token: token, theme: theme)
 
         // Note: `interactive` on a button is mostly redundant — the button
         // already has built-in press feedback through SwiftUI's button styles.
@@ -244,6 +269,7 @@ struct NativeUIButtonRenderer: View {
         action: @escaping () -> Void,
         content: ButtonContent,
         variant: String,
+        token: TokenColors?,
         theme: NativeUITokens,
         metrics: SizeMetrics,
         enabled: Bool,
@@ -312,11 +338,11 @@ struct NativeUIButtonRenderer: View {
                 .modifier(A11yLabelModifier(label: a11yLabel))
                 .modifier(A11yHintModifier(hint: a11yHint))
 
-        default: // "primary" and any unknown value
+        default: // "primary", a theme token, and any unknown value
             Button(action: action) { content.fillWidthIfRequested(node) }
                 .buttonStyle(.borderedProminent)
-                .tint(enabled ? theme.primary : theme.surfaceVariant)
-                .foregroundStyle(enabled ? theme.onPrimary : theme.onSurfaceVariant)
+                .tint(enabled ? (token?.tint ?? theme.primary) : theme.surfaceVariant)
+                .foregroundStyle(enabled ? (token?.onTint ?? theme.onPrimary) : theme.onSurfaceVariant)
                 .controlSize(metrics.controlSize)
                 .disabled(!enabled)
                 .modifier(A11yLabelModifier(label: a11yLabel))
@@ -326,25 +352,25 @@ struct NativeUIButtonRenderer: View {
 
     // MARK: - Tint helpers (glass path only — variant path uses tints inline)
 
-    private func tintForVariant(_ variant: String, theme: NativeUITokens) -> Color {
+    private func tintForVariant(_ variant: String, token: TokenColors?, theme: NativeUITokens) -> Color {
         switch variant {
         case "secondary":   return theme.secondary
         case "destructive": return theme.destructive
         case "success":     return theme.success
         case "accent":      return theme.accent
         case "ghost":       return theme.primary
-        default:            return theme.primary
+        default:            return token?.tint ?? theme.primary
         }
     }
 
-    private func onTintForVariant(_ variant: String, theme: NativeUITokens) -> Color {
+    private func onTintForVariant(_ variant: String, token: TokenColors?, theme: NativeUITokens) -> Color {
         switch variant {
         case "secondary":   return theme.onSecondary
         case "destructive": return theme.onDestructive
         case "success":     return theme.onSuccess
         case "accent":      return theme.onAccent
         case "ghost":       return theme.primary
-        default:            return theme.onPrimary
+        default:            return token?.onTint ?? theme.onPrimary
         }
     }
 
diff --git a/src/Elements/Button.php b/src/Elements/Button.php
index 4f35a2f..d212904 100644
--- a/src/Elements/Button.php
+++ b/src/Elements/Button.php
@@ -8,6 +8,7 @@
 use Native\Mobile\Icon\AndroidSymbol;
 use Native\Mobile\Icon\IconResolver;
 use Native\Mobile\Icon\IosSymbol;
+use Native\Mobile\UI\Theme;
 
 /**
  * Native button.
@@ -16,7 +17,8 @@
  * family on Android, SwiftUI `Button` with `buttonStyle(...)` on iOS.
  *
  * API shape (locked in plan doc, sections A/C/E):
- *   - `variant`: semantic vocabulary (primary | secondary | destructive | success | ghost)
+ *   - `variant`: semantic vocabulary (primary | secondary | destructive | success | accent | ghost),
+ *     or the name of any colour token in the theme
  *   - `size`: sm | md | lg
  *   - `disabled`, `loading`: state
  *   - `icon`, `icon-trailing`: optional icon names (leading/trailing)
@@ -33,6 +35,12 @@
  */
 class Button extends Element
 {
+    /**
+     * The variants each renderer draws from its own theme tokens. Any other
+     * variant that names a theme colour is sent with that colour.
+     */
+    public const array Variants = ['primary', 'secondary', 'destructive', 'success', 'accent', 'ghost'];
+
     protected string $type = 'button';
 
     /** @var array<string, mixed> */
@@ -121,14 +129,52 @@ public function applyAttributes(array $attrs): void
         }
     }
 
-    /** primary | secondary | destructive | success | ghost. Default: primary. */
+    /**
+     * primary | secondary | destructive | success | accent | ghost, or the
+     * name of a colour token in the theme. Default: primary.
+     *
+     * A token variant fills the button like primary does, in that token's
+     * colour, with the label in its `on-` token (`variant="brand"` draws in
+     * `brand` and `on-brand`), or in `on-primary` when the theme has none.
+     * Both are sent in their light and dark shades. That lets an app pick a
+     * button's colour at runtime, say one per user, while the colours still
+     * live in the theme. A name the theme doesn't have draws as primary.
+     */
     public function variant(string $value): static
     {
         $this->buttonProps['variant'] = $value;
 
+        foreach (['tint_color', 'label_color'] as $prop) {
+            unset($this->buttonProps[$prop], $this->buttonProps['dark_'.$prop]);
+        }
+
+        // The label's colour can't be `on_tint`: the bridge sends any prop
+        // starting with `on_` as a callback.
+        if (! in_array($value, self::Variants, true) && is_string(Theme::get("light.{$value}"))) {
+            $this->tokenColor('tint_color', $value);
+            $this->tokenColor('label_color', is_string(Theme::get("light.on-{$value}")) ? "on-{$value}" : 'on-primary');
+        }
+
         return $this;
     }
 
+    /**
+     * Sends a theme token's light shade as `$prop`, and its dark shade as
+     * `dark_$prop` when that differs.
+     */
+    protected function tokenColor(string $prop, string $token): void
+    {
+        $light = Theme::get("light.{$token}");
+        $dark = Theme::get("dark.{$token}");
+
+        if (is_string($light)) {
+            $this->buttonProps[$prop] = $light;
+        }
+        if (is_string($dark) && $dark !== $light) {
+            $this->buttonProps['dark_'.$prop] = $dark;
+        }
+    }
+
     /** sm | md | lg. Default: md. */
     public function size(string $value): static
     {
diff --git a/tests/ButtonTokenVariantTest.php b/tests/ButtonTokenVariantTest.php
new file mode 100644
index 0000000..f24220a
--- /dev/null
+++ b/tests/ButtonTokenVariantTest.php
@@ -0,0 +1,115 @@
+<?php
+
+use Native\Mobile\Edge\CallbackRegistry;
+use Native\Mobile\Edge\ElementRegistry;
+use Native\Mobile\Edge\NativeElementCollector;
+use Native\Mobile\JumpBridge;
+use Native\Mobile\UI\Elements\Button;
+use Native\Mobile\UI\Theme;
+
+/**
+ * A button variant that names a theme colour token draws in that token,
+ * with its `on-` token for the label, in both shades.
+ */
+beforeEach(function () {
+    JumpBridge::instance()->mute();
+    Theme::reset();
+    Theme::load([
+        'light' => [
+            'primary' => '#3B6FE0',
+            'on-primary' => '#FFFFFF',
+            'secondary' => '#EEF0F2',
+            'brand' => '#0C8599',
+            'on-brand' => '#FFFFFF',
+            'mono' => '#121417',
+        ],
+        'dark' => [
+            'primary' => '#7AA2F7',
+            'on-primary' => '#111112',
+            'brand' => '#3BC9DB',
+            'on-brand' => '#111112',
+            'mono' => '#121417',
+        ],
+    ]);
+    NativeElementCollector::reset();
+    ElementRegistry::reset();
+    ElementRegistry::register('button', Button::class);
+});
+
+afterEach(function () {
+    Theme::reset();
+    NativeElementCollector::reset();
+    ElementRegistry::reset();
+});
+
+it('sends a token variant with its light and dark colours', function () {
+    $props = Button::make('Follow')->variant('brand')->toArray(new CallbackRegistry)['props'];
+
+    expect($props)
+        ->toMatchArray([
+            'variant' => 'brand',
+            'tint_color' => '#0C8599',
+            'dark_tint_color' => '#3BC9DB',
+            'label_color' => '#FFFFFF',
+            'dark_label_color' => '#111112',
+        ]);
+});
+
+it('takes a token variant from Blade', function () {
+    NativeElementCollector::leaf('button', ['label' => 'Follow', 'variant' => 'brand']);
+
+    $props = NativeElementCollector::collect()->toArray(new CallbackRegistry)['props'];
+
+    expect($props['tint_color'])->toBe('#0C8599')
+        ->and($props['label_color'])->toBe('#FFFFFF');
+});
+
+it('labels a token without an on- token in on-primary', function () {
+    $props = Button::make('Go')->variant('mono')->toArray(new CallbackRegistry)['props'];
+
+    expect($props)
+        ->toMatchArray(['tint_color' => '#121417', 'label_color' => '#FFFFFF', 'dark_label_color' => '#111112'])
+        ->not->toHaveKey('dark_tint_color');
+});
+
+it('leaves the built-in variants to the renderers', function (string $variant) {
+    $props = Button::make('Go')->variant($variant)->toArray(new CallbackRegistry)['props'];
+
+    expect($props)->not->toHaveKeys(['tint_color', 'dark_tint_color', 'label_color', 'dark_label_color']);
+})->with(Button::Variants);
+
+it('sends no colours for a name the theme does not have', function () {
+    $props = Button::make('Go')->variant('nope')->toArray(new CallbackRegistry)['props'];
+
+    expect($props)->not->toHaveKeys(['tint_color', 'label_color']);
+});
+
+it('sends no colour under a key the bridge would take for a callback', function () {
+    $props = Button::make('Follow')->variant('brand')->toArray(new CallbackRegistry)['props'];
+
+    expect(array_filter(array_keys($props), fn (string $key): bool => str_starts_with($key, 'on_')))->toBe([]);
+});
+
+it('drops the colours when the variant changes back to a built-in one', function () {
+    $props = Button::make('Go')->variant('brand')->variant('secondary')->toArray(new CallbackRegistry)['props'];
+
+    expect($props['variant'])->toBe('secondary')
+        ->and($props)->not->toHaveKeys(['tint_color', 'dark_tint_color', 'label_color', 'dark_label_color']);
+});
+
+it('draws the sent colours in place of primary on both platforms', function () {
+    $ios = file_get_contents(dirname(__DIR__).'/resources/ios/NativeUIButtonRenderer.swift');
+    $android = file_get_contents(dirname(__DIR__).'/resources/android/ButtonRenderer.kt');
+
+    expect($ios)
+        ->toContain('guard p.has("tint_color") else { return nil }')
+        ->toContain('.tint(enabled ? (token?.tint ?? theme.primary) : theme.surfaceVariant)')
+        ->toContain('.foregroundStyle(enabled ? (token?.onTint ?? theme.onPrimary) : theme.onSurfaceVariant)')
+        ->toContain('default:            return token?.tint ?? theme.primary')
+        ->toContain('default:            return token?.onTint ?? theme.onPrimary');
+
+    expect($android)
+        ->toContain('val tint = tokenColor("tint_color", theme.primary)')
+        ->toContain('containerColor = tint,')
+        ->toContain('contentColor = onTint,');
+});