@zaip-ai/cli 3.3.0 → 3.5.0

package/templates/.agents/design/apps/catalog/src/components/DashboardFiltersSpecimen.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Card } from "./Primitives.js";
+
+export const dashboardFilterFixtures = [
+  { name: "Operação", labels: ["Busca", "Status", "Risco", "Origem"] },
+  {
+    name: "Custos",
+    labels: [
+      "Buscar custos",
+      "Provider",
+      "Agente",
+      "Modelo",
+      "Status",
+      "Prioridade",
+      "Risco",
+      "Fase",
+      "Entrada",
+      "Trabalho",
+    ],
+  },
+] as const;
+/** Native catalog adapter: business modules keep the query and lifecycle contracts. */
+export function DashboardFiltersSpecimen({
+  fixture = dashboardFilterFixtures[0],
+}: {
+  fixture?: (typeof dashboardFilterFixtures)[number];
+}) {
+  const [values, setValues] = useState<Record<string, string>>({});
+  return (
+    <Card>
+      <h3>{fixture.name}</h3>
+      <details open>
+        <summary>Filtros de {fixture.name.toLowerCase()}</summary>
+        {fixture.labels.map((label) => (
+          <label key={label} style={{ display: "block", marginBlock: 8 }}>
+            {label}
+            {label.startsWith("Busca") ? (
+              <input
+                aria-label={label}
+                value={values[label] ?? ""}
+                onChange={(e) => setValues({ ...values, [label]: e.target.value })}
+              />
+            ) : (
+              <select
+                aria-label={label}
+                value={values[label] ?? ""}
+                onChange={(e) => setValues({ ...values, [label]: e.target.value })}
+              >
+                <option value="">Todos</option>
+                <option value="example">{label === "Status" ? "Bloqueado" : "Exemplo"}</option>
+              </select>
+            )}
+          </label>
+        ))}
+        <button type="button" onClick={() => setValues({})}>
+          Limpar filtros
+        </button>
+      </details>
+    </Card>
+  );
+}

package/templates/.agents/design/apps/catalog/src/components/Primitives.tsx

@@ -34,6 +34,30 @@ export function Card({ children, accent = false }: { children: ReactNode; accent
   return <article className={accent ? "card card-accent" : "card"}>{children}</article>;
 }
 
+export function EditorialHero({
+  eyebrow,
+  title,
+  description,
+  children,
+}: {
+  eyebrow?: string;
+  title: string;
+  description: string;
+  children?: ReactNode;
+}) {
+  return (
+    <section className="editorial-hero">
+      <div className="editorial-hero-copy">
+        {eyebrow ? <p className="eyebrow">{eyebrow}</p> : null}
+        <h2>{title}</h2>
+        <p>{description}</p>
+        {children ? <div className="editorial-hero-actions">{children}</div> : null}
+      </div>
+      <div aria-hidden="true" className="editorial-hero-orbit" />
+    </section>
+  );
+}
+
 export function Metric({ label, value, change }: { label: string; value: string; change: string }) {
   return (
     <Card>

package/templates/.agents/design/apps/catalog/src/components/StackVersionFieldSpecimen.tsx

@@ -0,0 +1,70 @@
+import { Card } from "./Primitives.js";
+
+type VersionKind = "exact" | "reference";
+
+export type StackVersionFieldFixture = {
+  name: string;
+  technology: string;
+  value: string;
+  kind: VersionKind;
+  source: string;
+};
+
+/** Stable native adapter for the Setup Project version-or-reference input contract. */
+export const stackVersionFieldFixtures: readonly StackVersionFieldFixture[] = [
+  {
+    name: "Versão exata",
+    technology: "TypeScript",
+    value: "7.0.2",
+    kind: "exact",
+    source: "npm:typescript",
+  },
+  {
+    name: "Serviço em nuvem",
+    technology: "PostgreSQL via Supabase",
+    value: "Serviço em nuvem",
+    kind: "reference",
+    source: "service:supabase-postgresql",
+  },
+  {
+    name: "Hospedagem em nuvem",
+    technology: "Hostinger VPS",
+    value: "Serviço em nuvem",
+    kind: "reference",
+    source: "provider:hostinger-vps",
+  },
+] as const;
+
+export function StackVersionFieldSpecimen({
+  fixture,
+}: {
+  fixture: StackVersionFieldFixture;
+}) {
+  const isReference = fixture.kind === "reference";
+  const label = isReference ? "Referência descritiva" : "Versão exata";
+
+  return (
+    <Card>
+      <div className="stack-version-field-heading">
+        <div>
+          <p className="metric-label">{label}</p>
+          <h3>{fixture.technology}</h3>
+        </div>
+        <span className={`stack-version-kind is-${fixture.kind}`}>{label}</span>
+      </div>
+      <label className="stack-version-field">
+        <span>{isReference ? "Versão atual ou referência" : "Versão exata"}</span>
+        <input
+          aria-describedby={`stack-version-source-${fixture.name}`}
+          className={isReference ? "is-reference-value" : undefined}
+          defaultValue={fixture.value}
+          inputMode={isReference ? "text" : "decimal"}
+          readOnly
+        />
+      </label>
+      <p className="stack-version-source" id={`stack-version-source-${fixture.name}`}>
+        {fixture.source}
+      </p>
+    </Card>
+  );
+}

package/templates/.agents/design/apps/catalog/src/components/WorkspaceStatusSpecimen.tsx

@@ -0,0 +1,42 @@
+import { Card } from "./Primitives.js";
+
+export const workspaceStatusFixtures = [
+  { name: "Configuração", kind: "settings", message: "C:/projetos/zaip-growth" },
+  { name: "Ausente", kind: "warning", message: "Lifecycle não inicializado" },
+  { name: "Inválido", kind: "warning", message: "Manifesto do lifecycle inválido" },
+  {
+    name: "Indisponível",
+    kind: "warning",
+    message: "Não foi possível consultar a saúde do Dashboard",
+  },
+] as const;
+
+/** Native adapter: the catalog cannot depend on the Dashboard application. */
+export function WorkspaceStatusSpecimen({
+  fixture = workspaceStatusFixtures[0],
+}: {
+  fixture?: (typeof workspaceStatusFixtures)[number];
+}) {
+  if (fixture.kind === "settings") {
+    return (
+      <Card>
+        <h3>{fixture.name}</h3>
+        <section aria-label="Configuração do projeto">
+          <strong>Caminho do projeto</strong>
+          <p>
+            <code style={{ overflowWrap: "anywhere" }}>{fixture.message}</code>
+          </p>
+        </section>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <h3>{fixture.name}</h3>
+      <aside aria-label="Saúde do Dashboard" style={{ overflowWrap: "anywhere" }}>
+        <p>{fixture.message}</p>
+      </aside>
+    </Card>
+  );
+}

package/templates/.agents/design/apps/catalog/src/design-contract.test.ts

@@ -7,19 +7,28 @@ const designRoot = resolve(import.meta.dirname, "../../..");
 
 describe("design contract", () => {
   it("keeps structured tokens aligned with DESIGN.md frontmatter", async () => {
-    const [markdown, tokensSource, componentsPage, primitives, stories, app, ...styles] =
-      await Promise.all([
-        readFile(resolve(designRoot, "DESIGN.md"), "utf8"),
-        readFile(resolve(designRoot, "tokens.json"), "utf8"),
-        readFile(resolve(import.meta.dirname, "pages/ComponentsPage.tsx"), "utf8"),
-        readFile(resolve(import.meta.dirname, "components/Primitives.tsx"), "utf8"),
-        readFile(resolve(import.meta.dirname, "stories/Components.stories.tsx"), "utf8"),
-        readFile(resolve(import.meta.dirname, "App.tsx"), "utf8"),
-        readFile(resolve(import.meta.dirname, "styles.css"), "utf8"),
-        readFile(resolve(import.meta.dirname, "styles/catalog.css"), "utf8"),
-        readFile(resolve(import.meta.dirname, "styles/design-system.css"), "utf8"),
-        readFile(resolve(import.meta.dirname, "styles/components.css"), "utf8"),
-      ]);
+    const [
+      markdown,
+      tokensSource,
+      designSystemPage,
+      componentsPage,
+      primitives,
+      stories,
+      app,
+      ...styles
+    ] = await Promise.all([
+      readFile(resolve(designRoot, "DESIGN.md"), "utf8"),
+      readFile(resolve(designRoot, "tokens.json"), "utf8"),
+      readFile(resolve(import.meta.dirname, "pages/DesignSystemPage.tsx"), "utf8"),
+      readFile(resolve(import.meta.dirname, "pages/ComponentsPage.tsx"), "utf8"),
+      readFile(resolve(import.meta.dirname, "components/Primitives.tsx"), "utf8"),
+      readFile(resolve(import.meta.dirname, "stories/Components.stories.tsx"), "utf8"),
+      readFile(resolve(import.meta.dirname, "App.tsx"), "utf8"),
+      readFile(resolve(import.meta.dirname, "styles.css"), "utf8"),
+      readFile(resolve(import.meta.dirname, "styles/catalog.css"), "utf8"),
+      readFile(resolve(import.meta.dirname, "styles/design-system.css"), "utf8"),
+      readFile(resolve(import.meta.dirname, "styles/components.css"), "utf8"),
+    ]);
     const css = styles.join("\n");
     const match = /^---\n([\s\S]+?)\n---/.exec(markdown);
     expect(match?.[1]).toBeDefined();
@@ -30,6 +39,7 @@ describe("design contract", () => {
     expect(tokens.dark).toEqual(design.dark);
     expect(tokens.effects).toEqual(design.effects);
     expect(tokens.neutral).toEqual(design.neutral);
+    expect(tokens.typography).toEqual(design.typography);
     expect(tokens.rounded).toEqual(design.rounded);
     expect(tokens.spacing).toEqual(design.spacing);
     for (const value of Object.values(tokens.colors as Record<string, string>)) {
@@ -58,5 +68,9 @@ describe("design contract", () => {
       expect(componentsPage).toContain(`<${specimen}`);
       expect(stories).toContain(`<${specimen}`);
     }
+    expect(primitives).toContain("function EditorialHero");
+    expect(designSystemPage).toContain("<EditorialHero");
+    expect(componentsPage).toContain("<EditorialHero");
+    expect(stories).toContain("<EditorialHero");
   });
 });

package/templates/.agents/design/apps/catalog/src/pages/ComponentsPage.tsx

@@ -4,6 +4,10 @@ import {
   CostPopulationSpecimen,
   costPopulationFixtures,
 } from "../components/CostPopulationSpecimen.js";
+import {
+  DashboardFiltersSpecimen,
+  dashboardFilterFixtures,
+} from "../components/DashboardFiltersSpecimen.js";
 import {
   EstimatedCostSpecimen,
   estimatedCostFixtures,
@@ -15,6 +19,7 @@ import {
   ChartPanel,
   DataTable,
   DialogSpecimen,
+  EditorialHero,
   Field,
   FilterForm,
   Metric,
@@ -25,6 +30,14 @@ import {
   ProjectStatusSpecimen,
   projectStatusFixtures,
 } from "../components/ProjectStatusSpecimen.js";
+import {
+  StackVersionFieldSpecimen,
+  stackVersionFieldFixtures,
+} from "../components/StackVersionFieldSpecimen.js";
+import {
+  WorkspaceStatusSpecimen,
+  workspaceStatusFixtures,
+} from "../components/WorkspaceStatusSpecimen.js";
 
 const dashboardFamilies = [
   ["Dialogs e popups", "TaskDetailsDialog, TraceStageDialog", "Foco, contexto e saída explícita"],
@@ -44,6 +57,35 @@ export function ComponentsPage() {
         title="Components"
         description="Famílias reais do dashboard representadas por espécimes compartilhados com o Storybook. O catálogo documenta o contrato; os componentes de negócio continuam em seus módulos."
       />
+      <Section
+        title="Filtros do Dashboard"
+        description="Operação expõe busca, status, risco e origem no cabeçalho visível. Custos mantém seus filtros dimensionais acessíveis na área integrada; Desenvolvedores usa somente o período. Adaptadores nativos com limpeza e foco de teclado."
+      >
+        {dashboardFilterFixtures.map((fixture) => (
+          <DashboardFiltersSpecimen key={fixture.name} fixture={fixture} />
+        ))}
+      </Section>
+      <Section
+        title="Hero editorial"
+        description="Componente público para promessa, explicação e até duas ações; a variação de ação secundária permanece legível sobre navy."
+      >
+        <EditorialHero
+          eyebrow="Componente central"
+          title="Uma direção pública que chama para a ação."
+          description="Use em abertura de páginas de marca; mantenha a prova detalhada e a lógica comercial no conteúdo local."
+        >
+          <Button>Ação principal</Button>
+          <Button variant="secondary">Ação secundária</Button>
+        </EditorialHero>
+      </Section>
+      <Section
+        title="Identidade e saúde do Dashboard"
+        description="O caminho absoluto fica restrito à Configuração do projeto. A superfície global aparece somente para avisos de saúde; lifecycle ausente ou inválido impede a exibição de zeros como dados válidos."
+      >
+        {workspaceStatusFixtures.map((fixture) => (
+          <WorkspaceStatusSpecimen key={fixture.name} fixture={fixture} />
+        ))}
+      </Section>
       <Section
         title="Dialogs e popups"
         description="Superfícies focadas com nome acessível, contexto, Escape e ação de fechamento."
@@ -71,6 +113,16 @@ export function ComponentsPage() {
           </div>
         ))}
       </Section>
+      <Section
+        title="Versões e referências da stack"
+        description="No Setup Project, versões exatas usam valor técnico curto. Serviços em nuvem e capacidade de hospedagem usam referência descritiva, identificada por texto e tratamento visual próprio — sem parecer uma versão numérica."
+      >
+        <div className="stack-version-field-grid">
+          {stackVersionFieldFixtures.map((fixture) => (
+            <StackVersionFieldSpecimen fixture={fixture} key={fixture.name} />
+          ))}
+        </div>
+      </Section>
       <Section
         title="Custo estimado compacto"
         description="Adaptador nativo: título e taxas compactos; cobertura parcial fica na ajuda acessível. Ausência não vira zero nem média de uma população incompleta."

package/templates/.agents/design/apps/catalog/src/pages/DesignSystemPage.tsx

@@ -1,10 +1,11 @@
 import { PageIntro, Section } from "../components/CatalogShell.js";
-import { Badge, Button, Card, Field } from "../components/Primitives.js";
+import { Badge, Button, Card, EditorialHero, Field } from "../components/Primitives.js";
 
 const primaryColors = [
   ["Primary", "#00B0F0", "Ação, foco e identidade"],
   ["Primary strong", "#018abb", "Hover e ênfase reforçada"],
   ["Primary ink", "#006b91", "Texto e ícones sobre fundos claros"],
+  ["Primary soft", "#dffcff", "Base breve para badge e ênfase"],
 ] as const;
 
 const secondaryColors = [
@@ -87,6 +88,19 @@ export function DesignSystemPage() {
           ))}
         </div>
       </Section>
+      <Section
+        title="Hero editorial público"
+        description="Hero de alto contraste para comunicar uma promessa verificável, com ações claras e espaço para leitura."
+      >
+        <EditorialHero
+          eyebrow="Direção pública"
+          title="Mais contraste para decisões mais claras."
+          description="Navy estabelece profundidade; tipografia expressiva e CTAs pill deixam a próxima ação inequívoca."
+        >
+          <Button>Começar agora</Button>
+          <Button variant="secondary">Entender o sistema</Button>
+        </EditorialHero>
+      </Section>
       <Section
         title="Tipografia"
         description="Hierarquia compacta para produto e escala expressiva para superfícies públicas."

package/templates/.agents/design/apps/catalog/src/stories/Components.stories.tsx

@@ -14,6 +14,7 @@ import {
   ChartPanel,
   DataTable,
   DialogSpecimen,
+  EditorialHero,
   FilterForm,
   Metric,
   StateGallery,
@@ -22,6 +23,10 @@ import {
   ProjectStatusSpecimen,
   projectStatusFixtures,
 } from "../components/ProjectStatusSpecimen.js";
+import {
+  StackVersionFieldSpecimen,
+  stackVersionFieldFixtures,
+} from "../components/StackVersionFieldSpecimen.js";
 import { ComponentsPage } from "../pages/ComponentsPage.js";
 
 const meta = {
@@ -75,6 +80,23 @@ export const DialogsAndPopups: Story = {
   render: () => <DialogSpecimen />,
 };
 
+export const EditorialHeroes: Story = {
+  render: () => (
+    <EditorialHero
+      eyebrow="Componente central"
+      title="Contraste e direção para páginas públicas."
+      description="Mantenha uma promessa verificável e no máximo duas ações, inclusive em telas estreitas."
+    >
+      <button className="button button-primary" type="button">
+        Ação principal
+      </button>
+      <button className="button button-secondary" type="button">
+        Ação secundária
+      </button>
+    </EditorialHero>
+  ),
+};
+
 export const CardsAndMetrics: Story = {
   render: () => (
     <div className="metric-grid">
@@ -95,6 +117,16 @@ export const ProjectInstallationStatus: Story = {
   ),
 };
 
+export const StackVersionsAndReferences: Story = {
+  render: () => (
+    <div className="stack-version-field-grid">
+      {stackVersionFieldFixtures.map((fixture) => (
+        <StackVersionFieldSpecimen fixture={fixture} key={fixture.name} />
+      ))}
+    </div>
+  ),
+};
+
 export const Tables: Story = {
   render: () => <DataTable />,
 };

package/templates/.agents/design/apps/catalog/src/stories/DashboardFilters.stories.tsx

@@ -0,0 +1,7 @@
+import {
+  DashboardFiltersSpecimen,
+  dashboardFilterFixtures,
+} from "../components/DashboardFiltersSpecimen.js";
+export default { title: "Components/Filtros do Dashboard", component: DashboardFiltersSpecimen };
+export const Operations = { args: { fixture: dashboardFilterFixtures[0] } };
+export const Costs = { args: { fixture: dashboardFilterFixtures[1] } };

package/templates/.agents/design/apps/catalog/src/stories/WorkspaceStatus.stories.tsx

@@ -0,0 +1,12 @@
+import {
+  WorkspaceStatusSpecimen,
+  workspaceStatusFixtures,
+} from "../components/WorkspaceStatusSpecimen.js";
+export default {
+  title: "Components/Identidade e saúde do Dashboard",
+  component: WorkspaceStatusSpecimen,
+};
+export const ProjectSettings = { args: { fixture: workspaceStatusFixtures[0] } };
+export const Missing = { args: { fixture: workspaceStatusFixtures[1] } };
+export const Invalid = { args: { fixture: workspaceStatusFixtures[2] } };
+export const Unavailable = { args: { fixture: workspaceStatusFixtures[3] } };

package/templates/.agents/design/apps/catalog/src/styles/components.css

@@ -1,3 +1,4 @@
+@import "./stack-version-field.css";
 .card {
   border: 1px solid var(--border);
   border-radius: 24px;
@@ -6,7 +7,74 @@
   box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
 }
 .card-accent {
-  background: linear-gradient(180deg, #f3feff 0%, #ffffff 100%);
+  background: linear-gradient(180deg, var(--primary-soft) 0%, #ffffff 100%);
+}
+.editorial-hero {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  min-height: 380px;
+  align-items: center;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 32px;
+  padding: clamp(32px, 7vw, 76px);
+  background:
+    radial-gradient(circle at 82% 20%, rgba(0, 176, 240, 0.24), transparent 24%),
+    linear-gradient(135deg, var(--secondary) 0%, var(--secondary-elevated) 100%);
+  color: #f1f5f9;
+  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
+}
+.editorial-hero-copy {
+  position: relative;
+  z-index: 1;
+  max-width: 720px;
+}
+.editorial-hero .eyebrow {
+  color: #72f4fb;
+}
+.editorial-hero h2 {
+  max-width: 680px;
+  margin: 14px 0 18px;
+  font-family: Inter, Poppins, ui-sans-serif, system-ui, sans-serif;
+  font-size: clamp(2.5rem, 6vw, 4.25rem);
+  font-weight: 650;
+  line-height: 1.05;
+  letter-spacing: -0.05em;
+}
+.editorial-hero-copy > p:not(.eyebrow) {
+  max-width: 620px;
+  margin: 0;
+  color: #cbd5e1;
+  font-size: clamp(1rem, 2vw, 1.2rem);
+  line-height: 1.65;
+}
+.editorial-hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 30px;
+}
+.editorial-hero .button-secondary {
+  border-color: rgba(255, 255, 255, 0.3);
+  color: #f1f5f9;
+}
+.editorial-hero .button-secondary:hover {
+  border-color: var(--primary);
+  background: rgba(0, 176, 240, 0.12);
+}
+.editorial-hero-orbit {
+  position: absolute;
+  z-index: 0;
+  width: min(48vw, 540px);
+  aspect-ratio: 1;
+  right: -12%;
+  bottom: -42%;
+  border: 1px solid rgba(114, 244, 251, 0.28);
+  border-radius: 50%;
+  box-shadow:
+    0 0 0 46px rgba(0, 176, 240, 0.05),
+    0 0 0 112px rgba(0, 176, 240, 0.035);
 }
 .card h3 {
   margin: 24px 0 8px;
@@ -201,7 +269,7 @@ tbody tr:last-child td {
   height: 64px;
   place-items: center;
   border-radius: 24px;
-  background: #dffcff;
+  background: var(--primary-soft);
   color: #006b91;
   font-size: 2rem;
 }
@@ -404,6 +472,17 @@ tbody tr:last-child td {
 }
 
 @media (max-width: 560px) {
+  .editorial-hero {
+    min-height: 0;
+    border-radius: 24px;
+  }
+  .editorial-hero-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+  .editorial-hero-actions .button {
+    width: 100%;
+  }
   .filter-form {
     grid-template-columns: 1fr;
   }
@@ -420,8 +499,10 @@ tbody tr:last-child td {
     width: 100%;
   }
 }
-
 @media (prefers-reduced-motion: reduce) {
+  .editorial-hero-orbit {
+    box-shadow: none;
+  }
   .loading-spinner {
     animation: none;
     border-color: var(--primary);

package/templates/.agents/design/apps/catalog/src/styles/stack-version-field.css

@@ -0,0 +1,17 @@
+.stack-version-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
+.stack-version-field-grid > .card:last-child { grid-column: span 2; }
+.stack-version-field-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.stack-version-field-heading h3 { margin: 8px 0 0; font-size: 1.1rem; }
+.stack-version-kind { flex: 0 0 auto; border-radius: 999px; padding: 5px 8px; font-size: 0.72rem; font-weight: 700; }
+.stack-version-kind.is-exact { background: #f0fdf4; color: #166534; }
+.stack-version-kind.is-reference { background: var(--primary-soft); color: var(--primary-ink); }
+.stack-version-field { display: grid; gap: 8px; margin-top: 18px; color: var(--text); font-size: 0.82rem; font-weight: 700; }
+.stack-version-field input { width: 100%; min-height: 44px; border: 1px solid #cbd5e1; border-radius: 10px; padding: 9px 10px; background: var(--surface-muted); color: var(--text); font: inherit; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; }
+.stack-version-field input.is-reference-value { border-color: #9edcf2; background: #effaff; color: #075985; font-weight: 650; }
+.stack-version-field input:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 38%, transparent); outline-offset: 2px; }
+.stack-version-source { margin: 10px 0 0; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; overflow-wrap: anywhere; }
+
+@media (max-width: 720px) {
+  .stack-version-field-grid,
+  .stack-version-field-grid > .card:last-child { grid-template-columns: 1fr; grid-column: auto; }
+}

package/templates/.agents/design/apps/catalog/src/styles.css

@@ -11,7 +11,9 @@
   --primary: #00b0f0;
   --primary-strong: #018abb;
   --primary-ink: #006b91;
+  --primary-soft: #dffcff;
   --secondary: #0a0e17;
+  --secondary-elevated: #111827;
   --surface: #ffffff;
   --surface-muted: #f5f7fb;
   --text: #0f172a;

package/templates/.agents/design/packages/local-runtime/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaip-ai/design-local-runtime",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "private": true,
   "type": "module",
   "scripts": {

package/templates/.agents/design/tokens.json

@@ -5,7 +5,9 @@
     "primary": "#00B0F0",
     "primary-strong": "#018abb",
     "primary-ink": "#006b91",
+    "primary-soft": "#dffcff",
     "secondary": "#0a0e17",
+    "secondary-elevated": "#111827",
     "surface": "#ffffff",
     "surface-muted": "#f5f7fb",
     "text": "#0f172a",
@@ -43,6 +45,36 @@
     "canvas": "#f5f7fb",
     "white": "#ffffff"
   },
+  "typography": {
+    "display": {
+      "fontFamily": "Inter, Poppins, ui-sans-serif, system-ui, sans-serif",
+      "fontSize": "clamp(2.5rem, 6vw, 4.25rem)",
+      "fontWeight": "650",
+      "lineHeight": "1.05",
+      "letterSpacing": "-0.05em"
+    },
+    "heading": {
+      "fontFamily": "Inter, Poppins, ui-sans-serif, system-ui, sans-serif",
+      "fontSize": "clamp(1.75rem, 4vw, 2.5rem)",
+      "fontWeight": "650",
+      "lineHeight": "1.15",
+      "letterSpacing": "-0.035em"
+    },
+    "body": {
+      "fontFamily": "Inter, ui-sans-serif, system-ui, sans-serif",
+      "fontSize": "1rem",
+      "fontWeight": "400",
+      "lineHeight": "1.65",
+      "letterSpacing": "0"
+    },
+    "label": {
+      "fontFamily": "Inter, ui-sans-serif, system-ui, sans-serif",
+      "fontSize": "0.75rem",
+      "fontWeight": "700",
+      "lineHeight": "1.3",
+      "letterSpacing": "0.12em"
+    }
+  },
   "rounded": {
     "sm": "8px",
     "md": "16px",