kaleido-ui 0.1.3 → 0.1.4

package/dist/tokens/index.cjs

@@ -24,7 +24,11 @@ __export(tokens_exports, {
   colors: () => colors,
   fontFamily: () => fontFamily,
   fontWeight: () => fontWeight,
+  gradient: () => gradient,
+  iconBoxSize: () => iconBoxSize,
+  iconSize: () => iconSize,
   keyframes: () => keyframes,
+  letterSpacing: () => letterSpacing,
   lightSemanticColors: () => lightSemanticColors,
   radius: () => radius,
   shadow: () => shadow,
@@ -92,11 +96,37 @@ var colors = {
   textSecondary: darkSemanticColors.mutedFg,
   textMuted: darkSemanticColors.border,
   textDimmed: darkSemanticColors.ring,
-  /** Semantic */
+  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
   success: darkSemanticColors.primary,
-  warning: darkSemanticColors.chart3,
+  warning: "#FACC15",
+  danger: "#F94040",
+  info: "#4290FF",
+  /** @deprecated alias for `danger` — kept for back-compat. */
   error: darkSemanticColors.destructive,
-  info: darkSemanticColors.chart1,
+  /** Surface elevation — translucent overlays applied over the page background */
+  surface: {
+    base: "rgba(255, 255, 255, 0.03)",
+    card: "rgba(255, 255, 255, 0.05)",
+    elevated: "rgba(255, 255, 255, 0.08)",
+    overlay: "rgba(0, 0, 0, 0.20)",
+    overlayStrong: "rgba(0, 0, 0, 0.35)",
+    scrim: "rgba(0, 0, 0, 0.60)"
+  },
+  /** Border ladder — translucent edges on dark surfaces */
+  borderToken: {
+    subtle: "rgba(255, 255, 255, 0.04)",
+    default: "rgba(255, 255, 255, 0.08)",
+    strong: "rgba(255, 255, 255, 0.15)"
+  },
+  /** Text ladder for dark surfaces */
+  text: {
+    primary: "#ffffff",
+    secondary: "rgba(255, 255, 255, 0.65)",
+    muted: "rgba(255, 255, 255, 0.45)",
+    dimmed: "rgba(255, 255, 255, 0.35)",
+    disabled: "rgba(255, 255, 255, 0.25)",
+    onAccent: "#051B10"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -105,6 +135,19 @@ var colors = {
     spark: "#FF6D00",
     lightning: "#F6C343"
   },
+  networkChip: {
+    bitcoin: "#A65D0D",
+    rgb: "#7F2623",
+    arkade: "#43208B",
+    spark: "#314238",
+    lightning: "#53611E"
+  },
+  /** Asset icon brand colors — used as solid backgrounds behind glyphs */
+  assetIcon: {
+    eth: "#627EEA",
+    usdt: "#26A17B",
+    usdc: "#2775CA"
+  },
   /** Transaction direction */
   tx: {
     sent: "#F94040",
@@ -134,6 +177,33 @@ var fontWeight = {
   semibold: "600",
   bold: "700"
 };
+var letterSpacing = {
+  eyebrow: "0.18em",
+  eyebrowWide: "0.22em"
+};
+var iconSize = {
+  xxs: "11px",
+  // dense inline status / timestamp icons
+  xs: "13px",
+  sm: "14px",
+  md: "16px",
+  // default
+  lg: "18px",
+  xl: "20px",
+  "2xl": "24px",
+  "3xl": "28px",
+  "4xl": "32px",
+  "5xl": "40px",
+  "6xl": "64px"
+  // hero / success / error glyphs
+};
+var iconBoxSize = {
+  sm: "14px",
+  md: "16px",
+  lg: "18px",
+  nav: "22px",
+  control: "34px"
+};
 
 // src/tokens/radius.ts
 var radius = {
@@ -159,7 +229,32 @@ var shadow = {
   glow: "0 0 20px rgba(10, 10, 10, 0.15)",
   glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
   glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
-  glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)"
+  glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)",
+  /** Brand green glow — drives all primary CTA / focus halos. */
+  glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)",
+  glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)",
+  glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)",
+  /** Floating popover / modal elevation on dark surfaces. */
+  popover: "0 18px 55px rgba(0, 0, 0, 0.65)",
+  /** Toast / inline-notification elevation. */
+  toast: "0 0 30px rgba(0, 0, 0, 0.3)"
+};
+
+// src/tokens/gradients.ts
+var gradient = {
+  /**
+   * Page-level radial wash — top-right white highlight + bottom-left
+   * brand purple bloom. Used by Welcome / LockScreen / Onboarding
+   * page shells.
+   */
+  pageRadial: "radial-gradient(ellipse at 60% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse at 30% 85%, rgba(124, 58, 237, 0.08) 0%, transparent 50%)",
+  /** Subtle highlight for the swap-input card receive panel. */
+  cardSheen: "linear-gradient(to bottom right, rgba(255, 255, 255, 0.01), rgba(43, 238, 121, 0.04))",
+  /**
+   * Brand headline gradient — white-to-fade. Used by `<HeadlineGradient />`
+   * via the `bg-gradient-headline` utility plus `bg-clip-text text-transparent`.
+   */
+  headline: "linear-gradient(to right, #ffffff, #ffffff, rgba(255, 255, 255, 0.45))"
 };
 
 // src/tokens/transitions.ts
@@ -220,7 +315,11 @@ var animation = {
   colors,
   fontFamily,
   fontWeight,
+  gradient,
+  iconBoxSize,
+  iconSize,
   keyframes,
+  letterSpacing,
   lightSemanticColors,
   radius,
   shadow,

package/dist/tokens/index.d.cts

@@ -33,11 +33,37 @@ declare const colors: {
     readonly textSecondary: "rgba(255, 255, 255, 0.55)";
     readonly textMuted: "hsl(150 20% 24%)";
     readonly textDimmed: "#2BEE79";
-    /** Semantic */
+    /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
     readonly success: "#2BEE79";
-    readonly warning: "#F7931A";
+    readonly warning: "#FACC15";
+    readonly danger: "#F94040";
+    readonly info: "#4290FF";
+    /** @deprecated alias for `danger` — kept for back-compat. */
     readonly error: "hsl(0 62% 50%)";
-    readonly info: "#2BEE79";
+    /** Surface elevation — translucent overlays applied over the page background */
+    readonly surface: {
+        readonly base: "rgba(255, 255, 255, 0.03)";
+        readonly card: "rgba(255, 255, 255, 0.05)";
+        readonly elevated: "rgba(255, 255, 255, 0.08)";
+        readonly overlay: "rgba(0, 0, 0, 0.20)";
+        readonly overlayStrong: "rgba(0, 0, 0, 0.35)";
+        readonly scrim: "rgba(0, 0, 0, 0.60)";
+    };
+    /** Border ladder — translucent edges on dark surfaces */
+    readonly borderToken: {
+        readonly subtle: "rgba(255, 255, 255, 0.04)";
+        readonly default: "rgba(255, 255, 255, 0.08)";
+        readonly strong: "rgba(255, 255, 255, 0.15)";
+    };
+    /** Text ladder for dark surfaces */
+    readonly text: {
+        readonly primary: "#ffffff";
+        readonly secondary: "rgba(255, 255, 255, 0.65)";
+        readonly muted: "rgba(255, 255, 255, 0.45)";
+        readonly dimmed: "rgba(255, 255, 255, 0.35)";
+        readonly disabled: "rgba(255, 255, 255, 0.25)";
+        readonly onAccent: "#051B10";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -46,6 +72,19 @@ declare const colors: {
         readonly spark: "#FF6D00";
         readonly lightning: "#F6C343";
     };
+    readonly networkChip: {
+        readonly bitcoin: "#A65D0D";
+        readonly rgb: "#7F2623";
+        readonly arkade: "#43208B";
+        readonly spark: "#314238";
+        readonly lightning: "#53611E";
+    };
+    /** Asset icon brand colors — used as solid backgrounds behind glyphs */
+    readonly assetIcon: {
+        readonly eth: "#627EEA";
+        readonly usdt: "#26A17B";
+        readonly usdc: "#2775CA";
+    };
     /** Transaction direction */
     readonly tx: {
         readonly sent: "#F94040";
@@ -105,6 +144,45 @@ declare const fontWeight: {
     readonly semibold: "600";
     readonly bold: "700";
 };
+/**
+ * Letter-spacing tokens — reused across uppercase eyebrow labels.
+ * These replace the scattered `tracking-[0.18em]` / `tracking-[0.22em]` arbitraries.
+ */
+declare const letterSpacing: {
+    readonly eyebrow: "0.18em";
+    readonly eyebrowWide: "0.22em";
+};
+/**
+ * Icon size scale — drives `text-icon-*` utilities for Material Symbols glyphs
+ * and other font-driven icon sets. Exists as its own scale (separate from the
+ * body type scale) because icon sizes change in tighter steps.
+ *
+ * Usage: <span class="material-symbols-outlined text-icon-md">name</span>
+ */
+declare const iconSize: {
+    readonly xxs: "11px";
+    readonly xs: "13px";
+    readonly sm: "14px";
+    readonly md: "16px";
+    readonly lg: "18px";
+    readonly xl: "20px";
+    readonly '2xl': "24px";
+    readonly '3xl': "28px";
+    readonly '4xl': "32px";
+    readonly '5xl': "40px";
+    readonly '6xl': "64px";
+};
+/**
+ * Square icon box scale — drives `size-icon-*` utilities for SVG icons
+ * and compact icon buttons.
+ */
+declare const iconBoxSize: {
+    readonly sm: "14px";
+    readonly md: "16px";
+    readonly lg: "18px";
+    readonly nav: "22px";
+    readonly control: "34px";
+};
 
 /**
  * KaleidoSwap Border Radius Tokens
@@ -134,6 +212,37 @@ declare const shadow: {
     readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
     readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
     readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
+    /** Brand green glow — drives all primary CTA / focus halos. */
+    readonly glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)";
+    readonly glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)";
+    readonly glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)";
+    /** Floating popover / modal elevation on dark surfaces. */
+    readonly popover: "0 18px 55px rgba(0, 0, 0, 0.65)";
+    /** Toast / inline-notification elevation. */
+    readonly toast: "0 0 30px rgba(0, 0, 0, 0.3)";
+};
+
+/**
+ * KaleidoSwap Gradient Tokens
+ *
+ * Reusable visual gradients. Card-accent / dynamic gradients live with
+ * the components that build them — these tokens cover the global,
+ * static gradients used by page shells.
+ */
+declare const gradient: {
+    /**
+     * Page-level radial wash — top-right white highlight + bottom-left
+     * brand purple bloom. Used by Welcome / LockScreen / Onboarding
+     * page shells.
+     */
+    readonly pageRadial: "radial-gradient(ellipse at 60% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse at 30% 85%, rgba(124, 58, 237, 0.08) 0%, transparent 50%)";
+    /** Subtle highlight for the swap-input card receive panel. */
+    readonly cardSheen: "linear-gradient(to bottom right, rgba(255, 255, 255, 0.01), rgba(43, 238, 121, 0.04))";
+    /**
+     * Brand headline gradient — white-to-fade. Used by `<HeadlineGradient />`
+     * via the `bg-gradient-headline` utility plus `bg-clip-text text-transparent`.
+     */
+    readonly headline: "linear-gradient(to right, #ffffff, #ffffff, rgba(255, 255, 255, 0.45))";
 };
 
 /**
@@ -231,4 +340,4 @@ declare const animation: {
     readonly 'bounce-slight': "bounce-slight 2s infinite";
 };
 
-export { animation, colors, fontFamily, fontWeight, keyframes, lightSemanticColors, radius, shadow, transition, typeScale };
+export { animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, letterSpacing, lightSemanticColors, radius, shadow, transition, typeScale };

package/dist/tokens/index.d.ts

@@ -33,11 +33,37 @@ declare const colors: {
     readonly textSecondary: "rgba(255, 255, 255, 0.55)";
     readonly textMuted: "hsl(150 20% 24%)";
     readonly textDimmed: "#2BEE79";
-    /** Semantic */
+    /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
     readonly success: "#2BEE79";
-    readonly warning: "#F7931A";
+    readonly warning: "#FACC15";
+    readonly danger: "#F94040";
+    readonly info: "#4290FF";
+    /** @deprecated alias for `danger` — kept for back-compat. */
     readonly error: "hsl(0 62% 50%)";
-    readonly info: "#2BEE79";
+    /** Surface elevation — translucent overlays applied over the page background */
+    readonly surface: {
+        readonly base: "rgba(255, 255, 255, 0.03)";
+        readonly card: "rgba(255, 255, 255, 0.05)";
+        readonly elevated: "rgba(255, 255, 255, 0.08)";
+        readonly overlay: "rgba(0, 0, 0, 0.20)";
+        readonly overlayStrong: "rgba(0, 0, 0, 0.35)";
+        readonly scrim: "rgba(0, 0, 0, 0.60)";
+    };
+    /** Border ladder — translucent edges on dark surfaces */
+    readonly borderToken: {
+        readonly subtle: "rgba(255, 255, 255, 0.04)";
+        readonly default: "rgba(255, 255, 255, 0.08)";
+        readonly strong: "rgba(255, 255, 255, 0.15)";
+    };
+    /** Text ladder for dark surfaces */
+    readonly text: {
+        readonly primary: "#ffffff";
+        readonly secondary: "rgba(255, 255, 255, 0.65)";
+        readonly muted: "rgba(255, 255, 255, 0.45)";
+        readonly dimmed: "rgba(255, 255, 255, 0.35)";
+        readonly disabled: "rgba(255, 255, 255, 0.25)";
+        readonly onAccent: "#051B10";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";
@@ -46,6 +72,19 @@ declare const colors: {
         readonly spark: "#FF6D00";
         readonly lightning: "#F6C343";
     };
+    readonly networkChip: {
+        readonly bitcoin: "#A65D0D";
+        readonly rgb: "#7F2623";
+        readonly arkade: "#43208B";
+        readonly spark: "#314238";
+        readonly lightning: "#53611E";
+    };
+    /** Asset icon brand colors — used as solid backgrounds behind glyphs */
+    readonly assetIcon: {
+        readonly eth: "#627EEA";
+        readonly usdt: "#26A17B";
+        readonly usdc: "#2775CA";
+    };
     /** Transaction direction */
     readonly tx: {
         readonly sent: "#F94040";
@@ -105,6 +144,45 @@ declare const fontWeight: {
     readonly semibold: "600";
     readonly bold: "700";
 };
+/**
+ * Letter-spacing tokens — reused across uppercase eyebrow labels.
+ * These replace the scattered `tracking-[0.18em]` / `tracking-[0.22em]` arbitraries.
+ */
+declare const letterSpacing: {
+    readonly eyebrow: "0.18em";
+    readonly eyebrowWide: "0.22em";
+};
+/**
+ * Icon size scale — drives `text-icon-*` utilities for Material Symbols glyphs
+ * and other font-driven icon sets. Exists as its own scale (separate from the
+ * body type scale) because icon sizes change in tighter steps.
+ *
+ * Usage: <span class="material-symbols-outlined text-icon-md">name</span>
+ */
+declare const iconSize: {
+    readonly xxs: "11px";
+    readonly xs: "13px";
+    readonly sm: "14px";
+    readonly md: "16px";
+    readonly lg: "18px";
+    readonly xl: "20px";
+    readonly '2xl': "24px";
+    readonly '3xl': "28px";
+    readonly '4xl': "32px";
+    readonly '5xl': "40px";
+    readonly '6xl': "64px";
+};
+/**
+ * Square icon box scale — drives `size-icon-*` utilities for SVG icons
+ * and compact icon buttons.
+ */
+declare const iconBoxSize: {
+    readonly sm: "14px";
+    readonly md: "16px";
+    readonly lg: "18px";
+    readonly nav: "22px";
+    readonly control: "34px";
+};
 
 /**
  * KaleidoSwap Border Radius Tokens
@@ -134,6 +212,37 @@ declare const shadow: {
     readonly glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)";
     readonly glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)";
     readonly glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)";
+    /** Brand green glow — drives all primary CTA / focus halos. */
+    readonly glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)";
+    readonly glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)";
+    readonly glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)";
+    /** Floating popover / modal elevation on dark surfaces. */
+    readonly popover: "0 18px 55px rgba(0, 0, 0, 0.65)";
+    /** Toast / inline-notification elevation. */
+    readonly toast: "0 0 30px rgba(0, 0, 0, 0.3)";
+};
+
+/**
+ * KaleidoSwap Gradient Tokens
+ *
+ * Reusable visual gradients. Card-accent / dynamic gradients live with
+ * the components that build them — these tokens cover the global,
+ * static gradients used by page shells.
+ */
+declare const gradient: {
+    /**
+     * Page-level radial wash — top-right white highlight + bottom-left
+     * brand purple bloom. Used by Welcome / LockScreen / Onboarding
+     * page shells.
+     */
+    readonly pageRadial: "radial-gradient(ellipse at 60% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse at 30% 85%, rgba(124, 58, 237, 0.08) 0%, transparent 50%)";
+    /** Subtle highlight for the swap-input card receive panel. */
+    readonly cardSheen: "linear-gradient(to bottom right, rgba(255, 255, 255, 0.01), rgba(43, 238, 121, 0.04))";
+    /**
+     * Brand headline gradient — white-to-fade. Used by `<HeadlineGradient />`
+     * via the `bg-gradient-headline` utility plus `bg-clip-text text-transparent`.
+     */
+    readonly headline: "linear-gradient(to right, #ffffff, #ffffff, rgba(255, 255, 255, 0.45))";
 };
 
 /**
@@ -231,4 +340,4 @@ declare const animation: {
     readonly 'bounce-slight': "bounce-slight 2s infinite";
 };
 
-export { animation, colors, fontFamily, fontWeight, keyframes, lightSemanticColors, radius, shadow, transition, typeScale };
+export { animation, colors, fontFamily, fontWeight, gradient, iconBoxSize, iconSize, keyframes, letterSpacing, lightSemanticColors, radius, shadow, transition, typeScale };

package/dist/tokens/index.js

@@ -57,11 +57,37 @@ var colors = {
   textSecondary: darkSemanticColors.mutedFg,
   textMuted: darkSemanticColors.border,
   textDimmed: darkSemanticColors.ring,
-  /** Semantic */
+  /** Semantic intent colors (use as text-success, bg-warning/15, etc.) */
   success: darkSemanticColors.primary,
-  warning: darkSemanticColors.chart3,
+  warning: "#FACC15",
+  danger: "#F94040",
+  info: "#4290FF",
+  /** @deprecated alias for `danger` — kept for back-compat. */
   error: darkSemanticColors.destructive,
-  info: darkSemanticColors.chart1,
+  /** Surface elevation — translucent overlays applied over the page background */
+  surface: {
+    base: "rgba(255, 255, 255, 0.03)",
+    card: "rgba(255, 255, 255, 0.05)",
+    elevated: "rgba(255, 255, 255, 0.08)",
+    overlay: "rgba(0, 0, 0, 0.20)",
+    overlayStrong: "rgba(0, 0, 0, 0.35)",
+    scrim: "rgba(0, 0, 0, 0.60)"
+  },
+  /** Border ladder — translucent edges on dark surfaces */
+  borderToken: {
+    subtle: "rgba(255, 255, 255, 0.04)",
+    default: "rgba(255, 255, 255, 0.08)",
+    strong: "rgba(255, 255, 255, 0.15)"
+  },
+  /** Text ladder for dark surfaces */
+  text: {
+    primary: "#ffffff",
+    secondary: "rgba(255, 255, 255, 0.65)",
+    muted: "rgba(255, 255, 255, 0.45)",
+    dimmed: "rgba(255, 255, 255, 0.35)",
+    disabled: "rgba(255, 255, 255, 0.25)",
+    onAccent: "#051B10"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",
@@ -70,6 +96,19 @@ var colors = {
     spark: "#FF6D00",
     lightning: "#F6C343"
   },
+  networkChip: {
+    bitcoin: "#A65D0D",
+    rgb: "#7F2623",
+    arkade: "#43208B",
+    spark: "#314238",
+    lightning: "#53611E"
+  },
+  /** Asset icon brand colors — used as solid backgrounds behind glyphs */
+  assetIcon: {
+    eth: "#627EEA",
+    usdt: "#26A17B",
+    usdc: "#2775CA"
+  },
   /** Transaction direction */
   tx: {
     sent: "#F94040",
@@ -99,6 +138,33 @@ var fontWeight = {
   semibold: "600",
   bold: "700"
 };
+var letterSpacing = {
+  eyebrow: "0.18em",
+  eyebrowWide: "0.22em"
+};
+var iconSize = {
+  xxs: "11px",
+  // dense inline status / timestamp icons
+  xs: "13px",
+  sm: "14px",
+  md: "16px",
+  // default
+  lg: "18px",
+  xl: "20px",
+  "2xl": "24px",
+  "3xl": "28px",
+  "4xl": "32px",
+  "5xl": "40px",
+  "6xl": "64px"
+  // hero / success / error glyphs
+};
+var iconBoxSize = {
+  sm: "14px",
+  md: "16px",
+  lg: "18px",
+  nav: "22px",
+  control: "34px"
+};
 
 // src/tokens/radius.ts
 var radius = {
@@ -124,7 +190,32 @@ var shadow = {
   glow: "0 0 20px rgba(10, 10, 10, 0.15)",
   glowStrong: "0 0 30px rgba(10, 10, 10, 0.25)",
   glowSubtle: "0 0 15px rgba(10, 10, 10, 0.12)",
-  glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)"
+  glowAccent: "0 4px 30px rgba(10, 10, 10, 0.18)",
+  /** Brand green glow — drives all primary CTA / focus halos. */
+  glowPrimarySoft: "0 0 8px rgba(43, 238, 121, 0.5)",
+  glowPrimary: "0 0 30px rgba(43, 238, 121, 0.45)",
+  glowPrimaryStrong: "0 0 40px rgba(43, 238, 121, 0.5)",
+  /** Floating popover / modal elevation on dark surfaces. */
+  popover: "0 18px 55px rgba(0, 0, 0, 0.65)",
+  /** Toast / inline-notification elevation. */
+  toast: "0 0 30px rgba(0, 0, 0, 0.3)"
+};
+
+// src/tokens/gradients.ts
+var gradient = {
+  /**
+   * Page-level radial wash — top-right white highlight + bottom-left
+   * brand purple bloom. Used by Welcome / LockScreen / Onboarding
+   * page shells.
+   */
+  pageRadial: "radial-gradient(ellipse at 60% 10%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse at 30% 85%, rgba(124, 58, 237, 0.08) 0%, transparent 50%)",
+  /** Subtle highlight for the swap-input card receive panel. */
+  cardSheen: "linear-gradient(to bottom right, rgba(255, 255, 255, 0.01), rgba(43, 238, 121, 0.04))",
+  /**
+   * Brand headline gradient — white-to-fade. Used by `<HeadlineGradient />`
+   * via the `bg-gradient-headline` utility plus `bg-clip-text text-transparent`.
+   */
+  headline: "linear-gradient(to right, #ffffff, #ffffff, rgba(255, 255, 255, 0.45))"
 };
 
 // src/tokens/transitions.ts
@@ -184,7 +275,11 @@ export {
   colors,
   fontFamily,
   fontWeight,
+  gradient,
+  iconBoxSize,
+  iconSize,
   keyframes,
+  letterSpacing,
   lightSemanticColors,
   radius,
   shadow,