@actioneer/ads 1.0.3 → 1.0.4

package/DESIGN.md

@@ -2,12 +2,12 @@
 name: Actioneer Design System
 description: ADS 1.0 — the React 19 + Tailwind v4 library every Actioneer product builds from
 colors:
-  action-primary: "#398457"
-  action-primary-hover: "#2b7348"
-  action-primary-text: "#1f623b"
-  action-primary-soft: "#e2efe5"
+  action-primary: "#1c8379"
+  action-primary-hover: "#017369"
+  action-primary-text: "#016159"
+  action-primary-soft: "#dfefec"
   action-primary-foreground: "#ffffff"
-  field-focus: "#5c9c73"
+  field-focus: "#4c9b92"
   brand: "#20201e"
   brand-hover: "#4b4b47"
   brand-text: "#20201e"
@@ -179,9 +179,9 @@ components:
 
 TASTE.md puts it in one line: On a quiet, neutral ground, colour and motion are spent like money — rarely, deliberately, and only where the eye should go.
 
-ADS 1.0.0 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
+ADS 1.0.4 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
 
-The ground is warm grey and the ink is warm near-black. One hue is spent by default, the Studio green CTA family, and four more carry semantic status. Everything else stays neutral. A consumer product may narrow that further, and one already does: Baby Sentinel drops the green and runs every action on ink.
+The ground is warm grey and the ink is warm near-black. One hue is spent by default, the Studio teal CTA family, and four more carry semantic status. Everything else stays neutral. A consumer product may narrow that further, and one already does: Baby Sentinel drops the teal and runs every action on ink.
 
 **Key characteristics:**
 - Warm-grey canvas, white sheet, quiet tiles. Every surface belongs to exactly one plane
@@ -196,16 +196,16 @@ A warm neutral ground with one CTA hue and four semantic signals. Every value be
 
 ### Primary
 
-The one place a hue is spent by default: the Studio green CTA family.
+The one place a hue is spent by default: the Studio teal CTA family.
 
-**Primary CTA role — restrained Studio green, used sparingly.**
+**Primary CTA role — restrained Studio teal, used sparingly.**
 
-- **action-primary** (`--color-action-primary`, #398457) `bg-action-primary`
-- **action-primary-hover** (`--color-action-primary-hover`, #2b7348) `bg-action-primary-hover`
-- **action-primary-text** (`--color-action-primary-text`, #1f623b) `text-action-primary-text`
-- **action-primary-soft** (`--color-action-primary-soft`, #e2efe5) `bg-action-primary-soft`
+- **action-primary** (`--color-action-primary`, #1c8379) `bg-action-primary`
+- **action-primary-hover** (`--color-action-primary-hover`, #017369) `bg-action-primary-hover`
+- **action-primary-text** (`--color-action-primary-text`, #016159) `text-action-primary-text`
+- **action-primary-soft** (`--color-action-primary-soft`, #dfefec) `bg-action-primary-soft`
 - **action-primary-foreground** (`--color-action-primary-foreground`, #ffffff) `text-action-primary-foreground`
-- **field-focus** (`--color-field-focus`, #5c9c73) `bg-field-focus`
+- **field-focus** (`--color-field-focus`, #4c9b92) `bg-field-focus`
 
 ### Secondary
 
@@ -406,7 +406,7 @@ Hand-rolling a visual control, or importing a UI library at a call site, is neve
 ### Primary Button
 
 - **Export:** `Button`
-- **Character:** variant="solid". The one action a screen wants, in Studio green.
+- **Character:** variant="solid". The one action a screen wants, in Studio teal.
 - **Background:** {colors.action-primary}
 - **Text:** {colors.action-primary-foreground}
 - **Radius:** {rounded.md}

package/components/avatar.js

@@ -2,7 +2,7 @@
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
 import * as f from "react";
 import { cn as s } from "../lib/cn.js";
-const m = {
+const g = {
   xs: "size-5 text-xs",
   sm: "size-8 text-xs",
   md: "size-10 text-xs",
@@ -12,46 +12,46 @@ const m = {
   full: "rounded-full",
   lg: "rounded-lg"
 };
-function v(t) {
-  const e = t.trim().split(/\s+/).filter(Boolean);
+function v(r) {
+  const e = r.trim().split(/\s+/).filter(Boolean);
   return e.length === 0 ? "" : e.length === 1 ? e[0].slice(0, 2).toUpperCase() : (e[0][0] + e[e.length - 1][0]).toUpperCase();
 }
-const g = [
-  "bg-g9 text-action-primary-foreground",
-  "bg-g10 text-action-primary-foreground",
-  "bg-g11 text-action-primary-foreground",
-  "bg-g4 text-g12"
+const m = [
+  "bg-t9 text-action-primary-foreground",
+  "bg-t10 text-action-primary-foreground",
+  "bg-t11 text-action-primary-foreground",
+  "bg-t4 text-t12"
 ];
-function y(t) {
-  const e = Array.from(t).reduce(
-    (r, i) => r + i.charCodeAt(0),
+function y(r) {
+  const e = Array.from(r).reduce(
+    (t, i) => t + i.charCodeAt(0),
     0
   );
-  return g[e % g.length];
+  return m[e % m.length];
 }
 const N = f.forwardRef(
-  ({ className: t, src: e, name: r, size: i = "md", radius: o = "full", ...a }, d) => {
-    const l = r ? v(r) : "";
+  ({ className: r, src: e, name: t, size: i = "md", radius: o = "full", ...a }, d) => {
+    const l = t ? v(t) : "";
     return /* @__PURE__ */ n(
       "span",
       {
         ref: d,
         role: "img",
-        "aria-label": r,
+        "aria-label": t,
         className: s(
           "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-normal",
-          // Images sit on the neutral fill; initials use the ADS green ramp.
-          e || !r ? "bg-fill text-fill-foreground" : y(r),
-          m[i],
+          // Images sit on the neutral fill; initials use the ADS teal ramp.
+          e || !t ? "bg-fill text-fill-foreground" : y(t),
+          g[i],
           p[o],
-          t
+          r
         ),
         ...a,
         children: e ? /* @__PURE__ */ n(
           "img",
           {
             src: e,
-            alt: r ?? "",
+            alt: t ?? "",
             className: "size-full object-cover"
           }
         ) : /* @__PURE__ */ n("span", { "aria-hidden": !0, children: l })
@@ -61,13 +61,13 @@ const N = f.forwardRef(
 );
 N.displayName = "Avatar";
 const A = f.forwardRef(
-  ({ className: t, max: e, size: r = "md", radius: i = "full", children: o, ...a }, d) => {
+  ({ className: r, max: e, size: t = "md", radius: i = "full", children: o, ...a }, d) => {
     const l = f.Children.toArray(o), c = typeof e == "number" ? l.length - e : 0, h = typeof e == "number" ? l.slice(0, e) : l;
     return /* @__PURE__ */ b(
       "div",
       {
         ref: d,
-        className: s("flex items-center", t),
+        className: s("flex items-center", r),
         ...a,
         children: [
           h.map((x, u) => /* @__PURE__ */ n(
@@ -89,7 +89,7 @@ const A = f.forwardRef(
               className: s(
                 "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-normal",
                 "bg-muted text-muted-foreground",
-                m[r],
+                g[t],
                 p[i]
               ),
               children: /* @__PURE__ */ n("span", { "aria-hidden": !0, children: `+${c}` })

package/components/date-range-picker.js

@@ -144,7 +144,7 @@ function se({
                   className: o(
                     "ml-auto inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent text-muted-foreground outline-none",
                     "transition-[background,color,transform] duration-150 ease-out",
-                    "group-hover/field:text-foreground group-focus-within/field:text-g12!",
+                    "group-hover/field:text-foreground group-focus-within/field:text-t12!",
                     "hover:bg-action-primary-soft hover:text-action-primary-text!",
                     "data-[pressed]:scale-[0.97] data-[pressed]:bg-action-primary-soft data-[pressed]:text-action-primary-text!",
                     "motion-reduce:data-[pressed]:scale-100",

package/components/input-field.js

@@ -85,9 +85,9 @@ const U = i.forwardRef(
     ), z = r || n ? (
       // group/field: adornment icons follow the field's interactive states.
       /* @__PURE__ */ C("div", { className: "group/field relative w-full", children: [
-        r && /* @__PURE__ */ t("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-g12! [&_svg]:size-4", children: r }),
+        r && /* @__PURE__ */ t("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: r }),
         k,
-        n && /* @__PURE__ */ t("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-g12! [&_svg]:size-4", children: n })
+        n && /* @__PURE__ */ t("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: n })
       ] })
     ) : k;
     return !v && !d && !o && !m ? z : /* @__PURE__ */ t(

package/components/input.js

@@ -18,7 +18,7 @@ const N = {
     type: s,
     ...c
   }, m) => {
-    const [i, p] = l.useState(!1), n = s === "password", r = u ?? (n ? /* @__PURE__ */ e(
+    const [i, p] = l.useState(!1), t = s === "password", r = u ?? (t ? /* @__PURE__ */ e(
       "button",
       {
         type: "button",
@@ -27,11 +27,11 @@ const N = {
         className: "-mr-1 flex items-center rounded-xs p-1 outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
         children: i ? /* @__PURE__ */ e(x, {}) : /* @__PURE__ */ e(w, {})
       }
-    ) : void 0), t = /* @__PURE__ */ e(
+    ) : void 0), n = /* @__PURE__ */ e(
       "input",
       {
         ref: m,
-        type: n && i ? "text" : s,
+        type: t && i ? "text" : s,
         "aria-invalid": f || void 0,
         className: h(
           b,
@@ -46,14 +46,14 @@ const N = {
         ...c
       }
     );
-    return !o && !r ? t : (
+    return !o && !r ? n : (
       // group/field: adornment icons follow the field's interactive states —
-      // muted at rest, readable on hover, and G12 green while the
-      // control is focused. Important keeps focus green while still hovered.
+      // muted at rest, readable on hover, and T12 teal while the
+      // control is focused. Important keeps focus teal while still hovered.
       /* @__PURE__ */ v("div", { className: "group/field relative w-full", children: [
-        o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-g12! [&_svg]:size-4", children: o }),
-        t,
-        r && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-g12! [&_svg]:size-4", children: r })
+        o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: o }),
+        n,
+        r && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: r })
       ] })
     );
   }

package/components/select.d.ts

@@ -24,7 +24,7 @@ export interface DropdownOptionsProps {
 }
 /**
  * DropdownOptions — the reusable options surface composed by Select.
- * It owns listbox semantics and the brand-green option interaction treatment;
+ * It owns listbox semantics and the brand-teal option interaction treatment;
  * positioning and open/closed state stay with the parent Select.
  */
 export declare const DropdownOptions: React.ForwardRefExoticComponent<DropdownOptionsProps & React.RefAttributes<HTMLUListElement>>;

package/components/select.js

@@ -254,7 +254,7 @@ const re = n.forwardRef(
               {
                 className: b(
                   "size-4 text-muted-foreground transition-[color,transform] duration-150 ease-out motion-reduce:transition-none",
-                  "group-hover/select:text-foreground group-focus/select:text-g12!",
+                  "group-hover/select:text-foreground group-focus/select:text-t12!",
                   r && "rotate-180"
                 ),
                 "aria-hidden": !0

package/llms.txt

@@ -35,12 +35,12 @@ Reference semantic roles, never raw color/dimension literals (ads-lint rejects l
 - `card` — The white working plane that sits on the canvas, and the specimen hairline.
 - `card-foreground` — The white working plane that sits on the canvas, and the specimen hairline.
 - `specimen-stroke` — The white working plane that sits on the canvas, and the specimen hairline.
-- `action-primary` — Primary CTA role — restrained Studio green, used sparingly.
-- `action-primary-foreground` — Primary CTA role — restrained Studio green, used sparingly.
-- `action-primary-hover` — Primary CTA role — restrained Studio green, used sparingly.
-- `action-primary-text` — Primary CTA role — restrained Studio green, used sparingly.
-- `action-primary-soft` — Primary CTA role — restrained Studio green, used sparingly.
-- `field-focus` — Primary CTA role — restrained Studio green, used sparingly.
+- `action-primary` — Primary CTA role — restrained Studio teal, used sparingly.
+- `action-primary-foreground` — Primary CTA role — restrained Studio teal, used sparingly.
+- `action-primary-hover` — Primary CTA role — restrained Studio teal, used sparingly.
+- `action-primary-text` — Primary CTA role — restrained Studio teal, used sparingly.
+- `action-primary-soft` — Primary CTA role — restrained Studio teal, used sparingly.
+- `field-focus` — Primary CTA role — restrained Studio teal, used sparingly.
 - `brand` — Compatibility action role — neutral ink, never a colored primary hue.
 - `brand-foreground` — Compatibility action role — neutral ink, never a colored primary hue.
 - `brand-hover` — Compatibility action role — neutral ink, never a colored primary hue.

package/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "importPath": "@actioneer/ads",
   "styleImport": "@import \"@actioneer/ads/styles.css\";",
   "families": [
@@ -218,7 +218,7 @@
         "text-action-primary",
         "border-action-primary"
       ],
-      "description": "Primary CTA role — restrained Studio green, used sparingly."
+      "description": "Primary CTA role — restrained Studio teal, used sparingly."
     },
     {
       "name": "--color-action-primary-foreground",
@@ -227,7 +227,7 @@
         "text-action-primary-foreground",
         "bg-action-primary-foreground"
       ],
-      "description": "Primary CTA role — restrained Studio green, used sparingly."
+      "description": "Primary CTA role — restrained Studio teal, used sparingly."
     },
     {
       "name": "--color-action-primary-hover",
@@ -237,7 +237,7 @@
         "text-action-primary-hover",
         "border-action-primary-hover"
       ],
-      "description": "Primary CTA role — restrained Studio green, used sparingly."
+      "description": "Primary CTA role — restrained Studio teal, used sparingly."
     },
     {
       "name": "--color-action-primary-text",
@@ -247,7 +247,7 @@
         "text-action-primary-text",
         "border-action-primary-text"
       ],
-      "description": "Primary CTA role — restrained Studio green, used sparingly."
+      "description": "Primary CTA role — restrained Studio teal, used sparingly."
     },
     {
       "name": "--color-action-primary-soft",
@@ -257,7 +257,7 @@
         "text-action-primary-soft",
         "border-action-primary-soft"
       ],
-      "description": "Primary CTA role — restrained Studio green, used sparingly."
+      "description": "Primary CTA role — restrained Studio teal, used sparingly."
     },
     {
       "name": "--color-field-focus",
@@ -267,7 +267,7 @@
         "text-field-focus",
         "border-field-focus"
       ],
-      "description": "Primary CTA role — restrained Studio green, used sparingly."
+      "description": "Primary CTA role — restrained Studio teal, used sparingly."
     },
     {
       "name": "--color-brand",
@@ -799,7 +799,7 @@
           ],
           "default": "solid",
           "options": {
-            "solid": "The restrained green primary CTA; use for the one primary action on a screen, keeping green to roughly 5–10% of the UI.",
+            "solid": "The restrained teal primary CTA; use for the one primary action on a screen, keeping teal to roughly 5–10% of the UI.",
             "secondary": "A standalone neutral action that must still read as a real button (e.g. Cancel beside Save) — more emphasis than outline or ghost.",
             "outline": "Unfilled with a visible border, lighter than secondary but still clearly a button.",
             "ghost": "Unfilled and borderless — the lowest-emphasis button chrome short of link.",
@@ -9669,7 +9669,7 @@
         "required": false,
         "derived": true,
         "isDefault": true,
-        "description": "The restrained green primary CTA; use for the one primary action on a screen, keeping green to roughly 5–10% of the UI."
+        "description": "The restrained teal primary CTA; use for the one primary action on a screen, keeping teal to roughly 5–10% of the UI."
       },
       {
         "id": "state:Button:variant=secondary",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actioneer/ads",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Actioneer Design System 1.0 — React 19 + Tailwind v4 component library.",
   "type": "module",
   "sideEffects": [

package/styles.css

@@ -39,7 +39,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: warm greys + product green
+ *  Palette: warm greys + product teal
  *  Typeface: Aribau Grotesk
  * ============================================================
  */
@@ -93,22 +93,22 @@
 
   /* ---- Foundation palette ----
      Canonical primitive names:
-     G1…G12 = Green · WG1…WG12 = Warm Grey.
+     T1…T12 = Teal · WG1…WG12 = Warm Grey.
      Each ramp progresses from light backgrounds and interactive fills through
      supporting tones to solid colors and accessible text. Neutral UI borders
      are intentionally restricted to WG3–WG5. ---- */
-  --color-g1: #f7f9f7;
-  --color-g2: #eef5f0;
-  --color-g3: #e2efe5;
-  --color-g4: #cce4d2;
-  --color-g5: #b4d8be;
-  --color-g6: #9bcbaa;
-  --color-g7: #7db78f;
-  --color-g8: #5c9c73;
-  --color-g9: #398457;
-  --color-g10: #2b7348;
-  --color-g11: #1f623b;
-  --color-g12: #183c28;
+  --color-t1: #f6f9f9;
+  --color-t2: #edf5f4;
+  --color-t3: #dfefec;
+  --color-t4: #c7e4df;
+  --color-t5: #add8d1;
+  --color-t6: #91cbc2;
+  --color-t7: #6fb7ad;
+  --color-t8: #4c9b92;
+  --color-t9: #1c8379;
+  --color-t10: #017369;
+  --color-t11: #016159;
+  --color-t12: #0f3c37;
 
   --color-wg1: #f5f5f3;
   --color-wg2: #f1f1ef;
@@ -138,21 +138,36 @@
   --color-ng11: var(--color-wg11);
   --color-ng12: var(--color-wg12);
 
+  /* Deprecated Green names resolve step-for-step to the canonical Teal ramp.
+     Keep these aliases so existing consumer utilities (`bg-g9`) still render. */
+  --color-g1: var(--color-t1);
+  --color-g2: var(--color-t2);
+  --color-g3: var(--color-t3);
+  --color-g4: var(--color-t4);
+  --color-g5: var(--color-t5);
+  --color-g6: var(--color-t6);
+  --color-g7: var(--color-t7);
+  --color-g8: var(--color-t8);
+  --color-g9: var(--color-t9);
+  --color-g10: var(--color-t10);
+  --color-g11: var(--color-t11);
+  --color-g12: var(--color-t12);
+
   --color-white: #ffffff;
 
   /* Compatibility aliases preserve the existing ADS utility/API surface. */
-  --color-green-50: var(--color-g1);
-  --color-green-100: var(--color-g2);
-  --color-green-200: var(--color-g3);
-  --color-green-300: var(--color-g4);
-  --color-green-400: var(--color-g5);
-  --color-green-500: var(--color-g6);
-  --color-green-600: var(--color-g7);
-  --color-green-700: var(--color-g8);
-  --color-green-800: var(--color-g9);
-  --color-green-850: var(--color-g10);
-  --color-green-900: var(--color-g11);
-  --color-green-950: var(--color-g12);
+  --color-green-50: var(--color-t1);
+  --color-green-100: var(--color-t2);
+  --color-green-200: var(--color-t3);
+  --color-green-300: var(--color-t4);
+  --color-green-400: var(--color-t5);
+  --color-green-500: var(--color-t6);
+  --color-green-600: var(--color-t7);
+  --color-green-700: var(--color-t8);
+  --color-green-800: var(--color-t9);
+  --color-green-850: var(--color-t10);
+  --color-green-900: var(--color-t11);
+  --color-green-950: var(--color-t12);
 
   --color-grey-50: var(--color-wg1);
   --color-grey-100: var(--color-wg2);
@@ -380,7 +395,7 @@
   --color-card-foreground: var(--card-foreground);
   --color-specimen-stroke: var(--specimen-stroke);
 
-  /* Primary CTA role — restrained Studio green, used sparingly. */
+  /* Primary CTA role — restrained Studio teal, used sparingly. */
   --color-action-primary: var(--action-primary);
   --color-action-primary-foreground: var(--action-primary-foreground);
   --color-action-primary-hover: var(--action-primary-hover);
@@ -497,14 +512,14 @@
   --card: var(--color-white);               /* pure white base */
   --card-foreground: var(--color-wg12);
 
-  /* Studio green is deliberately isolated to the primary CTA role (roughly
+  /* Studio teal is deliberately isolated to the primary CTA role (roughly
      5–10% of a screen). Selection controls keep using neutral `brand` below,
      so tabs, switches, radios, and progress never inherit CTA color. */
-  --action-primary: var(--color-g9);
+  --action-primary: var(--color-t9);
   --action-primary-foreground: var(--color-white);
-  --action-primary-hover: var(--color-g10);
-  --action-primary-text: var(--color-g11);
-  --action-primary-soft: var(--color-g3);
+  --action-primary-hover: var(--color-t10);
+  --action-primary-text: var(--color-t11);
+  --action-primary-soft: var(--color-t3);
 
   /* Neutral action role. The `brand` name remains as a compatibility API,
      and shared selection/control states intentionally remain achromatic. */
@@ -538,7 +553,7 @@
   --menu-stroke: var(--color-wg4);          /* dropdown edge + separator */
   --toast-stroke: var(--color-wg4);         /* toast card edge */
   --tree-stroke: var(--color-wg4);          /* tree connector rail + elbows */
-  --field-focus: var(--color-g8);           /* subtle green focused-control edge */
+  --field-focus: var(--color-t8);           /* subtle teal focused-control edge */
 
   /* Ripple — the appearance wash that radiates from a floating surface's
      origin corner as it opens (Dropdown/Popover/Select/Modal…). A soft ink
@@ -670,12 +685,12 @@
 }
 
 /* Ask landing: Hex's hierarchy translated into ADS tokens. The same quiet
-   texture spans the complete canvas; G2-G8 concentrate focus at the prompt. */
+   texture spans the complete canvas; T2-T8 concentrate focus at the prompt. */
 .ask-empty-state {
   background-color: var(--color-white);
   background-image: radial-gradient(
     circle,
-    color-mix(in oklab, var(--color-g8) 22%, transparent) 0 0.75px,
+    color-mix(in oklab, var(--color-t8) 22%, transparent) 0 0.75px,
     transparent 0.9px
   );
   background-size: 12px 12px;
@@ -684,8 +699,8 @@
 .ask-empty-hero-pattern {
   background-image: radial-gradient(
     ellipse at 50% 52%,
-    color-mix(in oklab, var(--color-g3) 88%, transparent) 0%,
-    color-mix(in oklab, var(--color-g2) 48%, transparent) 38%,
+    color-mix(in oklab, var(--color-t3) 88%, transparent) 0%,
+    color-mix(in oklab, var(--color-t2) 48%, transparent) 38%,
     transparent 68%
   );
 }
@@ -696,8 +711,8 @@
 }
 
 .ask-empty-composer:focus-within [data-slot="aui_composer-shell"] {
-  border-color: var(--color-g8);
-  box-shadow: 0 0 0 3px var(--color-g4), var(--shadow-300);
+  border-color: var(--color-t8);
+  box-shadow: 0 0 0 3px var(--color-t4), var(--shadow-300);
 }
 
 .ask-section-label {

package/theme.css

@@ -8,7 +8,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Palette: warm greys + product green
+ *  Palette: warm greys + product teal
  *  Typeface: Aribau Grotesk
  * ============================================================
  */
@@ -62,22 +62,22 @@
 
   /* ---- Foundation palette ----
      Canonical primitive names:
-     G1…G12 = Green · WG1…WG12 = Warm Grey.
+     T1…T12 = Teal · WG1…WG12 = Warm Grey.
      Each ramp progresses from light backgrounds and interactive fills through
      supporting tones to solid colors and accessible text. Neutral UI borders
      are intentionally restricted to WG3–WG5. ---- */
-  --color-g1: #f7f9f7;
-  --color-g2: #eef5f0;
-  --color-g3: #e2efe5;
-  --color-g4: #cce4d2;
-  --color-g5: #b4d8be;
-  --color-g6: #9bcbaa;
-  --color-g7: #7db78f;
-  --color-g8: #5c9c73;
-  --color-g9: #398457;
-  --color-g10: #2b7348;
-  --color-g11: #1f623b;
-  --color-g12: #183c28;
+  --color-t1: #f6f9f9;
+  --color-t2: #edf5f4;
+  --color-t3: #dfefec;
+  --color-t4: #c7e4df;
+  --color-t5: #add8d1;
+  --color-t6: #91cbc2;
+  --color-t7: #6fb7ad;
+  --color-t8: #4c9b92;
+  --color-t9: #1c8379;
+  --color-t10: #017369;
+  --color-t11: #016159;
+  --color-t12: #0f3c37;
 
   --color-wg1: #f5f5f3;
   --color-wg2: #f1f1ef;
@@ -107,21 +107,36 @@
   --color-ng11: var(--color-wg11);
   --color-ng12: var(--color-wg12);
 
+  /* Deprecated Green names resolve step-for-step to the canonical Teal ramp.
+     Keep these aliases so existing consumer utilities (`bg-g9`) still render. */
+  --color-g1: var(--color-t1);
+  --color-g2: var(--color-t2);
+  --color-g3: var(--color-t3);
+  --color-g4: var(--color-t4);
+  --color-g5: var(--color-t5);
+  --color-g6: var(--color-t6);
+  --color-g7: var(--color-t7);
+  --color-g8: var(--color-t8);
+  --color-g9: var(--color-t9);
+  --color-g10: var(--color-t10);
+  --color-g11: var(--color-t11);
+  --color-g12: var(--color-t12);
+
   --color-white: #ffffff;
 
   /* Compatibility aliases preserve the existing ADS utility/API surface. */
-  --color-green-50: var(--color-g1);
-  --color-green-100: var(--color-g2);
-  --color-green-200: var(--color-g3);
-  --color-green-300: var(--color-g4);
-  --color-green-400: var(--color-g5);
-  --color-green-500: var(--color-g6);
-  --color-green-600: var(--color-g7);
-  --color-green-700: var(--color-g8);
-  --color-green-800: var(--color-g9);
-  --color-green-850: var(--color-g10);
-  --color-green-900: var(--color-g11);
-  --color-green-950: var(--color-g12);
+  --color-green-50: var(--color-t1);
+  --color-green-100: var(--color-t2);
+  --color-green-200: var(--color-t3);
+  --color-green-300: var(--color-t4);
+  --color-green-400: var(--color-t5);
+  --color-green-500: var(--color-t6);
+  --color-green-600: var(--color-t7);
+  --color-green-700: var(--color-t8);
+  --color-green-800: var(--color-t9);
+  --color-green-850: var(--color-t10);
+  --color-green-900: var(--color-t11);
+  --color-green-950: var(--color-t12);
 
   --color-grey-50: var(--color-wg1);
   --color-grey-100: var(--color-wg2);
@@ -349,7 +364,7 @@
   --color-card-foreground: var(--card-foreground);
   --color-specimen-stroke: var(--specimen-stroke);
 
-  /* Primary CTA role — restrained Studio green, used sparingly. */
+  /* Primary CTA role — restrained Studio teal, used sparingly. */
   --color-action-primary: var(--action-primary);
   --color-action-primary-foreground: var(--action-primary-foreground);
   --color-action-primary-hover: var(--action-primary-hover);
@@ -466,14 +481,14 @@
   --card: var(--color-white);               /* pure white base */
   --card-foreground: var(--color-wg12);
 
-  /* Studio green is deliberately isolated to the primary CTA role (roughly
+  /* Studio teal is deliberately isolated to the primary CTA role (roughly
      5–10% of a screen). Selection controls keep using neutral `brand` below,
      so tabs, switches, radios, and progress never inherit CTA color. */
-  --action-primary: var(--color-g9);
+  --action-primary: var(--color-t9);
   --action-primary-foreground: var(--color-white);
-  --action-primary-hover: var(--color-g10);
-  --action-primary-text: var(--color-g11);
-  --action-primary-soft: var(--color-g3);
+  --action-primary-hover: var(--color-t10);
+  --action-primary-text: var(--color-t11);
+  --action-primary-soft: var(--color-t3);
 
   /* Neutral action role. The `brand` name remains as a compatibility API,
      and shared selection/control states intentionally remain achromatic. */
@@ -507,7 +522,7 @@
   --menu-stroke: var(--color-wg4);          /* dropdown edge + separator */
   --toast-stroke: var(--color-wg4);         /* toast card edge */
   --tree-stroke: var(--color-wg4);          /* tree connector rail + elbows */
-  --field-focus: var(--color-g8);           /* subtle green focused-control edge */
+  --field-focus: var(--color-t8);           /* subtle teal focused-control edge */
 
   /* Ripple — the appearance wash that radiates from a floating surface's
      origin corner as it opens (Dropdown/Popover/Select/Modal…). A soft ink