diff --git a/.npmrc b/.npmrc
index 6df6def..031ca5d 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,7 +1,7 @@
 @etus:registry=https://registry.npmjs.org/
 //registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}
-# Resolve internal workspace deps (e.g. create-bhono -> @etus/bhono) to the local
-# package instead of the registry. Without this, a release bump points the dep at
-# a version that isn't published yet, so `pnpm install` can't resolve it and every
-# release stalls on the lockfile (ERR_PNPM_NO_MATCHING_VERSION / OUTDATED_LOCKFILE).
-link-workspace-packages=true
+# Internal monorepo deps (create-bhono -> @etus/bhono) use the `workspace:`
+# protocol (see packages/create-bhono/package.json) so they always resolve to the
+# local package, never the registry — @etus/bhono is unpublished. This replaces the
+# deprecated `link-workspace-packages`, which pnpm 10 ignores: after a release bump
+# any re-resolution 404'd on the registry instead of linking the workspace package.
diff --git a/CLAUDE.md b/CLAUDE.md
index 1a38c9f..31b53b5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -222,6 +222,16 @@ Defined in `config/wrangler.json`:
 2. Use `createFileRoute` from TanStack Router
 3. Access auth via `useAuth()` hook
 
+### Frontend UI — Design System (Seven)
+
+Every UI element comes from **Seven** (`@etus/seven-react`, which re-exports `@etus/ui` + `@etus/tokens`). Do not build controls with raw HTML or local UI components.
+
+- **Components:** `import { Button, TextInput, Card, Dialog, Switch, Checkbox, Divider, SkeletonLoader, Toaster, Sidebar } from '@etus/seven-react'`. Names are not shadcn's (e.g. `TextInput` not `Input`; `Divider` not `Separator`) — verify exports at **runtime** (`Object.keys(await import('@etus/ui'))`), not from the `.d.ts`.
+- **Tokens:** `@etus/tokens` is the source for color/radius/spacing/typography (via `@import "@etus/seven-react/styles.css"` in `src/client/index.css`). The local `@theme` only keeps what Seven does not provide.
+- **Brand (`DESIGN.md` in the Seven repo):** Inter + JetBrains Mono; only `mint`/`lime` are brand (fuchsia is charts-only); no decoration; sentence-case pt-BR; Tailwind v4 type hints (`bg-[color:var(--token)]`).
+- **Guard-rail:** ESLint bans raw `<button>/<input>/<select>/<textarea>` in routes (`config/eslint.config.js`). Icons via `lucide-react`.
+- **Validation:** compare each screen against the published showcase at `seven.etus.io` (not only the code). Reference source: `~/Dropbox/aa-projects/Github/seven` (`apps/showcase`, `DESIGN.md`).
+
 ### Database Changes
 
 1. Update `schema.sql`
diff --git a/config/eslint.config.js b/config/eslint.config.js
index 7c72858..b9278b9 100644
--- a/config/eslint.config.js
+++ b/config/eslint.config.js
@@ -34,6 +34,7 @@ export default tseslint.config(
       "**/.claude/**",
       "**/.agents/**",
       "**/.codex/**",
+      "**/.remember/**",
       "**/e2e/**",
       "**/packages/**",
       "**/.pnpm*",
@@ -311,6 +312,40 @@ export default tseslint.config(
     },
   },
 
+  // ==============================================
+  // DS GUARD-RAIL: app screens use Seven controls, not raw HTML
+  // (every interactive control must come from @etus/seven-react)
+  // ==============================================
+  {
+    files: ["src/client/routes/**/*.{ts,tsx}", "src/client/components/**/*.{ts,tsx}"],
+    ignores: ["src/client/components/icons.tsx"],
+    rules: {
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "JSXOpeningElement[name.name='button']",
+          message:
+            "Use Button from '@etus/seven-react' instead of a raw <button>.",
+        },
+        {
+          selector: "JSXOpeningElement[name.name='input']",
+          message:
+            "Use TextInput/Checkbox/Switch from '@etus/seven-react' instead of a raw <input>.",
+        },
+        {
+          selector: "JSXOpeningElement[name.name='select']",
+          message:
+            "Use Select/NativeSelect from '@etus/seven-react' instead of a raw <select>.",
+        },
+        {
+          selector: "JSXOpeningElement[name.name='textarea']",
+          message:
+            "Use Textarea from '@etus/seven-react' instead of a raw <textarea>.",
+        },
+      ],
+    },
+  },
+
   // === TEST FILES - DISABLE TYPE-CHECKED RULES ===
   {
     files: [
diff --git a/docs/ets/state/coverage-matrix.yaml b/docs/ets/state/coverage-matrix.yaml
new file mode 100644
index 0000000..9ce57d3
--- /dev/null
+++ b/docs/ets/state/coverage-matrix.yaml
@@ -0,0 +1,58 @@
+# Coverage matrix — auditoria de fidelidade ao Seven DS (só-código)
+# Gerado: 2026-06-24 | ref: @etus/ui@0.4.0-beta.4 / @etus/tokens@0.4.0-beta.3
+# Reports por tela: docs/ets/state/reports/screens/<tela>.md
+
+meta:
+  screens: 11
+  avg_fidelity: 0.70
+  user_actions: { total: 93, wired: 53, unwired: 40 }   # ~57% das ações estão ligadas
+  off_system_styles_total: 22                            # dominado por cores de status + decoração
+
+# Ordenado por fidelidade (desc)
+screens:
+  shell:        { fidelity: 0.84, off_system: 0, actions: "6/9",  note: "mais fiel; 100% token-limpo; Sidebar+Topbar+Inset corretos" }
+  workspaces:   { fidelity: 0.82, off_system: 0, actions: "0/5",  note: "token-limpo; 0 ações ligadas (parte read-only by-design)" }
+  team:         { fidelity: 0.76, off_system: 0, actions: "9/13", note: "token-limpo; menu ⋯ morto (mudar-papel/remover)" }
+  invite:       { fidelity: 0.72, off_system: 4, actions: "7/8",  note: "família emerald hardcoded" }
+  settings:     { fidelity: 0.72, off_system: 1, actions: "5/10", note: "text-emerald-600 (×2)" }
+  integrations: { fidelity: 0.71, off_system: 7, actions: "10/12", note: "emerald/amber; 2 botões mortos; Configure mislabeled" }
+  dashboard:    { fidelity: 0.68, off_system: 1, actions: "0/8",  note: "border-dashed; UI 100% estática" }
+  account:      { fidelity: 0.64, off_system: 5, actions: "5/12", note: "amber (2FA) + border-dashed; 6 botões mortos" }
+  login:        { fidelity: 0.62, off_system: 1, actions: "2/5",  note: "w-[350px]; Terms/Privacy/Contact href=# mortos" }
+  not_found:    { fidelity: 0.62, off_system: 3, actions: "4/5",  note: "text-[12rem] + blobs decorativos h-[500px]" }
+  landing:      { fidelity: 0.52, off_system: 5, actions: "5/6",  note: "HTML marketing cru; backdrop-blur/blobs; ignora Navbar/Card/FeatureItem" }
+
+# Padrões que se repetem entre telas (alvos de correção sistêmica)
+systemic_patterns:
+  status_colors_hardcoded:
+    screens: [invite, integrations, account, settings]
+    issue: "família emerald/amber crua em vez de --success/--warning / StatusIndicator / Badge color"
+    violates: "DESIGN.md — só mint/lime são brand; status deve vir de token"
+    severity: high
+  dead_unwired_actions:
+    screens: [dashboard, workspaces, account, settings, login, team, integrations]
+    issue: "botões/links que descrevem ações mas não disparam (onClick/onSubmit ausente, ou href='#')"
+    total_unwired: 40
+    severity: high
+  decorative_off_system:
+    screens: [landing, not_found]
+    issue: "backdrop-blur, blobs h-[500px] w-[500px], text-[12rem] — decoração arbitrária"
+    violates: "DESIGN.md — no decoration"
+    severity: medium
+  raw_html_bypass:
+    screens: [landing]
+    issue: "nav/hero/cards/footer em HTML cru ignoram Navbar/Card/FeatureItem/Heading/Text"
+    severity: medium
+  handrolled_empty_state:
+    screens: [dashboard, account]
+    issue: "border-dashed à mão em vez de EmptyState (workspaces já usa a base do Seven Empty)"
+    severity: low
+
+rankings:
+  most_token_clean: [shell, team, workspaces]    # 0 off-system
+  lowest_fidelity:  [landing, login, not_found]
+  most_static:      [dashboard, workspaces]       # menos ações ligadas
+
+# Pendências de DS upstream (Seven) que afetam o boilerplate
+blocked_on_seven:
+  - sidebar-borderless: "override em index.css aguarda affordance borderless no single-mode"
diff --git a/docs/ets/state/reports/_summary.md b/docs/ets/state/reports/_summary.md
new file mode 100644
index 0000000..0c33e09
--- /dev/null
+++ b/docs/ets/state/reports/_summary.md
@@ -0,0 +1,64 @@
+# Auditoria Seven DS — Sumário executivo (11 telas)
+
+> **Escopo:** todas as telas de `src/client/routes` · **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` · **Método:** só-código · **Data:** 2026-06-24
+> **Reports por tela:** `docs/ets/state/reports/screens/` · **Índice:** `docs/ets/state/coverage-matrix.yaml`
+
+## Números gerais
+- **Fidelidade média: ~70%**
+- **Ações do usuário ligadas: 53 de 93 (~57%)** — 40 ações descritas na UI **não disparam nada**
+- **Estilos off-system: ~22** — concentrados em **cores de status** e **decoração**
+- **3 telas 100% token-limpas** (shell, team, workspaces); **0 cores hardcoded** em 7 das 11
+
+## Ranking de fidelidade
+| # | Tela | Fid. | Off-sys | Ações | Destaque |
+|---|---|---|---|---|---|
+| 1 | shell | 84% | 0 | 6/9 | mais fiel; chrome correto |
+| 2 | workspaces | 82% | 0 | 0/5 | token-limpo, mas estático |
+| 3 | team | 76% | 0 | 9/13 | token-limpo; menu ⋯ morto |
+| 4 | invite | 72% | 4 | 7/8 | emerald hardcoded |
+| 5 | settings | 72% | 1 | 5/10 | emerald ×2 |
+| 6 | integrations | 71% | 7 | 10/12 | emerald/amber; botões mortos |
+| 7 | dashboard | 68% | 1 | 0/8 | UI 100% estática |
+| 8 | account | 64% | 5 | 5/12 | amber + 6 botões mortos |
+| 9 | login | 62% | 1 | 2/5 | Terms/Privacy mortos |
+| 10 | not-found | 62% | 3 | 4/5 | número 404 + blobs |
+| 11 | landing | 52% | 5 | 5/6 | HTML marketing cru |
+
+---
+
+## Os 4 padrões sistêmicos (corrigir 1× resolve várias telas)
+
+### 🔴 P1 — Cores de status hardcoded (`emerald`/`amber`)
+**Telas:** invite, integrations, account, settings (4).
+A família `emerald`/`amber` é cravada (`bg-emerald-100`, `text-amber-600`, `dark:*-900/30`…) em vez de **`--success`/`--warning`** ou **`StatusIndicator`/`Badge color`**. **Viola o DESIGN.md** (só mint/lime são brand). É o maior bloco de off-system.
+→ **Fix:** substituir por tokens de status / `StatusIndicator`. Resolve ~16 dos ~22 off-system.
+
+### 🔴 P2 — Ações "mortas" (UI que descreve, mas não faz)
+**Telas:** dashboard (0/8), workspaces (0/5), account (5/12, 6 mortos), settings (5/10), login (2/5), team (menu ⋯), integrations (2 mortos).
+Botões/links que parecem acionáveis mas **não têm `onClick`/`onSubmit`** ou usam `href="#"`. **40 ações não-ligadas no total.**
+→ **Fix:** ligar handlers reais ou remover o controle. Muitos casos são mock/placeholder (também toca Regra 6 — valores/dados hardcoded).
+
+### 🟡 P3 — Decoração arbitrária (proibida pelo DESIGN.md)
+**Telas:** landing (`backdrop-blur`, `bg-background/95`), not-found (`text-[12rem]`, blobs `h-[500px] w-[500px]`).
+→ **Fix:** remover efeitos decorativos; usar componentes/tokens.
+
+### 🟡 P4 — HTML cru ignorando a camada de componentes
+**Tela:** landing (52%, a mais baixa).
+Nav, hero, feature cards, footer são marcação de marketing crua que ignora **`Navbar`/`Card`/`FeatureItem`/`FeaturedIcon`/`Heading`/`Text`**.
+→ **Fix:** reescrever com componentes Seven (maior esforço, mas é a tela mais distante do DS).
+
+---
+
+## Backlog priorizado
+| Prioridade | Ação | Telas | Impacto |
+|---|---|---|---|
+| 🔴 1 | Trocar cores de status → `--success`/`--warning`/`StatusIndicator` | invite, integrations, account, settings | mata ~16 off-system + conformidade DESIGN.md |
+| 🔴 2 | Ligar ou remover ações mortas | 7 telas (40 ações) | UX real; menos UI enganosa |
+| 🟡 3 | Remover decoração arbitrária | landing, not-found | conformidade DESIGN.md |
+| 🟡 4 | Migrar landing p/ componentes Seven | landing | +30pts de fidelidade na pior tela |
+| 🔵 5 | `EmptyState` nos empties à mão | dashboard, account | tira `border-dashed` |
+| 🔵 6 | Tipografia `<h1>/<p>` → `Heading`/`Text` | quase todas | drift, baixo risco |
+
+## Notas
+- **Espaçamento/radius NÃO são problema:** a escala do Seven espelha a do Tailwind, então `gap-4`/`p-8`/`tracking-tight` são value-aligned (não inflamos como violação).
+- **Pendência upstream:** o override da borda da sidebar (`index.css`) aguarda o `borderless` no Seven.
diff --git a/docs/ets/state/reports/screens/account.md b/docs/ets/state/reports/screens/account.md
new file mode 100644
index 0000000..eabe4cd
--- /dev/null
+++ b/docs/ets/state/reports/screens/account.md
@@ -0,0 +1,344 @@
+# Auditoria de tela — Account
+
+> **Rota:** `src/client/routes/_authenticated/account.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟡 **64%** — vocabulário de componentes rico e um fluxo (delete) realmente ligado e validado, mas perde a composição interna dos cards (interiores em `<div>` cru), tem cores hardcoded (amber), tipografia toda crua e 6 botões mortos.
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | título "Account" + subtítulo | raw `<h1>` / `<p>` | — |
+| 2 | 5× título de seção "Connected Accounts / Security / …" | raw `<h2>` / `<p>` | — |
+| 3 | 4× card de provider/segurança (Google, GitHub, 2FA, Password) | `@etus/seven-react` | `Card` + **interior em `<div>` cru** |
+| 4 | 4× badge de status (Connected, Not connected, Recommended, Current) | `@etus/seven-react` | `Badge` |
+| 5 | ~8× botão de ação (Connect, Enable, Change, Sign out all, logout, Create Key, Export, Delete) | `@etus/seven-react` | `Button` |
+| 6 | 2× session card (Chrome/Safari) | raw `<div>` (`SessionCard`) | — (deveria ser `Card`) |
+| 7 | 5× `Divider` entre seções | `@etus/seven-react` | `Divider` (`type="line"`) |
+| 8 | card "API Keys" + empty-state | `@etus/seven-react` | `Card`/`CardHeader`/`CardTitle`/`CardDescription`/`CardContent` + **empty-state cru** |
+| 9 | Danger Zone (Export / Delete) | `@etus/seven-react` | `Card` + `CardContent` (cores destructive) |
+| 10 | modal de confirmação de exclusão | `@etus/seven-react` | `Dialog` + `Form`/`FormField`/`FormItem`/`FormLabel`/`FormControl`/`FormMessage` + `TextInput` |
+| 11 | caixa "Warning" + lista de avisos no modal | raw `<div>` + `<ul>/<li>` | — (deveria ser `Alert`/`Callout` + `List`) |
+| 12 | ícones | `@/components/icons` (lucide) | — (convenção do projeto, ok) |
+
+> Guard-rail do ESLint (`button/input/select/textarea` crus): **limpo** — todo controle é `Button`/`TextInput`. O único `<form>` (linha 358) **não** é banido e é exigido pelo `Form` (FormProvider do react-hook-form). Nenhum 🔴 de guard-rail.
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | `SessionCard` é `<div>` cru disfarçado de card | `<div className="flex … rounded-lg border p-4">` replica um `Card` à mão (borda+radius+padding), sem shadow/variants/tokens do componente | 🟡 | trocar por `<Card>` (+ interior composto) |
+| **C2** | Cards com casca Seven, interior cru | os 4 cards de provider/segurança usam `<Card>` mas o conteúdo é `<div className="flex items-center gap-4 p-4">` em vez de `CardHeader`+`CardTitle`+`CardDescription`+`CardAction` (slot de botão) | 🟡 | compor com `CardHeader/CardTitle/CardDescription/CardAction` |
+| **C3** | Empty-state à mão | "API Keys" usa `<div className="… border border-dashed">` + ícone + 2×`<p>` em vez de `EmptyState` (exporta `EmptyState`/`EmptyMedia`/`EmptyTitle`/`EmptyDescription`/`EmptyContent`) | 🟡 | `<EmptyState>` com slots `EmptyMedia`/`EmptyTitle`/`EmptyDescription` (+ `action`) |
+| **C4** | Tipografia em HTML cru | `<h1>`, 5× `<h2>`, vários `<p>`/`<span>` em vez de `Heading` / `Text`·`Paragraph` (todos exportados) | 🟡 | `Heading` nos títulos, `Text`/`Paragraph` no corpo |
+| **C5** | Danger zone & "Warning" sem componente semântico | card destructive e a caixa `<div className="… bg-destructive/10">` + `<ul>` no modal deveriam ser `Alert` (`variant="destructive"`/`"warning"`) ou `Callout` | 🟡 | `Alert`/`AlertTitle`/`AlertDescription` (variants existem) |
+| **C6** | Delete recria à mão o que o `ConfirmModal` já faz | `Dialog`+`Form`+state de loading manual; o Seven exporta `ConfirmModal` (`variant="destructive"`, `trigger`, `onConfirm` async, `loading`, `icon`) feito pra isso — o input de confirmação cabe no slot `children` | 🔵 | considerar `ConfirmModal variant="destructive"` (corta boilerplate) |
+| **C7** | Lista de avisos crua | `<ul className="list-inside list-disc">` + `<li>` em vez de `List`/`ListItem` (data-display) | 🔵 | `List`/`ListItem` |
+
+**Sub-componentes do `Card` disponíveis e NÃO usados:** `CardMedia`, `CardAction`, `CardFooter` (e nos 4 cards de provider, **todos** os de header/content também são ignorados).
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> Um **único** fluxo está ligado de ponta a ponta: o **Delete Account** (abrir → digitar e-mail → validar zod → cancelar/confirmar). Todos os outros botões de ação são **inertes** — sem `onClick`/`href`.
+
+| ID | Emitter/ação ausente | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | "Connect" GitHub sem ação | `Button variant="outline"` — sem `onClick` | 🔴 | `onClick` → fluxo OAuth de vínculo |
+| **E2** | "Enable" 2FA sem ação | `Button variant="outline"` — sem `onClick` | 🔴 | `onClick` → setup de 2FA |
+| **E3** | "Sign out all" sem ação | header de Active Sessions — sem `onClick` | 🔴 | `onClick` → revogar sessões |
+| **E4** | logout por sessão sem ação | `SessionCard` `Button variant="ghost"` (ícone) — sem `onClick` | 🔴 | `onClick(payload)` → revogar a sessão |
+| **E5** | "Create Key" sem ação | card API Keys — sem `onClick` | 🔴 | `onClick` → criar/abrir modal de key |
+| **E6** | "Export" sem ação | Danger zone — sem `onClick` | 🔴 | `onClick` → exportar dados |
+| **E7** | Loading do submit reimplementado | `isSubmitting ? <spinner animate-spin/> : <trash/>` em vez de `loading={isSubmitting}` + `loadingText="Deleting…"` (props nativas do `Button`) | 🟡 | `Button loading loadingText` |
+| **E8** | Ícones por `className` em vez de prop | todo botão usa `<Icon className="mr-2 h-4 w-4"/>` em vez de `leftIcon`/`icon` (perde o `gap`/size de ícone do `Button`) | 🟡 | `leftIcon={<Icons.x/>}` |
+| **E9** | Submit é `setTimeout` simulado | `onSubmit` faz `await new Promise(setTimeout 2000)` — sem API real (Regra 6) | 🟡 | ligar à mutação real de delete |
+
+> "Change" (Password) está **`disabled`** por design (login OAuth, sem senha) — não é botão morto, é desabilitado correto. ⚪ N/A.
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| texto secundário | `text-muted-foreground` (×muitos) | ✅ `--muted-foreground` | ✅ |
+| tiles de ícone | `bg-muted` (×4) | ✅ `--muted` | ✅ |
+| danger zone / título / botões | `text-destructive`, `hover:text-destructive` | ✅ `--destructive` | ✅ |
+| danger card / caixa warning | `bg-destructive/5`, `bg-destructive/10`, `border-destructive/30` | ✅ `--destructive` + opacity (Tailwind) | ✅ (existe `--destructive-subtle` como alt semântica) |
+| ícone do empty-state | `text-muted-foreground/50` | ✅ `--muted-foreground` + opacity | 🟢 |
+| **tile do 2FA** | `bg-amber-100 dark:bg-amber-900/30` · `text-amber-600 dark:text-amber-400` | ❌ **paleta Tailwind crua** — existe `--warning` (o próprio badge ao lado é `color="warning"`) | 🔴 **CL1** |
+| **GitHub card / empty-state** | `border-dashed` (×2) | ❌ sem token nem padrão tracejado no Seven | 🔴 **CL2** (resolve com `EmptyState` C3 + tirar do Card) |
+
+→ Diferente do Dashboard (zero cor hardcoded), esta tela **tem** cor crua: o bloco **amber** do 2FA. Há token semântico (`warning`) → é violação, não só drift. O resto das cores está correto (herdado/`destructive` com opacity).
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| wrapper da página | `space-y-8` (32px) | layout (raw Tailwind) | 🟢 `--spacing-8` |
+| seções | `space-y-4` (16px) ×5 | layout | 🟢 `--spacing-4` |
+| blocos internos | `space-y-2` (8) / `space-y-1` (4) | layout | 🟢 `--spacing-2`/`-1` |
+| grids/flex | `gap-4` (16) / `gap-2` (8) | layout | 🟢 |
+| **interior dos cards** | `p-4` cru dentro de `<Card>` | sobrepõe o `--card-root-padding-y` do componente (padding em dobro no eixo Y) | 🟡 **SP1** — usar `CardHeader`/`CardContent` (tokens `--card-*-padding-*`) |
+| ritmo vertical ad-hoc | `space-y-8` / `-4` / `-2` na mesma árvore | escala válida, porém manual | 🔵 **SP2** — `Section`/`Stack` tokenizariam |
+
+→ Todos os **valores** de spacing são value-aligned (🟢). O problema não é o valor, é **onde**: `p-4` manual dentro do `Card` ignora os tokens de padding do próprio componente.
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| título h1 | `text-2xl font-semibold tracking-tight` | `Heading level={1}` (`size`/`weight`/`color` por token) | 🟡 **TY1** (= C4) |
+| 5× h2 de seção | `text-lg font-medium` | `Heading level={2}` | 🟡 **TY2** (= C4) |
+| corpo `<p>` | `text-sm`/`text-xs text-muted-foreground` | `Text variant="p2"/"caption1" color="muted"` | 🟡 **TY3** (= C4) |
+| ênfase em rótulos | `font-medium` em `<p>` (provider/device/danger) | `Text weight` / `Heading` | 🟡 **TY4** |
+| `CardTitle` | sobrescrito com `text-base` | `CardTitle` já tem `[font-weight:var(--card-title-weight)]`; o `text-base` força o size | 🔵 **TY5** |
+| `tracking-tight` | -0.025em | == `--font-tracking-tight` (via var Tailwind) | 🟢 |
+| `font-mono` (TextInput + span do e-mail) | JetBrains Mono | == `--font-mono` (mono de marca) | ✅ |
+
+> O guard-rail **não** bane `h1/h2/p/span` — passa o lint, mas é drift de DS (mesma nota do Dashboard).
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | Convenção `h-N w-N` em todo ícone | `h-12 w-12`, `h-6 w-6`, `h-5 w-5`, `h-4 w-4`, `h-8 w-8` — consistente, porém verboso; Seven/Tailwind usa `size-N`, e `Button` resolve via `leftIcon`/`icon`+`size="icon"` | 🔵 |
+| **SZ2** | Botão icon-only mal tipado | logout por sessão usa `size="sm"` + `text-destructive` manual em vez de `size="icon"` + `icon={<Icons.logout/>}` | 🟡 |
+| **SZ3** | Tile de logo bespoke | `h-12 w-12 rounded-lg bg-muted` à mão; `Avatar` (ou slot de mídia do `Card`) cobre isso com tokens | 🔵 |
+
+> `-rotate-45` no ícone de "Export" gira uma seta pra simular "sair/upload" — hack decorativo; o ideal é um ícone dedicado (`Download`/`ArrowUpRight`). Marca pede "sem decoração". 🔵
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| loading (submit) | 🟡 presente, porém à mão | `Button loading` / `loadingText` | 🟡 **ST1** (= E7) |
+| "not connected" como placeholder | `border-dashed` p/ insinuar estado inativo | `Card variant="outlined"`/`ghost` + badge `muted` (não há token tracejado) | 🟡 **ST2** |
+| botões que parecem ativos mas são inertes | E1–E6 | sem disabled/empty/erro; viram CTA morta | 🟡 **ST3** |
+| badge "Not connected" | `type="badge-outline"` default `color="primary"` (mint) | semanticamente deveria ser `color="muted"`/`secondary` | 🔵 **ST4** |
+| badges encolhem texto | `text-xs` manual | `size="sm"` (o `Badge` já controla o text-size por token) | 🔵 **ST5** |
+| skeleton de listas (sessões/keys) | ❌ ausente (dados estáticos) | `SkeletonLoader` | 🔵 |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | E1–E6, CL1, CL2 | 6 botões de ação mortos; cor **amber** hardcoded (→ `warning`); `border-dashed` off-system |
+| 🟡 **Should-fix** | C1, C2, C3·ST? , C4·TY1·TY2·TY3·TY4, C5, E7·ST1, E8, E9, SP1, SZ2, ST2, ST3 | `SessionCard`→`Card`; compor interior dos cards; `EmptyState`; tipografia→`Heading`/`Text`; danger/warning→`Alert`; loading nativo do `Button`; `p-4` interno; icon-only |
+| 🔵 **Nice-to-have** | C6, C7, SP2, TY5, SZ1, SZ3, ST4, ST5 | `ConfirmModal`; `List`; ritmo via `Section`; `text-base` no `CardTitle`; `size-*`; `Avatar`; badge muted/`size="sm"` |
+
+**Pontos corretos (não mexer):** `Dialog`+`Form`+`FormField`+`TextInput` com validação zod (fluxo real e a11y-linkado) · `Button`/`Badge`/`Divider` com props válidas · cores `muted`/`destructive` (com opacity) corretas · spacing/radius value-aligned · `font-mono` de marca · guard-rail limpo.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário do que o Seven oferece e a tela **não** aproveita — props, variants, sub-componentes, estados e **componentes alternativos**. `[u]` = não usado.
+
+### 9.1 — Cards de provider/segurança (hoje `Card` casca + `<div>` cru)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| Sub-componentes `[u]` | `CardHeader` · `CardTitle` · `CardDescription` · `CardAction` · `CardContent` · `CardFooter` · `CardMedia` | ❌ (interior é `<div>` cru) |
+| Variants `[u]` | `elevated` · `outlined` · `ghost` · `selectable` (usa `default`) | ❌ |
+| Estados `[u]` (`selectable`) | `data-active` · `data-selected` · `onToggleSelect`/`onTogglePin` · hover-lift/ring | ❌ |
+
+### 9.2 — `SessionCard` (hoje `<div>` cru)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| **Componente base `[u]`** | **`Card`** (+ sub-componentes, shadow, variants) | ❌ (replicado à mão) |
+| **Alternativos `[u]`** | **`List`/`ListItem`** · **`Avatar`** (no tile) | ❌ |
+
+### 9.3 — Botões (hoje `Button` só com `variant`/`size`/`disabled`)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props `[u]` | `leftIcon` · `rightIcon` · `icon` · `loading` · `loadingText` · `fullWidth` · `badge`/`badgeColor`/`badgeSize` · `tone` · `tooltip` · `asChild` · `shape` | ❌ |
+| Emitters `[u]` | `onClick`/`onFocus`/`onBlur`/`onKeyDown` com `ButtonEventPayload` (`id`/`isLoading`/`timestamp`) | ❌ (só Cancel/submit ligados) |
+| Sizes `[u]` | `icon` (p/ o logout icon-only), `lg` | ❌ |
+| Variants `[u]` | `primary` · `secondary` · `dashed` · `link` · `success` · `warning` · `tertiary` (usa `outline`/`ghost`/`destructive`/default) | ❌ |
+
+### 9.4 — Badges (hoje `Badge color`/`type`)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props `[u]` | `size` (usa `text-xs` cru) · `dot` · `leadingIcon`/`trailingIcon`/`icon` · `iconOnly` · `interactive` · `avatar` · `country` · `onDismiss`/`dismissLabel` · `tooltip` · `asChild` | ❌ |
+| Types `[u]` | `pill-color` · `pill-outline` · `badge-color` · `badge-modern` (usa `badge-outline` + default) | parcial |
+| Colors `[u]` | `muted`/`secondary`/`info`/`tip`/`primary`/`destructive` (usa `success`/`warning`) | parcial |
+
+### 9.5 — Dialog / Form (hoje `Dialog`+`Form` manuais)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Dialog sub `[u]` | `DialogPortal` · `DialogOverlay` · `DialogClose` · `showCloseButton` (prop) | ❌ (X vem do default) |
+| Form sub `[u]` | `FormDescription` (helper text linkado) | ❌ |
+| Form alt `[u]` | `Field` · `HelpText` · `Label` · `FormValidation` | ❌ |
+| TextInput `[u]` | `leadingIcon`/`trailingIcon`(+`interactive`) · `size` (xs–xl) · `variant` (`filled`/`flushed`/`unstyled`) | ❌ (só `default`) |
+| **Componente alternativo `[u]`** | **`ConfirmModal`** (`variant="destructive"`, `trigger`, `onConfirm` async, `loading`, `icon`, `title`/`description`, `children`) | ❌ |
+
+### 9.6 — Empty-state / avisos (hoje `<div>` + `<ul>` crus)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Empty | **`EmptyState`** (+ `EmptyMedia`/`EmptyTitle`/`EmptyDescription`/`EmptyContent`) | ❌ |
+| Avisos | **`Alert`** (`default`/`destructive`/`warning`/`success`/`info`) · **`Callout`** · `AlertTitle`/`AlertDescription` | ❌ |
+| Lista | **`List`/`ListItem`** | ❌ |
+
+### 9.7 — Título / textos / layout (hoje `<h1>/<h2>/<p>` + `<div>` grid crus)
+| Elemento | Componente Seven `[u]` | Eixos não aproveitados |
+|---|---|---|
+| `<h1>`/`<h2>` | **`Heading`** | `level(1-6)` · `size` · `weight` · `align` · `color` · `gradient` |
+| `<p>`/`<span>` | **`Text`** / **`Paragraph`** | `variant(p1-3/caption1-2/display)` · `weight` · `color` |
+| `<div>` grid/seções | `Section` · `Container` · `Grid` · `Stack` · `Flex` | tokens de espaçamento em vez de `space-y-*`/`grid` crus |
+| `Divider` | `type`(text/heading/button…) · `visualStyle` · `lineType` · `labelPosition` · `children` | só usa `line` simples |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Toda ação que o usuário **poderia** executar, o gatilho, o status atual e o primitivo Seven que a ligaria.
+> **Resultado: 5 de 12 ligadas — só o fluxo de Delete Account funciona; 6 botões são CTA morta e 1 está desabilitado por design.**
+
+| # | Ação possível | Gatilho (elemento) | Status | Como ligar (Seven) |
+|---|---|---|---|---|
+| A1 | Vincular conta GitHub | `Button` "Connect" | 🔴 não-ligada | `Button onClick` → OAuth link |
+| A2 | Ativar 2FA | `Button` "Enable" | 🔴 não-ligada | `Button onClick` → setup |
+| A3 | Trocar senha | `Button` "Change" (`disabled`) | ⚪ N/A (desabilitado por design) | — (sem senha em login OAuth) |
+| A4 | Encerrar todas as sessões | `Button` "Sign out all" | 🔴 não-ligada | `Button onClick` → revogar |
+| A5 | Encerrar uma sessão | `SessionCard` `Button ghost` (ícone) | 🔴 não-ligada | `Button icon size="icon" onClick(payload)` |
+| A6 | Criar API key | `Button` "Create Key" | 🔴 não-ligada | `Button onClick` → modal/criação |
+| A7 | Exportar dados | `Button` "Export" | 🔴 não-ligada | `Button onClick` → export |
+| A8 | Abrir modal de exclusão | `DialogTrigger`+`Button destructive` | 🟢 **ligada** | `Dialog open/onOpenChange` (ok) |
+| A9 | Digitar e-mail de confirmação | `TextInput` (no modal) | 🟢 **ligada** | RHF `field` + `zodResolver` (ok) |
+| A10 | Cancelar exclusão | `Button` "Cancel" | 🟢 **ligada** | `onClick` → `setIsOpen(false)` (ok) |
+| A11 | Confirmar exclusão | `Button type="submit"` | 🟢 **ligada** | `form.handleSubmit(onSubmit)` (ok, mas API simulada — E9) |
+| A12 | Fechar modal (X/Esc/overlay) | `DialogContent` (default) | 🟢 **ligada** | `onOpenChange` reseta o form (ok) |
+
+**Emitters do `Button` disponíveis nas ações a ligar:** `onClick` · `onFocus` · `onBlur` · `onKeyDown` (payload `ButtonEventPayload`: `id`, `isLoading`, `timestamp`).
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** (resolve num token Seven) · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout (estrutural, sem token de design)
+>
+> Nota-chave: a escala de spacing do Seven **espelha a do Tailwind** (`--spacing-8`=32px=`space-y-8`; `--spacing-4`=16px=`gap-4`/`p-4`), `--font-tracking-tight`=`tracking-tight`=-0.025em, e os `rounded-*` resolvem nos `--radius-*` do Seven via `@theme` (`--radius-lg`=12px, `--radius-md`=8px, `--radius-full`). Por isso muito "cru" é 🟢/✅, não violação.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `text-muted-foreground` (×muitos) | `--muted-foreground` | ✅ |
+| `bg-muted` (×4) | `--muted` | ✅ |
+| `text-destructive` / `hover:text-destructive` | `--destructive` | ✅ |
+| `border-destructive/30` · `bg-destructive/5` · `bg-destructive/10` | `--destructive` + opacity | ✅ (alt: `--destructive-subtle`) |
+| `text-muted-foreground/50` | `--muted-foreground` + opacity | 🟢 |
+| **`bg-amber-100` · `dark:bg-amber-900/30` · `text-amber-600` · `dark:text-amber-400`** | — (paleta Tailwind; existe `--warning`) | 🔴 **off-system** (CL1) |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `space-y-8` | 32px | `--spacing-8` | 🟢 |
+| `space-y-4` (×5) | 16px | `--spacing-4` | 🟢 |
+| `space-y-2` (×2) · `space-y-1` | 8 / 4px | `--spacing-2`/`-1` | 🟢 |
+| `gap-4` · `gap-2` | 16 / 8px | `--spacing-4`/`-2` | 🟢 |
+| `p-4` · `p-8` · `py-4` · `pb-3` | 16/32/16/12px | `--spacing-4`/`-8`/`-3` | 🟢 (valor) — mas `p-4` dentro de `Card` = SP1 🟡 (lugar errado) |
+| `mr-2` · `mt-2` | 8px | `--spacing-2` | 🟢 |
+| padding/gap internos de Card/Input/Button | — | `--card-*`/`--input-*`/`--button-*` | ✅ |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `border` | `--border` (cor) | ✅ |
+| `rounded-lg` | `--radius-lg` (12px, Seven) | ✅ |
+| `rounded-full` | `--radius-full` | ✅ |
+| **`border-dashed`** (×2: GitHub Card, empty-state) | — (tracejado; Seven não tem token nem padrão) | 🔴 **off-system** (CL2) |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| `text-2xl` | 1.5rem | 🟡 | título → `Heading` |
+| `text-lg` (×5) | 1.125rem | 🟡 | h2 → `Heading level={2}` |
+| `text-base` | 1rem | 🟡 | sobre `CardTitle` (já tem weight token) |
+| `text-sm` (×muitos) | 0.875rem | 🟡 | corpo → `Text`/`Paragraph` |
+| `text-xs` (×muitos) | 0.75rem | 🟡 | caption → `Text caption`; em badge → `size="sm"` |
+| `font-semibold` / `font-medium` | 600 / 500 | 🟡 | peso deveria vir do `Heading`/`Text` |
+| `tracking-tight` | -0.025em | 🟢 | == `--font-tracking-tight` |
+| `font-mono` (×2) | JetBrains Mono | ✅ | `--font-mono` (mono de marca) |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `h-12 w-12` (×3) · `h-10 w-10` · `h-8 w-8` · `h-6 w-6` (×4) · `h-5 w-5` · `h-4 w-4` (×muitos) | 48/40/32/24/20/16px | 🟢 valores alinhados (`--spacing-*`); convenção `h-/w-` em vez de `size-*` (SZ1) |
+| `min-w-0` · `flex-1` | — | ⚪ layout |
+
+### 11.6 — Layout & decoração (⚪ sem token de design)
+`flex` · `grid` · `items-center` · `items-start` · `justify-center` · `justify-between` · `flex-1` · `min-w-0` · `overflow-hidden` · `truncate` · `text-center` · `mx-auto` · `hidden sm:block` · `sm:grid-cols-2` · `list-inside list-disc` (→ `List`, C7) · `animate-spin` (→ `Button loading`, E7) · **`-rotate-45`** (hack decorativo no ícone de Export, SZ/§6)
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde (classes únicas) | Itens |
+|---|---|---|
+| ✅ token-backed | ~7 famílias | `muted`/`muted-foreground`/`destructive`(+opacity) · `border` · `rounded-lg`/`rounded-full` · `font-mono` · paddings internos |
+| 🟢 value-aligned | ~12 | `space-y-8/4/2/1` · `gap-4/2` · `p-4/8` · `py-4` · `pb-3` · `mr-2`/`mt-2` · `tracking-tight` · `text-muted-foreground/50` · família `h-N w-N` |
+| 🟡 drift (tipografia/sizing/lugar) | ~9 | `text-2xl` · `text-lg` · `text-base` · `text-sm` · `text-xs` · `font-semibold` · `font-medium` · `p-4` interno · `size="sm"` no icon-button |
+| 🔴 off-system | **5 literais** | `bg-amber-100` · `dark:bg-amber-900/30` · `text-amber-600` · `dark:text-amber-400` (CL1) · `border-dashed` (CL2) |
+
+> **Conclusão de estilo:** ao contrário do Dashboard (zero cor hardcoded), esta tela tem **um foco real de cor fora do sistema** — o bloco **amber** do 2FA (4 literais), que tem equivalente semântico (`warning`). O outro off-system é `border-dashed` (×2, resolve com `EmptyState`/variant de `Card`). O grosso do "cru" é spacing/radius value-aligned e drift de tipografia (resolve com `Heading`/`Text`). O diferencial positivo vs. Dashboard é o **fluxo de exclusão realmente ligado e validado** (Dialog+Form+TextInput+zod).
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+account:
+  route: src/client/routes/_authenticated/account.tsx
+  fidelity: 0.64
+  components_used: [Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Divider, Badge, Button, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, TextInput]
+  components_missing: [Heading, Text, Paragraph, EmptyState, EmptyMedia, EmptyTitle, EmptyDescription, Alert, AlertTitle, AlertDescription, Callout, ConfirmModal, CardAction, CardFooter, List, ListItem, Field, HelpText, FormDescription, Avatar, Section, Stack]
+  gaps:
+    components: [C1, C2, C3, C4, C5, C6, C7]
+    emitters:   [E1, E2, E3, E4, E5, E6, E7, E8, E9]
+    colors:     [CL1, CL2]
+    spacing:    [SP1, SP2]
+    typography: [TY1, TY2, TY3, TY4, TY5]
+    sizing:     [SZ1, SZ2, SZ3]
+    states:     [ST1, ST2, ST3, ST4, ST5]
+  severity: { high: 8, medium: 17, low: 8 }
+  unused_seven:                      # superfície do DS não aproveitada (seção 9)
+    alternative_components: [Heading, Text, Paragraph, EmptyState, Alert, Callout, ConfirmModal, List, Avatar, Section, Stack, Field, HelpText]
+    unused_props:
+      Button: [leftIcon, rightIcon, icon, loading, loadingText, fullWidth, badge, tone, tooltip, asChild, shape]
+      Badge:  [size, dot, leadingIcon, trailingIcon, iconOnly, interactive, avatar, country, onDismiss, tooltip, asChild]
+      TextInput: [leadingIcon, trailingIcon, size, variant]
+      Dialog: [showCloseButton, DialogOverlay, DialogClose, DialogPortal]
+    unused_variants:
+      Card: [elevated, outlined, ghost, selectable]
+      Button: [primary, secondary, dashed, link, success, warning, tertiary]
+      Badge: [pill-color, pill-outline, badge-color, badge-modern]
+    unused_subcomponents:
+      Card: [CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, CardMedia]
+      Form: [FormDescription]
+  user_actions:                      # seção 10
+    total: 12
+    wired: 5                         # A8, A9, A10, A11, A12 (fluxo Delete Account)
+    unwired: [A1, A2, A4, A5, A6, A7]   # A3 = N/A (disabled por design)
+  style_audit:                       # seção 11 (classe-a-classe)
+    token_backed: [muted, muted-foreground, destructive, border, rounded-lg, rounded-full, font-mono]
+    value_aligned: [space-y-8, space-y-4, space-y-2, space-y-1, gap-4, gap-2, p-4, p-8, py-4, pb-3, mr-2, mt-2, tracking-tight]
+    drift: [text-2xl, text-lg, text-base, text-sm, text-xs, font-semibold, font-medium]
+    off_system: [bg-amber-100, "dark:bg-amber-900/30", text-amber-600, "dark:text-amber-400", border-dashed]
+    hardcoded_colors: 4              # família amber (sem token Seven; existe --warning)
+```
diff --git a/docs/ets/state/reports/screens/dashboard.md b/docs/ets/state/reports/screens/dashboard.md
new file mode 100644
index 0000000..7f7e725
--- /dev/null
+++ b/docs/ets/state/reports/screens/dashboard.md
@@ -0,0 +1,278 @@
+# Auditoria de tela — Dashboard
+
+> **Rota:** `src/client/routes/_authenticated/dashboard.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-23
+> **Fidelidade:** 🟡 **68%** — usa os componentes certos, mas perde emitters/estados e tem tipografia/empty-state crus.
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | 4× stat card | `@etus/seven-react` | `DashboardCard` |
+| 2 | 3× quick-action card | `@etus/seven-react` | `Card` (+ `CardHeader/CardTitle/CardDescription/CardContent`) |
+| 3 | 1× recent-activity card | `@etus/seven-react` | `Card` + empty-state interno cru |
+| 4 | título "Welcome back" | raw `<h1>` | — |
+| 5 | subtítulos/parágrafos | raw `<p>` | — |
+| 6 | ícones | `@/components/icons` (lucide) | — (convenção do projeto, ok) |
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Empty-state à mão | `Recent Activity` usa `<div className="… rounded-md border border-dashed">` em vez de `EmptyState` (existe no beta.4) | 🟡 | trocar por `<EmptyState title icon description action>` |
+| **C2** | Tipografia em HTML cru | `<h1>` e `<p>` em vez de `Heading` / `Text`·`Paragraph` (todos exportados) | 🟡 | `Heading` no título, `Text` nos parágrafos |
+| **C3** | Quick-action sem slot de ação | `Card` usa só `CardHeader/Content`; **não** usa `CardAction` nem `CardFooter` — os sub-componentes próprios pra botão/CTA | 🔴 | ver E1 |
+| **C4** | `DashboardCard` sub-componentes compostos não usados | há `DashboardCardHeader/Title/Value/Content/Footer` pra composição custom; a tela usa só a forma "props" (ok, mas limita badge/cta) | 🔵 | ok manter props; ciente da via composta |
+
+**Sub-componentes do `Card` disponíveis e NÃO usados:** `CardMedia`, `CardAction`, `CardFooter`.
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> A tela inteira é **estática — zero `onClick`/`href`/handler**. Vários cards *descrevem ações* mas não disparam nada.
+
+| ID | Emitter/ação ausente | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | Cards de ação sem ação | "Invite Team Members" / "Database" / "Security" dizem *"Add collaborators…"*, *"Use the API to send invitations"* — mas **não há botão/link**. UI morta. | 🔴 | `CardAction` ou `CardFooter` com `Button` (ex.: "Convidar", "Abrir") |
+| **E2** | `DashboardCard.ctaLink` / `ctaText` / `ctaDescription` não usados | stats não navegáveis (ex.: "Total Users" → `/team`) | 🟡 | passar `ctaLink="/team"` `ctaText="Ver equipe"` |
+| **E3** | `DashboardCard.loading` não usado | sem skeleton durante fetch (o componente tem estado de loading nativo) | 🟡 | `loading={isLoading}` |
+| **E4** | `DashboardCard.badge` não usado | sem indicador de tendência/delta (ex.: "+12%") | 🔵 | `badge={<Badge>+12%</Badge>}` |
+| **E5** | Valores hardcoded | `value="0"`, `"1"`, `"100%"` são **literais**, não ligados a dados reais | 🔴 | ligar a query real (fora de DS, mas é gap funcional — Regra 6) |
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| `DashboardCard` bg | `bg-card` (interno do componente) | ✅ `--card-root-background` | ✅ |
+| `Card` bg/borda/sombra | tokens internos `--card-root-*`, `--border` | ✅ | ✅ |
+| texto secundário | `text-muted-foreground` | ✅ `--muted-foreground` | ✅ |
+| título h1 | sem cor (herda `--foreground`) | parcial | 🔵 ok, mas via `Heading` ficaria explícito |
+| **empty-state** | `border-dashed` | ❌ sem token; tracejado não é padrão Seven | 🟡 **CL1** — resolver via `EmptyState` (C1) |
+
+→ Cores estão **majoritariamente corretas** (herdadas dos componentes). Único ponto cru: o `border-dashed` do empty-state.
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| wrapper da página | `space-y-8` (32px) | layout de página (raw Tailwind) | ✅ aceitável |
+| grids | `gap-4` (16px) | layout (raw) | ✅ aceitável |
+| **ritmo inconsistente** | `space-y-8` (32) vs `gap-4` (16) na mesma tela | — | 🔵 **SP1** padronizar o ritmo vertical |
+| interno dos cards | `--card-root-padding-y`, `--card-root-gap`, `--card-header-gap` etc. | tokens Seven (não sobrescritos) | ✅ correto |
+| `DashboardCard` padding | `p-6` (size=md default) | token de size do componente | ✅ |
+
+→ Espaçamento **interno** dos componentes vem certo dos tokens. Só o **ritmo de layout da página** é cru e levemente inconsistente.
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| título h1 | `text-2xl font-semibold tracking-tight` (escala Tailwind solta) | `Heading` (tokens de tipografia) | 🟡 **TY1** (= C2) |
+| parágrafos | `<p className="text-sm text-muted-foreground">` | `Text`/`Paragraph` | 🟡 **TY2** (= C2) |
+| `CardTitle` | sobrescrito com `flex items-center gap-2` p/ ícone inline | `CardTitle` usa `[font-weight:var(--card-title-weight)]`; override é aditivo | 🔵 ok, mas o ícone altera a baseline do título |
+| valores stat | herdam `text-xl font-semibold tabular-nums` do `DashboardCard` | — | ✅ |
+
+> Nota: o guard-rail do ESLint **não** bane `h1/p` (só `button/input/select/textarea`) — passa o lint, mas é drift de DS.
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | Tamanho de ícone inconsistente | `DashboardCard` icon = `size-4` (16px); `CardTitle` icon = `h-5 w-5` (20px) | 🔵 |
+| **SZ2** | Convenção de utilitário mista | `size-4` vs `h-5 w-5` na mesma tela | 🔵 padronizar p/ `size-*` |
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| loading | ❌ ausente | `DashboardCard.loading` | 🟡 **ST1** (= E3) |
+| hover/clicável | ❌ cards parecem clicáveis mas não são | `Card variant="selectable"` / `CardAction` | 🟡 **ST2** |
+| empty | 🟡 presente, porém cru | `EmptyState` | 🟡 **ST3** (= C1) |
+| erro | n/a nesta tela | — | — |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | C3·E1, E5 | cards de ação sem botão (UI morta); valores hardcoded |
+| 🟡 **Should-fix** | C1·ST3, C2·TY1·TY2, E2, E3·ST1 | empty-state→`EmptyState`; tipografia→`Heading`/`Text`; CTA nos stats; loading |
+| 🔵 **Nice-to-have** | E4, SP1, SZ1, SZ2 | badge de tendência; ritmo de espaçamento; padronizar ícones |
+
+**Pontos corretos (não mexer):** `DashboardCard` com API certa · `Card` + composição · cores/tokens internos · padding/gap internos via token.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário completo do que o Seven oferece e a tela **não** aproveita — props, variants, sub-componentes, estados e **componentes alternativos**. `[u]` = não usado.
+
+### 9.1 — Stat cards (hoje `DashboardCard`)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| Props | `title` `value` `valueDescription` `icon` | ✅ usados |
+| Props `[u]` | `badge` · `ctaText` · `ctaLink` · `ctaDescription` · `loading` · `children` | ❌ |
+| Variants `[u]` | `ghost` · `outline` · `elevated` (usa `default`) | ❌ |
+| Sizes `[u]` | `sm` · `lg` (usa `md`) | ❌ |
+| Sub-componentes compostos `[u]` | `DashboardCardHeader/Title/Value/Content/Footer` | ❌ |
+| **Componente alternativo `[u]`** | **`KPICard`** — `delta` `deltaLabel` `trend(up/down/neutral)` `featuredIcon` `helpText` `progressBar` `sparkline` `swap` `dropdownIcon` `action` `showBadge` `loading` | ❌ nunca considerado |
+| **Componente alternativo `[u]`** | **`SingleStat`** — count-up `animated`/`animationDuration`, variants `compact/inline/default`, sizes `xs→xl` | ❌ |
+
+### 9.2 — Quick-action cards (hoje `Card`)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Sub-componentes usados | `CardHeader` `CardTitle` `CardDescription` `CardContent` | ✅ |
+| Sub-componentes `[u]` | `CardMedia` · `CardAction` · `CardFooter` | ❌ |
+| Variants `[u]` | `elevated` · `outlined` · `ghost` · `selectable` (usa `default`) | ❌ |
+| Estados `[u]` (variant `selectable`) | `data-active` · `data-selected` · hover-lift · ring | ❌ |
+| **Faltando p/ ação** | `Button` (variants/sizes/`badge`/`asChild`/emitters) dentro de `CardAction`/`CardFooter` | ❌ |
+
+### 9.3 — Recent activity (hoje `Card` + `<div>` cru)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Empty | **`EmptyState`** (+ slot de `action`) | ❌ (div cru) |
+| **Render real de atividade `[u]`** | **`Feed`** · **`Timeline`** · **`List`** (data-display) | ❌ nunca considerado |
+
+### 9.4 — Título / textos (hoje `<h1>` / `<p>` crus)
+| Elemento | Componente Seven `[u]` | Eixos não aproveitados |
+|---|---|---|
+| `<h1>` | **`Heading`** | `level(1-6)` · `size` · `weight` · `align` · `color` · `gradient` |
+| `<p>` | **`Text`** / **`Paragraph`** | variants de tamanho/cor/peso |
+
+### 9.5 — Layout da página (hoje `<div>` + grid cru)
+| Disponível `[u]` | Uso |
+|---|---|
+| `Section` · `Container` · `Grid` · `Stack` · `Flex` | estruturariam a página com tokens de espaçamento em vez de `space-y-8`/`grid` crus |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Toda ação que o usuário **poderia** executar nesta tela, o gatilho, o status atual e o primitivo Seven que a ligaria.
+> **Resultado: 0 de 8 ações estão ligadas — a tela é puramente informativa.**
+
+| # | Ação possível | Gatilho (elemento) | Status | Como ligar (Seven) |
+|---|---|---|---|---|
+| A1 | Abrir fluxo de convite | card "Invite Team Members" | 🔴 não-ligada (sem botão) | `CardAction` + `Button onClick` → modal/`/team` |
+| A2 | Abrir config de banco | card "Database" | 🔴 não-ligada | `CardFooter` + `Button asChild` (link) |
+| A3 | Abrir config de segurança | card "Security" | 🔴 não-ligada | `CardFooter` + `Button` |
+| A4 | Drill-down num stat | stat card (ex.: Total Users → /team) | 🔴 não-ligada | `DashboardCard ctaLink/ctaText` **ou** `Card variant="selectable" onClick` |
+| A5 | Ver/atualizar atividade recente | header do card "Recent Activity" | 🔴 não-ligada (sem controle) | `CardAction` + `Button` ("Ver tudo" / refresh) |
+| A6 | Ação no estado vazio | bloco "No recent activity" | 🔴 não-ligada (div cru) | `EmptyState` com slot `action` (`Button`) |
+| A7 | Foco/teclado em cards interativos | cards | ⚪ n/a (nada interativo) | vem de graça com `Button`/`selectable` (`onKeyDown`/`onFocus`) |
+| A8 | Skeleton durante carregamento | stats + cards | 🔴 não-ligada | `DashboardCard loading` / `KPICard loading` / `SkeletonLoader` |
+
+**Emitters do `Button` disponíveis quando as ações forem ligadas:** `onClick` · `onFocus` · `onBlur` · `onKeyDown` (payload `ButtonEventPayload`: `id`, `isLoading`, `timestamp`).
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** (resolve num token Seven) · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven; não referencia o token, mas não diverge) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout (estrutural, sem token de design)
+>
+> Nota-chave: a escala de spacing do Seven **espelha a do Tailwind** (`--spacing-4`=16px=`gap-4`; `--spacing-8`=32px=`space-y-8`), e `--font-tracking-tight`=`tracking-tight`=-0.025em. Por isso muito "cru" é 🟢, não violação.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `text-muted-foreground` (×3) | `--muted-foreground` | ✅ |
+| bg/borda/sombra dos cards | tokens internos (`--card-root-*`, `--border`) | ✅ |
+| *(nenhuma cor hardcoded — `text-*-500`, hex, `bg-gray-*` etc.)* | — | ✅ limpo |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `space-y-8` | 32px | `--spacing-8` | 🟢 |
+| `gap-4` (×2) | 16px | `--spacing-4` | 🟢 |
+| `gap-2` (×2) | 8px | `--spacing-2` | 🟢 |
+| padding/gap internos dos cards | — | `--card-*` | ✅ |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `border` | `--border` (cor) | ✅ |
+| `rounded-md` | `--radius-md` (8px, Seven) | ✅ |
+| **`border-dashed`** | — (estilo tracejado; Seven não tem token nem padrão) | 🔴 **único off-system real** |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| `text-2xl` | 1.5rem | 🟡 | título deveria vir do `Heading` (token semântico) |
+| `font-semibold` | 600 | 🟡 | idem (peso do `Heading`) |
+| `tracking-tight` | -0.025em | 🟢 | valor == `--font-tracking-tight`, mas via var Tailwind |
+| `text-sm` (×3) | 0.875rem | 🟡 | corpo deveria vir do `Text`/`Paragraph` |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `size-4` | 16px | 🟡 inconsistente c/ `h-5 w-5` |
+| `h-5 w-5` | 20px | 🟡 inconsistente c/ `size-4`; convenção mista |
+| `h-32` | 128px (= `--spacing-32`) | 🟢 valor alinhado, porém altura arbitrária do empty-state (some com `EmptyState`) |
+
+### 11.6 — Layout (⚪ sem token de design — ok)
+`grid` · `flex` · `items-center` · `items-baseline` · `justify-between` · `justify-center` · `md:grid-cols-2` · `lg:grid-cols-4` · `lg:grid-cols-3`
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde | Itens |
+|---|---|---|
+| ✅ token-backed | 3 famílias | cores, `border`, `rounded-md` |
+| 🟢 value-aligned | 6 | `space-y-8`, `gap-4`, `gap-2`, `tracking-tight`, `h-32` |
+| 🟡 drift (tipografia/sizing) | 5 | `text-2xl`, `font-semibold`, `text-sm`, `size-4`, `h-5 w-5` |
+| 🔴 off-system | **1** | **`border-dashed`** |
+
+> **Conclusão de estilo:** a tela é **token-limpa** — zero cor hardcoded, spacing/radius alinhados. O **único** estilo genuinamente fora do sistema é `border-dashed` (resolve junto com a adoção do `EmptyState`). O resto é drift de tipografia (resolve com `Heading`/`Text`).
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+dashboard:
+  route: src/client/routes/_authenticated/dashboard.tsx
+  fidelity: 0.68
+  components_used: [DashboardCard, Card, CardHeader, CardTitle, CardDescription, CardContent]
+  components_missing: [EmptyState, CardAction, CardFooter, Heading, Text]
+  gaps:
+    components: [C1, C2, C3, C4]
+    emitters:   [E1, E2, E3, E4, E5]
+    colors:     [CL1]
+    spacing:    [SP1]
+    typography: [TY1, TY2]
+    sizing:     [SZ1, SZ2]
+    states:     [ST1, ST2, ST3]
+  severity: { high: 3, medium: 8, low: 6 }
+  unused_seven:                      # superfície do DS não aproveitada (seção 9)
+    alternative_components: [KPICard, SingleStat, Feed, Timeline, List, Section, Container, Grid, Stack]
+    unused_props: { DashboardCard: [badge, ctaText, ctaLink, ctaDescription, loading, children] }
+    unused_variants: { DashboardCard: [ghost, outline, elevated], Card: [elevated, outlined, ghost, selectable] }
+    unused_subcomponents: { Card: [CardMedia, CardAction, CardFooter] }
+  user_actions:                      # seção 10
+    total: 8
+    wired: 0
+    unwired: [A1, A2, A3, A4, A5, A6, A8]   # A7 = n/a
+  style_audit:                       # seção 11 (classe-a-classe)
+    token_backed: [colors, border, rounded-md]
+    value_aligned: [space-y-8, gap-4, gap-2, tracking-tight, h-32]
+    drift: [text-2xl, font-semibold, text-sm, size-4, h-5 w-5]
+    off_system: [border-dashed]      # único estilo sem token Seven
+    hardcoded_colors: 0
+```
diff --git a/docs/ets/state/reports/screens/integrations.md b/docs/ets/state/reports/screens/integrations.md
new file mode 100644
index 0000000..d210009
--- /dev/null
+++ b/docs/ets/state/reports/screens/integrations.md
@@ -0,0 +1,367 @@
+# Auditoria de tela — Integrations
+
+> **Rota:** `src/client/routes/_authenticated/integrations.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟡 **71%** — adota muitos componentes certos (Dialog+Form+Checkbox+TextInput compostos, Badge, Button, Card, Divider) e liga 10/12 ações, mas quebra o DS na **cor** (paleta `emerald`/`amber` crua) e desperdiça emitters/estados (loading, leftIcon, Switch, variantes de Card) + tipografia crua.
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | Header da página (título + subtítulo + contador "X connected") | raw `<h1>`/`<p>` + `<div>` dot | — / dot cru |
+| 2 | Busca de integrações | `@etus/seven-react` | `TextInput` (+ ícone `<Icons.search>` absoluto cru) |
+| 3 | Filtros por categoria (5 pills) | `@etus/seven-react` | `Button` (`default`/`ghost`, `size="sm"`) |
+| 4 | Grid de integrações (6 cards) | `@etus/seven-react` | `Card` + `CardContent` (`IntegrationCard`) |
+| 5 | Badge "Connected" / categoria | `@etus/seven-react` | `Badge` (`color="success"` / `type="badge-outline"`) |
+| 6 | Botão Connect/Configure por card | `@etus/seven-react` | `Button` (+ spinner manual) |
+| 7 | Empty-state "No integrations found" | raw `<div className="border-dashed">` | — (deveria ser `Empty`) |
+| 8 | Divisores de seção (2×) | `@etus/seven-react` | `Divider` (bare, `type="line"` default) |
+| 9 | Seção Webhooks (lista de 1 card) | `@etus/seven-react` | `Card` + `CardContent` (`WebhookCard`) |
+| 10 | Status dot do webhook + chips de evento | raw `<div>` dot + `Badge` | dot cru / `Badge color="muted"` |
+| 11 | Botões editar/excluir webhook | `@etus/seven-react` | `Button` (`ghost`, `size="icon"`) |
+| 12 | Empty-state "No webhooks configured" | `Card` + `CardContent` cru | — (deveria ser `Empty`) |
+| 13 | Card "Build Custom Integrations" + CTA | `@etus/seven-react` | `Card` (`bg-muted/50`) + `Button outline` |
+| 14 | Dialog "Create Webhook" | `@etus/seven-react` | `Dialog` + `DialogTrigger/Content/Header/Title/Description/Footer` |
+| 15 | Form do webhook (URL + grid de eventos) | `@etus/seven-react` | `Form` + `FormField/Item/Label/Control/Description/Message` + `TextInput` + `Checkbox` |
+| 16 | Grid de eventos (6 checkboxes) | raw `<label>` + `Checkbox` | — (deveria ser `RadioCardGroup`/`CheckboxGroup`) |
+| 17 | Ícones (lucide + SVG custom de marcas) | `@/components/icons` + SVG inline | — (convenção do projeto, ok) |
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Tipografia em HTML cru | `<h1>` (1×), `<h2>` (2×), `<p>` (vários), `<code>` (1×) em vez de `Heading`/`Text`/`Paragraph` (todos exportados no beta.4) | 🟡 | `Heading level={1}` no título, `Heading level={2}` nas seções, `Text` nos parágrafos |
+| **C2** | Empty-states à mão (2×) | "No integrations found" usa `<div className="… border-dashed">`; "No webhooks configured" usa `Card>CardContent` cru. Existe `Empty`+`EmptyMedia`/`EmptyTitle`/`EmptyDescription`/`EmptyContent` | 🟡 | `<Empty><EmptyMedia variant="icon"><EmptyTitle><EmptyDescription>` |
+| **C3** | Status dots hand-built | header (`<div className="h-2 w-2 rounded-full bg-emerald-500">`) e webhook (`bg-emerald-500`/`bg-amber-500`) reimplementam `StatusIndicator` (existe, com `variant` success/warning/error/info/neutral + `pulse`) | 🟡 | `<StatusIndicator variant="success" shape="dot" pulse>` |
+| **C4** | `Card` usa só `CardContent` | toda a estrutura (título, descrição, ação, footer) é montada com `<div>` crus dentro de um único `CardContent className="p-4"`; ignora `CardHeader/CardTitle/CardDescription/CardAction/CardFooter/CardMedia` | 🟡 | compor com sub-componentes do `Card` (padding/grid vêm dos tokens) |
+| **C5** | Grid de eventos com `<label>` cru | seleção de eventos usa `<label className="… border-primary bg-primary/5">` + `Checkbox`, replicando à mão um cartão selecionável. Existe `RadioCardGroup`/`CheckboxGroup` (forms) e `Card variant="selectable"` | 🟡 | `CheckboxGroup`/`RadioCardGroup`, ou `Card selectable` com `onToggleSelect` |
+| **C6** | Ícone de busca posicionado à mão | `<Icons.search className="absolute left-3 top-1/2 …">` + `TextInput className="pl-9"`; o `TextInput` tem prop `leadingIcon` (auto-padding via `--input-icon-padding-*`) e existe `SearchInput` (com `searchIcon`+`onClear`+botão limpar) | 🟡 | `<TextInput leadingIcon={<Icons.search/>}>` ou `SearchInput` |
+| **C7** | Filtros como `Button` em vez de tabs | 5 pills de categoria são `Button` com toggle manual de `variant`; o padrão semântico é `TabNavigation` (`variant line`/`solid`, `onValueChange`) ou `Tabs`/`TabsList`/`TabsTrigger` | 🔵 | `TabNavigation` (mantém aparência, ganha semântica de tablist/aria) |
+
+**Sub-componentes do `Card` disponíveis e NÃO usados:** `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardFooter`, `CardMedia`.
+**Sub-componentes do `Dialog` disponíveis e NÃO usados:** `DialogClose`, `DialogOverlay`, `DialogPortal` (+ prop `showCloseButton`).
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> A tela é **majoritariamente interativa** (10/12 gatilhos ligados) — bem acima do dashboard. Os furos são **2 botões mortos**, 1 botão semanticamente errado e handlers mock que não persistem.
+
+| ID | Emitter/ação ausente ou quebrada | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | Botão "Edit webhook" sem `onClick` | `WebhookCard` — `<Button variant="ghost" size="icon">` (pencil) **não tem handler** | 🔴 | ligar `onClick` (abrir Dialog de edição) |
+| **E2** | Botão "View API Docs" sem ação | card "Build Custom Integrations" — `<Button variant="outline">` sem `onClick`/`href`/`asChild`. UI morta | 🔴 | `Button asChild` → `<a href>` (link de docs) |
+| **E3** | "Configure" não configura | quando `connected`, o botão mostra "Configure" (ícone settings) mas o `onClick` chama `handleToggle` → **desconecta**. Rótulo ≠ comportamento | 🔴 | separar: "Configure" abre `Dialog`; ação de desconectar vai pra menu/`Switch` |
+| **E4** | Spinner de loading manual (3×) | `Icons.spinner animate-spin` dentro de `Button` em `IntegrationCard`, delete do `WebhookCard` e submit do Dialog — o `Button` tem prop nativa `loading`/`loadingText` | 🟡 | `<Button loading={isConnecting} loadingText="…">` |
+| **E5** | Ícones colados à mão no `Button` | `Icons.plus className="mr-2"`, `Icons.settings className="mr-2"`, `Icons.arrowRight className="ml-2"` — o `Button` tem `leftIcon`/`rightIcon`/`icon` | 🔵 | `<Button leftIcon={<Icons.plus/>}>` / `rightIcon` |
+| **E6** | Handlers mock não persistem | `handleToggle` (connect), `handleDelete` (delete), `onSubmit` (create) usam `setTimeout`+`console.log`; `handleDelete` nem remove do array `webhooks` | 🔴 | ligar a mutations reais (fora do DS, mas é gap funcional — Regra 6) |
+| **E7** | `Badge.onDismiss` não usado nos chips de evento | os chips de evento do webhook são read-only; poderiam ser removíveis | 🔵 | `Badge onDismiss` quando os eventos forem editáveis |
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| dot "connected" (header) | `bg-emerald-500` | ❌ paleta crua; existe `--success`/`StatusIndicator variant="success"` | 🔴 **CL1** |
+| ring "connected" (IntegrationCard) | `ring-1 ring-emerald-500/20` | ❌ paleta crua | 🔴 **CL1** |
+| ícone "connected" bg/fg | `bg-emerald-100 dark:bg-emerald-900/30` · `text-emerald-600 dark:text-emerald-400` | ❌ paleta crua; existe `--success-subtle`/`--success-foreground` | 🔴 **CL1** |
+| dot status do webhook | `bg-emerald-500` / `bg-amber-500` | ❌ paleta crua; existe `--success`/`--warning` | 🔴 **CL1** |
+| `lastStatus` success | `text-emerald-600` | ❌ paleta crua | 🔴 **CL1** |
+| `lastStatus` error | `text-destructive` | ✅ `--destructive` | ✅ |
+| card "Build Custom…" bg | `bg-muted/50` | parcial — `muted` é token, mas sobrescreve `--card-root-background` | 🟡 **CL2** |
+| ícone container neutro | `bg-muted` · `bg-background` | ✅ `--muted` / `--background` | ✅ |
+| texto secundário | `text-muted-foreground` (+ `/50`) | ✅ `--muted-foreground` | ✅ |
+| seleção de evento | `border-primary` · `bg-primary/5` · `border-border` | ✅ `--primary` / `--border` | ✅ |
+| chips/mono | `font-mono` | ✅ `--font-mono` (JetBrains Mono, definido no `index.css`) | ✅ |
+
+→ **CL1 é o achado central:** `emerald`/`amber` têm **0 ocorrências** no catálogo `@etus/tokens` (verificado). O Seven oferece **`--success`/`--warning`/`--info`** (com `-subtle`/`-foreground`/`-border`), `StatusIndicator` (variantes `success`/`warning`/`error`/`info`/`neutral`) e `Badge color="success"|"warning"`. O próprio `index.css` já define `--color-success-solid` — e a tela ignora. Passa no ESLint (o ban de cor mira literais `oklch()/rgb()/hsl()`, não utilitários Tailwind), mas é **off-system de fato**.
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| wrapper da página | `space-y-8` (32px) | layout de página (raw) | ✅ aceitável (= `--spacing-8`) |
+| seções | `space-y-4` (16) / `space-y-3` (12) | layout (raw) | ✅ value-aligned |
+| grids/flex | `gap-4` (16) · `gap-2` (8) · `gap-1` (4) · `gap-1.5` (6) | layout (raw) | ✅ value-aligned |
+| **`CardContent className="p-4"`** | 16px | sobrescreve `--card-content-padding-x` (e adiciona padding-y, já que o `Card` root tem `py-[var(--card-root-padding-y)]`) | 🟡 **SP1** usar padding do token |
+| **busca `pl-9`** + ícone absoluto | 36px | offset manual em vez de `TextInput leadingIcon` (auto-pad `--input-icon-padding-*`) | 🟡 **SP2** (= C6) |
+| ritmo vertical misto | `space-y-8`/`space-y-4`/`space-y-3`/`py-4` | — | 🔵 **SP3** padronizar |
+| interno dos cards/inputs/badges | `--card-*` / `--input-size-*` / `--badge-size-*` | tokens (quando não sobrescritos) | ✅ correto |
+
+→ Espaçamento de layout é quase todo value-aligned. Os furos reais: **SP1** (p-4 sobre o token do Card) e **SP2** (pl-9 manual em vez de `leadingIcon`).
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| título h1 | `<h1 className="text-2xl font-semibold tracking-tight">` | `Heading level={1}` (tokens de tipografia) | 🟡 **TY1** (= C1) |
+| seções h2 (2×) | `<h2 className="text-lg font-medium">` | `Heading level={2}` | 🟡 **TY2** (= C1) |
+| parágrafos / `<code>` | `<p className="text-sm text-muted-foreground">`, `<code className="text-sm font-mono">` | `Text`/`Paragraph` | 🟡 **TY3** (= C1) |
+| **`Badge className="text-xs"` (3×)** | encolhe a fonte do badge à mão | `Badge size="sm"` (eixo `size` sm/default/lg existe) | 🟡 **TY4** |
+| `Badge type="badge-outline"` categoria | sem `color` → cai em `primary` (border-primary/text-primary) | provavelmente queria `color="muted"`/`secondary` | 🔵 cor implícita |
+
+> O guard-rail do ESLint **não** bane `h1/h2/p/code/label` (só `button/input/select/textarea`) — passa o lint, mas é drift de DS.
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | Icon-button sobrescreve token | `WebhookCard`: `<Button size="icon" className="h-8 w-8">` força 32px sobre `--button-size-icon-size`; existe `size="icon-sm"` | 🟡 |
+| **SZ2** | Convenção de ícone mista | `h-4 w-4` (16) · `h-5 w-5` (20) · `h-6 w-6` (24) · `h-8 w-8` (32) · `h-3 w-3` (12) · `size-3` na mesma tela | 🔵 padronizar p/ `size-*` |
+| **SZ3** | Badge `text-xs` em vez de `size` | (= TY4) o tamanho do badge deveria vir do eixo `size`, não de `text-xs` | 🟡 |
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| loading (botões) | 🟡 presente, porém **hand-built** (`Icons.spinner animate-spin`) | `Button.loading` / `Button.loadingText` (spinner nativo + `aria-busy`) | 🟡 **ST1** (= E4) |
+| toggle conectar/desconectar | `Button` que alterna estado | `Switch`/`Toggle` (semântica on/off, `switchText`/`descriptionText`) seria mais expressivo | 🟡 **ST2** |
+| ênfase "connected" no card | manual: `ring-1 ring-emerald-500/20 hover:shadow-md` | `Card variant="selectable"` (`data-selected`, ring via token `--primary`) ou `variant="elevated"` | 🟡 **ST3** |
+| empty (2×) | 🟡 presente, porém cru | `Empty`/`EmptyMedia`/`EmptyTitle`/`EmptyDescription` | 🟡 **ST4** (= C2) |
+| botões mortos | ❌ Edit/View API Docs sem handler nem `disabled` | `Button` ligado / `asChild` link | 🔴 **ST5** (= E1/E2) |
+| erro (form) | ✅ `FormMessage` ligado ao `zodResolver` | — | ✅ correto |
+| hover/focus dos controles | ✅ herdado de `Button`/`TextInput`/`Checkbox` | — | ✅ |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | CL1, E1·E2·ST5, E3, E6 | **cores `emerald`/`amber` off-system**; 2 botões mortos (Edit, API Docs); "Configure" que desconecta; handlers mock sem persistência |
+| 🟡 **Should-fix** | C1·TY1·TY2·TY3, C2·ST4, C3, C4, E4·ST1, TY4·SZ3, ST2, ST3, SP1, SP2, C5, C6, CL2 | tipografia→`Heading`/`Text`; empty→`Empty`; dots→`StatusIndicator`; compor `Card`; `Button.loading`; `Badge size`; `Switch`; `Card selectable`; padding via token; `leadingIcon`; `bg-muted/50` |
+| 🔵 **Nice-to-have** | C7, E5, E7, SP3, SZ1, SZ2 | filtros→`TabNavigation`; `leftIcon`/`rightIcon`; chips removíveis; ritmo; `size="icon-sm"`; padronizar ícones |
+
+**Pontos corretos (não mexer):** `Dialog`+`Form`+`FormField/Control/Message`+`Checkbox`+`TextInput` compostos e validados (zod) · `Badge`/`Button`/`Divider` com API certa · cores `primary`/`muted`/`border`/`destructive`/`font-mono` token-backed · **guard-rail limpo** (zero `<button>/<input>/<select>/<textarea>` cru) · padding/gap internos dos componentes via token.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário do que o Seven oferece e a tela **não** aproveita — props, variants, sub-componentes, estados e **componentes alternativos**. `[u]` = não usado.
+
+### 9.1 — `Badge` (status "Connected", categoria, chips de evento)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| Props | `color` · `type` · `className` | ✅ (parcial) |
+| Props `[u]` | `size` (sm/default/lg) · `dot` · `icon`/`leadingIcon`/`trailingIcon` · `onDismiss` · `interactive` · `tooltip` · `iconOnly` · `avatar` · `country` · `disabled` · `asChild` | ❌ (usa `text-xs` no lugar de `size`) |
+| Types `[u]` | `pill-color` · `pill-outline` · `badge-color` · `badge-modern` (usa `pill-color`/`badge-outline`) | ❌ |
+| Colors `[u]` | `warning` · `info` · `tip` · `primary`/`secondary`/`destructive` | ❌ |
+
+### 9.2 — `Button` (filtros, connect, ícones, CTA)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Variants usados | `default` · `ghost` · `outline` | ✅ |
+| Variants `[u]` | `primary` · `destructive` · `dashed` · `secondary`(+`tone`) · `link`(+`tone`) · `tertiary` · `success` · `warning` · `unstyled` | ❌ |
+| Sizes `[u]` | `lg` · `icon-sm` (usa `default`/`sm`/`icon`) | ❌ |
+| Props `[u]` | **`loading`/`loadingText`** · **`leftIcon`/`rightIcon`/`icon`** · `badge`/`badgeColor`/`badgeSize` · `tooltip` · `fullWidth` · `asChild` · `shape` · `tone` · `data-id` | ❌ |
+| Emitters `[u]` | `onFocus` · `onBlur` · `onKeyDown` (payload `ButtonEventPayload`: `id`,`isLoading`,`timestamp`) | ❌ |
+
+### 9.3 — `Card` (integração, webhook, API)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Sub-componentes usados | `CardContent` | ✅ (só esse) |
+| Sub-componentes `[u]` | `CardHeader` · `CardTitle` · `CardDescription` · `CardAction` · `CardFooter` · `CardMedia` | ❌ |
+| Variants `[u]` | `elevated` · `outlined` · `ghost` · **`selectable`** (`onToggleSelect`/`onTogglePin`/`selected`/`pinned`/`selectableProps`) | ❌ (usa `default` + ring/hover manuais) |
+
+### 9.4 — `TextInput` / busca
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props `[u]` | **`leadingIcon`/`trailingIcon`** (+`*Interactive`) · `size` (xs→xl) · `variant` (default/filled/flushed/unstyled) | ❌ (ícone absoluto + `pl-9` manual) |
+| **Componente alternativo `[u]`** | **`SearchInput`** — `searchIcon` · `onClear` · `showClearButton` · `clearIcon` | ❌ nunca considerado |
+
+### 9.5 — `Dialog` (create webhook)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Sub-componentes usados | `DialogTrigger/Content/Header/Title/Description/Footer` | ✅ (bem composto) |
+| Sub-componentes/props `[u]` | `DialogClose` · `DialogOverlay` · `DialogPortal` · `showCloseButton` | ❌ (ok — `Cancel` manual cobre) |
+
+### 9.6 — `Checkbox` + grid de eventos
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props `[u]` | `size` (sm/md/lg) · estado `indeterminate` | ❌ |
+| **Componentes alternativos `[u]`** | **`CheckboxGroup`** · **`RadioCardGroup`** (cartões selecionáveis nativos) · `Card variant="selectable"` | ❌ (usa `<label>` cru com estilo manual) |
+
+### 9.7 — `Divider`
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props `[u]` | `type` (text/heading/button/button-group/…) · `visualStyle` (single/dual/background-fill) · `lineType` (solid/dashed/dotted) · `labelPosition` · `children` | ❌ (usa bare `type="line"` — ✅ ok) |
+
+### 9.8 — Status / dots / tipografia / layout (hoje crus)
+| Elemento | Componente Seven `[u]` | Eixos não aproveitados |
+|---|---|---|
+| dots de status | **`StatusIndicator`** | `variant`(success/warning/error/info/neutral) · `shape`(dot/bar) · `size`(xs→2xl) · `pulse` · `label`/`labelPosition` |
+| toggle on/off | **`Switch`** / **`Toggle`** | `switchText` · `descriptionText` · `type`(box) · `size` |
+| `<h1>`/`<h2>` | **`Heading`** | `level(1-6)` · `size` · `weight` · `align` · `color` · `gradient` · `asChild` |
+| `<p>`/`<code>` | **`Text`** / **`Paragraph`** | `variant`(p1-3/caption/code/display) · `weight` · `color` |
+| empty-states | **`Empty`** (+`EmptyMedia`/`EmptyTitle`/`EmptyDescription`/`EmptyContent`) | composição + `variant="icon"` |
+| lista de webhooks | **`Item`** · **`List`** (data-display) | `variant`/`size`/`media` para linhas estruturadas |
+| filtros | **`TabNavigation`** / **`Tabs`** | `variant`(line/solid) · `onValueChange` |
+| layout da página | `Section` · `Container` · `Grid` · `Stack` · `Flex` | estruturariam com tokens de espaçamento |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Todo gatilho da tela, o status atual e o primitivo Seven que o ligaria.
+> **Resultado: 10 de 12 gatilhos estão ligados; 2 botões mortos (Editar webhook, Ver API Docs). 3 handlers são mock (não persistem) e 1 está semanticamente errado ("Configure").**
+
+| # | Ação possível | Gatilho (elemento) | Status | Observação / como ligar (Seven) |
+|---|---|---|---|---|
+| A1 | Buscar integrações | `TextInput` (busca) | ✅ ligada | `onChange`→`setSearchQuery`; migrar p/ `SearchInput onClear` p/ limpar |
+| A2 | Filtrar por categoria | `Button` ×5 | ✅ ligada | `onClick`→`setActiveCategory`; semântica via `TabNavigation` |
+| A3 | Conectar integração | `Button` (Connect) | 🟡 ligada (mock) | `onClick`→`handleToggle` (`setTimeout`, estado local) — sem API |
+| A4 | Configurar integração | `Button` (Configure) | 🔴 **mislabeled** | rótulo "Configure" mas `onClick` **desconecta**; falta `Dialog` de config (E3) |
+| A5 | Desconectar integração | `Button` (Configure) | 🟡 ligada (mock) | mesmo toggle de A3/A4 |
+| A6 | Abrir "Add Webhook" | `DialogTrigger`>`Button` | ✅ ligada | `Dialog open/onOpenChange` |
+| A7 | Preencher URL do webhook | `TextInput` (RHF `field`) | ✅ ligada | `FormField`+`zodResolver` |
+| A8 | Selecionar eventos | `Checkbox` ×6 | ✅ ligada | `onCheckedChange`→`toggleEvent` |
+| A9 | Cancelar dialog | `Button` (Cancel) | ✅ ligada | `onClick`→`setIsOpen(false)` |
+| A10 | Submeter webhook | `<form onSubmit>` + `Button submit` | 🟡 ligada (mock) | `handleSubmit(onSubmit)` → `console.log`, sem API (Regra 6) |
+| A11 | Fechar dialog (X/Esc/overlay) | `DialogContent` (`showCloseButton` default) | ✅ ligada (nativo) | vem do Radix |
+| A12 | Editar webhook | `Button` (pencil) | 🔴 **não-ligada** | sem `onClick` — botão morto (E1) |
+| A13 | Excluir webhook | `Button` (trash) | 🟡 ligada (mock) | `onClick`→`handleDelete` (`setTimeout`, **não remove do array**) |
+| A14 | Ver API Docs | `Button` (outline) | 🔴 **não-ligada** | sem `onClick`/`href`/`asChild` — botão morto (E2) |
+
+**Emitters do `Button` disponíveis quando as ações forem ligadas:** `onClick` · `onFocus` · `onBlur` · `onKeyDown` (payload `ButtonEventPayload`: `id`, `isLoading`, `timestamp`). **Wired: 10/12** (A12, A14 mortos; A4 semanticamente errado; A3/A5/A10/A13 mock).
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** família de classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout (estrutural, sem token de design)
+>
+> Nota-chave: o spacing do Seven **espelha o Tailwind** (`--spacing-8`=32=`space-y-8`; `--spacing-4`=16=`gap-4`; `--spacing-2`=8=`gap-2`) e `--font-tracking-tight`=`tracking-tight`. Por isso muito "cru" é 🟢, não violação.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `text-muted-foreground` (+`/50`) | `--muted-foreground` | ✅ |
+| `bg-muted` · `bg-background` · `border` · `border-border` | `--muted`/`--background`/`--border` | ✅ |
+| `border-primary` · `bg-primary/5` · `border-primary/50` | `--primary` | ✅ |
+| `text-destructive` (×2) | `--destructive` | ✅ |
+| `font-mono` | `--font-mono` (JetBrains Mono, brand) | ✅ |
+| `bg-muted/50` (card API) | `--muted` @50% — sobrescreve `--card-root-background` | 🟡 **CL2** |
+| **`bg-emerald-500`** (header+webhook dot) | — (paleta Tailwind; `--success` existe) | 🔴 **CL1** |
+| **`ring-emerald-500/20`** | — | 🔴 **CL1** |
+| **`bg-emerald-100` · `dark:bg-emerald-900/30`** | — (`--success-subtle` existe) | 🔴 **CL1** |
+| **`text-emerald-600` · `dark:text-emerald-400`** | — (`--success-foreground` existe) | 🔴 **CL1** |
+| **`bg-amber-500`** (webhook pending) | — (`--warning` existe) | 🔴 **CL1** |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `space-y-8` | 32 | `--spacing-8` | 🟢 |
+| `space-y-4` · `gap-4` · `p-4`(layout) · `mt-4` | 16 | `--spacing-4` | 🟢 |
+| `space-y-3` · `p-3` | 12 | `--spacing-3` | 🟢 |
+| `gap-2` · `mr-2`/`ml-2` · `mt-2` · `py-4`* | 8 | `--spacing-2` | 🟢 |
+| `gap-1` · `gap-1.5` · `pb-1` · `mt-1` | 4/6 | `--spacing-1`/`1.5` | 🟢 |
+| `p-8` | 32 | `--spacing-8` | 🟢 (porém empty-state cru → `Empty`) |
+| **`pl-9`** | 36 | offset manual do ícone | 🟡 **SP2** (usar `leadingIcon`) |
+| **`CardContent p-4`** | 16 | sobrescreve `--card-content-padding-x` | 🟡 **SP1** |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `rounded-lg` | `--radius-lg` | ✅ |
+| `rounded-full` | `--radius-full` | ✅ |
+| `border` · `border-border` · `border-primary` | `--border`/`--primary` | ✅ |
+| **`border-dashed`** (empty-state) | sem **token**, mas o próprio `Empty` do Seven usa `border-dashed` (e `Divider lineType="dashed"`) | 🟡 (não é off-system; é drift → adotar `Empty`) |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| `text-2xl` (h1) | 1.5rem | 🟡 | deveria vir de `Heading` |
+| `text-lg` (h2 ×2) | 1.125rem | 🟡 | `Heading level={2}` |
+| `font-semibold`/`font-medium` | 600/500 | 🟡 | peso do `Heading`/`Text` |
+| `tracking-tight` | -0.025em | 🟢 | == `--font-tracking-tight` |
+| `text-sm` (vários) | 0.875rem | 🟡 | corpo deveria vir de `Text` |
+| **`text-xs` em `Badge` (×3)** | 0.75rem | 🟡 **TY4** | usar `Badge size="sm"` |
+| `text-xs` (metadados) | 0.75rem | 🟡 | `Text variant="caption"` |
+| `capitalize` · `truncate` · `line-clamp-2` | — | ⚪ | utilitário de texto (ok) |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `h-4 w-4` / `h-3 w-3` / `size-3` | 16/12 | 🟢 valor alinhado (mas convenção mista) |
+| `h-5 w-5` / `h-6 w-6` | 20/24 | 🟢 (convenção mista, SZ2) |
+| `h-2 w-2` (dots) | 8 | 🟢 valor; porém dot cru → `StatusIndicator` |
+| `h-10 w-10` / `h-12 w-12` | 40/48 | 🟢 containers de ícone |
+| **`h-8 w-8` em `Button size="icon"`** | 32 | 🟡 **SZ1** sobrescreve `--button-size-icon-size` (usar `icon-sm`) |
+| `max-w-sm` / `max-w-lg` / `min-w-0` | — | ⚪ layout |
+
+### 11.6 — Layout (⚪ sem token de design — ok)
+`flex` · `grid` · `flex-col` · `flex-1` · `items-center` · `items-start` · `items-baseline` · `justify-between` · `justify-center` · `shrink-0` · `relative` · `absolute` · `overflow-hidden` · `overflow-x-auto` · `transition-all` · `transition-colors` · `animate-spin` · `hover:shadow-md` · `mx-auto` · `text-center` · `top-1/2` · `left-3` · `-translate-y-1/2` · `sm:flex-row` · `sm:items-center` · `sm:grid-cols-2` · `lg:grid-cols-3` · `grid-cols-2` · `sm:max-w-lg`
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde (famílias) | Itens |
+|---|---|---|
+| ✅ token-backed | ~7 | `muted`/`muted-foreground`/`background`/`border`/`primary`/`destructive`/`font-mono`, `rounded-lg`/`rounded-full` |
+| 🟢 value-aligned | ~10 | `space-y-8/4/3`, `gap-4/2/1/1.5`, `p-8/4/3`, `mt-*`/`mr-2`/`ml-2`, `tracking-tight`, `h-*/w-*/size-*` de ícone |
+| 🟡 drift | ~10 | `text-2xl`/`text-lg`/`font-semibold`/`font-medium`/`text-sm`/`text-xs`(badge), `CardContent p-4`, `pl-9`, `h-8 w-8`, `bg-muted/50`, `border-dashed` |
+| 🔴 off-system | **7** | **`emerald-500` · `emerald-500/20` · `emerald-100` · `emerald-900/30` · `emerald-600` · `emerald-400` · `amber-500`** |
+
+> **Conclusão de estilo:** ao contrário do dashboard (token-limpo), esta tela tem **uma quebra de cor real e repetida**: a família `emerald`/`amber` (7 utilitários distintos, em dots/ring/ícone/status) **não existe** no `@etus/tokens` e ignora os semânticos `--success`/`--warning`/`--info`, `StatusIndicator` e `Badge color`. O `border-dashed`, diferente do exemplar, **não** é off-system aqui (o `Empty` do Seven usa border-dashed) — é drift que some ao adotar `Empty`. O restante é drift de tipografia/sizing (resolve com `Heading`/`Text`/`Badge size`/`Button loading`).
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+integrations:
+  route: src/client/routes/_authenticated/integrations.tsx
+  fidelity: 0.71
+  components_used: [Badge, Button, Card, CardContent, Checkbox, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Divider, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, TextInput]
+  components_missing: [Heading, Text, Paragraph, Empty, EmptyMedia, EmptyTitle, EmptyDescription, StatusIndicator, Switch, SearchInput, TabNavigation, RadioCardGroup, CheckboxGroup, CardHeader, CardTitle, CardDescription, CardAction, CardFooter, Item, List]
+  gaps:
+    components: [C1, C2, C3, C4, C5, C6, C7]
+    emitters:   [E1, E2, E3, E4, E5, E6, E7]
+    colors:     [CL1, CL2]
+    spacing:    [SP1, SP2, SP3]
+    typography: [TY1, TY2, TY3, TY4]
+    sizing:     [SZ1, SZ2, SZ3]
+    states:     [ST1, ST2, ST3, ST4, ST5]
+  severity: { high: 5, medium: 16, low: 6 }
+  unused_seven:
+    alternative_components: [StatusIndicator, Switch, Toggle, SearchInput, TabNavigation, Tabs, RadioCardGroup, CheckboxGroup, Empty, Heading, Text, Paragraph, Item, List, Section, Container, Grid, Stack, Flex]
+    unused_props:
+      Button: [loading, loadingText, leftIcon, rightIcon, icon, badge, tooltip, fullWidth, asChild, shape, tone]
+      Badge:  [size, dot, leadingIcon, trailingIcon, onDismiss, interactive, tooltip, iconOnly]
+      TextInput: [leadingIcon, trailingIcon, size, variant]
+      Checkbox: [size, indeterminate]
+    unused_variants:
+      Card: [elevated, outlined, ghost, selectable]
+      Button: [primary, destructive, dashed, secondary, link, tertiary, success, warning]
+      Badge: [pill-outline, badge-color, badge-modern]
+    unused_subcomponents:
+      Card: [CardHeader, CardTitle, CardDescription, CardAction, CardFooter, CardMedia]
+      Dialog: [DialogClose, DialogOverlay, DialogPortal]
+  user_actions:
+    total: 12
+    wired: 10
+    unwired: [A12, A14]                # botões mortos (Edit, View API Docs)
+    broken_or_mock: [A4, A3, A5, A10, A13]   # A4 mislabeled; demais mock/sem persistência
+  style_audit:
+    token_backed: [muted, muted-foreground, background, border, primary, destructive, font-mono, rounded-lg, rounded-full]
+    value_aligned: [space-y-8, space-y-4, space-y-3, gap-4, gap-2, gap-1, gap-1.5, p-8, tracking-tight, icon-sizes]
+    drift: [text-2xl, text-lg, font-semibold, font-medium, text-sm, badge-text-xs, card-p-4, pl-9, h-8-w-8, bg-muted-50, border-dashed]
+    off_system: [emerald-500, emerald-500/20, emerald-100, emerald-900/30, emerald-600, emerald-400, amber-500]
+    hardcoded_colors: 7                 # toda a família emerald/amber (paleta Tailwind, sem token Seven)
+  guardrail_raw_controls: 0             # zero <button>/<input>/<select>/<textarea> crus — guard-rail limpo
+```
diff --git a/docs/ets/state/reports/screens/invite.md b/docs/ets/state/reports/screens/invite.md
new file mode 100644
index 0000000..82732b0
--- /dev/null
+++ b/docs/ets/state/reports/screens/invite.md
@@ -0,0 +1,312 @@
+# Auditoria de tela — Aceitar convite (invite/$token)
+
+> **Rota:** `src/client/routes/invite.$token.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟡 **72%** — componentes certos e ações majoritariamente ligadas (7/8), mas reinventa a API nativa do `Button` (loading/leftIcon/fullWidth), ignora o `FeaturedIcon` nos 3 badges circulares e crava cor `emerald` fora do sistema.
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+> A tela tem **3 estados** mutuamente exclusivos — `pending` (default), `accepted`, `error` — além do sub-estado *loading* do botão de aceite (`isAccepting`). Todos compartilham o `Shell` (header + main centralizado).
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | Shell da página (wrapper + header + main) | raw `<div>/<header>/<main>` | — |
+| 2 | Marca/logo no header (link → `/`) | raw `<Link>` + `<div>` placa + `<span>` | — (placa caberia `FeaturedIcon`/`Avatar`) |
+| 3 | Card do convite (estado `pending`) | `@etus/seven-react` | `Card` + `CardHeader/CardTitle/CardDescription/CardContent` |
+| 4 | Card de sucesso (estado `accepted`) | `@etus/seven-react` | `Card` + idem |
+| 5 | Card de erro (estado `error`) | `@etus/seven-react` | `Card` + idem |
+| 6 | Badge de ícone circular ×3 (1 por estado) | raw `<div className="… rounded-full bg-X">` + ícone lucide | — (deveria ser `FeaturedIcon`) |
+| 7 | Botão "Accept Invitation" (+ spinner manual) | `@etus/seven-react` | `Button` (loading feito à mão) |
+| 8 | Botão "Decline" | `@etus/seven-react` | `Button variant="outline" asChild` |
+| 9 | Botões "Go to Dashboard" / "Go to Homepage" | `@etus/seven-react` | `Button asChild` (Link) |
+| 10 | Ícones | `@/components/icons` (lucide) | — (convenção do projeto, ok) |
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Badge circular à mão (×3) | os 3 `<div className="… h-16 w-16 … rounded-full bg-X/10">` + ícone `h-8 w-8 text-X` reproduzem **exatamente** o `FeaturedIcon` (existe no beta.4), que tem `tone` (brand/success/destructive), `shape="circle"` e `size` (plate+icon via token) | 🟡 | `<FeaturedIcon tone="brand\|success\|destructive" shape="circle" size="lg">` — resolve C1+CL1+SZ2 de uma vez |
+| **C2** | Ações no `CardContent`, não no `CardFooter` | Accept/Decline e os CTAs de saída vivem em `CardContent`; o slot dedicado a ações é `CardFooter` (tem `--card-footer-padding-top` próprio) | 🔵 | mover botões para `<CardFooter>` |
+| **C3** | Loading do botão reinventado | spinner manual (`<Icons.spinner className="… animate-spin" />` + "Accepting…") em vez do `Button.loading`/`loadingText` nativos | 🟡 | ver E1 |
+| **C4** | Ícone do botão à mão | `<Icons.check className="mr-2 h-4 w-4" />` dentro do `Button` em vez de `leftIcon` | 🔵 | ver E2 |
+| **C5** | Placa do logo à mão | `<div className="… size-8 rounded-lg bg-primary text-primary-foreground">` + ícone reproduz `FeaturedIcon tone="brand"` (ou `Avatar`) | 🔵 | `FeaturedIcon`/`Avatar` |
+| **C6** | Wordmark/título crus | `<span className="font-semibold">Hono</span>` e `CardTitle className="text-xl"` poderiam vir de `Text`/`Heading`/token | 🔵 | ver TY1/TY2 |
+
+**Sub-componentes do `Card` disponíveis e NÃO usados:** `CardMedia`, `CardAction`, `CardFooter`.
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> Diferente do dashboard, esta tela **está viva**: o aceite tem `onClick`, os CTAs usam `Link`/`asChild`, e o 401 redireciona pro login. Os gaps são de **API nativa não aproveitada** e do caminho de **falha sem retry**.
+
+| ID | Emitter/ação ausente | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | `Button.loading`/`loadingText` não usados | botão de aceite monta spinner manual e controla `disabled={isAccepting}` na mão | 🟡 | `<Button loading={isAccepting} loadingText="Accepting…">` (auto-desabilita e centra o spinner) |
+| **E2** | `Button.leftIcon` não usado | ícone do botão é filho com `mr-2` em vez de `leftIcon` (o gap já vem do `--button-size-default-gap`) | 🔵 | `leftIcon={<Icons.check />}` |
+| **E3** | `Button.fullWidth` não usado | largura via `className="w-full"` em vez da prop dedicada | 🔵 | `fullWidth` |
+| **E4** | Erro sem retry | estado `error` só oferece "Go to Homepage"; **não há "Tentar de novo"** — o usuário cai no erro e perde o fluxo de aceite | 🔴 | `Button onClick={() => setStatus('pending')}` (ou `handleAccept`) — ou `ErrorPage` com `onRetry` (= A7) |
+| **E5** | Emitters tipados do `Button` não aproveitados | `onClick` usa assinatura nativa; o Seven entrega `(event, payload: ButtonEventPayload{id,isLoading,timestamp})` + `onFocus/onBlur/onKeyDown` | 🔵 | adotar a assinatura tipada se precisar de telemetria |
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| placa do logo | `bg-primary` / `text-primary-foreground` | ✅ `--primary` / `--primary-foreground` | ✅ |
+| badge pending | `bg-primary/10` / `text-primary` | ✅ `--primary` (com opacidade) | ✅ |
+| badge erro | `bg-destructive/10` / `text-destructive` | ✅ `--destructive` | ✅ |
+| **badge sucesso** | `bg-emerald-100 dark:bg-emerald-900/30` / `text-emerald-600 dark:text-emerald-400` | ❌ paleta Tailwind crua | 🔴 **CL1** |
+| bg/borda/sombra dos cards | tokens internos (`--card-root-*`, `--border`) | ✅ | ✅ |
+| descrição do card | `--card-description-color` (interno) | ✅ | ✅ |
+
+→ **CL1 (🔴):** o Seven **tem** cor de sucesso em oklch — `--success`/`--success-foreground` (usados pelo `Button variant="success"`) e `--featured-icon-color-success-bg/fg`. O grep por `emerald` no `tokens.css` retorna **0**: as 4 classes `emerald-*` são a **única** família genuinamente fora do sistema. Resolve adotando `FeaturedIcon tone="success"` (C1).
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| main | `px-4` (16px) | layout (raw) | 🟢 `--spacing-4` |
+| link da marca | `space-x-2` (8px) | raw | 🟢 `--spacing-2` |
+| `CardContent` (pending) | `space-y-3` (12px) | raw | 🟢 `--spacing-3` |
+| badges | `mb-4` (16px) | raw | 🟢 `--spacing-4` |
+| ícone do botão | `mr-2` (8px) | raw | 🟢 `--spacing-2` (some com `leftIcon`) |
+| **`CardHeader`** | `pb-4` (16px) | sobrescreve token | 🔵 **SP1** — reduz o `--card-header-padding-bottom` (24px) pra 16px na mão |
+| interno dos cards | `--card-*-padding-*`, `--card-root-gap` | tokens Seven (não sobrescritos) | ✅ |
+
+→ Espaçamento da página é todo **value-aligned** com a escala (que espelha o Tailwind). Único ruído: `pb-4` mexendo no ritmo interno que o `CardHeader` já resolve por token.
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| título do card | `CardTitle className="text-xl"` | `CardTitle` só define `[font-weight:var(--card-title-weight)]`+`leading-tight`; o size deveria vir de token/`Heading`, não de `text-xl` cru | 🟡 **TY1** |
+| wordmark "Hono" | `<span className="font-semibold">` | `Text`/`Heading` (peso por token) | 🔵 **TY2** |
+| `CardTitle`/`CardDescription` | componentes Seven corretos | — | ✅ |
+
+> Nota: o guard-rail do ESLint **não** bane `span`/`h1`/`p` (só `button/input/select/textarea`) — passa o lint, mas `text-xl`/`font-semibold` crus são drift de tipografia.
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | Convenção de utilitário mista | `size-8`/`size-4` (placa/ícone do logo) vs `h-16 w-16`/`h-8 w-8`/`h-4 w-4` (badges/ícones) na mesma tela | 🔵 |
+| **SZ2** | Badge dimensionado à mão | `h-16 w-16` (plate) + `h-8 w-8` (ícone) deveriam vir do `FeaturedIcon size` (tokens `--featured-icon-size-*-plate/icon`) | 🟡 (= C1) |
+| **SZ3** | Ícone do botão redundante | `h-4 w-4` nos ícones do `Button` é redundante — o componente já aplica `[&_svg:not([class*='size-'])]:size-4` (16px) automaticamente | 🔵 |
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| loading (aceite em voo) | 🟡 presente, porém cru (spinner manual + `disabled` na mão) | `Button.loading`/`loadingText` · `Spinner` | 🟡 **ST1** (= E1) |
+| accepted (sucesso) | ✅ presente | (badge → `FeaturedIcon tone="success"`) | ✅ (cru — C1/CL1) |
+| error | 🟡 presente, mas **sem retry** | `ErrorPage onRetry` · `Button` de "tentar de novo" | 🔴 **ST2** (= E4·A7) |
+| pending | ✅ presente | — | ✅ |
+| validando convite | ❌ ausente (validação só no aceite, by design) | `Spinner`/`SkeletonLoader` se validasse no mount | 🔵 **ST3** (informativo) |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | CL1, E4·A7·ST2 | cor `emerald` fora do sistema; estado de erro sem ação de retry |
+| 🟡 **Should-fix** | C1·SZ2, C3·E1·ST1, TY1 | badges → `FeaturedIcon`; loading nativo do `Button`; `text-xl` cru no título |
+| 🔵 **Nice-to-have** | C2, E2·E3·SZ3, C5, C6·TY2, SP1, SZ1, E5, ST3 | `CardFooter`; `leftIcon`/`fullWidth`; placa do logo; wordmark; ritmo do header; convenção de ícones |
+
+**Pontos corretos (não mexer):** `Card` + composição `Header/Title/Description/Content` · cores `primary`/`destructive` token-backed · ações majoritariamente ligadas (`onClick`/`asChild`/`Link`) · redirect 401→login com `returnTo` · spacing value-aligned.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário completo do que o Seven oferece e a tela **não** aproveita — props, variants, sub-componentes, estados e **componentes alternativos**. `[u]` = não usado.
+
+### 9.1 — Cards (hoje `Card` + `Header/Title/Description/Content`)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| Sub-componentes | `CardHeader` `CardTitle` `CardDescription` `CardContent` | ✅ usados |
+| Sub-componentes `[u]` | `CardMedia` · `CardAction` · `CardFooter` | ❌ |
+| Variants `[u]` | `elevated` · `outlined` · `ghost` · `selectable` (usa `default`) | ❌ |
+| Estados `[u]` (variant `selectable`) | `onTogglePin` · `onToggleSelect` · `pinned` · `selected` · `data-active`/`data-selected` | ❌ |
+
+### 9.2 — Botões (hoje `Button` default/outline)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props usadas | `variant` (outline) · `asChild` · `onClick` · `disabled` · `className` | ✅ |
+| Props `[u]` | `loading` · `loadingText` · `leftIcon` · `rightIcon` · `icon` · `fullWidth` · `badge`/`badgeColor`/`badgeSize` · `tone` · `tooltip` · `size` · `shape` · `data-id` | ❌ |
+| Emitters `[u]` | `onClick(event,payload)` tipado · `onFocus` · `onBlur` · `onKeyDown` (payload `ButtonEventPayload`) | ❌ |
+| Variants `[u]` | `primary` · `destructive` · `secondary` · `secondary-gray` · `secondary-color` · `ghost` · `link`/`link-gray`/`link-color` · `tertiary`/`tertiary-gray`/`tertiary-color` · `success` · `warning` · `unstyled` | ❌ |
+| Sizes `[u]` | `sm` · `lg` · `icon` · `icon-sm` (usa `default`) | ❌ |
+| Shapes `[u]` | `square` · `circle` (usa `default`) | ❌ |
+
+### 9.3 — Badges circulares (hoje `<div>` cru + ícone lucide)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| **Componente alternativo `[u]`** | **`FeaturedIcon`** — `tone` (default/brand/success/warning/info/destructive) · `shape` (default/circle) · `size` (sm/md/lg/xl, plate+icon por token) | ❌ nunca considerado |
+| Alternativas `[u]` | `Avatar` · `StatusIndicator` | ❌ |
+
+### 9.4 — Loading (hoje `<Icons.spinner className="animate-spin">` manual)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| **Componente alternativo `[u]`** | **`Spinner`** — `size` (xs→xl) · `color` (primary/success/error…) · `variant` (default/gradient) · `aria-label` | ❌ |
+| Nativo `[u]` | `Button.loading` + `loadingText` (encapsula o `animate-spin`) | ❌ |
+
+### 9.5 — Erro (hoje `Card` + badge + 1 CTA)
+| Categoria | Disponível `[u]` | Eixos |
+|---|---|---|
+| **`ErrorPage`** | `type` · `title` · `description` · `actions` · `icon` · `onRetry` | dá retry e ação custom de fábrica |
+| `Alert` · `EmptyState` | título/descrição/ícone/ação padronizados | alternativas pro bloco de erro |
+
+### 9.6 — Marca / títulos (hoje `<span>` / `text-xl` crus)
+| Elemento | Componente Seven `[u]` | Eixos não aproveitados |
+|---|---|---|
+| `<span>Hono</span>` | **`Text`** / **`Heading`** | size · weight · color |
+| `CardTitle className="text-xl"` | token de size do `CardTitle`/`Heading` | size semântico em vez de `text-xl` |
+
+### 9.7 — Layout da página (hoje `<div>` + flex crus)
+| Disponível `[u]` | Uso |
+|---|---|
+| `Container` · `Section` · `Stack` · `Flex` | estruturariam o Shell com tokens de espaçamento em vez de `flex`/`min-h-screen`/`container` crus |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Toda ação que o usuário **poderia** executar nesta tela, o gatilho, o status atual e o primitivo Seven que a ligaria.
+> **Resultado: 7 de 8 ações estão ligadas — a tela é funcional; só falta o retry no erro.**
+
+| # | Ação possível | Gatilho (elemento) | Status | Como ligar (Seven) |
+|---|---|---|---|---|
+| A1 | Aceitar convite | botão "Accept Invitation" | ✅ ligada (`onClick={handleAccept}`) | já usa `Button onClick`; migrar p/ `loading` nativo |
+| A2 | Recusar convite | botão "Decline" | ✅ ligada (`asChild` → `Link to="/"`) | ok |
+| A3 | Logar p/ aceitar (401) | dentro de `handleAccept` | ✅ ligada (redirect `…/auth/login?returnTo=…`) | ok (programático) |
+| A4 | Ir pro Dashboard (pós-sucesso) | botão "Go to Dashboard" | ✅ ligada (`asChild` → `Link to="/dashboard"`) | ok |
+| A5 | Ir pra Home (pós-erro) | botão "Go to Homepage" | ✅ ligada (`asChild` → `Link to="/"`) | ok |
+| A6 | Voltar pra Home (logo) | `Link` da marca no header | ✅ ligada (`Link to="/"`) | ok |
+| A7 | **Tentar de novo após erro** | estado `error` | 🔴 **não-ligada** (só "Go to Homepage") | `Button onClick={() => setStatus('pending')}` **ou** `ErrorPage onRetry` (= E4·ST2) |
+| A8 | Foco/teclado nos botões | botões | ⚪ vem de graça do `Button` (`onKeyDown`/`onFocus` tipados) | já funciona; payload tipado disponível |
+
+**Emitters do `Button` disponíveis (hoje na assinatura nativa):** `onClick` · `onFocus` · `onBlur` · `onKeyDown` — payload `ButtonEventPayload` (`id`, `isLoading`, `timestamp`).
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** (resolve num token Seven) · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven; não referencia o token, mas não diverge) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout (estrutural, sem token de design)
+>
+> Nota-chave: a escala de spacing do Seven **espelha a do Tailwind** (`--spacing-2`=8px=`space-x-2`; `--spacing-3`=12px=`space-y-3`; `--spacing-4`=16px=`px-4`), `--radius-lg`=12px=`rounded-lg` e `--radius-full`=`rounded-full`. Por isso muito "cru" é 🟢/✅, não violação.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `bg-primary` · `text-primary-foreground` | `--primary` / `--primary-foreground` | ✅ |
+| `bg-primary/10` · `text-primary` | `--primary` (com opacidade) | ✅ |
+| `bg-destructive/10` · `text-destructive` | `--destructive` | ✅ |
+| bg/borda/sombra/descrição dos cards | tokens internos (`--card-root-*`, `--border`, `--card-description-color`) | ✅ |
+| **`bg-emerald-100`** | — (paleta Tailwind; Seven usa `--success`/`--featured-icon-color-success-bg`) | 🔴 |
+| **`dark:bg-emerald-900/30`** | — | 🔴 |
+| **`text-emerald-600`** | — (Seven: `text-success`/`--featured-icon-color-success-fg`) | 🔴 |
+| **`dark:text-emerald-400`** | — | 🔴 |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `space-x-2` | 8px | `--spacing-2` | 🟢 |
+| `space-y-3` | 12px | `--spacing-3` | 🟢 |
+| `px-4` · `mb-4` · `pb-4` | 16px | `--spacing-4` | 🟢 (`pb-4` sobrescreve token interno do `CardHeader` — SP1) |
+| `mr-2` | 8px | `--spacing-2` | 🟢 (some com `leftIcon`) |
+| padding/gap internos dos cards | — | `--card-*` | ✅ |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `rounded-lg` | `--radius-lg` (12px) | ✅ |
+| `rounded-full` | `--radius-full` (9999px) | ✅ |
+| borda dos cards | `--border` / `--card-root-border-width` (interno) | ✅ |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| `text-xl` (×3) | 1.25rem | 🟡 | size do título deveria vir do `CardTitle`/`Heading` (token), não cru |
+| `font-semibold` | 600 | 🟡 | peso cru no wordmark; via `Text`/`Heading` |
+| `text-center` (×4) | — | ⚪ | alinhamento estrutural, sem token |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `size-8` | 32px | 🟢 valor alinhado (placa do logo — cabia `FeaturedIcon`) |
+| `size-4` | 16px | 🟢 |
+| `h-16 w-16` (×3) | 64px | 🟡 deveria vir do `FeaturedIcon size`; convenção mista c/ `size-*` |
+| `h-8 w-8` (×3) | 32px | 🟡 idem (ícone do `FeaturedIcon` é sizing por token) |
+| `h-4 w-4` (×2) | 16px | 🟡 redundante (Button auto-aplica `size-4` em svg) |
+| `w-full` (×4) | — | 🟡 nos `Button` existe a prop `fullWidth`; nos `Card` é layout (⚪) |
+| `max-w-md` (×3) | 28rem | ⚪ largura do card (layout) |
+| `aspect-square` | — | ⚪ layout |
+| `animate-spin` | — | 🟡 reinventa o `Spinner`/`Button.loading` (que encapsulam o mesmo `animate-spin`) |
+
+### 11.6 — Layout (⚪ sem token de design — ok)
+`flex` · `min-h-screen` · `flex-col` · `container` · `h-14` (56px = `--spacing-14`, 🟢) · `items-center` · `justify-center` · `flex-1` · `mx-auto` · `aspect-square`
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde | Itens |
+|---|---|---|
+| ✅ token-backed | 4 famílias | cores `primary`/`destructive`, `rounded-lg`, `rounded-full`, tokens internos dos cards |
+| 🟢 value-aligned | 7 | `space-x-2`, `space-y-3`, `px-4`/`mb-4`/`pb-4`, `mr-2`, `size-8`, `size-4`, `h-14` |
+| 🟡 drift (tipografia/sizing/loading) | 8 | `text-xl`, `font-semibold`, `h-16 w-16`, `h-8 w-8`, `h-4 w-4`, `w-full` (em `Button`), `animate-spin` |
+| 🔴 off-system | **4** | **`bg-emerald-100`, `dark:bg-emerald-900/30`, `text-emerald-600`, `dark:text-emerald-400`** |
+
+> **Conclusão de estilo:** a tela é **quase token-limpa** — `primary`/`destructive` token-backed, spacing/radius alinhados. O **único** desvio genuinamente fora do sistema é a família **`emerald`** (4 literais) do badge de sucesso, que resolve adotando `FeaturedIcon tone="success"` (cor de sucesso já existe em oklch nos tokens). O resto é drift: tipografia (`text-xl`/`font-semibold`), sizing manual dos badges/ícones e o loading reinventado (resolvem com `FeaturedIcon` + `Button.loading`).
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+invite:
+  route: src/client/routes/invite.$token.tsx
+  fidelity: 0.72
+  states: [pending, accepted, error]
+  components_used: [Button, Card, CardHeader, CardTitle, CardDescription, CardContent]
+  components_missing: [FeaturedIcon, Spinner, CardFooter, ErrorPage, Heading, Text]
+  gaps:
+    components: [C1, C2, C3, C4, C5, C6]
+    emitters:   [E1, E2, E3, E4, E5]
+    colors:     [CL1]
+    spacing:    [SP1]
+    typography: [TY1, TY2]
+    sizing:     [SZ1, SZ2, SZ3]
+    states:     [ST1, ST2, ST3]
+  severity: { high: 2, medium: 6, low: 9 }
+  unused_seven:                      # superfície do DS não aproveitada (seção 9)
+    alternative_components: [FeaturedIcon, Spinner, ErrorPage, Alert, EmptyState, Avatar, StatusIndicator, Container, Section, Stack, Flex, Heading, Text]
+    unused_props: { Button: [loading, loadingText, leftIcon, rightIcon, icon, fullWidth, badge, tone, tooltip, size, shape], Card: [variant] }
+    unused_variants: { Button: [primary, destructive, secondary, ghost, link, tertiary, success, warning, unstyled], Card: [elevated, outlined, ghost, selectable] }
+    unused_subcomponents: { Card: [CardMedia, CardAction, CardFooter] }
+  user_actions:                      # seção 10
+    total: 8
+    wired: 7
+    unwired: [A7]                    # retry no erro; A8 = free-from-Button
+  style_audit:                       # seção 11 (classe-a-classe)
+    token_backed: [primary, destructive, rounded-lg, rounded-full, card-internals]
+    value_aligned: [space-x-2, space-y-3, px-4, mb-4, pb-4, mr-2, size-8, size-4, h-14]
+    drift: [text-xl, font-semibold, h-16 w-16, h-8 w-8, h-4 w-4, w-full, animate-spin]
+    off_system: [bg-emerald-100, dark:bg-emerald-900/30, text-emerald-600, dark:text-emerald-400]
+    hardcoded_colors: 4              # família emerald (badge de sucesso)
+```
diff --git a/docs/ets/state/reports/screens/landing.md b/docs/ets/state/reports/screens/landing.md
new file mode 100644
index 0000000..32d16d4
--- /dev/null
+++ b/docs/ets/state/reports/screens/landing.md
@@ -0,0 +1,323 @@
+# Auditoria de tela — Landing
+
+> **Rota:** `src/client/routes/index.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟡 **52%** — usa só `Button` (correto, via `asChild`), mas toda a estrutura — nav, hero, pill, feature cards, tech badges, footer — é HTML de marketing cru que ignora a camada de componentes do Seven. Em compensação as **cores são token-limpas**, o spacing é value-aligned e os **CTAs estão ligados** (5/6).
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | 3× CTA (Get Started ×2, GitHub) | `@etus/seven-react` | `Button` (`asChild`, `size`, `variant="outline"`) |
+| 2 | header sticky + nav | raw `<header>`/`<nav>` + `<div>` | — (deveria ser `Navbar`/`Header`) |
+| 3 | logo plate (mint) | raw `<div rounded-lg bg-primary>` + ícone | — (deveria ser `FeaturedIcon`) |
+| 4 | pill "Built on Cloudflare Workers" | raw `<div rounded-full border bg-muted>` + ícone + `<span>` | — (deveria ser `Badge`) |
+| 5 | título hero / heading tech / título de feature | raw `<h1>`/`<h2>`/`<h3>` | — (deveria ser `Heading`) |
+| 6 | parágrafos / wordmark / copy | raw `<p>`/`<span>` | — (deveria ser `Text`/`Paragraph`) |
+| 7 | 3× feature card (`FeatureCard` local) | raw `<div>` centrado + plate + `<h3>` + `<p>` | — (deveria ser `Card`+`FeaturedIcon`+`Heading`+`Text` ou `FeatureItem`) |
+| 8 | 6× tech badge (`TechBadge` local) | raw `<span>` | — (deveria ser `Badge`) |
+| 9 | footer + link GitHub | raw `<footer>` + `border-t` + `<a>` | — (`Container`+`Divider`+`Flex`; **não há `Footer` no beta.4**) |
+| 10 | sections / container / grid | raw `<section>`/`container`/`grid` | — (`Section`/`Container`/`Grid`) |
+| 11 | ícones | `@/components/icons` (lucide) | — (convenção do projeto, ok) |
+| 12 | landmarks `<header>/<main>/<footer>/<nav>/<section>` | semântica HTML | ⚪ correto (layout/semântico) |
+
+> **Adoção de componentes Seven: 1 família (Button) de ~9 famílias de elementos.** A tela é majoritariamente markup de marketing cru.
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Nav/header à mão | `<header className="sticky top-0 z-50 … border-b …"><nav>` reimplementa sticky/borda/container em vez de `Navbar` (existe: `sticky`, `variant="bordered"`, `contained`, `size`) ou `Header` | 🟡 | `Navbar sticky variant="bordered" contained` + `NavbarBrand href="/"` + `NavbarContent justify="end"` + `NavbarItem`/`NavbarLink` |
+| **C2** | Logo plate cru | `<div className="… size-8 rounded-lg bg-primary text-primary-foreground">` + ícone = placa de ícone à mão | 🟡 | `FeaturedIcon size="sm" tone="brand"` (placa+ícone vêm de token; ícone auto-sized) |
+| **C3** | Pill de marketing cru | `<div className="… rounded-full border bg-muted px-4 py-1.5 text-sm font-medium">` + ícone + `<span>` é literalmente um badge | 🟡 | `Badge` com `leadingIcon`/`icon` (+ `dot` opcional); padding/radius vêm do componente |
+| **C4** | Tipografia em HTML cru | `<h1>/<h2>/<h3>` → `Heading`; `<p>` → `Text`/`Paragraph`; wordmark `<span>` → `Text` (todos exportados) | 🟡 | `Heading level={1..3}` nos títulos, `Text`/`Paragraph` no corpo (= TY1/TY2) |
+| **C5** | `FeatureCard` local cru | componente local: `<div>` centrado + `<div className="rounded-lg bg-muted p-3">` (plate) + `<h3>` + `<p>` | 🟡 | `Card` + `FeaturedIcon` + `Heading` + `Text`; **ou** `FeatureItem` (`icon`/`title`/`description`/`action`) — *atenção:* `FeatureItem` é layout **ícone-à-esquerda** (`flex items-start`), a tela é centralizada |
+| **C6** | `TechBadge` local cru | componente local: `<span className="text-sm font-medium">` | 🟡 | `Badge` (variante `ghost`/`secondary`); o nome do tech vira conteúdo do badge |
+| **C7** | Footer cru | `<footer className="border-t py-6">` + `<a>` solto | 🔵 | `Container` + `Divider` (no lugar do `border-t`) + `Flex`; **NÃO existe componente `Footer` standalone no beta.4** (verificado: só `CardFooter`/`SidebarFooter`/… ) |
+| **C8** | Layout cru | `container`/`grid`/`<section>` em vez de `Container`/`Section`/`Grid` | 🔵 | `Section` (ritmo vertical via token) + `Container` (`--content-*`) + `Grid` |
+| **C9** | Ícone inline no `Button` | hero/GitHub embutem `<Icon className="ml-2/mr-2 h-4 w-4">` nos children | 🔵 | em `asChild` o Slot limita `leftIcon`/`rightIcon`; mesmo assim `h-4 w-4` é redundante (Button faz `[&_svg…]:size-4`) e `ml-2`/`mr-2` duplica o `gap` do Button (= SZ2) |
+
+**Sub-componentes/alternativas NÃO usadas:** `Navbar*` (Brand/Content/Item/Link/Menu/MenuToggle) · `Header*` (Brand/Nav/Actions) · `FeaturedIcon` · `Badge` · `Heading` · `Text`/`Paragraph` · `Card*` · `FeatureItem` · `Container`/`Section`/`Grid`/`Stack`/`Flex` · `Divider`.
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> Diferente do dashboard, **os CTAs aqui estão ligados** (navegação via `Link`/`<a>` + `Button asChild`). Os gaps são de **destino** (placeholder) e de **superfície de emitters não usada**.
+
+| ID | Emitter/ação | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | Links GitHub são placeholder | hero e footer apontam para `href="https://github.com"` (homepage genérica, não o repo do produto) — ligado, porém stub (Regra 6) | 🟡 | apontar para o repositório real (×2) |
+| **E2** | Logo não navega | wordmark "Hono" + ícone são `<div>`/`<span>` sem `Link` — falta o padrão "logo → `/`" | 🔵 | `NavbarBrand href="/"` **ou** `<Link to="/">` (= A6) |
+| **E3** | Superfície de emitters do `Button` ociosa | `onClick`/`onFocus`/`onBlur`/`onKeyDown` (payload `ButtonEventPayload`) + `loading`/`loadingText` não usados — ok p/ CTA de navegação, mas sem estado de loading | 🔵 | ligar `loading` se o destino virar async |
+| **E4** | Tech badges / pill estáticos | 6 tech badges e o pill não linkam (docs/stack) — informacional por design | 🔵 | opcional: `Badge interactive` + `href` (= A7) |
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| logo plate | `bg-primary` / `text-primary-foreground` | ✅ `--primary` / `--primary-foreground` | ✅ |
+| pill / icon plate / tech section | `bg-muted` | ✅ `--muted` | ✅ |
+| texto secundário (×6) | `text-muted-foreground` | ✅ `--muted-foreground` | ✅ |
+| hover de links | `hover:text-foreground` | ✅ `--foreground` | ✅ |
+| bordas | `border` / `border-b` / `border-t` | ✅ `--border` | ✅ |
+| **header "glass"** | `bg-background/95` + `supports-[backdrop-filter]:bg-background/60` | ❌ opacidade sobre token semântico — não é padrão Seven | 🔴 **CL1** |
+| **header blur** | `backdrop-blur` | ❌ efeito decorativo sem token Seven | 🔴 **CL2** |
+| **tech section** | `bg-muted/50` | ❌ opacidade sobre token | 🔴 **CL3** |
+
+→ Cores **majoritariamente corretas** (todas as cores sólidas resolvem em token; zero hex/`text-*-500`/`bg-gray-*`). Os únicos pontos fora do sistema são os **3 efeitos decorativos com opacidade/blur** no header e na faixa tech.
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| gaps/space | `gap-2`(8) `gap-4`(16) `gap-8`(32) `space-x-2`(8) `space-x-4`(16) | layout (raw, == `--spacing-*`) | 🟢 aceitável |
+| ritmo de section | `py-24`(96) `md:py-32`(128) `py-16`(64) `py-6`(24) | rhythm de página (raw) | 🟢 / 🔵 **SP1** padronizar via `Section` |
+| margens internas | `mb-2`(8) `mb-4`(16) `mb-8`(32) `p-3`(12) | layout (raw) | 🟢 |
+| **pill** | `py-1.5` (6px) | fora do passo de 8px do Seven | 🔵 **SP2** resolve via `Badge` |
+
+→ Espaçamento é **todo value-aligned** com a escala do Seven (que espelha o Tailwind). Nenhuma violação real; só ritmo de section cru (some com `Section`) e o `py-1.5` do pill (some com `Badge`).
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| `<h1>` hero | `text-4xl font-bold tracking-tight sm:…lg:text-7xl` (escala solta no h1) | `Heading level={1} size weight` | 🟡 **TY1** (= C4) |
+| `<h2>` tech | `text-sm font-semibold uppercase tracking-wider` | `Heading level={2}` | 🟡 **TY1** |
+| `<h3>` feature | `text-lg font-semibold` | `Heading level={3}` | 🟡 **TY1** |
+| `<p>` hero/feature/footer | `text-lg/xl` · `text-sm text-muted-foreground` | `Text`/`Paragraph` | 🟡 **TY2** (= C4) |
+| wordmark / nav / badges `<span>` | `font-semibold` / `font-medium` / `text-sm font-medium` | `Text` / `NavbarLink` / `Badge` | 🔵 **TY3** |
+
+> Os **valores** batem com os tokens (`--text-font-size-4xl`=36 … `7xl`=72; `--text-font-weight-bold`=700/`-semibold`=600/`-medium`=500; `tracking-tight`=`--font-tracking-tight`, `tracking-wider`=`--font-tracking-wider`), então não é divergência de valor — é **drift semântico**: o tipo deveria vir de `Heading`/`Text`, não de utilitários soltos em HTML cru. O guard-rail do ESLint **não** bane `h1/h2/h3/p/span/a` (só `button/input/select/textarea`) — passa o lint.
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | Tamanho de ícone inconsistente | `size-4`(16, logo) · `h-4 w-4`(16, botões) · `h-5 w-5`(20, footer) · `h-10 w-10`(40, feature) na mesma tela | 🔵 |
+| **SZ2** | Ícone inline no Button redundante | `ml-2/mr-2 h-4 w-4`: `h-4 w-4` duplica o `[&_svg]:size-4` do Button e `ml-2`/`mr-2` duplica o `gap` do Button | 🔵 (= C9) |
+| **SZ3** | Larguras arbitrárias vs token | `max-w-[42rem]` == `--content-narrow`(42rem) e `max-w-5xl` == `--container-5xl`(64rem) — alinham, mas não referenciam o token | 🔵 |
+
+> Bom: `max-w-[var(--content-wide)]` (header) **referencia** o token real `--content-wide`(96rem) do `@theme` — esse está correto.
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| hover de nav link | hand-coded (`hover:text-foreground transition-colors`) | `NavbarLink` (+ `isActive`) | 🔵 **ST1** |
+| loading nos CTAs | ❌ ausente (navegação) | `Button.loading`/`loadingText` | 🔵 **ST2** |
+| interativo/hover em feature/badge | ❌ (informacional) | `Badge interactive` · `Card variant="selectable"` | ⚪/🔵 **ST3** |
+| foco/teclado | ✅ vem de graça com `Button`/`Link` | — | ✅ |
+| active de nav | ❌ (landing pública, sem rota ativa) | `NavbarItem isActive` | ⚪ n/a |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | CL1, CL2, CL3 | header "glass" (`bg-background/95` + `backdrop-blur` + `supports:bg-/60`) e `bg-muted/50` — **únicos estilos que quebram o DS** (opacidade/blur sem token) |
+| 🟡 **Should-fix** | C1·Navbar, C2·FeaturedIcon, C3·Badge, C4·TY1·TY2, C5, C6, E1 | adotar a camada de componentes (nav, plate, pill, tipografia, feature cards, tech badges) + corrigir links GitHub placeholder |
+| 🔵 **Nice-to-have** | C7, C8, C9·SZ2, SP1, SP2, SZ1, SZ3, E2, E3, E4, ST1, ST2 | layout via `Section`/`Container`/`Grid`; ícone do Button via gap; ritmo via `Section`; logo→`/`; padronizar ícones |
+
+**Pontos corretos (não mexer):** `Button` (padrão `asChild` correto, `variant="outline"`/default, `size` sm/lg) · todas as cores sólidas em token · spacing/tracking value-aligned · `max-w-[var(--content-wide)]` referenciando token · roteamento via `Link`.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário do que o Seven oferece e a tela **não** aproveita — props, variants, sub-componentes, estados e **componentes alternativos**. `[u]` = não usado.
+
+### 9.1 — CTAs (hoje `Button`)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| Props | `asChild` · `size`(sm/lg) · `variant`(outline) | ✅ usados |
+| Props `[u]` | `leftIcon` · `rightIcon` · `icon` · `loading` · `loadingText` · `fullWidth` · `badge`/`badgeColor`/`badgeSize` · `tone` · `tooltip` · `data-id` | ❌ |
+| Emitters `[u]` | `onClick` · `onFocus` · `onBlur` · `onKeyDown` (payload `ButtonEventPayload`: `id`/`isLoading`/`timestamp`) | ❌ (usa `asChild`+nav) |
+| Variants `[u]` | `primary` · `secondary`(+`-gray`/`-color`) · `destructive` · `ghost` · `dashed` · `link`(+`-gray`/`-color`) · `tertiary`(+`-gray`/`-color`) · `success` · `warning` · `unstyled` (usa `default`+`outline`) | ❌ |
+| Sizes `[u]` | `default` · `icon` · `icon-sm` · shape `square` (usa `sm`/`lg`) | ❌ |
+
+### 9.2 — Nav/header (hoje `<header>/<nav>` cru)
+| Categoria | Disponível `[u]` | Uso |
+|---|---|---|
+| **`Navbar`** | `sticky` · `contained` · `containerClassName` · `size`(sm/md/lg) · `variant`(bordered/default/floating/transparent) | substitui `sticky top-0 z-50`/`border-b`/`container`/`max-w` à mão |
+| **`Navbar` sub** | `NavbarBrand`(`href`) · `NavbarContent`(`justify`) · `NavbarItem`(`isActive`) · `NavbarLink`(`isActive`) · `NavbarMenu`/`NavbarMenuToggle`(`isOpen`/`srLabel`) | brand, grupos, links e menu mobile |
+| **`Header`** (alt) | `variant` · `size` · `sticky` · `contained` · `layout` + `HeaderBrand`(`asLink`/`href`) · `HeaderNav` · `HeaderActions`(`align`) | alternativa de shell de topo |
+
+### 9.3 — Logo plate (hoje `<div bg-primary>`)
+| Categoria | Disponível `[u]` | Uso |
+|---|---|---|
+| **`FeaturedIcon`** | `size`(sm/md/lg/xl/2xl) · `shape`(default/circle) · `tone`(default/brand/…) | placa+ícone via token; ícone auto-sized (sem `size-4` manual) |
+
+### 9.4 — Pill & tech badges (hoje `<div rounded-full>` / `<span>`)
+| Categoria | Disponível `[u]` | Uso |
+|---|---|---|
+| **`Badge`** | `leadingIcon`/`icon`/`iconOnly` · `dot` · `interactive` · `disabled` · `avatar` · `country` · `asChild` + variants de cor/size | pill "Built on…" e os 6 tech badges |
+
+### 9.5 — Feature cards (hoje `FeatureCard` local cru)
+| Categoria | Disponível `[u]` | Uso |
+|---|---|---|
+| **`FeatureItem`** | `icon` · `title` · `description` · `action`(`href`/`label`/`onClick`) · `tone`(subtle/…/brand) | feature com CTA (layout ícone-à-esquerda) |
+| **`Card`+`FeaturedIcon`+`Heading`+`Text`** | composição p/ card centralizado | mantém o layout centralizado da tela |
+
+### 9.6 — Tipografia (hoje `<h1>`/`<h2>`/`<h3>`/`<p>` crus)
+| Elemento | Componente Seven `[u]` | Eixos não aproveitados |
+|---|---|---|
+| `<h1..h3>` | **`Heading`** | `level(1-6)` · `size` · `weight` · `align` · `color` · `gradient` · `asChild` |
+| `<p>`/`<span>` | **`Text`** / **`Paragraph`** | variants de tamanho/cor/peso |
+
+### 9.7 — Layout & footer (hoje `container`/`grid`/`<footer>` crus)
+| Disponível `[u]` | Uso |
+|---|---|
+| `Section` · `Container` · `Grid` · `Stack` · `Flex` | estruturariam página/feature-grid com tokens em vez de `container`/`grid`/`py-*` crus |
+| `Divider` | substitui `border-t` do footer/faixa tech |
+| *(sem `Footer` standalone no beta.4)* | montar com `Container`+`Divider`+`Flex` |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Toda ação que o usuário **poderia** executar, o gatilho, o status atual e o primitivo Seven que a ligaria.
+> **Resultado: 5 de 6 ações acionáveis estão ligadas** — A6 (logo→home) ausente; A4/A5 ligadas porém com `href` placeholder; A7–A9 informacionais/grátis.
+
+| # | Ação possível | Gatilho (elemento) | Status | Como ligar (Seven) |
+|---|---|---|---|---|
+| A1 | Ir para login | nav "Sign in" (`<Link to="/login">`) | ✅ ligada | migrar p/ `NavbarLink` (mantém `Link` via `asChild`) |
+| A2 | Começar (nav) | nav "Get Started" (`Button asChild` → `Link /login`) | ✅ ligada | ok; opcional `NavbarContent` |
+| A3 | Começar (hero) | hero "Get Started" (`Button asChild` → `Link /login`) | ✅ ligada | ok |
+| A4 | Abrir GitHub (hero) | `Button variant="outline"` → `<a href="https://github.com" target=_blank>` | 🟡 ligada-stub | `href` placeholder → apontar p/ repo real (E1) |
+| A5 | Abrir GitHub (footer) | ícone `<a href="https://github.com">` | 🟡 ligada-stub | idem (E1) |
+| A6 | Voltar à home | wordmark/logo "Hono" (`<div>`+`<span>`) | 🔴 não-ligada | `NavbarBrand href="/"` **ou** `<Link to="/">` (E2) |
+| A7 | Abrir docs do stack | 6 tech badges | ⚪ n/a (informacional) | `Badge interactive` + `href` se desejado |
+| A8 | Saber mais (pill) | "Built on Cloudflare Workers" | ⚪ n/a (informacional) | `Badge`/`Link` se virar CTA |
+| A9 | Foco/teclado | CTAs/links | ✅ grátis (`Button`/`Link`) | `onKeyDown`/`onFocus` (`ButtonEventPayload`) se necessário |
+
+**Emitters do `Button` disponíveis:** `onClick` · `onFocus` · `onBlur` · `onKeyDown` (payload `ButtonEventPayload`: `id`, `isLoading`, `timestamp`).
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** (resolve num token Seven) · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout (estrutural, sem token de design)
+>
+> Nota-chave: a escala de spacing do Seven **espelha a do Tailwind** (`--spacing-2`=8, `-4`=16, `-8`=32, `-16`=64) e `--font-tracking-tight`=-0.025em / `-wider`=0.05em. Por isso quase todo "cru" é 🟢, não violação.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `bg-primary` · `text-primary-foreground` | `--primary` / `--primary-foreground` | ✅ |
+| `bg-muted` (×3) | `--muted` | ✅ |
+| `text-muted-foreground` (×6) | `--muted-foreground` | ✅ |
+| `hover:text-foreground` (×2) | `--foreground` | ✅ |
+| `border` · `border-b` · `border-t` | `--border` | ✅ |
+| **`bg-background/95`** + **`supports-[backdrop-filter]:bg-background/60`** | `--background` com opacidade — não-padrão | 🔴 **CL1** |
+| **`backdrop-blur`** | — (efeito decorativo, sem token) | 🔴 **CL2** |
+| **`bg-muted/50`** | `--muted` com opacidade — não-padrão | 🔴 **CL3** |
+| *(nenhuma cor hardcoded — hex/`text-*-500`/`bg-gray-*`)* | — | ✅ limpo |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `gap-2` · `space-x-2` | 8 | `--spacing-2` | 🟢 |
+| `gap-4`(×4) · `space-x-4` · `mb-4` | 16 | `--spacing-4` | 🟢 |
+| `gap-8`(×2) · `mb-8` | 32 | `--spacing-8` | 🟢 |
+| `p-3` · `mb-2` · `py-1.5` | 12 / 8 / 6 | `--spacing-3`/`-2` / — | 🟢 (`py-1.5` 6px fora do passo → 🔵 SP2) |
+| `py-6`(24) · `py-16`(64) · `py-24`(96) · `md:py-32`(128) | — | `--spacing-6/16/…` | 🟢 (ritmo de section → 🔵 SP1) |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `border` / `border-b` / `border-t` | `--border` | ✅ |
+| `rounded-lg` (×2) | `--radius-lg` (12px) | ✅ |
+| `rounded-full` | `--radius-full` | ✅ |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| `text-4xl`/`sm:text-5xl`/`md:text-6xl`/`lg:text-7xl` | 36–72 | 🟡 | título deveria vir do `Heading` |
+| `text-lg`(×2) / `sm:text-xl` | 18 / 20 | 🟡 | corpo/feature → `Heading`/`Text` |
+| `text-sm` (×5) | 14 | 🟡 | corpo/nav/badges → `Text`/`NavbarLink`/`Badge` |
+| `font-bold` / `font-semibold`(×3) / `font-medium`(×3) | 700/600/500 | 🟡 | pesos via `Heading`/`Text` |
+| `tracking-tight` | -0.025em | 🟢 | == `--font-tracking-tight` |
+| `tracking-wider` | 0.05em | 🟢 | == `--font-tracking-wider` |
+| `uppercase` | — | ⚪ | text-transform, sem token (neutro) |
+
+### 11.5 — Sizing (ícones / larguras)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `size-8` | 32 (plate) | 🟢 valor alinhado; placa deveria vir do `FeaturedIcon` |
+| `size-4` | 16 | 🟡 ícone manual (FeaturedIcon/Button auto-sizam) |
+| `h-4 w-4` (×2) | 16 | 🟡 redundante dentro do `Button` (SZ2) |
+| `h-5 w-5` | 20 | 🟡 convenção mista |
+| `h-10 w-10` | 40 | 🟡 ícone de feature manual (→ `FeaturedIcon`) |
+| `h-14` | 56 (altura do nav) | 🟢 layout (→ `Navbar size`) |
+| `max-w-[var(--content-wide)]` | 96rem | ✅ **referencia token** `--content-wide` |
+| `max-w-[42rem]` | 42rem | 🟢 == `--content-narrow` (não referencia) |
+| `max-w-5xl` | 64rem | 🟢 == `--container-5xl` |
+
+### 11.6 — Layout (⚪ sem token de design — ok)
+`flex` · `flex-col` · `flex-1` · `min-h-screen` · `items-center` · `items-baseline?`(n/a) · `justify-center` · `justify-between` · `aspect-square` · `ml-auto` · `mx-auto` · `text-center` · `w-full` · `top-0` · `z-50` · `sticky` · `grid` · `md:grid-cols-3` · `flex-wrap` · `sm:flex-row` · `md:flex-row` · `container` · `transition-colors` · `supports-[backdrop-filter]:…`(estrutura da query)
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde | Itens |
+|---|---|---|
+| ✅ token-backed | 8 famílias | `bg-primary`/`-foreground`, `bg-muted`, `text-muted-foreground`, `hover:text-foreground`, `border*`, `rounded-lg`, `rounded-full`, `max-w-[var(--content-wide)]` |
+| 🟢 value-aligned | ~12 | `gap-2/4/8`, `space-x-2/4`, `mb-2/4/8`, `p-3`, `py-6/16/24/32`, `tracking-tight/wider`, `size-8`, `h-14`, `max-w-[42rem]`, `max-w-5xl` |
+| 🟡 drift (tipografia/sizing) | ~12 | `text-4xl…7xl`, `text-lg/xl`, `text-sm`, `font-bold/semibold/medium`, `size-4`, `h-4 w-4`, `h-5 w-5`, `h-10 w-10` |
+| 🔴 off-system | **4** | **`bg-background/95`**, **`supports-[backdrop-filter]:bg-background/60`**, **`backdrop-blur`**, **`bg-muted/50`** |
+
+> **Conclusão de estilo:** a tela é **token-limpa em cor sólida e spacing** — zero hex/cor hardcoded, spacing/radius/tracking alinhados, e até referencia `--content-wide`. Os **4 únicos estilos fora do sistema** são decorativos (opacidade-sobre-token + `backdrop-blur` do header "glass" e a faixa tech `bg-muted/50`). O grosso do débito **não é estilo** — é **componente**: nav, plate, pill, tipografia, feature cards, tech badges e footer são HTML cru que ignora a camada de componentes do Seven (resolvem com `Navbar`/`FeaturedIcon`/`Badge`/`Heading`/`Text`/`Card`/`FeatureItem`).
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+landing:
+  route: src/client/routes/index.tsx
+  fidelity: 0.52
+  components_used: [Button]
+  components_missing: [Navbar, Header, FeaturedIcon, Badge, Heading, Text, Paragraph, Card, FeatureItem, Container, Section, Grid, Divider]
+  gaps:
+    components: [C1, C2, C3, C4, C5, C6, C7, C8, C9]
+    emitters:   [E1, E2, E3, E4]
+    colors:     [CL1, CL2, CL3]
+    spacing:    [SP1, SP2]
+    typography: [TY1, TY2, TY3]
+    sizing:     [SZ1, SZ2, SZ3]
+    states:     [ST1, ST2, ST3]
+  severity: { high: 3, medium: 8, low: 13 }
+  unused_seven:                      # superfície do DS não aproveitada (seção 9)
+    alternative_components: [Navbar, Header, FeaturedIcon, Badge, Heading, Text, Paragraph, Card, FeatureItem, Container, Section, Grid, Stack, Flex, Divider]
+    unused_props: { Button: [leftIcon, rightIcon, icon, loading, loadingText, fullWidth, badge, badgeColor, badgeSize, tone, tooltip, data-id] }
+    unused_variants: { Button: [primary, secondary, secondary-gray, secondary-color, destructive, ghost, dashed, link, link-gray, link-color, tertiary, tertiary-gray, tertiary-color, success, warning, unstyled] }
+    unused_emitters: { Button: [onClick, onFocus, onBlur, onKeyDown] }
+  user_actions:                      # seção 10
+    total: 6
+    wired: 5
+    wired_stub: [A4, A5]             # ligadas porém href placeholder
+    unwired: [A6]                    # logo→home; A7/A8/A9 = n/a/grátis
+  style_audit:                       # seção 11 (classe-a-classe)
+    token_backed: [bg-primary, bg-primary-foreground, bg-muted, text-muted-foreground, hover:text-foreground, border, rounded-lg, rounded-full, "max-w-[var(--content-wide)]"]
+    value_aligned: [gap-2, gap-4, gap-8, space-x-2, space-x-4, mb-2, mb-4, mb-8, p-3, py-6, py-16, py-24, py-32, tracking-tight, tracking-wider, size-8, h-14, "max-w-[42rem]", max-w-5xl]
+    drift: [text-4xl, text-5xl, text-6xl, text-7xl, text-lg, text-xl, text-sm, font-bold, font-semibold, font-medium, size-4, h-4-w-4, h-5-w-5, h-10-w-10]
+    off_system: ["bg-background/95", "supports-backdrop-filter:bg-background/60", backdrop-blur, "bg-muted/50"]
+    hardcoded_colors: 0
+```
diff --git a/docs/ets/state/reports/screens/login.md b/docs/ets/state/reports/screens/login.md
new file mode 100644
index 0000000..e36e9d5
--- /dev/null
+++ b/docs/ets/state/reports/screens/login.md
@@ -0,0 +1,313 @@
+# Auditoria de tela — Login
+
+> **Rota:** `src/client/routes/login.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟡 **62%** — tokens/cores limpíssimos e o CTA principal está ligado, mas reinventa à mão componentes que o Seven já entrega prontos (`Divider`, `Link`, `Heading`, `Text`) e subaproveita a API do `Button`.
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | painel de formulário | raw `<main>` | — (landmark semântico, ⚪ correto) |
+| 2 | painel de marca (lado direito) | raw `<aside>` | — (landmark semântico, ⚪ correto) |
+| 3 | brand mark (ícone + wordmark "Hono") | `<Link to="/">` (TanStack) + `<div>`/`<span>` crus | — (routing ok; conteúdo cru) |
+| 4 | quadrado do ícone da marca | raw `<div className="… bg-primary">` | — (deveria ser `FeaturedIcon`) |
+| 5 | título "Welcome back" | raw `<h1>` | — (deveria ser `Heading`) |
+| 6 | subtítulo "Sign in to your account…" | raw `<p>` | — (deveria ser `Text`/`Paragraph`) |
+| 7 | botão "Continue with ETUS" | `@etus/seven-react` | **`Button`** ✅ (único Seven na tela) |
+| 8 | divisória "Secure authentication" | `<div>`+`<span border-t>` à mão | — (deveria ser `Divider type="text"`) |
+| 9 | parágrafo de termos + 2 links | raw `<p>` + 2× raw `<a href="#">` | — (deveria ser `Text` + `Link`) |
+| 10 | linha "Contact us" + link | raw `<div>` + raw `<a href="#">` | — (deveria ser `Text` + `Link`) |
+| 11 | título "Welcome to Hono" (painel marca) | raw `<h2>` | — (deveria ser `Heading`) |
+| 12 | parágrafo do painel de marca | raw `<p>` | — (deveria ser `Text`/`Paragraph`) |
+| 13 | ícones (command, shield, spinner) | `@/components/icons` (lucide) | — (convenção do projeto, ok) |
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Títulos em HTML cru | `<h1>` ("Welcome back") e `<h2>` ("Welcome to Hono") em vez de `Heading` (exportado) | 🟡 | `<Heading level={1} size="3xl" weight="bold">` |
+| **C2** | Corpo de texto em HTML cru | 4× `<p>` (subtítulo, termos, contato, pitch do painel) em vez de `Text`/`Paragraph` | 🟡 | `Text` (variants `p1/p2/caption*`) ou `Paragraph` |
+| **C3** | Wordmark cru | `<span className="font-semibold">Hono</span>` em vez de `Text`/`Heading` | 🔵 | `<Text weight="semibold">` |
+| **C4** | **Divisória reinventada à mão** | 10 linhas de `relative`/`absolute inset-0`/`border-t`/label centralizada (l.48–57) reconstroem **exatamente** o que o `Divider` faz nativo | 🟡 | `<Divider type="text" labelPosition="center">Secure authentication</Divider>` |
+| **C5** | Âncoras cruas em vez de `Link` | 3× `<a href="#">` (Terms, Privacy, Contact) — o Seven exporta `Link` com `variant`/`underline`/`external`/foco | 🟡 | `<Link href="…" underline="always">` |
+| **C6** | Quadrado de ícone da marca à mão | `<div className="… size-8 rounded-lg bg-primary">` em vez do primitivo `FeaturedIcon` | 🔵 | `<FeaturedIcon icon={<Icons.command/>}>` |
+
+**Único componente Seven realmente usado:** `Button`. Tudo o mais é HTML cru reproduzindo primitivos que já existem no beta.4 (`Heading`, `Text`, `Paragraph`, `Divider`, `Link`, `FeaturedIcon` — todos confirmados no `index.d.ts` consumido).
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> Diferente do dashboard, aqui **há ação ligada**: o `Button` tem `onClick={handleLogin}` + `disabled={isLoading}` e redireciona pra `/auth/login`. O problema é a **API do `Button` subaproveitada** e os **3 links mortos**.
+
+| ID | Emitter/ação | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | `Button.loading` não usado | há troca manual `isLoading ? spinner : shield` + texto manual; o `Button` tem `loading` (mostra spinner nativo e **auto-desabilita**) | 🟡 | `loading={isLoading}` `loadingText="Redirecting..."` |
+| **E2** | `Button.leftIcon` não usado | ícone vai como `children` com `mr-2` manual | 🟡 | `leftIcon={<Icons.shield className="size-4" />}` |
+| **E3** | `Button.fullWidth` não usado | usa `className="w-full"` em vez do prop idiomático | 🔵 | `fullWidth` |
+| **E4** | **3 links mortos** | `<a href="#">` Terms / Privacy / Contact — afordância que **não navega** (UI morta) | 🔴 | `Link href` real (rota/URL) — ver A3/A4/A5 |
+| **E5** | Spinner manual | `<Icons.spinner className="animate-spin" />` duplica o spinner interno do `Button` (`loading`) e do primitivo `Spinner` | 🔵 | resolve junto com E1 |
+
+**Pontos certos:** `onClick` ligado e funcional · `disabled` durante o loading · `<Link to="/">` (TanStack) na marca navega de fato.
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| quadrado da marca | `bg-primary` / `text-primary-foreground` | ✅ `--primary` / `--primary-foreground` | ✅ |
+| textos secundários (×6) | `text-muted-foreground` | ✅ `--muted-foreground` | ✅ |
+| links (hover/cor) | `hover:text-foreground` / `text-foreground` | ✅ `--foreground` | ✅ |
+| label da divisória | `bg-background` | ✅ `--background` | ✅ |
+| linha da divisória | `border-t` | ✅ `--border` | ✅ |
+| painel de marca | `bg-muted` | ✅ `--muted` | ✅ |
+
+→ **Cores 100% token-backed. Zero hardcoded** — nenhum hex, `text-*-500`, `bg-gray-*`. **Nenhum gap de cor** (CL = ∅). O único item fora de token na tela é dimensional (`w-[350px]`, ver §6/§11), não cromático.
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| card do formulário | `gap-6` (24px) | layout de página (raw Tailwind) | 🟢 = `--spacing-6` |
+| grupos internos | `gap-2` (8px) ·`gap-4` (16px) | layout (raw) | 🟢 = `--spacing-2/4` |
+| painel de marca | `space-y-2` (8px) ·`p-10` (40px) | layout (raw) | 🟢 = `--spacing-2/10` |
+| padding do `<main>` | `px-4` (16) ·`py-12` (48) | layout (raw) | 🟢 = `--spacing-4/12` |
+| ícone/label | `px-2` ·`mr-2` (8px) | layout (raw) | 🟢 = `--spacing-2` |
+| **ritmo misto** | `gap-6` no card vs `space-y-2` no painel | — | 🔵 **SP1** ritmos diferentes nos dois painéis (cosmético) |
+
+→ Espaçamento **todo value-aligned** com a escala do Seven (que espelha a do Tailwind). Sem violação de spacing.
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| `<h1>` / `<h2>` | `text-3xl font-bold tracking-tight` (escala Tailwind solta) | `Heading` (`level`/`size`/`weight` por token) | 🟡 **TY1** (= C1) |
+| `<p>` subtítulo / pitch | `text-balance text-muted-foreground` · `text-lg` | `Text`/`Paragraph` (variant `p1`/`lead`) | 🟡 **TY2** (= C2) |
+| `<p>` termos / contato | `text-xs` · `text-sm` | `Text` (variant `caption1`/`p3`, `color="muted"`) | 🟡 **TY2** (= C2) |
+| pesos crus | `font-semibold` (wordmark) · `font-medium` (link) · `font-bold` (títulos) | prop `weight` de `Heading`/`Text` | 🟡 **TY3** |
+| `tracking-tight` | -0.025em | == `--font-tracking-tight` | 🟢 (valor alinhado) |
+| `uppercase` na label da divisória | text-transform | utilitário, sem token | ⚪ (some com `Divider`) |
+
+> O guard-rail do ESLint **não** bane `h1/h2/p/span/a` (só `button/input/select/textarea`) — passa o lint, mas é drift de DS.
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | **Largura arbitrária off-grid** | `w-[350px]` no card — 350px **não** está na escala de spacing (fora do grid de 4px) nem em nenhum token | 🔵 | trocar por `max-w-sm` (384px) ou `Container` |
+| **SZ2** | `w-full` na largura do `Button` | deveria vir do prop `fullWidth` (= E3) | 🔵 | `fullWidth` |
+| **SZ3** | Sizing de ícone **consistente** | todos os ícones em `size-4` (16px); quadrado da marca `size-8` (32px) | ✅ | (ponto positivo — sem mistura `h-x w-x`) |
+
+→ Ícones padronizados (melhor que o dashboard, que misturava `size-4`/`h-5 w-5`). Único ponto cru é a largura `w-[350px]`.
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| loading | 🟡 presente, porém **manual** (swap de ícone + texto) | `Button.loading` + `loadingText` (spinner nativo, auto-disable) | 🟡 **ST1** (= E1) |
+| disabled | ✅ presente (`disabled={isLoading}`) | nativo do `Button` | ✅ |
+| hover | ✅ links têm `hover:text-foreground`; `Button` tem hover nativo | — | ✅ |
+| focus-visible | 🟡 só o `Button` tem ring nativo; os 3 `<a>` crus **não têm anel de foco** (a11y) | `Link` adiciona foco do DS | 🟡 **ST2** |
+| erro | ❌ se o redirect `/auth/login` falhar, fica preso em `loading` sem feedback | `Alert`/`Message`/`Toast` | 🔵 **ST3** |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | E4 | 3 links mortos (`href="#"`) — Terms / Privacy / Contact não navegam |
+| 🟡 **Should-fix** | C4, C5·ST2, C1·TY1, C2·TY2·TY3, E1·E2·ST1 | divisória→`Divider`; âncoras→`Link` (+foco); títulos→`Heading`; corpo→`Text`; `Button.loading`/`leftIcon` |
+| 🔵 **Nice-to-have** | C3, C6, E3·SZ2, SP1, SZ1, ST3 | wordmark→`Text`; marca→`FeaturedIcon`; `fullWidth`; ritmo; `max-w-sm`; estado de erro |
+
+**Pontos corretos (não mexer):** `Button` usado e **ligado** · cores/tokens 100% limpos · spacing value-aligned · ícones consistentes em `size-4` · landmarks `<main>`/`<aside>` semânticos · `<Link to="/">` navegando.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário do que o Seven oferece e a tela **não** aproveita. `[u]` = não usado.
+
+### 9.1 — Botão de login (hoje `Button`)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| Props usados | `className` · `disabled` · `onClick` | ✅ |
+| Props `[u]` | `loading` · `loadingText` · `leftIcon` · `rightIcon` · `icon` · `fullWidth` · `badge` · `badgeColor` · `badgeSize` · `tooltip` · `tone` · `asChild` · `shape` | ❌ |
+| Variants `[u]` | `primary` · `secondary` · `secondary-gray` · `secondary-color` · `outline` · `dashed` · `ghost` · `link` · `link-gray` · `link-color` · `tertiary-gray` · `tertiary-color` · `destructive` · `success` · `warning` · `unstyled` (usa `default`) | ❌ |
+| Sizes `[u]` | `sm` · `lg` · `icon` · `icon-sm` (usa `default`) | ❌ |
+| Emitters `[u]` | `onFocus` · `onBlur` · `onKeyDown` + payload `ButtonEventPayload` (`id`,`isLoading`,`timestamp`); `onClick` usado mas **sem** payload | ❌/parcial |
+
+### 9.2 — Divisória (hoje `<div>`/`<span border-t>` cru)
+| Categoria | Disponível `[u]` | Uso |
+|---|---|---|
+| **Componente** | **`Divider`** | ❌ reinventado à mão |
+| `type` | `line` · **`text`** · `heading` · `button` · `button-group` · `button-icon` · `button-group-icon` | ❌ |
+| `labelPosition` | `left` · `center` · `right` | ❌ |
+| `visualStyle` | `single-line` · `dual-line` · `background-fill` | ❌ |
+| `lineType` | `solid` · `dashed` · `dotted` | ❌ |
+| `orientation` | `horizontal` · `vertical` | ❌ |
+
+### 9.3 — Links (hoje 3× `<a href="#">` cru)
+| Categoria | Disponível `[u]` (`Link`) | Uso |
+|---|---|---|
+| `variant` | `default` · `muted` · `subtle` · `nav` · `inline` · `unstyled` | ❌ |
+| `size` | `xs` · `sm` · `default` · `lg` · `inherit` | ❌ |
+| `underline` | `always` · `hover` · `none` | ❌ |
+| Props | `external` · `showExternalIcon` · `leftIcon` · `rightIcon` · `asChild` · `onClick`+`LinkEventPayload` (`href`,`isExternal`,`timestamp`) | ❌ |
+
+### 9.4 — Títulos / textos (hoje `<h1>`/`<h2>`/`<p>`/`<span>` crus)
+| Elemento | Componente Seven `[u]` | Eixos não aproveitados |
+|---|---|---|
+| `<h1>`/`<h2>` | **`Heading`** | `level(1-6)` · `size(4xl…)` · `weight(normal→extrabold)` · `align` · `color(default/muted/primary/destructive)` · `gradient(primary/secondary/accent/rainbow)` |
+| `<p>` | **`Text`** / **`Paragraph`** | `variant(display*/p1-p3/caption*/code)` · `size` · `weight` · `color(default/muted)` · `align` · `leading` · `prose` |
+
+### 9.5 — Marca / layout (hoje `<div>`/grid cru)
+| Disponível `[u]` | Uso |
+|---|---|
+| **`FeaturedIcon`** | quadrado do ícone da marca (hoje `div` + `bg-primary`) |
+| `Container` · `Section` · `Stack` · `Grid` · `Flex` | estruturariam os painéis com tokens em vez de `grid`/`w-[350px]`/`space-y-*` crus |
+| `Card` | poderia envolver o formulário (`CardHeader`/`CardContent`/`CardFooter`) |
+| `Form` · `Field` · `Label` | se a tela evoluir pra e-mail/senha além do OAuth |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Toda ação que o usuário **poderia** executar, o gatilho, o status atual e o primitivo Seven que a ligaria.
+> **Resultado: 2 de 5 ações estão ligadas — o CTA principal e a marca funcionam; os 3 links legais/contato estão mortos.**
+
+| # | Ação possível | Gatilho (elemento) | Status | Como ligar (Seven) |
+|---|---|---|---|---|
+| A1 | Entrar com ETUS (OAuth) | `Button` "Continue with ETUS" | ✅ **ligada** (`onClick`→`window.location.href='/auth/login'`) | refinar com `loading`/`leftIcon`/`fullWidth` |
+| A2 | Ir pra home pela marca | `<Link to="/">` (TanStack) | ✅ **ligada** (routing) | ok (manter) |
+| A3 | Abrir Termos de Serviço | `<a href="#">` | 🔴 **não-ligada** (`href="#"`) | `Link href="/terms"` (ou `external`) |
+| A4 | Abrir Política de Privacidade | `<a href="#">` | 🔴 **não-ligada** | `Link href="/privacy"` |
+| A5 | Falar com o time ("Contact us") | `<a href="#">` | 🔴 **não-ligada** | `Link href="mailto:…"` `external` |
+| A6 | Foco/teclado nos links | os 3 `<a>` | ⚪ parcial (âncora nativa, **sem ring do DS**) | vem de graça com `Link` (`focus-visible`) |
+
+**Emitters do `Button`/`Link` quando as ações forem ligadas:** `onClick`/`onFocus`/`onBlur`/`onKeyDown` (payload `ButtonEventPayload`); `Link.onClick` (payload `LinkEventPayload`: `href`,`isExternal`,`timestamp`).
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout (estrutural, sem token de design)
+>
+> Nota-chave: a escala de spacing do Seven **espelha a do Tailwind** (`--spacing-2`=8px=`gap-2`; `--spacing-4`=16px=`gap-4`; `--spacing-6`=24px=`gap-6`), e `--font-tracking-tight`=`tracking-tight`=-0.025em. Por isso muito "cru" é 🟢, não violação.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `bg-primary` · `text-primary-foreground` | `--primary` / `--primary-foreground` | ✅ |
+| `text-muted-foreground` (×6) | `--muted-foreground` | ✅ |
+| `text-foreground` · `hover:text-foreground` | `--foreground` | ✅ |
+| `bg-background` | `--background` | ✅ |
+| `bg-muted` | `--muted` | ✅ |
+| `border-t` (cor) | `--border` | ✅ |
+| *(nenhuma cor hardcoded — hex, `text-*-500`, `bg-gray-*`)* | — | ✅ limpo |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `gap-6` | 24px | `--spacing-6` | 🟢 |
+| `gap-4` | 16px | `--spacing-4` | 🟢 |
+| `gap-2` (×2) | 8px | `--spacing-2` | 🟢 |
+| `space-y-2` | 8px | `--spacing-2` | 🟢 |
+| `px-4` ·`py-12` | 16 / 48px | `--spacing-4` / `--spacing-12` | 🟢 |
+| `p-10` | 40px | `--spacing-10` | 🟢 |
+| `px-2` ·`mr-2` (×2) | 8px | `--spacing-2` | 🟢 |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `border-t` · `border` | `--border` | ✅ |
+| `rounded-lg` | `--radius-lg` (12px no Seven) | ✅ |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| `text-3xl` (×2) | 1.875rem | 🟡 | título deveria vir do `Heading` |
+| `text-lg` | 1.125rem | 🟡 | corpo deveria vir do `Text` (`p1`/`lead`) |
+| `text-sm` (×2) | 0.875rem | 🟡 | `Text` (`p3`) |
+| `text-xs` (×2) | 0.75rem | 🟡 | `Text` (`caption1/2`) |
+| `font-bold` (×2) | 700 | 🟡 | peso do `Heading` |
+| `font-semibold` | 600 | 🟡 | peso do `Text`/`Heading` |
+| `font-medium` | 500 | 🟡 | peso do `Link`/`Text` |
+| `tracking-tight` (×2) | -0.025em | 🟢 | == `--font-tracking-tight` |
+| `uppercase` | — | ⚪ | text-transform (some com `Divider`) |
+| `text-balance` | — | ⚪ | text-wrap utilitário, sem token |
+| `underline` · `underline-offset-4` (×3) | — | ⚪ | text-decoration; o próprio `Link` usa `underline-offset-4` interno |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `size-4` (×3) | 16px | 🟢 (= `--spacing-4`; consistente) |
+| `size-8` | 32px | 🟢 (= `--spacing-8`) |
+| `aspect-square` | — | ⚪ (ratio, estrutural) |
+| **`w-[350px]`** | 350px | 🔴 **único off-system real** — off-grid (4px), sem token; usar `max-w-sm`/`Container` |
+
+### 11.6 — Layout (⚪ sem token de design — ok)
+`w-full` (×3) · `grid` · `lg:grid` · `lg:grid-cols-2` · `min-h-screen` · `lg:min-h-screen` · `lg:min-h-0` · `flex` · `items-center` · `items-baseline`? (n/a) · `justify-center` · `mx-auto` · `relative` · `absolute` · `inset-0` · `hidden` · `lg:block` · `h-full` · `max-w-md` · `text-center` · `animate-spin` (motion utility; resolve via `Button.loading`)
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde | Itens |
+|---|---|---|
+| ✅ token-backed | 2 famílias | cores (todas), `border`/`rounded-lg` |
+| 🟢 value-aligned | 8 | `gap-6/4/2`, `space-y-2`, `px-4`, `py-12`, `p-10`, `px-2`, `mr-2`, `size-4/8`, `tracking-tight` |
+| 🟡 drift (tipografia) | 7 | `text-3xl`, `text-lg`, `text-sm`, `text-xs`, `font-bold`, `font-semibold`, `font-medium` |
+| 🔴 off-system | **1** | **`w-[350px]`** (largura arbitrária off-grid) |
+
+> **Conclusão de estilo:** a tela é **token-limpa** — **zero cor hardcoded**, spacing/radius/tracking todos alinhados, ícones consistentes. O **único** estilo genuinamente fora do sistema é `w-[350px]` (resolve com `max-w-sm`/`Container`). O grosso da dívida **não é estilo, é componente**: a tela renderiza com `<h1>/<p>/<a>/<div>` aquilo que `Heading`/`Text`/`Link`/`Divider`/`FeaturedIcon` já entregam — drift de tipografia + 3 links mortos + `Button` subaproveitado.
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+login:
+  route: src/client/routes/login.tsx
+  fidelity: 0.62
+  components_used: [Button]
+  components_missing: [Heading, Text, Paragraph, Divider, Link, FeaturedIcon]
+  gaps:
+    components: [C1, C2, C3, C4, C5, C6]
+    emitters:   [E1, E2, E3, E4, E5]
+    colors:     []                       # zero hardcoded — cores 100% token-backed
+    spacing:    [SP1]
+    typography: [TY1, TY2, TY3]
+    sizing:     [SZ1, SZ2, SZ3]
+    states:     [ST1, ST2, ST3]
+  severity: { high: 1, medium: 9, low: 8 }
+  unused_seven:                          # superfície do DS não aproveitada (seção 9)
+    alternative_components: [Heading, Text, Paragraph, Divider, Link, FeaturedIcon, Container, Section, Stack, Card, Form, Field]
+    unused_props: { Button: [loading, loadingText, leftIcon, rightIcon, icon, fullWidth, badge, badgeColor, badgeSize, tooltip, tone, asChild, shape] }
+    unused_variants: { Button: [primary, secondary, secondary-gray, secondary-color, outline, dashed, ghost, link, link-gray, link-color, tertiary-gray, tertiary-color, destructive, success, warning, unstyled] }
+    unused_subcomponents: { Divider: [type, labelPosition, visualStyle, lineType], Link: [variant, size, underline, external, leftIcon, rightIcon] }
+  user_actions:                          # seção 10
+    total: 5
+    wired: 2                             # A1 (login OAuth) + A2 (brand → home)
+    unwired: [A3, A4, A5]                # Terms / Privacy / Contact = href="#" mortos; A6 = parcial (n/a)
+  style_audit:                           # seção 11 (classe-a-classe)
+    token_backed: [colors, border, rounded-lg]
+    value_aligned: [gap-6, gap-4, gap-2, space-y-2, px-4, py-12, p-10, px-2, mr-2, size-4, size-8, tracking-tight]
+    drift: [text-3xl, text-lg, text-sm, text-xs, font-bold, font-semibold, font-medium]
+    off_system: [w-[350px]]              # único estilo sem token Seven (largura off-grid)
+    hardcoded_colors: 0
+```
diff --git a/docs/ets/state/reports/screens/not-found.md b/docs/ets/state/reports/screens/not-found.md
new file mode 100644
index 0000000..54c52a9
--- /dev/null
+++ b/docs/ets/state/reports/screens/not-found.md
@@ -0,0 +1,304 @@
+# Auditoria de tela — Not Found (404)
+
+> **Rota:** `src/client/routes/$.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟡 **62%** — funciona e é token-limpa, mas **reimplementa à mão o `ErrorPage type="404"`** que o Seven já entrega pronto (com defaults pt-BR), tipa tudo em HTML cru, e adiciona decoração off-brand.
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | brand mark (plate mint + "Hono") | raw `<div>`+`<span>` dentro de `<Link>` | — (plate intencional do projeto; Seven tem `Logo`/`Brand`) |
+| 2 | shell da página (header/main/wrappers) | raw `<header>`/`<main>`/`<div>` | — (Seven: `Section`·`Container`·`Stack`·`Flex`) |
+| 3 | "404" gigante (watermark) | raw `<div>` `text-[12rem] text-muted/20` | — (Seven: `Text variant="display1"` **ou** `ErrorPage` slot `code`) |
+| 4 | pill "Page not found" | raw `<div>`+`<span>` (`text-lg`) | — (Seven: `Heading`/`Text` **ou** `ErrorPage` slot `title`) |
+| 5 | parágrafo de mensagem | raw `<p>` | — (`Text`/`Paragraph` **ou** `ErrorPage` slot `description`) |
+| 6 | 2× botão de navegação | `@etus/seven-react` | **`Button`** (`asChild` → `Link` do TanStack) ✅ |
+| 7 | help text + "Contact support" | raw `<p>` + raw `<a href="mailto:…">` | — (`Text` + **`Link`**) |
+| 8 | 2× blob decorativo (blur) | raw `<div>` `bg-primary/5 blur-3xl` | — (decoração; brand Seven = "no decoration") |
+| 9 | ícones | `@/components/icons` (lucide) | — (convenção do projeto, ok) |
+
+> **Achado dominante:** a tela inteira (itens 2–5, 7) é uma reimplementação manual do componente **`ErrorPage`** do Seven, que existe no pacote consumido (`declare function ErrorPage(...)`), cobre exatamente o caso 404 e **já traz as cópias em pt-BR** que esta tela escreveu à mão em inglês. Ver C1.
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Tela reimplementa o `ErrorPage` | Seven exporta `ErrorPage` (feedback) com `type="404"` → entrega `code`, `title`, `description` (defaults **pt-BR**: *"Página não encontrada" / "A página que você está procurando não existe ou foi movida."*), slot `actions`, `showHomeLink`/`showBackLink`, `onRetry`/`loading`, `fullScreen`, `icon`/`illustration`. A tela refaz tudo isso na unha. | 🔴 | trocar o miolo por `<ErrorPage type="404" fullScreen actions={<…Buttons…/>} />` |
+| **C2** | Tipografia em HTML cru | "404" (`<div>`), "Page not found" (`<span>`) e 2× `<p>` em vez de `Heading`/`Text`/`Paragraph` (todos exportados) | 🟡 | `Text variant="display1"` no número, `Heading` no título, `Text`/`Paragraph` nos parágrafos |
+| **C3** | Link de suporte em `<a>` cru | `<a href="mailto:…">` em vez do primitivo **`Link`** (tem `external`, `leftIcon`/`rightIcon`, `onClick` com payload, `variant`/`underline`) | 🟡 | `<Link href="mailto:…" leftIcon={<Mail/>}>` |
+| **C4** | Brand mark hand-rolled | logo plate (`<div bg-primary>` + `Icons.command`) + `<span>Hono</span>`; Seven exporta `Logo`/`Brand`. O plate mint é **intencional** (commit de unificação de marca), mas é superfície Seven ignorada | 🔵 | ok manter o plate; ciente de `Logo`/`Brand` |
+| **C5** | `Button` com `asChild` bypassa a própria API | com `asChild` o Radix Slot funde só className no `<Link>`; `leftIcon`/`loading`/`badge`/`tooltip`/`loadingText` do `Button` ficam inertes; o ícone é injetado manualmente | 🔵 | aceitável p/ navegação; ciente de que a API rica do `Button` não é exercida |
+
+**Sub-componentes/famílias do Seven disponíveis e NÃO usados:** `ErrorPage` (inteiro) · `Empty`/`EmptyHeader`/`EmptyMedia`/`EmptyTitle`/`EmptyDescription`/`EmptyContent` · `Heading` · `Text` · `Paragraph` · `Link` · `Section`/`Container`/`Stack`/`Flex`.
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> Diferente do Dashboard, **aqui as ações principais ESTÃO ligadas** (navegação via `Button asChild` → `Link`). Os gaps são de ações que o `ErrorPage` ofereceria de graça e de conteúdo hardcoded.
+
+| ID | Emitter/ação ausente | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | Sem "Voltar" | a tela só oferece Home/Dashboard; não há back. `ErrorPage` tem `showBackLink` com handler nativo (`window.history.back()`) | 🟡 | `ErrorPage showBackLink` (default `true`) |
+| **E2** | E-mail de suporte hardcoded | `mailto:support@example.com` é **placeholder literal**, não ligado a config/env | 🟡 | apontar p/ e-mail real (Regra 6 — fora de DS, mas é gap funcional) |
+| **E3** | `onRetry`/`retryLabel`/`loading` não usados | n/a forte p/ 404, mas o `ErrorPage` oferece o ciclo de retry nativo | 🔵 | só relevante se a rota virar erro recuperável |
+| **E4** | Payload callbacks do `Button` não usados | `onClick`/`onFocus`/`onBlur`/`onKeyDown` (`ButtonEventPayload`: `id`/`isLoading`/`timestamp`) — navegação é via `Link`, então ok | 🔵 | manter; ciente da telemetria disponível |
+| **E5** | Payload/`external` do `Link` não usado | o `<a>` cru não tem `onClick(payload)` nem `external`/`showExternalIcon` | 🔵 | resolve junto com C3 |
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| logo plate bg/fg | `bg-primary` / `text-primary-foreground` | ✅ `--primary` / `--primary-foreground` | ✅ |
+| pill | `bg-background` / `ring-border` / `shadow-lg` | ✅ `--background` / `--border` / `--shadow-lg` | ✅ |
+| texto secundário | `text-muted-foreground` (×2) | ✅ `--muted-foreground` | ✅ |
+| link de suporte | `text-foreground` | ✅ `--foreground` | ✅ |
+| **"404" watermark** | `text-muted/20` | ⚠️ `--muted` resolve, mas é token de **superfície** usado como **cor de texto** (o par foreground seria `--muted-foreground`) | 🔵 **CL1** |
+| **blobs decorativos** | `bg-primary/5` (×2) | ✅ `--primary` @5% — token ok, mas a **decoração** em si fere o brand ("no decoration") | 🔵 (ver SP1) |
+
+→ Cores **100% token-backed** — zero hex/`text-gray-*`/`bg-[#…]`. Únicas ressalvas são semânticas (`--muted` como texto) e de brand (decoração), não de token.
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| ritmo da página | `mb-8` (32px ×2), `mt-8` (32px), `gap-3` (12px), `space-x-2` (8px) | layout raw, valores == tokens | 🟢 value-aligned |
+| header/shell | `h-14` (56px), `px-4`/`px-6`/`py-2` | raw, == `--spacing-*` | 🟢 |
+| ícones/plate | `size-8` (32px), `size-4` (16px), `mr-2` (8px) | raw, == `--spacing-*` | 🟢 |
+| **blobs decorativos** | `h-[500px] w-[500px]` (×2) | **arbitrário, sem token** | 🔴 **SP1** (off-system + viola "no decoration") |
+| posição dos blobs | `-top-40`/`-bottom-40` (160px) | valor da escala Tailwind, mas posicionamento decorativo | ⚪ |
+
+→ Todo o espaçamento **estrutural** é value-aligned (escala do Seven espelha a do Tailwind). O único furo é o **sizing arbitrário dos blobs** (`[500px]`), que some se a decoração for removida.
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| "404" gigante | `text-[12rem] font-bold leading-none tracking-tighter` (display **arbitrário**) | `Text variant="display1"` (tokens `--typography-display-*`) **ou** slot `code` do `ErrorPage` (`text-6xl md:text-8xl`) | 🔴 **TY1** |
+| "Page not found" | `<span className="text-lg font-medium">` (span cru) | `Heading`/`Text` **ou** slot `title` do `ErrorPage` | 🟡 **TY2** |
+| parágrafos | `<p className="text-muted-foreground">` / `text-sm` | `Text`/`Paragraph` **ou** slot `description` | 🟡 **TY3** |
+| **idioma da cópia** | tudo em **inglês** ("Page not found", "Back to Home", "Need help?", "Contact support") | brand Seven exige **sentence-case pt-BR**; o `ErrorPage` já entrega defaults pt-BR | 🟡 **TY4** (brand/locale) |
+
+> `font-bold`/`font-semibold`/`font-medium`/`tracking-tighter` são **value-aligned** (== `--font-weight-*` / `--font-tracking-tighter`); o problema não é o peso/tracking, é estarem em **HTML cru** e o `text-[12rem]` ser **arbitrário**. Guard-rail do ESLint **não** bane `span/p/a` (só `button/input/select/textarea`) — passa lint, mas é drift de DS.
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | Convenção de utilitário mista | plate/ícone usam `size-8`/`size-4`; ícones nos botões usam `h-4 w-4` | 🔵 padronizar p/ `size-*` |
+| **SZ2** | `h-4 w-4` redundante nos botões | o `Button` já aplica `[&_svg:not([class*='size-'])]:size-4` — a classe manual é dispensável | 🔵 remover (deixar o Button dimensionar) |
+| **SZ3** | "404" `text-[12rem]` = sizing arbitrário | 192px sem token de display | 🔴 (= TY1) |
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| back/voltar | ❌ ausente | `ErrorPage showBackLink` (handler nativo) | 🟡 **ST1** (= E1) |
+| loading/retry | ❌ ausente | `ErrorPage loading`/`onRetry`/`retryLabel` | 🔵 **ST2** (= E3) |
+| hover/focus dos botões | ✅ vêm do `Button` (`focus-visible:ring-4`, `hover:translate-y-px`, `active:translate-y-0.5`) | — | ✅ |
+| focus do link de suporte | 🟡 `<a>` cru só tem `underline-offset-4`; sem o `focus-visible:ring` do `Link` | `Link` (ring de foco nativo) | 🔵 **ST3** (= C3) |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | C1, TY1·SZ3, SP1 | adotar `ErrorPage type="404"`; matar o display arbitrário `text-[12rem]`; remover sizing arbitrário/decoração dos blobs |
+| 🟡 **Should-fix** | C2·TY2·TY3, C3·E5·ST3, TY4, E1·ST1, E2 | tipografia → `Heading`/`Text`/`Paragraph`; `<a>` → `Link`; cópia pt-BR; back link; e-mail de suporte real |
+| 🔵 **Nice-to-have** | C4, C5, E3·ST2, CL1, SZ1, SZ2 | ciente de `Logo`/`Brand`; API rica do `Button`; retry; `--muted` como texto; padronizar `size-*` |
+
+**Pontos corretos (não mexer):** uso do `Button` com `asChild` p/ navegação · **ações principais ligadas** (Home/Dashboard/brand/suporte) · cores 100% token-backed · espaçamento estrutural value-aligned · sem violação de guard-rail do ESLint.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário do que o Seven oferece e a tela **não** aproveita — props, variants, sub-componentes, estados e **componentes alternativos**. `[u]` = não usado.
+
+### 9.1 — Layout 404 (hoje `<div>`/`<header>`/`<main>` crus)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| **Componente alternativo `[u]`** | **`ErrorPage`** — props: `type`(401/403/404/500/generic/maintenance/offline) · `code` · `title` · `description` · `actions` · `icon` · `illustration` · `homeHref` · `showHomeLink` · `showBackLink` · `onRetry` · `retryLabel` · `loading` · `fullScreen` | ❌ nunca considerado |
+| **Componente alternativo `[u]`** | **`Empty*`** (`Empty`/`EmptyHeader`/`EmptyMedia`/`EmptyTitle`/`EmptyDescription`/`EmptyContent`) — fit secundário (mais p/ estado-vazio de dados que p/ 404) | ❌ |
+| Estrutura `[u]` | `Section` · `Container` · `Stack` · `Flex` (tokens de espaçamento em vez de `flex`/`min-h-screen` crus) | ❌ |
+
+### 9.2 — Botões de navegação (hoje `Button` ✅)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props usadas | `variant` (`default`/`outline`) · `asChild` | ✅ |
+| Variants `[u]` | `primary` · `secondary`(+`tone`) · `destructive` · `ghost` · `link`(+`tone`) · `secondary-gray`/`-color` · `tertiary`/`-gray`/`-color` · `link-gray`/`-color` | ❌ |
+| Sizes `[u]` | `sm` · `lg` · `icon` · `icon-sm` (usa `default`) | ❌ |
+| Shapes `[u]` | `square` · `circle` (usa `default`) | ❌ |
+| Props `[u]` | `leftIcon` · `rightIcon` · `icon` · `loading` · `loadingText` · `badge`/`badgeColor`/`badgeSize` · `tooltip` · `fullWidth` · `data-id` | ❌ (bypassadas por `asChild`) |
+| Emitters `[u]` | `onClick`/`onFocus`/`onBlur`/`onKeyDown` (`ButtonEventPayload`) | ❌ |
+
+### 9.3 — "404" / título / textos (hoje `<div>`/`<span>`/`<p>` crus)
+| Elemento | Componente Seven `[u]` | Eixos não aproveitados |
+|---|---|---|
+| "404" | **`Text`** | `variant` (`display1`/`display2`/`display3`/`p1`–`p3`/`caption1`/`caption2`/`code`) · `size` · `weight` · `as`/`asChild` |
+| "Page not found" | **`Heading`** | `level(1-6)` · `size(sm→4xl)` · `weight` · `align` · `color(default/muted/primary/destructive)` · `gradient(primary/secondary/accent/rainbow)` |
+| parágrafos | **`Paragraph`** / **`Text`** | `size` · `weight` · `color(default/muted)` · `align` · `leading` · `spacing` · `prose` |
+
+### 9.4 — Link de suporte (hoje `<a mailto>` cru)
+| Categoria | Disponível em **`Link`** `[u]` | Uso |
+|---|---|---|
+| Variants | `default` · `muted` · `nav` · `inline` | ❌ |
+| Props | `external` · `showExternalIcon` · `leftIcon` · `rightIcon` · `underline(always/hover/none)` · `size` · `asChild` · `data-id` | ❌ |
+| Emitter | `onClick(event, LinkEventPayload{href,id,isExternal,timestamp})` | ❌ |
+
+### 9.5 — Brand mark (hoje plate `<div>` + `<span>` cru — intencional)
+| Disponível `[u]` | Uso |
+|---|---|
+| `Logo` · `Brand` | exportados no pacote; projeto usa o plate mint de propósito (ciente) |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Toda ação que o usuário **poderia** executar, o gatilho, o status atual e o primitivo Seven que a ligaria.
+> **Resultado: 4 de 5 ações estão ligadas — esta tela é funcional (≠ Dashboard, que tinha 0/8).**
+
+| # | Ação possível | Gatilho (elemento) | Status | Como (está / ligaria) |
+|---|---|---|---|---|
+| A1 | Voltar à Home | `Button` "Back to Home" | ✅ **ligada** | `Button asChild` → `<Link to="/">` |
+| A2 | Ir ao Dashboard | `Button variant="outline"` "Go to Dashboard" | ✅ **ligada** | `Button asChild` → `<Link to="/dashboard">` (rota protegida → bounce p/ login se deslogado) |
+| A3 | Home via brand mark | `<Link to="/">` no header | ✅ **ligada** | `Link` do TanStack (raw `<a>` por baixo) |
+| A4 | Falar com suporte | `<a href="mailto:support@example.com">` | ✅ **ligada** (mas `<a>` cru + e-mail placeholder) | hoje raw; ligar via `Link href="mailto:…"` (C3) + e-mail real (E2) |
+| A5 | Voltar à página anterior | — (sem elemento) | 🔴 **não-ligada** | `ErrorPage showBackLink` (`window.history.back()` nativo) |
+| A6 | Retry/recarregar | — | ⚪ n/a p/ 404 | `ErrorPage onRetry`/`loading` se virar erro recuperável |
+| A7 | Foco/teclado nas ações | botões + links | ✅ de graça | `Button` (`focus-visible:ring-4`) e `Link` (ring nativo) |
+
+**Contagem:** **4 ligadas / 5 acionáveis** (A1–A4 ok; A5 "voltar" ausente). A6 = n/a; A7 = grátis. Ressalvas em A2 (rota protegida) e A4 (`<a>` cru + e-mail hardcoded).
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout (estrutural)
+>
+> Nota-chave: a escala de spacing do Seven **espelha a do Tailwind** (`--spacing-2`=8px=`gap-2`; `--spacing-8`=32px=`mb-8`), `--font-tracking-tighter`=`tracking-tighter`=-0.05em e `--font-weight-bold/semibold/medium`=700/600/500. Por isso muito "cru" é 🟢, não violação.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `bg-primary` / `text-primary-foreground` | `--primary` / `--primary-foreground` | ✅ |
+| `bg-background` | `--background` | ✅ |
+| `ring-border` | `--border` | ✅ |
+| `text-muted-foreground` (×2) | `--muted-foreground` | ✅ |
+| `text-foreground` | `--foreground` | ✅ |
+| `text-muted/20` | `--muted` @20% (token de superfície usado como texto) | ✅ (nota semântica CL1) |
+| `bg-primary/5` (×2) | `--primary` @5% (decorativo) | ✅ (decoração off-brand) |
+| *(nenhuma cor hardcoded — hex/`text-*-500`/`bg-gray-*`)* | — | ✅ limpo |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `space-x-2` · `py-2` · `mr-2`(×2) | 8px | `--spacing-2` | 🟢 |
+| `gap-3` | 12px | `--spacing-3` | 🟢 |
+| `px-4` | 16px | `--spacing-4` | 🟢 |
+| `px-6` | 24px | `--spacing-6` | 🟢 |
+| `mb-8`(×2) · `mt-8` | 32px | `--spacing-8` | 🟢 |
+| `h-14` | 56px | `--spacing-14` | 🟢 |
+| `-top-40` · `-bottom-40` | 160px | escala Tailwind (decorativo) | ⚪ |
+| **`h-[500px]` (×2) · `w-[500px]` (×2)** | 500px | — (arbitrário) | 🔴 |
+
+### 11.3 — Bordas, radius, sombra
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `rounded-lg` | `--radius-lg` (12px) | ✅ |
+| `shadow-lg` | `--shadow-lg` | ✅ |
+| `rounded-full` · `ring-1` · `underline-offset-4` | — (full/1px/4px estrutural) | ⚪ |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| **`text-[12rem]`** | 192px | 🔴 | display **arbitrário** sem token → `Text display1` / slot `code` |
+| `text-lg` | 1.125rem | 🟡 | span cru → `Heading`/`Text` |
+| `text-sm` | 0.875rem | 🟡 | `<p>` cru → `Text`/`Paragraph` |
+| `font-bold` | 700 | 🟢 | == `--font-weight-bold` (mas em div cru) |
+| `font-semibold` | 600 | 🟢 | == `--font-weight-semibold` (span "Hono" cru) |
+| `font-medium` (×2) | 500 | 🟢 | == `--font-weight-medium` |
+| `tracking-tighter` | -0.05em | 🟢 | == `--font-tracking-tighter` |
+| `leading-none` · `underline` · `select-none` | — | ⚪ | estrutural / deveria vir do `Link` |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `size-8` | 32px | 🟢 (plate) |
+| `size-4` | 16px | 🟢 (ícone command) |
+| `h-4 w-4` (×2) | 16px | 🟡 convenção mista vs `size-4` + redundante no `Button` (SZ1/SZ2) |
+| `aspect-square` | — | ⚪ |
+
+### 11.6 — Efeitos / layout (⚪ sem token de design)
+`blur-3xl`(×2, decorativo — sem token, fere "no decoration") · `rotate-180` · `flex` · `flex-col` · `flex-1` · `min-h-screen` · `container` · `items-center` · `justify-center` · `mx-auto` · `max-w-md` · `text-center` · `relative` · `absolute` · `fixed` · `inset-0` · `-z-10` · `overflow-hidden` · `right-0` · `left-0` · `sm:flex-row` · `sm:justify-center`
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde | Itens |
+|---|---|---|
+| ✅ token-backed | 8 famílias | todas as cores, `rounded-lg`, `shadow-lg` |
+| 🟢 value-aligned | 10 | `space-x-2`, `gap-3`, `px-4`, `px-6`, `py-2`, `mr-2`, `mb-8`, `mt-8`, `h-14`, `size-8`/`size-4`, `font-bold`/`semibold`/`medium`, `tracking-tighter` |
+| 🟡 drift (tipografia/sizing crus) | 3 | `text-lg`, `text-sm`, `h-4 w-4` |
+| 🔴 off-system | **3** | **`text-[12rem]`**, **`h-[500px]`**, **`w-[500px]`** |
+
+> **Conclusão de estilo:** a tela é **token-limpa em cor** (zero hardcoded) e o spacing/tracking/peso são value-aligned. Os **3** estilos genuinamente fora do sistema são o **número 404 arbitrário** (`text-[12rem]`) e o **par de blobs decorativos** (`h-[500px] w-[500px]`) — ambos some ao adotar o `ErrorPage` e remover a decoração off-brand. O resto é drift de tipografia (resolve com `Heading`/`Text`/`Paragraph`/`Link`). O furo real não é estilo, é **estrutural**: reimplementar um componente (`ErrorPage`) que já existe pronto.
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+not_found:
+  route: src/client/routes/$.tsx
+  fidelity: 0.62
+  components_used: [Button]
+  components_missing: [ErrorPage, Heading, Text, Paragraph, Link]
+  gaps:
+    components: [C1, C2, C3, C4, C5]
+    emitters:   [E1, E2, E3, E4, E5]
+    colors:     [CL1]
+    spacing:    [SP1]
+    typography: [TY1, TY2, TY3, TY4]
+    sizing:     [SZ1, SZ2, SZ3]
+    states:     [ST1, ST2, ST3]
+  severity: { high: 3, medium: 7, low: 9 }
+  unused_seven:                      # superfície do DS não aproveitada (seção 9)
+    alternative_components: [ErrorPage, Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, Heading, Text, Paragraph, Link, Section, Container, Stack, Flex, Logo, Brand]
+    unused_props: { Button: [leftIcon, rightIcon, icon, loading, loadingText, badge, badgeColor, badgeSize, tooltip, fullWidth, data-id] }
+    unused_variants: { Button: [primary, secondary, destructive, ghost, link, secondary-gray, secondary-color, tertiary, tertiary-gray, tertiary-color, link-gray, link-color] }
+    unused_sizes: { Button: [sm, lg, icon, icon-sm] }
+    unused_emitters: { Button: [onClick, onFocus, onBlur, onKeyDown], Link: [onClick] }
+  user_actions:                      # seção 10
+    total: 5
+    wired: 4
+    unwired: [A5]                    # A5 = voltar; A6 = n/a; A7 = grátis
+  style_audit:                       # seção 11 (classe-a-classe)
+    token_backed: [colors, rounded-lg, shadow-lg]
+    value_aligned: [space-x-2, gap-3, px-4, px-6, py-2, mr-2, mb-8, mt-8, h-14, size-8, size-4, font-bold, font-semibold, font-medium, tracking-tighter]
+    drift: [text-lg, text-sm, h-4 w-4]
+    off_system: [text-[12rem], h-[500px], w-[500px]]   # número 404 arbitrário + blobs decorativos
+    hardcoded_colors: 0
+  notes:
+    - "Achado dominante: a tela reimplementa o ErrorPage type=404 (existe no pacote, traz defaults pt-BR)."
+    - "Cópia em ingles viola o brand (sentence-case pt-BR) — TY4."
+    - "Decoracao (blobs blur) fere o principio 'no decoration' do brand Seven."
+    - "Sem violacao de guard-rail ESLint (so <a>/<span>/<p>, nao <button>/<input>/<select>/<textarea>)."
+```
diff --git a/docs/ets/state/reports/screens/settings.md b/docs/ets/state/reports/screens/settings.md
new file mode 100644
index 0000000..037cf54
--- /dev/null
+++ b/docs/ets/state/reports/screens/settings.md
@@ -0,0 +1,376 @@
+# Auditoria de tela — Settings
+
+> **Rota:** `src/client/routes/_authenticated/settings.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟡 **72%** — adota o stack de `Form`/`Tabs`/`Card`/`Switch` corretamente e liga o núcleo (form + abas + toggles), mas tem **cor hardcoded** (`text-emerald-600`), CTAs mortos (foto/excluir/desconectar/revogar) e tipografia/status crus.
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | título "Settings" | raw `<h1>` | — |
+| 2 | subtítulo da página | raw `<p>` | — |
+| 3 | abas Profile/Account/Notifications | `@etus/seven-react` | `Tabs` + `TabsList` + `TabsTrigger` + `TabsContent` |
+| 4 | card "Profile Picture" | `@etus/seven-react` | `Card` + `CardHeader/CardTitle/CardDescription/CardContent` |
+| 5 | avatar do usuário | `@etus/seven-react` | `Avatar` + `AvatarImage` + `AvatarFallback` |
+| 6 | botão "Change Photo" | `@etus/seven-react` | `Button` (`variant="outline" size="sm"`) |
+| 7 | helper "JPG, PNG…" | raw `<p>` | — |
+| 8 | card "Personal Information" | `@etus/seven-react` | `Card` + `Form` |
+| 9 | form de perfil | `@etus/seven-react` | `Form` + `FormField` + `FormItem` + `FormLabel` + `FormControl` + `FormMessage` |
+| 10 | input "Full Name" | `@etus/seven-react` | `TextInput` (via `FormControl`) |
+| 11 | input "Email" (read-only) | `@etus/seven-react` | `Label` + `TextInput` (`disabled`) |
+| 12 | botão "Save Changes" (submit) | `@etus/seven-react` | `Button` + spinner manual (`Icons.spinner animate-spin`) |
+| 13 | card "Connected Accounts" + linha Google | `@etus/seven-react` + raw | `Card` + `<div>` cru (círculo `bg-muted` + `Icons.google` + status) |
+| 14 | card "Sessions" + linha sessão atual | `@etus/seven-react` + raw | `Card` + `<div>` cru + status |
+| 15 | card "Danger Zone" | `@etus/seven-react` | `Card className="border-destructive/50"` + `Button variant="destructive"` |
+| 16 | card "Email Notifications" | `@etus/seven-react` | `Card` + 3× `NotificationToggle` + 2× `Divider` |
+| 17 | `NotificationToggle` (local) | raw + `@etus/seven-react` | `<div>`/`<p>` cru + `Switch` |
+| 18 | status "Connected"/"Active" | raw `<span>` | — (deveria ser `Badge`/`Tag`) |
+| 19 | ícones | `@/components/icons` (lucide) | — (convenção do projeto, ok) |
+| 20 | feedback de salvar | `sonner` (`toast`) | — (Seven exporta `Toaster`) |
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Status à mão | `Connected`/`Active` são `<span … text-emerald-600>` em vez de `Badge color="success"` / `Tag` (ambos no beta.4) | 🟡 | `<Badge color="success">Connected</Badge>` |
+| **C2** | Tipografia em HTML cru | `<h1>` e ~10 `<p>`/`<span>` em vez de `Heading` / `Text`·`Paragraph` (todos exportados) | 🟡 | `Heading` no título, `Text` no corpo |
+| **C3** | Avatar reinventado | linhas Google/Sessão usam `<div className="h-10 w-10 … rounded-full bg-muted">` + ícone, em vez de `Avatar`/`AvatarFallback` | 🔵 | `Avatar size="default"` + `AvatarFallback` |
+| **C4** | `NotificationToggle` reimplementa o `Switch` | o próprio `Switch` tem `switchText`/`descriptionText`/`type="box"` — a tela recria isso com `<div>`/`<p>` crus | 🟡 | usar a composição nativa do `Switch` ou `Text` no rótulo |
+| **C5** | Exclusão sem confirmação | "Delete Account" não abre `AlertDialog`/`Dialog` (ambos exportados) — ação destrutiva sem guarda | 🔴 | envolver em `AlertDialog` (ver E2) |
+| **C6** | Upload de foto inexistente | "Change Photo" não tem `<input type=file>` nem `FileUpload`/`Dropzone` (exportados) | 🟡 | `FileUpload` + handler (ver E1) |
+| **C7** | `FormDescription` exportado e não usado | helpers ("Email cannot be changed.", "JPG, PNG…") são `<p className="text-xs …">` em vez de `FormDescription` | 🔵 | `FormDescription` dentro do `FormItem` |
+| **C8** | Campo Email fora do `FormField` | email usa `Label`+`TextInput`+`<p>` soltos, divergindo do padrão `FormField` ao lado | 🔵 | uniformizar via `FormField`/`FormItem` |
+
+**Sub-componentes do `Card` disponíveis e NÃO usados:** `CardMedia`, `CardAction`, `CardFooter`.
+**Sub-componentes do `Avatar` disponíveis e NÃO usados:** `AvatarStatus`, `AvatarBadge`, `AvatarGroup`, `AvatarLabelGroup`, `AvatarSkeleton`.
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> O núcleo funcional **está ligado** (abas via Radix, form via RHF, toggles via `onCheckedChange`). Os buracos são **CTAs mortos** e **persistência ausente**.
+
+| ID | Emitter/ação ausente | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | "Change Photo" sem ação | `Button variant="outline"` **sem `onClick`** e sem mecanismo de arquivo | 🔴 | `FileUpload`/`Dropzone` + handler de upload |
+| **E2** | "Delete Account" sem ação | `Button variant="destructive"` **sem `onClick`** e **sem confirmação** | 🔴 | `AlertDialog` → `onClick` que chama a API de exclusão |
+| **E3** | Conta conectada sem gerência | card diz *"Manage your connected OAuth providers"* mas só mostra "Connected" — **sem botão** desconectar | 🔴 | `Button` ("Desconectar") + `AlertDialog` |
+| **E4** | Sessão sem gerência | card diz *"Manage your active sessions"* mas só mostra "Active" — **sem botão** revogar | 🔴 | `Button` ("Revogar") por sessão |
+| **E5** | Preferências de notificação não persistem | 3 `Switch` mudam `useState` local; **não há botão salvar nem mutation** — perde no reload | 🟡 | `onCheckedChange` → mutation (Regra 6) |
+| **E6** | Salvar perfil é mock | `onSubmit` faz `setTimeout(1000)` + `console.log`, não chama API real | 🟡 | ligar à mutation real (Regra 6) |
+| **E7** | Spinner manual em vez de `Button.loading` | submit usa `Icons.spinner animate-spin` + `disabled={isSubmitting}`; o `Button` tem `loading`/`loadingText` nativos | 🟡 | `<Button loading={form.formState.isSubmitting}>` |
+| **E8** | `ButtonEventPayload` ignorado | nenhum botão usa `onClick/onFocus/onBlur/onKeyDown` (payload `id`,`isLoading`,`timestamp`) | 🔵 | usar quando os CTAs forem ligados |
+
+> **Positivo:** `Switch onCheckedChange={setChecked}`, `TabsTrigger value`, `form.handleSubmit(onSubmit)` estão corretamente conectados — diferente da Dashboard (0 emitters).
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| `Card` bg/borda/sombra | tokens internos `--card-root-*`, `--border` | ✅ | ✅ |
+| texto secundário (×6) | `text-muted-foreground` | ✅ `--muted-foreground` | ✅ |
+| círculos de ícone | `bg-muted` | ✅ `--muted` | ✅ |
+| Danger Zone | `text-destructive` / `border-destructive/50` | ✅ `--destructive` (+ alpha) | ✅ |
+| `AvatarFallback` bg | `--avatar-fallback-bg-default` (interno) | ✅ | ✅ |
+| **status "Connected"/"Active"** | `text-emerald-600` (×2) | ❌ **`emerald` não existe no Seven** | 🔴 **CL1** — usar `--success`/`text-success` ou `Badge color="success"` |
+
+→ Cores quase todas corretas (herdadas/semânticas). O **único** ponto cru é `text-emerald-600` — token de paleta Tailwind sem equivalente no DS; o semântico de sucesso é `--success` (e `--success-subtle`).
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| wrapper da página | `space-y-8` (32px) | layout (raw) → `--spacing-8` | 🟢 |
+| conteúdo de abas/cards | `space-y-4` (16px), `gap-4`, `p-4` | → `--spacing-4` | 🟢 |
+| pares menores | `space-y-2`/`gap-2`/`mr-2` (8px), `gap-1` (4px) | → `--spacing-2`/`--spacing-1` | 🟢 |
+| **ritmo das abas/seções** | `space-y-6` (×4) / `gap-6` (×1) = **24px** | **fora da escala Seven** (não há `--spacing-6`; a escala pula 16→32) | 🟡 **SP1** — usar `--spacing-4`/`--spacing-8` ou o `gap` próprio do `Tabs` |
+| micro-gap do toggle | `space-y-0.5` (2px) | sem token (`--spacing-1`=4px é o menor) | 🟡 **SP2** — some ao adotar a composição do `Switch` |
+| interno de card/form/tabs | `--card-*`, `--form-*`, `--tabs-*` | tokens Seven (não sobrescritos) | ✅ |
+
+> Honestidade: a escala Seven = passo Tailwind × 4px, mas é **curada** — só {1,2,4,8,12,16,20,24,32,40,48,56,64}. Por isso `space-y-8/4/2`, `gap-4/2/1` são 🟢, mas **`space-y-6`/`gap-6` (24px) não têm token** → drift real, não value-aligned.
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| título h1 | `text-2xl font-semibold tracking-tight` | `Heading` (tokens de tipografia) | 🟡 **TY1** (= C2) |
+| subtítulo da página | `<p className="text-muted-foreground">` | `Text`/`Paragraph` | 🟡 **TY2** (= C2) |
+| pseudo-títulos | `<p className="font-medium">` (Google, Current Session, Delete Account, título do toggle) | `Text weight` / `Heading level` | 🟡 **TY3** (= C2) |
+| corpo/helpers | `text-sm`/`text-xs` em `<p>`/`<span>` | `Text`/`Paragraph`/`FormDescription` | 🟡 **TY4** (= C2/C7) |
+| `AvatarFallback` | `text-lg` sobrescreve o tamanho da fallback | o `size` do `Avatar` já define `text-[length:var(--avatar-text-*)]` | 🟡 **TY5** (= SZ2) |
+| `CardTitle` Danger Zone | override `text-destructive` (aditivo) | `cardTitleVariants` + cor; override ok | 🔵 |
+| `tracking-tight` | -0.025em | = `--font-tracking-tight` (via var Tailwind) | 🟢 |
+
+> Nota: o guard-rail do ESLint **não** bane `h1/p/span` (só `button/input/select/textarea`) — passa o lint, mas é drift de DS. **Nenhuma** tag banida foi encontrada na tela.
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | Convenção de ícone mista | `mr-2 h-4 w-4` (16px) vs `h-5 w-5` (20px) vs `size-4` (interno dos componentes) | 🟡 |
+| **SZ2** | `Avatar` sem `size` prop | usa `className="h-20 w-20"` (80px) + `AvatarFallback text-lg` em vez de `size="xl"`/`"3xl"` (que já trazem `--avatar-size-*`/`--avatar-text-*`) | 🟡 |
+| **SZ3** | Círculos de ícone à mão | `h-10 w-10 rounded-full bg-muted` recriam o que `Avatar size="default"` entrega tokenizado | 🔵 |
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| loading (submit) | 🟡 spinner manual | `Button.loading` / `Button.loadingText` | 🟡 **ST1** (= E7) |
+| confirmação destrutiva | ❌ ausente | `AlertDialog` / `Dialog` | 🔴 **ST2** (= C5/E2) |
+| erro de validação | ✅ `FormMessage` + `toast.error` | `FormMessage` (`state="error"`) | ✅ |
+| disabled | ✅ email + "Security Alerts" toggle | nativo dos componentes | ✅ |
+| sucesso | 🔵 `sonner` `toast.success` | Seven exporta `Toaster` (consistência) | 🔵 **ST3** |
+| hover/focus/active | ✅ vêm de `Button`/`Tabs`/`Switch` | tokens internos | ✅ |
+| empty | n/a nesta tela | `EmptyState` | — |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | CL1, E2·C5·ST2, E1·C6, E3, E4 | cor hardcoded `text-emerald-600`; excluir conta sem confirmação/handler; trocar foto morto; conta/sessão prometem "Manage" sem botão |
+| 🟡 **Should-fix** | C1, C2·TY1-4, C4, E5, E6, E7·ST1, SP1, SZ2 | status→`Badge`/`Tag`; tipografia→`Heading`/`Text`; toggle→composição do `Switch`; persistir prefs; salvar real; `Button.loading`; ritmo 24px; `Avatar size` |
+| 🔵 **Nice-to-have** | C3·SZ3, C7, C8, SP2, SZ1, TY5, ST3, E8 | avatar à mão; `FormDescription`; email no `FormField`; micro-gap 2px; convenção de ícone; `Toaster`; payload de eventos |
+
+**Pontos corretos (não mexer):** stack completo de `Form`/`FormField`/`FormItem`/`FormControl`/`FormMessage` · `Tabs` composto · `Card` + sub-componentes · `Switch` com `onCheckedChange` · `Divider` · tokens `--muted`/`--destructive`/`--border`/radius · spacing 8/16/32 alinhado.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário do que o Seven oferece e a tela **não** aproveita — props, variants, sub-componentes, estados e **componentes alternativos**. `[u]` = não usado.
+
+### 9.1 — Abas (hoje `Tabs` `solid`)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| Variant `[u]` | `line` (underline) — usa `solid` | ❌ |
+| `TabsTrigger` props `[u]` | **`icon`** (slot antes do label) · **`badge`** (slot depois) | ❌ (ícone inline `mr-2 h-4 w-4`) |
+| Tokens internos | `--tabs-root-gap` `--tabs-list-*` `--tabs-trigger-*` | ✅ (mas `space-y-6` sobrepõe o gap) |
+
+### 9.2 — Cards (hoje `Card` `default`)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Sub-componentes usados | `CardHeader/CardTitle/CardDescription/CardContent` | ✅ |
+| Sub-componentes `[u]` | `CardMedia` · `CardAction` · `CardFooter` | ❌ |
+| Variants `[u]` | `elevated` · `outlined` · `ghost` · `selectable` (usa `default`) | ❌ |
+| Estados `[u]` (selectable) | `data-active`/`data-selected` · pin/checkbox overlays · `onToggleSelect`/`onTogglePin` | ❌ |
+
+### 9.3 — Avatar (hoje `Avatar` + override)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props `[u]` | **`size`** (`xs`→`4xl`) · `shape` · `bordered` · `interactive` · `tooltip` · `contrastBorder` | ❌ (override `h-20 w-20`) |
+| `AvatarFallback` `[u]` | `colorScheme` (`primary/secondary/success/warning/destructive`) | ❌ (override `text-lg`) |
+| Sub-componentes `[u]` | `AvatarStatus` (presença) · `AvatarBadge` · `AvatarGroup` · `AvatarLabelGroup` · `AvatarSkeleton` | ❌ |
+
+### 9.4 — Button (hoje `outline`/`destructive`/`default`)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Estados `[u]` | **`loading`** · `loadingText` | ❌ (spinner manual) |
+| Slots `[u]` | `leftIcon` · `rightIcon` · `icon` · `badge`/`badgeColor`/`badgeSize` | ❌ (ícones inline) |
+| Props `[u]` | `asChild` · `tooltip` · `fullWidth` · `tone` · `shape` | ❌ |
+| Emitters `[u]` | `onClick/onFocus/onBlur/onKeyDown` + `ButtonEventPayload` | ❌ |
+
+### 9.5 — TextInput (hoje `default`/`md`)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Sizes `[u]` | `xs` · `sm` · `lg` · `xl` (usa `md`) | ❌ |
+| Variants `[u]` | `filled` · `flushed` · `unstyled` | ❌ |
+| Slots `[u]` | `leadingIcon` · `trailingIcon` (+ `*Interactive`) | ❌ |
+
+### 9.6 — Switch (hoje bare + wrapper à mão)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Composição `[u]` | **`switchText`** · **`descriptionText`** · `showText`/`showDescription` · **`type="box"`** | ❌ (recriado em `NotificationToggle`) |
+| Sizes `[u]` | `sm` · `lg` (usa `md`) | ❌ |
+
+### 9.7 — Divider (hoje `line` default)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Tipos `[u]` | `text` · `heading` · `button*` · `button-group*` | ❌ |
+| Estilo/linha `[u]` | `visualStyle` (`dual-line`/`background-fill`) · `lineType` (`dashed`/`dotted`) · `labelPosition` · `orientation="vertical"` | ❌ |
+
+### 9.8 — Form (hoje sem helper/description)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Sub-componente `[u]` | **`FormDescription`** (helper acessível ligado por `aria-describedby`) | ❌ (helpers em `<p>`) |
+| `FormItem` `[u]` | `spacing` (`tight`/`loose`) | ❌ |
+| `FormMessage` `[u]` | `state` (`success`/`info`, além de `error`) | ❌ |
+| `Label` `[u]` | `required` · `optional`/`optionalText` · `size` | ❌ |
+
+### 9.9 — Componentes alternativos nunca considerados
+| Necessidade da tela | Componente Seven `[u]` |
+|---|---|
+| título / textos crus | **`Heading`** (`level/size/weight/align/color/gradient`) · **`Text`**/**`Paragraph`** |
+| status "Connected"/"Active" | **`Badge`** (`color="success"`) · **`Tag`** |
+| confirmar exclusão | **`AlertDialog`** (+`Action/Cancel/Title/Description`) · **`Dialog`** |
+| trocar foto | **`FileUpload`** · **`Dropzone`** |
+| layout da página | **`Section`** · **`Stack`** · **`Grid`** · **`Container`** (vs `space-y`/`grid` crus) |
+| loading de dados | **`SkeletonLoader`** |
+| feedback | **`Toaster`** (Seven) vs `sonner` |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Toda ação que o usuário **poderia** executar, o gatilho, o status atual e o primitivo Seven que a ligaria.
+> **Resultado: 5 de 10 ações acionáveis estão ligadas (A7 e A12 = n/a por design).**
+
+| # | Ação possível | Gatilho (elemento) | Status | Como ligar (Seven) |
+|---|---|---|---|---|
+| A1 | Trocar de aba | `TabsTrigger` | ✅ ligada (Radix `value`/`defaultValue`) | — |
+| A2 | Editar nome completo | `TextInput` via `FormField` | ✅ ligada (react-hook-form) | — |
+| A3 | Salvar perfil | submit "Save Changes" | ✅ ligada (`onSubmit`) — **mas mock** (`setTimeout`+`console.log`) | mutation real (E6) |
+| A4 | Trocar foto | `Button` "Change Photo" | 🔴 não-ligada (sem `onClick`, sem input) | `FileUpload`/`Dropzone` + handler |
+| A5 | Alternar "Team Invitations" | `Switch` | ✅ ligada (`onCheckedChange`) — **só estado local** | persistir (E5) |
+| A6 | Alternar "Product Updates" | `Switch` | ✅ ligada — **só estado local** | persistir (E5) |
+| A7 | Alternar "Security Alerts" | `Switch disabled` | ⚪ n/a (desabilitado por design) | — |
+| A8 | Salvar preferências de notificação | — (sem botão) | 🔴 não-ligada (sem emitter/persistência) | `Button` + mutation |
+| A9 | Desconectar/gerenciar Google | — (só status "Connected") | 🔴 não-ligada (card promete "Manage") | `Button` ("Desconectar") + `AlertDialog` |
+| A10 | Revogar/gerenciar sessão atual | — (só status "Active") | 🔴 não-ligada (card promete "Manage") | `Button` ("Revogar") |
+| A11 | Excluir conta | `Button variant="destructive"` | 🔴 não-ligada (sem `onClick`, sem confirmação) | `AlertDialog` → `onClick` |
+| A12 | Editar e-mail | `TextInput disabled` | ⚪ n/a (read-only por design) | — |
+
+**Contagem:** acionáveis = 10 · **ligadas = 5** (A1, A2, A3, A5, A6) · não-ligadas = 5 (A4, A8, A9, A10, A11) · n/a = 2 (A7, A12).
+**Emitters do `Button` disponíveis quando A4/A8–A11 forem ligadas:** `onClick`·`onFocus`·`onBlur`·`onKeyDown` (payload `ButtonEventPayload`: `id`, `isLoading`, `timestamp`).
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** (resolve num token Seven) · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout (estrutural, sem token de design)
+>
+> Nota-chave: a escala de spacing do Seven **espelha a do Tailwind** (passo × 4px), mas é **curada** — falta `--spacing-6` (24px). Por isso `space-y-6`/`gap-6` são 🟡, não 🟢.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `text-muted-foreground` (×6) | `--muted-foreground` | ✅ |
+| `bg-muted` (×2) | `--muted` | ✅ |
+| `text-destructive` (×1) | `--destructive` | ✅ |
+| `border-destructive/50` (×1) | `--destructive` + alpha | ✅ |
+| bg/borda/sombra dos cards | tokens internos (`--card-root-*`, `--border`) | ✅ |
+| **`text-emerald-600`** (×2) | — (paleta Tailwind; Seven não tem `emerald`) | 🔴 **único off-system real** |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `space-y-8` | 32px | `--spacing-8` | 🟢 |
+| `space-y-4` (×4) | 16px | `--spacing-4` | 🟢 |
+| `space-y-2` (×2) | 8px | `--spacing-2` | 🟢 |
+| `gap-4` | 16px | `--spacing-4` | 🟢 |
+| `gap-2` | 8px | `--spacing-2` | 🟢 |
+| `gap-1` | 4px | `--spacing-1` | 🟢 |
+| `mr-2` (×4) | 8px | `--spacing-2` | 🟢 |
+| `p-4` (×2) | 16px | `--spacing-4` | 🟢 |
+| **`space-y-6` (×4) / `gap-6`** | 24px | **sem token** (escala pula 16→32) | 🟡 |
+| **`space-y-0.5`** | 2px | sem token (mín. `--spacing-1`=4px) | 🟡 |
+| padding/gap internos (card/form/tabs) | — | `--card-*`/`--form-*`/`--tabs-*` | ✅ |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `border` (×2) | `--border` (cor) | ✅ |
+| `rounded-lg` (×2) | `--radius-lg` (12px) | ✅ |
+| `rounded-full` (×2) | `--radius-full` (9999px) | ✅ |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| `text-2xl` | 1.5rem | 🟡 | título deveria vir do `Heading` |
+| `font-semibold` | 600 | 🟡 | idem (peso do `Heading`) |
+| `font-medium` (×4) | 500 | 🟡 | pseudo-títulos deveriam vir do `Text`/`Heading` |
+| `text-sm` (×6) | 0.875rem | 🟡 | corpo deveria vir do `Text`/`Paragraph` |
+| `text-xs` (×2) | 0.75rem | 🟡 | helper deveria vir do `FormDescription`/`Text` |
+| `text-lg` (×1) | 1.125rem | 🟡 | override do `AvatarFallback` (vem do `size`) |
+| `tracking-tight` | -0.025em | 🟢 | valor == `--font-tracking-tight` |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `h-4 w-4` (×5, em `mr-2 h-4 w-4`) | 16px | 🟡 convenção `h/w` vs `size-4` interno |
+| `h-5 w-5` (×2) | 20px | 🟡 inconsistente com `h-4 w-4` |
+| `h-10 w-10` (×2) | 40px | 🟡 círculo à mão (→ `Avatar`) |
+| `h-20 w-20` (×1) | 80px | 🟡 deveria ser `Avatar size="xl"/"3xl"` |
+
+### 11.6 — Layout (⚪ sem token de design — ok)
+`flex` · `grid` · `items-center` · `justify-between` · `justify-center` · `justify-end` · `sm:grid-cols-2` · `animate-spin` (animação — o `Button.loading` já fornece o spinner nativamente)
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde | Itens |
+|---|---|---|
+| ✅ token-backed | 6 famílias | `muted-foreground`, `bg-muted`, `destructive`(+/50), `border`, `rounded-lg`, `rounded-full` |
+| 🟢 value-aligned | 8 | `space-y-8/4/2`, `gap-4/2/1`, `mr-2`, `p-4`, `tracking-tight` |
+| 🟡 drift | 13 | `space-y-6`/`gap-6`, `space-y-0.5`, `text-2xl`, `font-semibold`, `font-medium`, `text-sm`, `text-xs`, `text-lg`, `h-4 w-4`, `h-5 w-5`, `h-10 w-10`, `h-20 w-20` |
+| 🔴 off-system | **1 classe / 2 ocorrências** | **`text-emerald-600`** |
+
+> **Conclusão de estilo:** a tela é **quase token-limpa** — `muted`/`destructive`/`border`/radius corretos, spacing 8/16/32 alinhado. O **único** estilo genuinamente fora do sistema é `text-emerald-600` (×2) → resolve com `text-success` ou `Badge color="success"` (C1). O resto é drift de tipografia (resolve com `Heading`/`Text`), spacing 24px fora da escala curada, e convenção de sizing de ícone — todos de baixa-média severidade.
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+settings:
+  route: src/client/routes/_authenticated/settings.tsx
+  fidelity: 0.72
+  components_used: [Tabs, TabsList, TabsTrigger, TabsContent, Card, CardHeader, CardTitle, CardDescription, CardContent, Avatar, AvatarImage, AvatarFallback, Form, FormField, FormItem, FormLabel, FormControl, FormMessage, TextInput, Label, Switch, Divider, Button]
+  components_missing: [Heading, Text, Paragraph, Badge, Tag, AlertDialog, FileUpload, Dropzone, FormDescription, AvatarStatus, Section, Stack, SkeletonLoader, Toaster]
+  gaps:
+    components: [C1, C2, C3, C4, C5, C6, C7, C8]
+    emitters:   [E1, E2, E3, E4, E5, E6, E7, E8]
+    colors:     [CL1]
+    spacing:    [SP1, SP2]
+    typography: [TY1, TY2, TY3, TY4, TY5]
+    sizing:     [SZ1, SZ2, SZ3]
+    states:     [ST1, ST2, ST3]
+  severity: { high: 5, medium: 11, low: 7 }
+  unused_seven:                      # superfície do DS não aproveitada (seção 9)
+    alternative_components: [Heading, Text, Paragraph, Badge, Tag, AlertDialog, Dialog, FileUpload, Dropzone, Section, Stack, Grid, Container, SkeletonLoader, Toaster]
+    unused_props:
+      Avatar: [size, shape, bordered, interactive, tooltip, contrastBorder]
+      AvatarFallback: [colorScheme]
+      Button: [loading, loadingText, leftIcon, rightIcon, icon, badge, asChild, tooltip, fullWidth, tone, shape]
+      TabsTrigger: [icon, badge]
+      Switch: [switchText, descriptionText, showText, showDescription, type, size]
+      TextInput: [size, variant, leadingIcon, trailingIcon]
+      Label: [required, optional, size]
+    unused_variants:
+      Tabs: [line]
+      Card: [elevated, outlined, ghost, selectable]
+      TextInput: [filled, flushed, unstyled]
+      Divider: [text, heading, button, dual-line, background-fill, dashed, dotted]
+    unused_subcomponents:
+      Card: [CardMedia, CardAction, CardFooter]
+      Avatar: [AvatarStatus, AvatarBadge, AvatarGroup, AvatarLabelGroup, AvatarSkeleton]
+      Form: [FormDescription]
+  user_actions:                      # seção 10
+    total: 10                        # acionáveis (exclui A7, A12 = n/a)
+    wired: 5                         # A1, A2, A3, A5, A6
+    unwired: [A4, A8, A9, A10, A11]
+    na: [A7, A12]
+  style_audit:                       # seção 11 (classe-a-classe)
+    token_backed: [muted-foreground, bg-muted, destructive, border, rounded-lg, rounded-full]
+    value_aligned: [space-y-8, space-y-4, space-y-2, gap-4, gap-2, gap-1, mr-2, p-4, tracking-tight]
+    drift: [space-y-6, gap-6, space-y-0.5, text-2xl, font-semibold, font-medium, text-sm, text-xs, text-lg, h-4 w-4, h-5 w-5, h-10 w-10, h-20 w-20]
+    off_system: [text-emerald-600]   # único estilo sem token Seven (×2 ocorrências)
+    hardcoded_colors: 2
+```
diff --git a/docs/ets/state/reports/screens/shell.md b/docs/ets/state/reports/screens/shell.md
new file mode 100644
index 0000000..26a4963
--- /dev/null
+++ b/docs/ets/state/reports/screens/shell.md
@@ -0,0 +1,239 @@
+# Auditoria de tela — Shell (`_authenticated`)
+
+> **Rota:** `src/client/routes/_authenticated.tsx` + `src/client/components/sidebar.tsx` (AppSidebar) + override em `src/client/index.css`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código**.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟢 **84%** — o shell é o mais fiel ao Seven (Sidebar+Topbar+Inset corretos, ações ligadas). Gaps são de *superfície não usada* (TopbarTrailing, AccountSwitch), não de erro.
+>
+> Severidade: 🔴 alta · 🟡 média · 🔵 baixa · ⚪ layout/semântico
+
+---
+
+## 0. Elementos da tela
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | Provider do shell | `@etus/seven-react` | `SidebarProvider` |
+| 2 | Sidebar (rail colapsável) | `@etus/seven-react` | `Sidebar` + `SidebarHeader/Content/Group/Menu/Footer/Rail` |
+| 3 | Área de conteúdo | `@etus/seven-react` | `SidebarInset` |
+| 4 | Topbar | `@etus/seven-react` | `Topbar` + `TopbarLeading` |
+| 5 | Toggle da sidebar | `@etus/seven-react` | `SidebarTrigger` |
+| 6 | Breadcrumb | `@etus/seven-react` | `Breadcrumb` + `BreadcrumbList/Item/Page` |
+| 7 | Card de conteúdo "tucked" | raw `<div>` | — (estética dual-demo) |
+| 8 | User menu | `@etus/seven-react` | `DropdownMenu` + `Avatar` |
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Card de conteúdo cru | `<div className="rounded-tl-[24px] border bg-background p-8">` em vez de `SidebarInset` variant nativo | 🔵 | aceitável (replica o dual-demo); revisitar se Seven expor variant tucked |
+| **C2** | Logo plate à mão | `<div className="… rounded-lg bg-primary …">` em vez dos tokens `--sidebar-logo-*` do Seven | 🟡 | usar os tokens de logo do sidebar (bg/fg/radius/size) |
+| **C3** | Brand em `<span>` cru | `<span className="font-semibold">Hono</span>` | 🔵 | `Text`/`Heading` |
+
+**Bem composto (não mexer):** `Sidebar` + todos os sub-componentes (`SidebarHeader/Content/Group/GroupLabel/GroupContent/Menu/MenuItem/MenuButton/Footer/Rail`), `SidebarMenuButton` com `asChild`/`isActive`/`tooltip`/`size`, `DropdownMenu` completo, `Avatar`+`AvatarImage`+`AvatarFallback`.
+
+---
+
+## 2. GAPS de emitters / interações
+> Diferente das telas de conteúdo, **o shell TEM ações ligadas** — é o melhor da app nesse quesito.
+
+| ID | Item | Status | Nota |
+|---|---|---|---|
+| ✅ | toggle sidebar (`SidebarTrigger`) | ligado | Seven cuida |
+| ✅ | navegação (6 itens `Link` + `isActive`/`aria-current`) | ligado | correto |
+| ✅ | ciclar tema (`onClick=cycleTheme`) | ligado | light→dark→system |
+| ✅ | abrir user-menu (`DropdownMenuTrigger`) | ligado | |
+| ✅ | sign out (`onClick=logout` + `disabled=isLoggingOut`) | ligado | |
+| **E1** | trocar conta/workspace | ❌ ausente | app é multi-tenant mas o shell não expõe `AccountSwitch`/`WorkspaceDropdown` |
+| **E2** | busca global | ❌ ausente | `TopbarTrailing` vazio |
+
+---
+
+## 3. GAPS de cores / tokens
+| Elemento | Usa | Veredito |
+|---|---|---|
+| Topbar bg | `--topbar-root-background` (=surface, via componente) | ✅ (fix beta.3) |
+| Sidebar bg | `--sidebar` (=surface) | ✅ |
+| card de conteúdo | `bg-background` + `border` | ✅ |
+| logo plate | `bg-primary` `text-primary-foreground` | ✅ tokens |
+| texto secundário | `text-muted-foreground` | ✅ |
+| *(nenhuma cor hardcoded)* | — | ✅ limpo |
+
+---
+
+## 4. GAPS de espaçamento
+| Onde | Usa | Veredito |
+|---|---|---|
+| card de conteúdo | `p-8` (32px = `--spacing-8`) | 🟢 |
+| `SidebarTrigger` | `-ml-1` (nudge -4px) | 🟢 |
+| dropdown | `w-56` (224px, largura arbitrária) | 🔵 ⚪ |
+| internos da sidebar | tokens `--sidebar-*` | ✅ |
+
+---
+
+## 5. GAPS de tipografia
+| Elemento | Tela | Veredito |
+|---|---|---|
+| brand "Hono" | `font-semibold` (span cru) | 🔵 TY1 (=C3) |
+| nome do user | `font-medium` | 🟡 deveria vir de `Text` |
+| email/role | `text-xs text-muted-foreground` | 🟡 idem |
+| breadcrumb | `font-semibold` (override em `BreadcrumbPage`) | 🔵 aditivo, ok |
+
+---
+
+## 6. GAPS de sizing / ícones
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | ícones mistos | `size-4` (logo/chevron) vs ícones de nav (default do `SidebarMenuButton`) | 🔵 |
+| **SZ2** | `size-8` no logo/avatar | consistente entre logo e avatar ✅ | — |
+
+---
+
+## 7. GAPS de estados
+| Estado | Status | Nota |
+|---|---|---|
+| colapsado (icon rail) | ✅ `collapsible="icon"` + `group-data-[collapsible=icon]:hidden` | correto |
+| ativo (nav) | ✅ `isActive` + `aria-current="page"` | correto |
+| loading (logout) | ✅ `disabled={isLoggingOut}` | correto |
+| pending (rota) | ✅ `AuthenticatedPendingComponent` → `PageSkeleton` | correto |
+| erro (rota) | ✅ `AuthenticatedErrorComponent` → `ErrorFallback` | correto |
+
+---
+
+## 8. Consolidado — backlog priorizado
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🟡 **Should-fix** | E1, C2 | expor `AccountSwitch` (multi-tenant); logo via tokens `--sidebar-logo-*` |
+| 🔵 **Nice-to-have** | E2, C1, C3, SZ1 | busca no `TopbarTrailing`; card tucked nativo; brand via `Text` |
+| ⏸ **Bloqueado (Seven)** | borda | override em `index.css` aguarda `borderless` upstream |
+
+**Pontos corretos:** Sidebar bem composta · Topbar=surface · ações ligadas · estados (active/loading/pending/error) cobertos.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+### 9.1 — Topbar
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Slots | `TopbarLeading` | ✅ |
+| Slots `[u]` | **`TopbarTrailing`** (busca, account, ações) | ❌ vazio |
+| Variants `[u]` | `filters` (usa `default`) | ❌ |
+
+### 9.2 — Breadcrumb
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Usado | `BreadcrumbList` `BreadcrumbItem` `BreadcrumbPage` | ✅ |
+| `[u]` | `BreadcrumbLink` · `BreadcrumbSeparator` · `BreadcrumbEllipsis` (hierarquia multinível) | ❌ só 1 nível |
+
+### 9.3 — Sidebar
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| `[u]` componentes | **`AccountSwitch`** · **`WorkspaceDropdown`** (multi-tenant) | ❌ |
+| `[u]` tokens logo | `--sidebar-logo-background/foreground/radius/size` | ❌ (plate à mão) |
+| `[u]` sub-comp | `SidebarInput` (busca na sidebar) · `SidebarMenuBadge` · `SidebarMenuAction` · `SidebarSeparator` | ❌ |
+| `[u]` modo | `mode="dual"` (rail+panel) | ❌ (usa single — correto p/ nav plana) |
+
+### 9.4 — Conteúdo / textos
+| Elemento | Componente `[u]` |
+|---|---|
+| brand `<span>` | `Text`/`Heading` |
+| nome/email no footer | `Text` |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+> **6 de 9 ligadas** — o shell é a tela mais interativa da app.
+
+| # | Ação | Gatilho | Status | Wire (Seven) |
+|---|---|---|---|---|
+| A1 | Colapsar/expandir sidebar | `SidebarTrigger` | ✅ ligada | nativo |
+| A2 | Navegar (6 destinos) | `SidebarMenuButton`+`Link` | ✅ ligada | `isActive`/`aria-current` |
+| A3 | Ciclar tema | footer `onClick` | ✅ ligada | light→dark→system |
+| A4 | Abrir user-menu | `DropdownMenuTrigger` | ✅ ligada | |
+| A5 | Sign out | `DropdownMenuItem onClick` | ✅ ligada | `disabled` em loading |
+| A6 | Logo → dashboard | `Link` | ✅ ligada | |
+| A7 | Trocar conta/workspace | — | 🔴 ausente | `AccountSwitch` no header/footer |
+| A8 | Busca global | — | 🔴 ausente | `TextInput`/`SearchInput` no `TopbarTrailing` |
+| A9 | Notificações | — | 🔵 ausente | `Button`+`Badge` no `TopbarTrailing` |
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+> Legenda: ✅ token-backed · 🟢 value-aligned · 🟡 drift · 🔴 off-system · ⚪ layout.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `bg-primary` `text-primary-foreground` | `--primary` / `--primary-foreground` | ✅ |
+| `text-muted-foreground` | `--muted-foreground` | ✅ |
+| `bg-background` `border` | `--background` / `--border` | ✅ |
+| *(zero hex/cor arbitrária)* | — | ✅ |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token equiv. | Veredito |
+|---|---|---|---|
+| `p-8` | 32px | `--spacing-8` | 🟢 |
+| `-ml-1` | -4px | `--spacing-1` | 🟢 |
+| `ml-auto` | auto | — | ⚪ |
+| `w-56` | 224px | — (largura de dropdown) | 🔵 ⚪ |
+| internos `--sidebar-*` | — | tokens | ✅ |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `border` | `--border` | ✅ |
+| `rounded-lg` (logo/avatar) | `--radius-lg` | ✅ |
+| `rounded-tl-[24px]` (card) | arbitrário 24px (= o dual-demo do Seven usa o mesmo literal) | 🟡 fiel ao demo, mas não-tokenizado |
+
+### 11.4 — Tipografia
+| Classe | Veredito | Observação |
+|---|---|---|
+| `font-semibold` (brand, breadcrumb) | 🔵/🟡 | brand→`Text`; breadcrumb override aditivo ok |
+| `font-medium` (nome user) | 🟡 | `Text` |
+| `text-sm` `text-xs` | 🟡 | corpo→`Text` |
+| `leading-tight` | 🟢 | == token |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `size-8` (logo plate, avatar) | 32px | 🟢 consistente |
+| `size-4` (command, chevron) | 16px | 🔵 ok, menor que ícones de nav |
+| `aspect-square` | — | ⚪ |
+| `rotate-90` (chevron) | — | ⚪ decorativo, ok |
+
+### 11.6 — Layout (⚪)
+`flex` · `flex-1` · `grid` · `items-center` · `justify-center` · `overflow-auto` · `text-left` · `truncate` · `aspect-square` · `group-data-[collapsible=icon]:hidden`
+
+### 11.7 — Veredito do estilo
+| Classificação | Itens |
+|---|---|
+| ✅ token-backed | todas as cores, `border`, `rounded-lg` |
+| 🟢 value-aligned | `p-8`, `-ml-1`, `leading-tight`, `size-8` |
+| 🟡 drift | `rounded-tl-[24px]`, `font-medium`, `text-sm/xs` |
+| 🔴 off-system | **nenhum** |
+
+> **Conclusão de estilo:** o shell é **100% token-limpo** — zero off-system. Os 🟡 são radius arbitrário (espelha o demo do Seven) + drift de tipografia. É a tela mais fiel da app.
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+shell:
+  route: src/client/routes/_authenticated.tsx
+  also: [src/client/components/sidebar.tsx, src/client/index.css]
+  fidelity: 0.84
+  components_used: [SidebarProvider, Sidebar, SidebarInset, Topbar, TopbarLeading, SidebarTrigger, Breadcrumb, DropdownMenu, Avatar]
+  components_missing: [TopbarTrailing, AccountSwitch, WorkspaceDropdown, BreadcrumbLink, SidebarInput]
+  gaps:
+    components: [C1, C2, C3]
+    emitters:   [E1, E2]
+    sizing:     [SZ1]
+  user_actions: { total: 9, wired: 6, unwired: [A7, A8, A9] }
+  style_audit:
+    off_system: []          # shell 100% token-limpo
+    drift: [rounded-tl-[24px], font-medium, text-sm, text-xs]
+    hardcoded_colors: 0
+  blocked: [sidebar-borderless-upstream]   # override em index.css aguarda Seven
+  severity: { high: 0, medium: 3, low: 5 }
+```
diff --git a/docs/ets/state/reports/screens/team.md b/docs/ets/state/reports/screens/team.md
new file mode 100644
index 0000000..e6beb0e
--- /dev/null
+++ b/docs/ets/state/reports/screens/team.md
@@ -0,0 +1,347 @@
+# Auditoria de tela — Team
+
+> **Rota:** `src/client/routes/_authenticated/team.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟡 **76%** — usa os componentes certos e está quase tudo ligado (9/13 ações), mas reimplementa à mão peças que o Seven já entrega (`SearchInput`, `AvatarLabelGroup`, `Spinner`, `DropdownMenu`) e tem tipografia crua + 1 ação morta (⋯).
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | título "Team Members" + subtítulo | raw `<h1>` / `<p>` | — |
+| 2 | botão "Invite Member" (abre diálogo) | `@etus/seven-react` | `Button` (+ `DialogTrigger asChild`) |
+| 3 | diálogo de convite | `@etus/seven-react` | `Dialog` (+ `DialogContent/Header/Title/Description/Footer`) |
+| 4 | form de convite (email + papel) | `@etus/seven-react` | `Form` (+ `FormField/Item/Label/Control/Description/Message`) + `TextInput` |
+| 5 | seletor de papel (guest/member/admin) | `@etus/seven-react` | 3× `Button` manuais (toggle por `variant`) |
+| 6 | campo de busca de membros | raw `<div>` + `@etus/seven-react` | `TextInput` + ícone `absolute` à mão |
+| 7 | card "Active Members" | `@etus/seven-react` | `Card` (+ `CardHeader/Title/Description/Content`) |
+| 8 | linha de membro (avatar+nome+email+badge+⋯) | `@etus/seven-react` | `Avatar`/`AvatarImage`/`AvatarFallback` + `Badge` + `Button` |
+| 9 | card "Pending Invitations" (condicional) | `@etus/seven-react` | `Card` + linhas de convite |
+| 10 | linha de convite (ícone+email+expiry+badge+revoke) | raw `<div>` + `@etus/seven-react` | círculo `rounded-full` à mão + `Badge` + `Button` |
+| 11 | estados de loading / vazio | raw `<div>` | — (reproduz `emptyStateStyles`) |
+| 12 | ícones | `@/components/icons` (lucide) | — (convenção do projeto, ok) |
+| 13 | toasts de feedback | `sonner` | `Toaster`/`toast` (ok) |
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Search reimplementado à mão | `<div className="relative max-w-sm"><Icons.search className="absolute left-3 …"/><TextInput className="pl-9"/></div>` — o Seven exporta `SearchInput` (com `searchIcon`, `onClear`, `showClearButton`) **e** `TextInput` tem `leadingIcon` | 🟡 | `<SearchInput value onChange onClear/>` (ou `TextInput leadingIcon`) |
+| **C2** | Linha de membro montada à mão | `Avatar` + `<p font-medium>{name}</p>` + `<p text-sm>{email}</p>` reproduz exatamente o `AvatarLabelGroup` (`name`, `description`, `src`, `status`, `size`) | 🟡 | `<AvatarLabelGroup name={name} description={email} src={picture} status=…/>` |
+| **C3** | Tipografia em HTML cru | `<h1>`, `<p>`, `<span>` em vez de `Heading` / `Text`·`Paragraph` (todos exportados) | 🟡 | `Heading` no título, `Text` nos corpos |
+| **C4** | Listas com `divide-y` cru | `<div className="divide-y">` para separar linhas — existe `List` (data-display) e `Divider`; tabela de pessoas caberia em `Table`/`DataTable` | 🟡 | `List`/`Divider` (ou `Table` p/ colunas papel/status/ações) |
+| **C5** | Seletor de papel com Button manual | 3× `Button` alternando `variant` default/outline = single-select reimplementado; o DS tem `ToggleGroup`, `RadioCardGroup` (com `description` por card!), `Select`/`NativeSelect`, `ButtonGroup` | 🟡 | `RadioCardGroup columns={3}` (cada papel já tem descrição) ou `ToggleGroup` |
+| **C6** | Avatar do convite à mão | `<div className="flex h-10 w-10 … rounded-full bg-muted"><Icons.mail/></div>` é um avatar hand-rolled | 🔵 | `<Avatar><AvatarFallback>…</AvatarFallback></Avatar>` (ícone no fallback) |
+| **C7** | Loading cru | linha "Loading members…" em texto; existe `Spinner`, `SkeletonLoader`, `AvatarSkeleton` | 🟡 | `SkeletonLoader`/`AvatarSkeleton` (linhas-fantasma) ou `Spinner` |
+| **C8** | Sub-componentes do `Card` não usados | `CardAction`/`CardFooter`/`CardMedia` ausentes — ex.: o "Invite Member" caberia num `CardAction` no header do card de membros | 🔵 | mover CTA p/ `CardAction`/`CardFooter` |
+
+**Sub-componentes do `Card` disponíveis e NÃO usados:** `CardAction`, `CardFooter`, `CardMedia`.
+**Componentes do Avatar disponíveis e NÃO usados:** `AvatarLabelGroup`, `AvatarGroup`, `AvatarStatus`, `AvatarBadge`, `AvatarSkeleton`, `AvatarAddButton`.
+
+> Nota: **não** existe `<EmptyState>` exportado no beta.4 — só `emptyStateVariants` (cva) e a const `emptyStateStyles = "text-center py-8 text-muted-foreground"`. As `<div>` de loading/vazio reproduzem essa string **literalmente** (ver §7/§11), então são value-aligned, não um componente "faltando".
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> Ao contrário do dashboard, a tela é **fortemente ligada** (mutations, form, busca, toasts). Os gaps são pontuais — um botão morto e props nativas do `Button` ignoradas.
+
+| ID | Emitter/ação ausente | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | Botão ⋯ (more) sem ação | `TeamMemberRow` tem `<Button variant="ghost" size="icon">` com `Icons.more` e **nenhum `onClick`** — botão morto que sugere ações de linha (mudar papel, remover) inexistentes | 🔴 | `DropdownMenu`(+`Trigger`/`Content`/`Item`) → mutations |
+| **E2** | `Button.leftIcon` não usado | "Invite Member" monta ícone+margem à mão: `<Icons.userPlus className="mr-2 h-4 w-4"/>` | 🟡 | `<Button leftIcon={<Icons.userPlus/>}>` |
+| **E3** | `Button.loading`/`loadingText` não usado | submit ("Send Invitation") e "Revoke" fazem swap manual de `<Icons.spinner className="animate-spin"/>` | 🟡 | `<Button loading={isPending}>` (spinner nativo) |
+| **E4** | `Button.icon` + `size="icon-sm"` não usado | ⋯ usa `size="icon"` + `className="h-8 w-8"` p/ encolher | 🔵 | `<Button size="icon-sm" icon={<Icons.more/>}/>` |
+| **E5** | Limpar busca ausente | sem affordance de clear no campo de busca | 🔵 | `SearchInput onClear`/`showClearButton` (C1) |
+| **E6** | `ButtonEventPayload` ignorado | handlers usam `() => …`; o payload (`id`/`isLoading`/`timestamp`) está disponível mas não é necessário aqui | 🔵 | ok manter; ciente |
+| **E7** | `Button.tooltip` não usado | ⋯ e Revoke são só-ícone (Revoke esconde label em `<sm`) sem rótulo acessível por tooltip | 🔵 | `tooltip="Revogar"` / `tooltip="Ações"` |
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| textos secundários (subtítulo, email, expiry, "(you)") | `text-muted-foreground` (×6) | ✅ `--muted-foreground` | ✅ |
+| círculo do convite | `bg-muted` | ✅ `--muted` | ✅ |
+| botão Revoke | `text-destructive hover:text-destructive` | ✅ `--destructive` | 🔵 **CL1** — aplicado à mão num `ghost` (não há variant *ghost-destructive*); token-backed, aceitável |
+| Card / Dialog / Badge / Avatar bg·borda·sombra | tokens internos (`--card-root-*`, `--border`, `--badge-*`, `--avatar-*`) | ✅ | ✅ |
+| títulos / nomes | herdam `--foreground` | parcial | 🔵 explícito via `Heading`/`Text` |
+
+→ Cores **100% token**: zero hex, zero `text-*-500`, zero `bg-gray-*`. Único ponto de atenção é o `text-destructive` forçado no `ghost` (CL1), mas o valor é token.
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| wrapper da página | `space-y-8` (32px) | layout (raw Tailwind) | ✅ `--spacing-8` |
+| grids / flex internos | `gap-4`/`gap-3`/`gap-2` (16/12/8) | layout (raw) | ✅ escala 4px (espelha tokens) |
+| linhas de lista | `py-4` + `first:pt-0 last:pb-0` | ritmo de linha | ✅ `--spacing-4` + reset |
+| loading/vazio | `py-8` | = `emptyStateStyles` | ✅ value-aligned |
+| **search** | `pl-9` (36px) | **offset manual** p/ o ícone `absolute` | 🔵 **SP1** — some ao adotar `SearchInput`/`leadingIcon` (C1) |
+| interno de Card/Dialog/Badge | `--card-*`, `--dialog-*`, `--badge-*` | tokens Seven | ✅ |
+
+→ Espaçamento interno vem certo dos tokens; o ritmo de página é raw mas alinhado. Único cru de propósito é o `pl-9` (workaround do ícone).
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| título h1 | `text-2xl font-semibold tracking-tight` | `Heading` (tokens de tipografia) | 🟡 **TY1** (= C3) |
+| subtítulo / email / expiry | `<p className="text-sm text-muted-foreground">` | `Text`/`Paragraph` | 🟡 **TY2** (= C3) |
+| nome do membro / email do convite | `<p className="font-medium">` | `Text` (peso via prop) | 🟡 **TY3** (= C3) |
+| marcador "(you)" | `<span className="text-xs text-muted-foreground">` | `Text size="xs"` ou `Badge` | 🔵 **TY4** |
+| `CardTitle` | sobrescrito com `text-lg` | `CardTitle` já traz `[font-weight:var(--card-title-weight)]`; o `text-lg` reescala a fonte do componente | 🔵 **TY5** |
+| valores de Badge | herdam `--badge-size-*-text` | — | ✅ |
+
+> O guard-rail do ESLint **não** bane `h1/p/span` (só `button/input/select/textarea`) — passa o lint, mas é drift de DS.
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | Convenção de ícone `h-4 w-4` | 6× `h-4 w-4` (16px) em vez de `size-4`; `Button`/`SearchInput` forneceriam o sizing do ícone automaticamente | 🔵 |
+| **SZ2** | `h-8 w-8` sobrescreve size token | ⋯ força `size="icon"` a 32px à mão; o `Button` tem `size="icon-sm"` pronto | 🔵 (= E4) |
+| **SZ3** | `h-10 w-10` dimensão à mão | círculo do convite é um avatar hand-rolled; `Avatar size` cobre isso | 🔵 (= C6) |
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| loading | 🟡 texto "Loading members…" cru | `Spinner` · `SkeletonLoader` · `AvatarSkeleton` | 🟡 **ST1** (= C7) |
+| vazio (busca s/ resultado) | usa `py-8 text-center text-muted-foreground` = **exatamente** `emptyStateStyles` | sem `<EmptyState>` no beta.4; só `emptyStateVariants`/`emptyStateStyles` | 🔵 **ST2** value-aligned |
+| vazio real ("0 membros") | reusa a msg de busca; sem ação no vazio | `EmptyState` não existe; usar `emptyStateVariants` + `Button` (convidar) | 🔵 **ST3** |
+| hover/menu de linha | ⋯ implica menu que não existe | `DropdownMenu` | 🔴 **ST4** (= E1) |
+| disabled | ✅ Invite (sem account), submit (isPending), Revoke (isRevoking) | nativo do `Button` | ✅ correto |
+| erro | tratado via `toast.error` | `toast`/`Toaster` | ✅ |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | E1·ST4 | botão ⋯ morto + ações de linha (mudar papel / remover) inexistentes → `DropdownMenu` |
+| 🟡 **Should-fix** | C1, C2, C3·TY1·TY2·TY3, C4, C5, C7·ST1, E2, E3 | `SearchInput`; `AvatarLabelGroup`; `Heading`/`Text`; `List`/`Divider`; `ToggleGroup`/`RadioCardGroup`; loading via `Spinner`/`Skeleton`; `Button.leftIcon`/`loading` |
+| 🔵 **Nice-to-have** | C6·SZ3, C8, E4·SZ2, E5, E7, CL1, SP1, TY4, TY5, SZ1, ST2, ST3 | `Avatar` no convite; `CardAction`/`CardFooter`; `size="icon-sm"`; clear na busca; tooltips; polish de tipografia/sizing |
+
+**Pontos corretos (não mexer):** composição completa de `Dialog` · stack completo de `Form` (RHF + zod + a11y por contexto) · `Badge` semântico (`type`/`color`) · `Avatar` img+fallback · wiring de `useMutation`/`toast` · cores 100% token · disabled states corretos.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário do que o Seven oferece e a tela **não** aproveita — props, variants, sub-componentes e **componentes alternativos**. `[u]` = não usado.
+
+### 9.1 — Campo de busca (hoje `TextInput` + ícone `absolute`)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| Props do `TextInput` `[u]` | `leadingIcon` · `trailingIcon` · `leadingIconInteractive` · `size` · `variant` | ❌ |
+| **Componente alternativo `[u]`** | **`SearchInput`** — `searchIcon` `clearIcon` `onClear` `showClearButton` `size` `variant` | ❌ (reimplementado à mão) |
+| **Componente alternativo `[u]`** | **`AdvancedSearchInput`** · **`InputGroup`** | ❌ |
+
+### 9.2 — Botões (hoje `Button` com ícone/spinner manual)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props `[u]` | `leftIcon` · `rightIcon` · `icon` · `loading` · `loadingText` · `badge` · `tooltip` · `fullWidth` · `asChild` · `tone` | ❌ |
+| Variants `[u]` | `destructive` · `secondary`(+gray/color) · `link`(+gray/color) · `tertiary`(gray/color) (usa `default`/`outline`/`ghost`) | ❌ |
+| Sizes `[u]` | `icon-sm` · `lg` (usa `default`/`sm`/`icon`) | ❌ |
+| Emitters `[u]` | payload `ButtonEventPayload` em `onClick`/`onFocus`/`onBlur`/`onKeyDown` | ❌ |
+
+### 9.3 — Lista de membros (hoje `Avatar` + `<p>` à mão dentro de `divide-y`)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| **Componente alternativo `[u]`** | **`AvatarLabelGroup`** (`name` `description` `src` `status` `badge` `size` `subtitle`) | ❌ |
+| Avatar — props `[u]` | `size` `shape` `tooltip` `contrastBorder` `interactive` `bordered`; `AvatarFallback.colorScheme` | ❌ |
+| Avatar — sub-componentes `[u]` | `AvatarStatus` (active/pending) · `AvatarGroup` · `AvatarBadge` · `AvatarSkeleton` | ❌ |
+| **Render de lista `[u]`** | **`List`** · **`Table`** · **`DataTable`** (colunas papel/status/ações) · **`Divider`** | ❌ |
+
+### 9.4 — Menu de ações da linha (hoje botão ⋯ morto)
+| Categoria | Disponível `[u]` | Uso |
+|---|---|---|
+| **`DropdownMenu`** (+`Trigger`/`Content`/`Item`) | menu de "mudar papel / remover" | ❌ |
+| **`AlertDialog`** (+`Action`/`Cancel`/…) | confirmação de remoção destrutiva | ❌ |
+
+### 9.5 — Seletor de papel (hoje 3× `Button` manuais)
+| Disponível `[u]` | Uso |
+|---|---|
+| **`RadioCardGroup`** (`columns` 1–4, `RadioCardGroupItem` com `title`+`description`) | ideal — cada papel já tem descrição |
+| **`ToggleGroup`** (single, `size`, `variant`) · **`RadioGroup`** · **`Select`**/**`NativeSelect`** · **`ButtonGroup`** | single-select com a11y/teclado nativos |
+
+### 9.6 — Badge (hoje `type`/`color` corretos)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props usadas | `color` (`muted`/`warning`) · `type` (`badge-outline`) | ✅ |
+| Props `[u]` | `size` · `dot` · `icon`/`leadingIcon`/`trailingIcon` · `interactive` · `onDismiss` · `avatar` · `country` · `tooltip` · `iconOnly` | ❌ |
+| Colors `[u]` | `primary` · `secondary` · `destructive` · `success` · `info` · `tip` | ❌ |
+
+### 9.7 — Loading / vazio (hoje `<div>` cru)
+| Disponível `[u]` | Uso |
+|---|---|
+| `Spinner` · `SkeletonLoader` · `AvatarSkeleton` · `emptyStateVariants` | substituem o texto "Loading…" e a `<div>` de vazio |
+
+### 9.8 — Título / textos / layout (hoje `<h1>`/`<p>`/`<span>` + `<div>` crus)
+| Elemento | Componente Seven `[u]` | Eixos não aproveitados |
+|---|---|---|
+| `<h1>` | **`Heading`** | `level` · `size` · `weight` · `align` · `color` · `gradient` |
+| `<p>`/`<span>` | **`Text`** / **`Paragraph`** | variants de tamanho/cor/peso |
+| `<div>` + grid | `Section` · `Container` · `Grid` · `Stack` · `Flex` | estrutura com tokens em vez de `space-y`/`grid` crus |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Toda ação que o usuário **poderia** executar, o gatilho, o status e o primitivo Seven que a ligaria.
+> **Resultado: 9 de 13 ações estão ligadas — contraste forte com o dashboard (0/8). As 4 não-ligadas concentram-se no menu de linha (⋯) morto + limpar busca.**
+
+| # | Ação possível | Gatilho (elemento) | Status | Como ligar (Seven) |
+|---|---|---|---|---|
+| A1 | Abrir diálogo de convite | `DialogTrigger` + `Button` "Invite Member" | ✅ ligada | ok (`Dialog open`) |
+| A2 | Digitar email do convidado | `TextInput` (`FormField` email) | ✅ ligada | ok (RHF + zod) |
+| A3 | Escolher papel | 3× `Button` manuais | ✅ ligada (primitivo errado) | `RadioCardGroup`/`ToggleGroup` (C5) |
+| A4 | Enviar convite | `Button` submit → `inviteMutation` | ✅ ligada | `Button loading` (E3) |
+| A5 | Cancelar diálogo | `Button` "Cancel" `onClick` | ✅ ligada | ok |
+| A6 | Fechar diálogo (X/esc/overlay) | `DialogContent showCloseButton` (default) | ✅ ligada (nativo) | ok |
+| A7 | Buscar/filtrar membros | `TextInput` `onChange` → `setSearchQuery` | ✅ ligada | `SearchInput` (C1) |
+| A8 | Limpar busca | — (sem botão) | 🔵 não-ligada | `SearchInput onClear`/`showClearButton` |
+| A9 | Abrir ações da linha (⋯) | `Button` ghost icon (`more`) | 🔴 não-ligada (sem `onClick`) | `DropdownMenu` (Trigger/Content/Item) |
+| A10 | Mudar papel de um membro | implícito no ⋯ | 🔴 não-ligada | `DropdownMenuItem` → mutation |
+| A11 | Remover um membro | implícito no ⋯ | 🔴 não-ligada | `DropdownMenuItem` + `AlertDialog` confirm → mutation |
+| A12 | Revogar convite pendente | `Button` "Revoke" `onClick` → `revokeMutation` | ✅ ligada | `Button loading` (E3) |
+| A13 | Feedback (toast sucesso/erro) | `sonner` `toast` | ✅ ligada | ok |
+| A14 | Foco/teclado nos controles | `Button`/`Dialog`/`TextInput` Seven | ⚪ herdado | a11y nativa do DS |
+
+**Total acionável: 13 · Ligadas: 9 (A1–A7, A12, A13) · Não-ligadas: 4 (A8, A9, A10, A11)** · A14 = herdado.
+**Emitters do `Button` disponíveis:** `onClick` · `onFocus` · `onBlur` · `onKeyDown` (payload `ButtonEventPayload`: `id`, `isLoading`, `timestamp`).
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout (estrutural).
+>
+> Nota-chave: a escala de spacing do Seven **espelha a do Tailwind** (`--spacing-2`=8px, `--spacing-4`=16px, `--spacing-8`=32px) e `--font-tracking-tight`=`tracking-tight`=-0.025em. Por isso muito "cru" é 🟢.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `text-muted-foreground` (×6) | `--muted-foreground` | ✅ |
+| `bg-muted` | `--muted` | ✅ |
+| `text-destructive` / `hover:text-destructive` | `--destructive` | ✅ (manual no `ghost` — CL1) |
+| bg/borda/sombra de Card·Dialog·Badge·Avatar | tokens internos | ✅ |
+| *(nenhuma cor hardcoded — hex, `text-*-500`, `bg-gray-*`)* | — | ✅ limpo |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `space-y-8` | 32px | `--spacing-8` | 🟢 |
+| `gap-4` (×3) | 16px | `--spacing-4` | 🟢 |
+| `gap-3` | 12px | escala 4px | 🟢 |
+| `gap-2` (×3) | 8px | `--spacing-2` | 🟢 |
+| `py-4` (×3) | 16px | `--spacing-4` | 🟢 |
+| `py-8` (×2) | 32px | `--spacing-8` (= `emptyStateStyles`) | 🟢 |
+| `mr-2` (×2) · `ml-2` | 8px | `--spacing-2` | 🟢 |
+| `pl-9` | 36px | escala 4px | 🟢 (workaround do ícone — SP1) |
+| `left-3` | 12px | escala 4px | 🟢 (posicionamento do ícone) |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `rounded-full` | `--radius-full` (9999px) | ✅ |
+| `divide-y` (×2) | separadores via cor `--border` | 🟢/⚪ (drift p/ `List`/`Divider` — C4) |
+| *(sem `border-dashed`, sem radius arbitrário)* | — | ✅ |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| `text-2xl` | 1.5rem | 🟡 | título deveria vir do `Heading` |
+| `font-semibold` | 600 | 🟡 | idem (peso do `Heading`) |
+| `tracking-tight` | -0.025em | 🟢 | == `--font-tracking-tight` |
+| `text-lg` (×2) | 1.125rem | 🟡 | reescala o `CardTitle` (TY5) |
+| `font-medium` (×2) | 500 | 🟡 | corpo deveria vir do `Text` |
+| `text-sm` (×2) | 0.875rem | 🟡 | idem (`Text`/`Paragraph`) |
+| `text-xs` | 0.75rem | 🟡 | "(you)" → `Text size="xs"`/`Badge` |
+| `capitalize` (×2) | — | ⚪ | text-transform (funcional, sem token) |
+| `animate-spin` (×2) | — | ⚪ | animação (o `Spinner` forneceria) |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `h-4 w-4` (×6) | 16px | 🟢 valor ok; convenção `size-4` + sizing automático do `Button`/`SearchInput` (SZ1) |
+| `h-8 w-8` | 32px | 🟡 sobrescreve size do `Button` (use `size="icon-sm"` — SZ2) |
+| `h-10 w-10` | 40px | 🟡 avatar à mão (use `Avatar size` — SZ3) |
+| `max-w-sm` | 24rem | ⚪ largura de layout |
+
+### 11.6 — Layout (⚪ sem token de design — ok)
+`flex` · `flex-col` · `items-center` · `justify-between` · `justify-center` · `sm:flex-row` · `sm:items-center` · `sm:justify-between` · `grid` · `grid-cols-3` · `relative` · `absolute` · `top-1/2` · `-translate-y-1/2` · `hidden` · `sm:inline` · `first:pt-0` · `last:pb-0`
+
+> As utilidades de posicionamento (`absolute`/`top-1/2`/`-translate-y-1/2`/`left-3`/`pl-9`) existem **só** porque o ícone de busca foi posto à mão — somem ao adotar `SearchInput`/`leadingIcon` (C1).
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde | Itens |
+|---|---|---|
+| ✅ token-backed | 4 famílias | cores (`muted-foreground`, `destructive`, `muted`), `rounded-full` |
+| 🟢 value-aligned | 12 | `space-y-8`, `gap-4/3/2`, `py-4`, `py-8`, `mr-2`, `ml-2`, `pl-9`, `left-3`, `tracking-tight`, `h-4 w-4` |
+| 🟡 drift (tipografia/sizing) | 9 | `text-2xl`, `font-semibold`, `text-lg`, `font-medium`, `text-sm`, `text-xs`, `h-8 w-8`, `h-10 w-10`, `divide-y` |
+| 🔴 off-system | **0** | — (nenhum `border-dashed` / hex / `gray-*`) |
+
+> **Conclusão de estilo:** a tela é **token-limpa** — zero cor hardcoded, zero off-system (mais limpa que o dashboard, que tinha `border-dashed`). Todo o "débito" é **componente-misuse** (search, avatar+label, ícones/spinner manuais, ⋯ morto) e **drift de tipografia** (`h1`/`p`/`span` → `Heading`/`Text`), não violação de estilo cru.
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+team:
+  route: src/client/routes/_authenticated/team.tsx
+  fidelity: 0.76
+  components_used: [Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, TextInput]
+  components_missing: [SearchInput, AvatarLabelGroup, Spinner, SkeletonLoader, DropdownMenu, AlertDialog, ToggleGroup, RadioCardGroup, Heading, Text, List, Divider, CardAction, CardFooter]
+  gaps:
+    components: [C1, C2, C3, C4, C5, C6, C7, C8]
+    emitters:   [E1, E2, E3, E4, E5, E6, E7]
+    colors:     [CL1]
+    spacing:    [SP1]
+    typography: [TY1, TY2, TY3, TY4, TY5]
+    sizing:     [SZ1, SZ2, SZ3]
+    states:     [ST1, ST2, ST3, ST4, ST5]
+  severity: { high: 1, medium: 8, low: 12 }
+  unused_seven:                      # superfície do DS não aproveitada (seção 9)
+    alternative_components: [SearchInput, AdvancedSearchInput, InputGroup, AvatarLabelGroup, AvatarGroup, AvatarStatus, AvatarSkeleton, Spinner, SkeletonLoader, DropdownMenu, AlertDialog, ToggleGroup, RadioCardGroup, RadioGroup, Select, NativeSelect, ButtonGroup, List, Table, DataTable, Divider, Heading, Text, Paragraph, Section, Container, Grid, Stack, Tooltip]
+    unused_props:
+      Button: [leftIcon, rightIcon, icon, loading, loadingText, badge, tooltip, fullWidth, asChild, tone]
+      TextInput: [leadingIcon, trailingIcon, leadingIconInteractive, size, variant]
+      Avatar: [size, shape, tooltip, contrastBorder, interactive, bordered]
+      Badge: [size, dot, icon, leadingIcon, trailingIcon, interactive, onDismiss, tooltip, iconOnly]
+    unused_variants:
+      Button: [destructive, secondary, link, tertiary]
+      Card: [elevated, outlined, ghost, selectable]
+    unused_subcomponents:
+      Card: [CardAction, CardFooter, CardMedia]
+      Avatar: [AvatarLabelGroup, AvatarGroup, AvatarStatus, AvatarBadge, AvatarSkeleton]
+  user_actions:                      # seção 10
+    total: 13
+    wired: 9
+    unwired: [A8, A9, A10, A11]      # A14 = herdado
+  style_audit:                       # seção 11 (classe-a-classe)
+    token_backed: [text-muted-foreground, text-destructive, bg-muted, rounded-full]
+    value_aligned: [space-y-8, gap-4, gap-3, gap-2, py-4, py-8, mr-2, ml-2, pl-9, left-3, tracking-tight, h-4 w-4]
+    drift: [text-2xl, font-semibold, text-lg, font-medium, text-sm, text-xs, h-8 w-8, h-10 w-10, divide-y]
+    off_system: []                   # nenhum estilo sem token Seven
+    hardcoded_colors: 0
+```
diff --git a/docs/ets/state/reports/screens/workspaces.md b/docs/ets/state/reports/screens/workspaces.md
new file mode 100644
index 0000000..43f5f8f
--- /dev/null
+++ b/docs/ets/state/reports/screens/workspaces.md
@@ -0,0 +1,306 @@
+# Auditoria de tela — Workspaces
+
+> **Rota:** `src/client/routes/_authenticated/workspaces.tsx`
+> **Referência:** Seven `@etus/ui@0.4.0-beta.4` / `@etus/tokens@0.4.0-beta.3` — **só código** (source: exports, `*.variants.ts`, `*.types.ts`, tokens). Sem render/Figma.
+> **Data:** 2026-06-24
+> **Fidelidade:** 🟢 **82%** — usa os componentes certos (`Card`, `Badge`, `Callout`, `Empty`) com **dados reais e 3 estados**; perde só tipografia crua (`h1`/`p`), spinner fora do DS e polish. Sem estilo off-system.
+>
+> Severidade: 🔴 alta (quebra DS ou UX) · 🟡 média (foge do DS, funciona) · 🔵 baixa (polish)
+
+---
+
+## 0. Elementos da tela (o que está renderizado)
+
+| # | Elemento | Origem | Componente Seven |
+|---|---|---|---|
+| 1 | bloco de cabeçalho (título + descrição) | raw `<h1>` + `<p>` | — |
+| 2 | banner "Super admin" (condicional) | `@etus/seven-react` | `Callout` (`variant="success"`, `icon`, `title`) |
+| 3 | estado de carregamento | raw `<div>` + `Icons.spinner` (lucide `Loader2`) | — (spinner manual) |
+| 4 | estado vazio | `@etus/seven-react` | `Empty` + `EmptyHeader` + `EmptyMedia(variant="icon")` + `EmptyTitle` + `EmptyDescription` |
+| 5 | grid de workspaces | `@etus/seven-react` | `Card` + `CardHeader/CardTitle/CardDescription/CardContent` |
+| 6 | badge de papel (role) por card | `@etus/seven-react` | `Badge` (`color`) |
+| 7 | blurb do papel por card | raw `<p>` | — |
+| 8 | ícones (shield, layers, spinner) | `@/components/icons` (lucide) | — (convenção do projeto, ok) |
+
+> **Destaque vs Dashboard:** esta tela **já adota o `Empty` do Seven** para o vazio (o Dashboard rolava `border-dashed` à mão) e **liga dados reais** (`accounts.map`, `superAdmin`, `isLoading`) — sem valores hardcoded nem "UI morta". É um patamar de fidelidade acima.
+
+---
+
+## 1. GAPS de componentes & sub-componentes
+
+| ID | Gap | Detalhe | Sev. | Correção |
+|---|---|---|---|---|
+| **C1** | Tipografia em HTML cru | `<h1>` (título) e `<p>` (×2: descrição da página + blurb do card) em vez de `Heading` / `Text`·`Paragraph` (todos exportados no beta.4) | 🟡 | `Heading` no título, `Text`/`Paragraph` nos parágrafos |
+| **C2** | Loading montado à mão | estado de carregamento usa `<div className="flex…">` + `Icons.spinner` (lucide `Loader2`) com `animate-spin`; o Seven exporta **`Spinner`** (`size`/`color`/`variant`) e **`SkeletonLoader`** (`shape`/`size`/`animation`) | 🟡 | `Spinner` inline **ou** `SkeletonLoader` no formato do grid (skeleton de cards é mais on-system que spinner-row) |
+| **C3** | `Empty` sem slot de ação | usa `Empty/Header/Media/Title/Description` mas **não** usa `EmptyContent` — o slot próprio pra CTA no vazio (ex.: "Atualizar", "Pedir acesso") | 🔵 | `EmptyContent` + `Button` quando fizer sentido oferecer ação |
+| **C4** | `Card` sem sub-componentes de ação/mídia | usa só `CardHeader/Title/Description/Content`; **não** usa `CardAction`, `CardFooter` nem `CardMedia` (ok p/ diretório read-only, mas fecha a porta pra CTA/avatar do workspace) | 🔵 | opcional: `CardMedia`/`Avatar` p/ marca do workspace; `CardFooter` se surgir ação |
+
+**Sub-componentes do `Card` disponíveis e NÃO usados:** `CardMedia`, `CardAction`, `CardFooter`.
+**Sub-componente do `Empty` disponível e NÃO usado:** `EmptyContent`.
+
+---
+
+## 2. GAPS de emitters / interações (callbacks, CTA, handlers)
+
+> A tela é **majoritariamente read-only por design** (um diretório de papéis por workspace), então a ausência de cliques **não é "UI morta"** como no Dashboard. O gap material aqui é de **fluxo de dados/erro**, não de CTA decorativa.
+
+| ID | Emitter/ação ausente | Onde | Sev. | Correção |
+|---|---|---|---|---|
+| **E1** | Erro engolido vira "vazio" | `fetchGatewayAccounts` (hook) faz `if (!res.ok) return { accounts: [], superAdmin: false }` → uma falha de rede é **indistinguível** de "sem workspaces"; a UI mostra o empty-state genérico (Regra 6: estado mente sobre o que aconteceu) | 🟡 | tratar erro do `useQuery` (`isError`) e renderizar estado de erro distinto (`Callout variant="error"` + retry) |
+| **E2** | Sem retry/refresh ligado | `useGatewayAccounts` expõe `useQuery`, mas a tela **não** oferece `refetch()` em nenhum gatilho (nem no loading, nem no vazio, nem em erro) | 🟡 | `Button` ("Atualizar") chamando `refetch` no empty/erro |
+| **E3** | `Badge` sem `tooltip`/`interactive` | o papel mostra só o rótulo; `meta.blurb` (a explicação) **já existe** mas só aparece no card. `Badge` suporta `tooltip` e `interactive`/`onClick` — não usados | 🔵 | `Badge tooltip={meta.blurb}` p/ explicar o papel on-hover |
+| **E4** | Cards não navegam/selecionam | `Card` default, sem `onClick`/link/`variant="selectable"` — nenhum drill-down nem "tornar workspace ativo" | 🔵 | se houver destino, `Card variant="selectable"` (+`onToggleSelect`) ou título via `Heading asChild`+link; ver §10 A1 |
+
+> **Conclusão de interações:** 0 ações ligadas, mas — diferente do Dashboard — isso é **quase tudo by-design**. O único gap funcional real é **E1/E2** (erro silencioso sem retry).
+
+---
+
+## 3. GAPS de cores / tokens
+
+| Elemento | Usa | Token Seven? | Veredito |
+|---|---|---|---|
+| `Card` bg/borda/sombra | tokens internos `--card-root-background` / `--border` / `--card-root-shadow-sm` | ✅ | ✅ |
+| `CardDescription` cor | `--card-description-color` (interno) | ✅ | ✅ |
+| `Badge` cor (`color={meta.color}`) | `--badge-color-*` (primary/info/success/muted) via `pill-color` | ✅ | ✅ |
+| `Callout` success | `--success-subtle` (bg) + `--success` (borda) + `text-success` (ícone) | ✅ | ✅ |
+| `Empty` borda | `border` → `--border` (somado ao `border-dashed` **da base do próprio `Empty`**) | ✅ | ✅ tracejado vem do componente, não é hand-rolled |
+| texto secundário (`<p>`, loading) | `text-muted-foreground` → `--muted-foreground` | ✅ | ✅ |
+
+→ **Cores 100% token-backed. Zero hardcoded** (`text-*-500`, hex, `bg-gray-*` etc. inexistentes). O `border-dashed` que no Dashboard era off-system **aqui não é classe autoral** — está na base do `Empty` do Seven (`EmptyState.tsx:10`). **Sem gaps de cor.**
+
+---
+
+## 4. GAPS de espaçamento
+
+| Onde | Usa | Tipo | Veredito |
+|---|---|---|---|
+| wrapper da página | `space-y-8` (32px) | layout de página (raw Tailwind) | ✅ aceitável (= `--spacing-8`) |
+| grid de cards | `gap-4` (16px) | layout (raw) | ✅ aceitável (= `--spacing-4`) |
+| header/loading internos | `gap-2` (8px ×2) | layout (raw) | ✅ aceitável (= `--spacing-2`) |
+| **ritmo da página** | `space-y-8` (32) vs `gap-4`/`gap-2` na mesma tela | — | 🔵 **SP1** ritmo vertical levemente misto (mesmo padrão do Dashboard) |
+| interno dos cards | `--card-root-gap` / `--card-root-padding-y` / `--card-header-gap` / `--card-content-padding-x` | tokens Seven (não sobrescritos) | ✅ correto |
+| `CardHeader` override | `space-y-0` (zera o ritmo default p/ controlar via `flex`/`gap-2`) | layout reset | ✅ ok |
+
+→ Espaçamento **interno** vem certo dos tokens. Só o **ritmo de layout da página** é cru (value-aligned) e levemente inconsistente.
+
+---
+
+## 5. GAPS de tipografia
+
+| Elemento | Tela | Seven esperado | Sev. |
+|---|---|---|---|
+| título h1 | `<h1 className="text-2xl font-semibold tracking-tight">` (escala Tailwind solta) | `Heading` (`level`/`size`/`weight`/`color`/`align`) | 🟡 **TY1** (= C1) |
+| descrição da página | `<p className="text-muted-foreground">` | `Text`/`Paragraph` | 🟡 **TY2** (= C1) |
+| blurb do card | `<p className="text-sm text-muted-foreground">` | `Text` (`size="sm"`) | 🟡 **TY3** (= C1) |
+| `CardTitle` | override `truncate text-base` — define tamanho explícito (a base do `CardTitle` só fixa `leading-tight` + `--card-title-weight`, sem size) | `CardTitle` aceita override; `text-base` (1rem) é value-aligned | 🔵 ok (size explícito aditivo) |
+| `Callout` título | `title="Super admin"` → renderiza `<h5>` interno com tokens do componente | — | ✅ |
+| `Badge` rótulo | herda `text-[length:var(--badge-size-md-text)]` + `capitalize` | — | ✅ |
+
+> Nota: o guard-rail do ESLint **não** bane `h1/p` (só `button/input/select/textarea`) — passa o lint, mas `h1`+3×`p` crus são drift de DS. **Único cluster de tipografia, idêntico ao Dashboard.**
+
+---
+
+## 6. GAPS de sizing / ícones
+
+| ID | Gap | Detalhe | Sev. |
+|---|---|---|---|
+| **SZ1** | Spinner dimensionado à mão | `Icons.spinner className="h-4 w-4 animate-spin"` (16px + animação Tailwind) em vez do `Spinner` do Seven (que tem `size`/`color`/`variant` tokenizados) | 🔵 (= C2) |
+| — | Ícones de componente | `Empty`/`Callout`/`Badge` dimensionam ícones por tokens internos (`--empty-state-media-icon-icon-size`, `size-4` do Callout, `[&_svg]:size-3.5` do Badge) | ✅ |
+
+→ Diferente do Dashboard, **não há conflito de convenção** (`size-4` vs `h-5 w-5`) — só um ícone autoral (`h-4 w-4`), cujo conserto real é adotar `Spinner`.
+
+---
+
+## 7. GAPS de estados
+
+| Estado | Tela | Seven oferece | Sev. |
+|---|---|---|---|
+| loading | 🟡 presente, porém cru (spinner manual) | `Spinner` / `SkeletonLoader` | 🟡 **ST1** (= C2) |
+| empty | ✅ **presente e on-system** (`Empty` family) | `Empty*` | ✅ **ponto correto** |
+| populated | ✅ grid de `Card` com dados reais | `Card` | ✅ |
+| erro | 🟡 ausente — falha de fetch cai no empty-state silenciosamente | `Callout variant="error"` + `useQuery.isError` | 🟡 **ST2** (= E1) |
+| hover/clicável | 🔵 cards não interativos (by-design) | `Card variant="selectable"` / link | 🔵 **ST3** (= E4) |
+
+---
+
+## 8. Consolidado — backlog priorizado
+
+| Prioridade | IDs | Resumo |
+|---|---|---|
+| 🔴 **Must-fix** | — | **nenhum** — sem quebra de DS, sem off-system, sem `button/input` cru, dados reais |
+| 🟡 **Should-fix** | E1·ST2, C1·TY1·TY2·TY3, C2·ST1·SZ1, E2 | erro silencioso vira "vazio" (tratar `isError`); tipografia crua→`Heading`/`Text`; loading→`Spinner`/`SkeletonLoader`; oferecer `refetch` |
+| 🔵 **Nice-to-have** | C3, C4, E3, E4·ST3, SP1 | `EmptyContent` p/ CTA; `CardFooter`/`CardMedia`/`Avatar`; `Badge tooltip`; cards `selectable`; ritmo de espaçamento |
+
+**Pontos corretos (não mexer):** `Empty` on-system (vs Dashboard) · `Callout` correto · `Badge` com `color` semântico · `Card` + composição · cores/tokens 100% internos · dados reais + 3 estados · zero off-system.
+
+---
+
+## 9. Superfície do Seven AINDA NÃO USADA (por elemento)
+
+> Inventário do que o Seven oferece e a tela **não** aproveita — props, variants, sub-componentes, estados e **componentes alternativos**. `[u]` = não usado. Todos verificados em `@etus/ui@0.4.0-beta.4` (`dist/index.d.ts`).
+
+### 9.1 — Badge de papel (hoje `Badge`)
+| Categoria | Disponível no Seven | Usado? |
+|---|---|---|
+| Props usadas | `color` · `className` · children | ✅ |
+| Props `[u]` | `type` · `size` · `dot` · `icon`/`leadingIcon`/`trailingIcon` · `iconOnly` · `avatar` · `country` · `onDismiss`/`dismissLabel` · `interactive` · `tooltip` · `asChild` · `disabled` | ❌ |
+| Variants `type` `[u]` | `pill-outline` · `badge-color` · `badge-outline` · `badge-modern` (usa `pill-color` default) | ❌ |
+| Sizes `[u]` | `sm` · `lg` (usa `default`/md) | ❌ |
+| **Oportunidade** | `dot`/`leadingIcon` p/ leitura rápida do papel; `tooltip={meta.blurb}` (a explicação já existe no código) | — |
+
+### 9.2 — Banner super admin (hoje `Callout`)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Props usadas | `icon` · `title` · `variant="success"` · children | ✅ |
+| Props `[u]` | `size` (sm/md/lg — usa md default) | ❌ |
+| Variants `[u]` | `info` · `warning` · `error` · `tip` · `transparent` · `default` | ❌ (success é o certo aqui) |
+| Nota | `icon={<Icons.shield />}` **sobrescreve** o ícone semântico do success (`CircleCheck`) — escolha consciente, mas troca o sinal visual | — |
+
+### 9.3 — Cards de workspace (hoje `Card`)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Sub-componentes usados | `CardHeader` `CardTitle` `CardDescription` `CardContent` | ✅ |
+| Sub-componentes `[u]` | `CardMedia` · `CardAction` · `CardFooter` | ❌ |
+| Variants `[u]` | `elevated` · `outlined` · `ghost` · `selectable` (usa `default`) | ❌ |
+| Estados `[u]` (variant `selectable`) | `selected` · `pinned` · `onToggleSelect` · `onTogglePin` · `selectableProps` · hover-lift · ring | ❌ |
+| **Componente alternativo `[u]`** | **`List`** (data-display) — `variant` `selectable` `multiple` `loading` `onSelect` `items` — diretório mais denso que grid de cards | ❌ nunca considerado |
+| **Componente alternativo `[u]`** | **`AccountSwitch`** (navigation) — `accounts` `header` `footer` `onSelect(account)` — **fit parcial**: é um *switcher* (dropdown de troca de conta ativa), não um diretório read-only de papéis; só caberia se o objetivo virar "trocar workspace ativo" | ❌ |
+| **Componente alternativo `[u]`** | **`Avatar`** — `size` `shape` `bordered` `interactive` `tooltip` — marca/identidade visual por workspace dentro do card | ❌ |
+
+### 9.4 — Estado vazio (hoje `Empty` family)
+| Categoria | Disponível | Usado? |
+|---|---|---|
+| Sub-componentes usados | `Empty` `EmptyHeader` `EmptyMedia(variant="icon")` `EmptyTitle` `EmptyDescription` | ✅ on-system |
+| Sub-componentes `[u]` | **`EmptyContent`** (slot de ação/CTA) | ❌ |
+| `EmptyMedia` variants `[u]` | `default` (usa `icon`) | ❌ |
+
+### 9.5 — Cabeçalho / textos (hoje `<h1>` / `<p>` crus)
+| Elemento | Componente Seven `[u]` | Eixos não aproveitados |
+|---|---|---|
+| `<h1>` | **`Heading`** | `level(1-6)` · `size` · `weight` · `align` · `color` · `gradient` · `truncate` · `asChild` |
+| `<p>` (×2) | **`Text`** / **`Paragraph`** | `Text`: `variant`/`size`/`weight`/`as`/`truncate` · `Paragraph`: `size`/`weight`/`color`/`align`/`leading`/`spacing`/`prose` |
+| bloco título+descrição | **`Section`** | `title` · `description` · `footer` · `variant` · `size` (encapsula o header inteiro) |
+
+### 9.6 — Loading & layout (hoje `<div>` + spinner lucide + grid cru)
+| Disponível `[u]` | Uso |
+|---|---|
+| **`Spinner`** (`size`/`color`/`variant`) · **`SkeletonLoader`** (`shape`/`size`/`animation`) | substituiriam o `Loader2`+`animate-spin` manual; skeleton do grid > spinner-row |
+| `Section` · `Container` · `Grid` (`cols`/`gap`/`flow`) · `Stack` (`direction`/`spacing`) · `Flex` | estruturariam a página com tokens em vez de `space-y-8`/`grid` crus |
+
+---
+
+## 10. Ações possíveis do usuário (mapa completo)
+
+> Toda ação que o usuário **poderia** executar, o gatilho, o status atual e o primitivo Seven que a ligaria.
+> **Resultado: 0 de 5 ações ligadas** — mas, diferente do Dashboard, a maioria é **read-only por design** (diretório de papéis), não "UI morta". O gap real é A2/A3 (erro/retry).
+
+| # | Ação possível | Gatilho (elemento) | Status | Como ligar (Seven) |
+|---|---|---|---|---|
+| A1 | Abrir/trocar para um workspace | card de workspace | 🔵 não-ligada (provável by-design; sem rota de detalhe) | `Card variant="selectable"`+`onToggleSelect` **ou** título `Heading asChild`+link **ou** `AccountSwitch onSelect` |
+| A2 | Ver estado de erro (em vez de "vazio" falso) | falha de fetch | 🟡 não-ligada (erro engolido pelo hook) | `useQuery.isError` → `Callout variant="error"` |
+| A3 | Atualizar/retry a lista | empty/erro | 🟡 não-ligada | `Button` ("Atualizar") → `refetch()` |
+| A4 | Entender o papel (explicação on-hover) | `Badge` de papel | 🔵 não-ligada | `Badge tooltip={meta.blurb}` (o blurb já existe) |
+| A5 | Foco/teclado em itens interativos | cards | ⚪ n/a (nada interativo) | vem de graça com `selectable`/link |
+
+**Emitters disponíveis quando A1 for ligada:** `Card.onToggleSelect`/`onTogglePin` (payload `CardSelectablePayload`: `id`, `next`, `timestamp`) · `AccountSwitch.onSelect(account)`.
+
+---
+
+## 11. Auditoria de estilo CLASSE-A-CLASSE (exaustiva)
+
+> **Toda** classe literal da tela, classificada contra os tokens do Seven. Legenda:
+> ✅ **token-backed** (resolve num token Seven) · 🟢 **value-aligned** (utilitário Tailwind cujo valor == token Seven) · 🟡 **drift** (cru onde um componente/token Seven deveria mandar) · 🔴 **off-system** (sem token equivalente) · ⚪ layout/utilitário (estrutural, sem token de design)
+>
+> Nota-chave: a escala de spacing do Seven **espelha a do Tailwind** (`--spacing-2`=8px=`gap-2`; `--spacing-4`=16px=`gap-4`; `--spacing-8`=32px=`space-y-8` — verificado em `tokens.css`), e `--font-tracking-tight`=`tracking-tight`=-0.025em. Por isso muito "cru" é 🟢, não violação.
+
+### 11.1 — Cores
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `text-muted-foreground` (×3) | `--muted-foreground` | ✅ |
+| `border` (no `Empty`) | `--border` | ✅ |
+| bg/borda/sombra dos cards, badge, callout | tokens internos (`--card-root-*`, `--badge-color-*`, `--success-subtle`, `--border`) | ✅ |
+| *(nenhuma cor hardcoded — `text-*-500`, hex, `bg-gray-*` etc.)* | — | ✅ limpo |
+
+### 11.2 — Espaçamento
+| Classe | Valor | Token Seven equiv. | Veredito |
+|---|---|---|---|
+| `space-y-8` | 32px | `--spacing-8` | 🟢 |
+| `gap-4` | 16px | `--spacing-4` | 🟢 |
+| `gap-2` (×2) | 8px | `--spacing-2` | 🟢 |
+| `space-y-0` | 0 | reset de layout | ⚪ |
+| padding/gap internos dos cards | — | `--card-*` | ✅ |
+
+### 11.3 — Bordas & radius
+| Classe | Resolve em | Veredito |
+|---|---|---|
+| `border` | `--border` (cor/largura) | ✅ |
+| *(radius vem dos componentes: `--card-root-radius`, `--callout-root-radius`, `--badge-radius-pill`, `rounded-lg` do `Empty`)* | tokens internos | ✅ |
+| **`border-dashed`** | **da base do `Empty` (Seven), não autoral** → não conta como off-system | ✅ |
+
+### 11.4 — Tipografia
+| Classe | Valor | Veredito | Observação |
+|---|---|---|---|
+| `text-2xl` | 1.5rem | 🟡 | título deveria vir do `Heading` |
+| `font-semibold` | 600 | 🟡 | idem (peso do `Heading`; `--card-title-weight`=600 existe) |
+| `tracking-tight` | -0.025em | 🟢 | valor == `--font-tracking-tight`, via var Tailwind |
+| `text-sm` (×2) | 0.875rem | 🟡 | corpo (descrição/blurb) deveria vir do `Text` |
+| `text-base` | 1rem | 🟢 | size explícito no `CardTitle` (base); aditivo, value-aligned |
+| `capitalize` | text-transform | ⚪ | utilitário tipográfico, sem token (não é violação) |
+
+### 11.5 — Sizing (ícones / dimensões)
+| Classe | Valor | Veredito |
+|---|---|---|
+| `h-4 w-4` (spinner) | 16px | 🟢 value-aligned; conserto real = `Spinner` (componente), não a medida |
+| `animate-spin` | animação | ⚪ utilitário de motion; `Spinner` encapsularia |
+| `shrink-0` (Badge) | flex | ⚪ layout (redundante: a base do `Badge` já tem `shrink-0`) |
+| `min-w-0` | flex | ⚪ layout (habilita truncamento) |
+| `truncate` (×2) | text-overflow | ⚪ layout |
+
+### 11.6 — Layout (⚪ sem token de design — ok)
+`flex` · `grid` · `items-center` · `items-start` · `justify-between` · `sm:grid-cols-2` · `lg:grid-cols-3`
+
+### 11.7 — Veredito do estilo
+| Classificação | Qtde | Itens |
+|---|---|---|
+| ✅ token-backed | 2 famílias | cores (`text-muted-foreground`, internos), `border` |
+| 🟢 value-aligned | 6 | `space-y-8`, `gap-4`, `gap-2`, `tracking-tight`, `h-4 w-4`, `text-base` |
+| 🟡 drift (tipografia) | 4 | `text-2xl`, `font-semibold`, `text-sm` (×2) |
+| 🔴 off-system | **0** | — |
+| ⚪ layout/utilitário | — | flex/grid/items/justify/`min-w-0`/`truncate`/`space-y-0`/`shrink-0`/`capitalize`/`animate-spin` |
+
+> **Conclusão de estilo:** a tela é **token-limpa e SEM off-system** — zero cor hardcoded, zero `border-dashed` autoral (o tracejado é da base do `Empty` do Seven), spacing/radius alinhados. Supera o Dashboard (que tinha 1 off-system). O **único** smell de estilo é o drift de tipografia (`h1`/`p` → `Heading`/`Text`) — mesma raiz do Dashboard, resolvida com os componentes de texto do Seven.
+
+---
+
+### Linha do coverage-matrix (índice)
+```yaml
+workspaces:
+  route: src/client/routes/_authenticated/workspaces.tsx
+  fidelity: 0.82
+  components_used: [Card, CardHeader, CardTitle, CardDescription, CardContent, Badge, Callout, Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription]
+  components_missing: [Heading, Text, Paragraph, Spinner, SkeletonLoader, EmptyContent]
+  gaps:
+    components: [C1, C2, C3, C4]
+    emitters:   [E1, E2, E3, E4]
+    colors:     []            # 0 — cores 100% token-backed; border-dashed vem da base do Empty (Seven)
+    spacing:    [SP1]
+    typography: [TY1, TY2, TY3]
+    sizing:     [SZ1]
+    states:     [ST1, ST2, ST3]
+  severity: { high: 0, medium: 3, low: 6 }   # high=0: sem quebra de DS, sem off-system, sem raw button/input
+  unused_seven:                      # superfície do DS não aproveitada (seção 9)
+    alternative_components: [List, AccountSwitch, Avatar, Section, Spinner, SkeletonLoader, Grid, Stack, Flex, Container, Heading, Text, Paragraph]
+    unused_props: { Badge: [type, size, dot, icon, leadingIcon, trailingIcon, iconOnly, avatar, country, onDismiss, interactive, tooltip, asChild, disabled], Callout: [size], Card: [variant, selected, pinned, onToggleSelect, onTogglePin] }
+    unused_variants: { Badge: [pill-outline, badge-color, badge-outline, badge-modern], Card: [elevated, outlined, ghost, selectable], Callout: [info, warning, error, tip, transparent] }
+    unused_subcomponents: { Card: [CardMedia, CardAction, CardFooter], Empty: [EmptyContent] }
+  user_actions:                      # seção 10
+    total: 5
+    wired: 0
+    unwired: [A1, A2, A3, A4]        # A5 = n/a; A1/A4 são by-design (read-only); A2/A3 é o gap real
+  style_audit:                       # seção 11 (classe-a-classe)
+    token_backed: [colors, border]
+    value_aligned: [space-y-8, gap-4, gap-2, tracking-tight, h-4 w-4, text-base]
+    drift: [text-2xl, font-semibold, text-sm]
+    off_system: []                   # 0 — border-dashed é da base do Empty (Seven), não autoral
+    hardcoded_colors: 0
+```
diff --git a/docs/plans/2026-06-16-001-migrate-frontend-seven-ds-plan.md b/docs/plans/2026-06-16-001-migrate-frontend-seven-ds-plan.md
new file mode 100644
index 0000000..2035b78
--- /dev/null
+++ b/docs/plans/2026-06-16-001-migrate-frontend-seven-ds-plan.md
@@ -0,0 +1,319 @@
+---
+title: Implementation Plan — Adotar o Seven (DS) em todo o frontend
+type: migration
+date: 2026-06-16
+status: ready-for-execution — D1–D5 decididos; fases reescritas p/ rewrite guiado por blocks (runtime @etus/seven-react). Pendência: confirmar Geist→JetBrains (D3)
+package_target: "@etus/seven-react@^0.1.0-beta.3 (→ @etus/ui@0.4.0-beta.2 + @etus/tokens@0.4.0-beta.2)"
+scope: src/client/** + src/client/index.css
+---
+
+# Implementation Plan — Adotar o Seven em todo o frontend
+
+Plano tático para fazer o **Seven** (`@etus/seven-react`, umbrella sobre `@etus/ui` + `@etus/tokens`)
+ser a fonte única de todo elemento de UI do `boilerplate-hono`, de modo que o boilerplate sirva
+de base de Design System para os produtos derivados.
+
+## Estado atual (diagnóstico 2026-06-16)
+
+A migração **já começou e está parcial** (≈60% das telas). O que já está correto:
+
+- Pacotes instalados e ligados; `index.css` faz `@import "@etus/seven-react/styles.css"` + `@source` (linha 5/11).
+- Cores semânticas **já neutralizadas** do `@theme` local — o Seven vence em light e dark.
+- Dark mode compatível: `use-theme.tsx` aplica `.dark` no `<html>`, igual à estratégia do `@etus/tokens` (`.dark`, sem `prefers-color-scheme`).
+- Telas já no Seven: `Button`, `Card`, `Avatar`, `Dialog`, `Form`, `Tabs`, `Badge`, `Label` em ~13 rotas + `sidebar`/`error-fallback`/`loading-skeleton`.
+
+**Achado central (o gap mais grave, invisível):** o bloco `@theme` local (`src/client/index.css:17+`)
+roda **depois** do `@import` do Seven e, no Tailwind v4, *last wins* — então tokens locais de
+`radius`/`shadow`/`breakpoint`/tipografia **sobrescrevem os do Seven com valores diferentes**, e os
+componentes do Seven renderizam fora do tom. Esta é a "Etapa 2" que os próprios comentários do arquivo
+prometem mas não executaram.
+
+## Objetivo
+
+Todo elemento de UI vem do `@etus/seven-react`; os tokens do `@etus/tokens` são a fonte da verdade
+(o `@theme` local só guarda o que o Seven comprovadamente não fornece); nenhum HTML cru de controle e
+nenhum componente caseiro de UI sobrevive; e há guard-rails que impedem regressão nos produtos derivados.
+
+## Referências canônicas do Seven (repo `~/Dropbox/aa-projects/Github/seven`)
+
+A composição idiomática NÃO será inventada — será ancorada no repo do Seven:
+- **`DESIGN.md`** — espec de marca (regras de ouro abaixo). Fonte de verdade #3 (após Figma e `tokens.css`).
+- **Showcase `apps/showcase`** (código) — composição canônica. O **shell** vive em `src/routes/__root.tsx` (`SidebarProvider mode="dual"` → Rail 64px + Panel 216px + `SidebarInset` + content `rounded-tl-[24px] border`).
+- **`seven.etus.io`** — o showcase **publicado e renderizado**: referência de **validação visual real**. Toda comparação de UI com o Seven compara screenshots do app contra o showcase publicado (não só código/`.d.ts`/tokens).
+- **209 blocks** em `apps/showcase/src/data/blocks/` (29 categorias) — **copiáveis como ponto de partida** (não distribuídos via CLI). Relevantes: `page-shells` (3), `logins`, `account-and-user-management` (15), `form-layouts` (5), `tables`/`data-table`, `empty-states`, `dialogs`, `dashboard`.
+- **CLI registry** — `npx @etus/seven add <comp>` copia 185 componentes como **source local com token-slicing** (resolve o megabundle de 1.4MB — ver D5).
+- **Skill `seven-design-system`** + pacote `@etus/seven-skill` (plugin Claude Code + `npx seven detect`, 35 regras) — guard-rails automáticos; vale instalar.
+
+### Regras de ouro (DESIGN.md) — guard-rails inegociáveis
+- **Tipografia:** Inter (400/500/600/700, evitar 800/900); **JetBrains Mono** p/ código; **nunca Geist/Space Grotesk**. Sentence case pt-BR; sem ponto final em botões/labels.
+- **Cor:** só **mint** (`--primary #19e699`) + **lime** (`--secondary`) são marca; **fuchsia só em charts**; neutros = cinza puro; status semânticos. Nunca inventar cor, nunca indigo/"AI purple", nunca `#000`/`#fff` puros.
+- **Forma:** dois stacks de radius **não intercambiáveis** — componente (4/8/12 = inputs/botões) vs superfície (16/20/24/32 = cards/dialogs); **pills só** em badges/tags, nunca botões.
+- **Elevação/Motion:** bordas 1px p/ hierarquia, sombras só p/ overlays; micro-press tátil (`translate-y` + inset shadow) em todo clicável; 200ms `--ease-default`, sem bounce/spring.
+- **Tailwind v4:** type hints obrigatórios — `bg-[color:var(--token)]`, `text-[length:var(--token)]`, dimensões sem prefixo; **nunca** `bg-[var(...)]` nem `hsl(var(...))` (Lightning CSS dropa em silêncio).
+- **Ícones:** Lucide, stroke 2px, `currentColor`; sem emoji no chrome.
+
+## Estratégia de branch
+
+- Branch nova a partir de `master` (ex.: `feat/frontend-seven-ds`).
+- Migração incremental por fase — `pnpm build` + `pnpm typecheck:client` verdes ao fim de cada fase.
+- Cada fase de UI é verificável por screenshot/E2E `@visual` antes de seguir.
+
+## Definition of Ready (DoR)
+
+- [x] Diagnóstico do estado atual concluído (este doc)
+- [x] Catálogo do Seven mapeado e **verificado em runtime** (não só `.d.ts`): `TextInput`, `Divider`, `SkeletonLoader`, `Switch`, `Checkbox`, `Toaster` existem em `@etus/ui@0.4.0-beta.2` (1215 exports)
+- [x] Spikes técnicos da Fase 0 (D2 tokens, D4 toast) resolvidos
+- [x] Decisões do usuário: D1 = reescrever efeitos/remover paletas; D3 = Inter variable + Geist Mono + remover serif
+- [ ] Branch nova criada a partir de `master`
+
+---
+
+## Fase 0 — Decisões + de-risking (GATE)
+
+Spikes técnicos resolvidos nesta sessão (D2, D4 ✅). Restam **2 decisões do usuário** (D1, D3).
+
+### D1 — Paletas de cor locais (DECISÃO DO USUÁRIO) — dado corrigido
+As paletas `--color-{green,blue,gray,red,yellow,pink,main1,main2}-*` (88 tokens, `index.css:43–145`)
+**não colidem por nome** com o Seven (que usa `--brand-*` + semânticas). Uso real medido:
+- **0** ocorrências como classe utilitária (`bg-green-500` etc.) em `src/client`.
+- **Mas NÃO são órfãs:** são consumidas via `var(--color-…)` por ~10 utilitários visuais do próprio `index.css`
+  (`.gradient-{primary,accent,warm}`, `.glow-*`, spinner/rainbow, `.skeleton` shimmer — linhas ~514–721).
+- **Decidir:** (a) **remapear** os valores das paletas para as primitivas do Seven (mantém os efeitos, alinha a marca);
+  (b) reescrever os efeitos usando `--brand-*`/semânticas e remover as paletas; (c) manter como estão (dois sistemas).
+- **✅ DECISÃO (2026-06-16): opção (b)** — reescrever os ~10 efeitos (`.gradient-*`, `.glow-*`, spinner/rainbow, `.skeleton`) com tokens `--brand-*`/semânticos do Seven e **remover as 88 paletas locais**. Vocabulário único de cor (boilerplate-base limpo). ⚠️ Nem todo gradiente terá equivalente de marca exato — escolher o token Seven mais próximo por efeito e conferir visual.
+- **Verde:** paletas removidas; nenhum `var(--color-{green,blue,…})` sobra; efeitos conferidos.
+
+### D2 — Set de tokens a remover/manter ✅ RESOLVIDO
+Valores reais do Seven (lidos de `@etus/tokens/dist/tokens.css`):
+- **radius:** none 0 · xs **2** · sm **4** · md **8** · lg **12** · xl **16** · 2xl **20** · 3xl 24 · 4xl 32 · pill 999 · full 9999 (px).
+  Local diverge em toda a escala (xs 1 · sm 2 · md 4 · lg 8 · xl 12 · 2xl 14) → **remover locais**.
+- **shadow:** Seven fornece xs–xl (com variante dark) → **remover** locais xs–xl; **manter** `--shadow-2xl` e `--shadow-inner` (Seven não tem).
+- **breakpoint:** Seven xs 320 · sm **360** · md 768 · lg 1024 · xl 1280 · 2xl **1440** · 3xl 1920 · 4xl 2560.
+  Local diverge em **sm (640)** e **2xl (1536)**; md/lg/xl batem → **remover locais** (⚠️ ver R1).
+- **`--text-*`:** Seven **define** (2xs…9xl) → **remover** local `--text-xs…5xl`.
+- **`--font-{thin…extrabold}`:** o Tailwind v4 lê `--font-weight-*` (Seven fornece 100–900); os `--font-*` locais são redundantes → **remover** (checar refs `var(--font-bold)`).
+- **`--leading-*`:** Seven usa namespace próprio `--font-leading-*` (não toca `--leading-*`) → **manter** local.
+
+### D3 — Fontes ⚠️ CORRIGIDO pelo DESIGN.md do Seven
+O `DESIGN.md` canônico contradiz parte do que foi decidido antes (decisão original feita sem acesso a ele):
+- **Sans = Inter, pesos 400/500/600/700 apenas** ("avoid 800/900"). App já está assim ✓ → **NÃO** carregar variable 100–900 (revertido).
+- **Mono = JetBrains Mono** (oficial). **Geist é PROIBIDO** ("never Geist"). → trocar `--font-mono` de Geist Mono p/ **JetBrains Mono** (Google Fonts). ⚠️ revoga a escolha "Geist Mono" — **confirmar com o usuário**.
+- **Sem Space Grotesk** (DESIGN.md: legacy Figma que não shipou; os tokens `--typography-display-*` são legado). Display usa Inter.
+- **Sem serif na marca** (o Instrument Serif do showcase é o tema próprio dele, não o DS). `--font-serif` órfão → **remover**.
+- **Verde:** Inter 400–700 + JetBrains Mono carregadas; sem Geist/Space Grotesk/serif.
+
+### D4 — Toast ✅ RESOLVIDO
+`@etus/ui` exporta `Toaster` (tipado sobre `sonner`) e depende de `sonner@^2.0.7` (mesma versão do app), mas **não reexporta a função `toast`**.
+- **Padrão:** usar `<Toaster>` de `@etus/seven-react` (com `theme={resolvedTheme}` p/ dark) e manter `import { toast } from 'sonner'` nas 4 chamadas. Deletar `components/ui/sonner.tsx`.
+
+### D5 — Arquitetura de consumo (NOVA — DECISÃO DO USUÁRIO)
+Como o boilerplate consome os componentes do Seven?
+- **(a) Runtime `@etus/seven-react`** (atual) — 1 import, atualiza via `pnpm up`, mas **megabundle ~1.4MB** + CSS ~664KB (R4); rota pública carrega tudo (mitigável com lazy/code-split).
+- **(b) CLI source `npx @etus/seven add`** (modelo shadcn) — copia 185 componentes como **source local** com **token-slicing** (só os tokens usados) → bundle enxuto, controle total; **mas** vira código "seu" (sem update automático; re-rodar `add` p/ acompanhar o DS — relevante porque está em beta).
+- **Trade-off:** (a) acompanha o DS em evolução com menos esforço; (b) resolve o bundle e é mais idiomático p/ um boilerplate-base, ao custo de manutenção manual.
+- **✅ DECISÃO (2026-06-16): (a) Runtime `@etus/seven-react`** — manter alinhamento contínuo ao DS (beta evolui); domar o bundle via lazy-load nas rotas públicas (U4.2).
+
+**Checkpoint Fase 0:** D1/D2/D4/D5 fechados; **D3 corrigido pelo DESIGN.md** (aguarda só o OK sobre Geist→JetBrains Mono). Fases 1–5 reescritas abaixo para "rewrite guiado por blocks".
+
+---
+
+## Fase 1 — Fundação de tokens (P0)
+
+**Objetivo:** o Seven passa a ditar radius/shadow/breakpoint/tipografia; o `@theme` local guarda só os extras.
+**Depende de:** D1, D2.
+
+### U1.1 — Remover tokens colidentes do `@theme`
+Conforme D2 (resolvido):
+
+| Família (local) | Ação | Razão |
+|---|---|---|
+| `--radius-xs…2xl`, `--radius-full` | **Remover** | colide com Seven; escala local ≈ metade (xs 1 vs 2, md 4 vs 8…) |
+| `--shadow-xs…xl` | **Remover** | colide com Seven (`--shadow-xs…xl`) |
+| `--shadow-2xl`, `--shadow-inner` | **Manter** | Seven não fornece |
+| `--breakpoint-sm…2xl` | **Remover** | colide; sm 640→**360**, 2xl 1536→**1440** — ⚠️ validar responsividade (R1) |
+| `--text-xs…5xl` | **Remover** | Seven define `--text-*` (2xs…9xl) |
+| `--font-{thin…extrabold}` | **Remover** | redundante; Tailwind usa `--font-weight-*` (Seven fornece 100–900) |
+| `--leading-*` | **Manter** | Seven usa namespace `--font-leading-*`, não toca `--leading-*` |
+| `--blur-*`, `--container-*`, `--grid-gap-*`, `--content-*` | **Manter** | utilitários locais, não conflitam com Seven |
+| `--spacing-{page,section,group,element,tight,xs}`, `--layout-*`, `--card-padding*` | **Manter** | semântica de layout própria |
+| `--animate-duration-*`, `--animate-ease-*`, `--animate-spring` | **Manter (P2: alinhar)** | Seven usa `--duration-*`/`--ease-*` (nomes diferentes) — alinhar é opcional |
+| `--color-error*`, `--color-*-solid` | **Manter** | Seven usa `destructive`; não tem variantes `*-solid` |
+
+- **Verde:** `pnpm build` ok; `grep -nE "\-\-(radius|breakpoint|shadow-(xs|sm|md|lg|xl))" src/client/index.css` só retorna o que a tabela manda manter; screenshot de uma tela de referência (ex.: dashboard) batendo com o tom do Seven.
+
+### U1.2 — Reescrever efeitos e remover paletas (D1 = opção b)
+- Para cada utilitário em `index.css` que usa `var(--color-{green,blue,gray,red,yellow,pink,main1,main2}-*)`
+  (`.gradient-{primary,accent,warm}`, `.glow-*`, spinner/rainbow, `.skeleton` shimmer — linhas ~514–721),
+  trocar pelos tokens `--brand-*`/semânticos do Seven mais próximos; depois **deletar os 88 tokens de paleta** do `@theme`.
+- **Verde:** `grep -nE "var\(--color-(green|blue|gray|red|yellow|pink|main1|main2)-" src/client` vazio; efeitos conferidos visualmente.
+
+### U1.3 — Fontes (D3 corrigido pelo DESIGN.md)
+- `index.html`: manter **Inter 400/500/600/700** (já presente; NÃO adicionar 800/900); trocar o `<link>` para incluir **JetBrains Mono**.
+- `index.css`: `--font-mono` → JetBrains Mono (era Geist, proibido pelo DESIGN.md); **remover** `--font-serif` (órfão); não introduzir Space Grotesk.
+- **Verde:** `font-mono` (6 usos) renderiza JetBrains Mono; `grep -iE "geist|space grotesk" src/client` vazio; sem `--font-serif`.
+
+**Checkpoint Fase 1:** ✅ executado 2026-06-16 (branch `feat/frontend-seven-ds`) — `pnpm typecheck:client` + `pnpm build` (988ms) verdes; limpeza confirmada (0 paletas, 0 tokens colidentes, JetBrains Mono no lugar de Geist). Revisão visual no browser: **pendente**.
+
+---
+
+## Fase 2 — Shell canônico (rewrite guiado pelo showcase)
+
+**Objetivo:** trocar o shell caseiro (`sidebar.tsx`, 267 linhas) pelo sistema de navegação do Seven, replicando o shell canônico do showcase.
+**Depende de:** Fase 1.
+**Referência:** `seven/apps/showcase/src/routes/__root.tsx` (+ blocks `data/blocks/page-shells/*`; screenshots `showcase-canonical-shell-*`).
+
+### U2.1 — Navegação com o sistema Sidebar do Seven
+- Substituir `components/sidebar.tsx` por `SidebarProvider mode="dual"` → `SidebarRailContent` (rail 64px: logo + ícones de seção + theme toggle + ações) + `SidebarPanelContent` (216px: `SidebarHeader` + `SidebarContent` com `SidebarMenu`/`SidebarMenuItem`/`SidebarMenuButton`). Manter os ícones lucide e o user/account menu.
+- Ligar às rotas autenticadas (TanStack `Link`), preservando `useAuth`/`use-theme`.
+- **Verde:** rail+panel como o canonical; navegação e theme toggle funcionam; nenhum markup de sidebar caseiro resta.
+
+### U2.2 — Layout autenticado com `SidebarInset`
+- `routes/_authenticated.tsx`: `SidebarInset` → header `h-12` (Breadcrumb derivado do pathname + ações) + content `rounded-tl-[24px] border bg-background px-8 py-8` (assinatura do shell). `SidebarTrigger` p/ colapsar; skeletons → `SkeletonLoader`/`SidebarMenuSkeleton`.
+- **Verde:** layout idêntico ao canonical; breadcrumb correto; loading sem CLS; E2E de navegação verde.
+
+**Checkpoint Fase 2:** ✅ executado 2026-06-16 — `sidebar.tsx` reescrito como `AppSidebar` (single mode: `SidebarProvider` + `Sidebar collapsible="icon"` + `SidebarHeader/Content/Footer` + `SidebarInset` com header `h-12` e content `rounded-tl-[24px]`); `_authenticated.tsx` monta o shell. `pnpm typecheck:client` + `pnpm build` verdes. ✅ **validação visual feita** (dev server + `/auth/test-login` + `/dashboard`, viewport 1440×900): shell **expandido e colapsado** conferidos contra o canônico, console **sem erros**. Bug pego só na renderização real (não no build): `SidebarAvatar` não compacta sozinho no modo ícone → ligado ao `useSidebar` (`compact={state==='collapsed'}`). 3 refinamentos aplicados: `SidebarAvatar`+dropdown no rodapé, `aria-current="page"`, `size="lg"` no header.
+
+---
+
+## Fase 3 — Telas guiadas por blocks (rewrite da apresentação, lógica preservada)
+
+**Objetivo:** reescrever a árvore visual de cada tela partindo do block correspondente do showcase, **preservando a lógica** (hooks/rotas/forms RHF+zod/queries/handlers do `@etus/auth`). Nesta fase somem os caseiros e o HTML cru de controle.
+**Depende de:** Fase 1 (+ Fase 2 p/ as telas autenticadas).
+
+> **Regra de execução:** abrir o block no showcase (`seven/apps/showcase/src/data/blocks/<cat>/` e `routes/layouts/marketing/*`), copiar a composição e religar aos dados/forms existentes. Validar **runtime** dos componentes (`Object.keys(await import('@etus/ui'))`), nunca o `.d.ts` (substring → falso positivo). Props do Seven ≠ shadcn: `TextInput` (`size`/`leadingIcon`), `Divider`, `SkeletonLoader`, `Switch`, `Checkbox` — ajustar call-sites. Seguir as regras de ouro (sentence case pt-BR, type hints `[color:var(...)]`, micro-press, radius stacks, `Badge` `type`+`color` — R5).
+>
+> Primitivos substituídos ao longo das telas: `input.tsx`→`TextInput`, `separator.tsx`→`Divider`, `skeleton.tsx`→`SkeletonLoader`, `sonner.tsx`→`Toaster` (D4), toggles `<button>`→`Switch`/`Checkbox`, button cru→`Button`.
+
+### U3.1 — Login (pública) ← block `logins/*`
+- Reescrever `routes/login.tsx`; manter OAuth/returnTo. ⚠️ rota pública: importar o mínimo + lazy onde couber (R4/D5).
+- **Verde:** login funciona; bundle público sob controle; E2E de auth verde.
+
+### U3.2 — Dashboard ← block `dashboard/*` + `KPICard`/`DashboardCard`
+- `_authenticated/dashboard.tsx`: KPIs em `Grid` de `KPICard`/`DashboardCard`; queries intactas.
+- **Verde:** dashboard com cards do Seven; dados preservados.
+
+### U3.3 — Account & Settings ← blocks `account-and-user-management/*` + `form-layouts/*`
+- `account.tsx`/`settings.tsx`: `Tabs` + `Card` + `Form`/`FormField` com `TextInput`; `NotificationToggle` → `Switch`; `Input`/`Separator` caseiros somem. Manter RHF+zod e `toast`.
+- **Verde:** forms submetem/validam; toggles são `Switch`; sem caseiros; E2E verde.
+
+### U3.4 — Team ← block `tables`/`data-table` + dialog de convite
+- `team.tsx`: membros em `Table`/`DataTable`; convite em `Dialog`+`Form`. Mutations/queries intactas.
+- **Verde:** lista e convite funcionam; sem `Input` caseiro.
+
+### U3.5 — Workspaces ← grid de `Card`/`Badge`
+- `workspaces.tsx`: cards com role `Badge` (`type`+`color`, não `variant` — R5).
+- **Verde:** grid renderiza; badges idiomáticos.
+
+### U3.6 — Integrations ← `Card` + `Dialog` + `form-layouts/form-layout-03` (fieldset+checkbox)
+- `integrations.tsx`: event toggles `<button>` → `Checkbox`; webhook em `Dialog`+`Form`. Payload inalterado.
+- **Verde:** seleção via `Checkbox`; webhook cria; sem caseiros.
+
+### U3.7 — Utilitárias: 404/`$`, invite, erros, toasts
+- `$.tsx`/`error-fallback.tsx` → `ErrorPage`/`Empty` (button cru → `Button`); `invite.$token.tsx` ← block tipo login; `main.tsx` → `Toaster` do Seven (`theme={resolvedTheme}`, `toast` de `sonner`). Deletar `components/ui/sonner.tsx` na Fase 4.
+- **Verde:** erro/404/invite idiomáticos; toasts com tema do Seven.
+
+**Checkpoint Fase 3:** ✅ executado 2026-06-16 — `settings`/`account`/`team`/`integrations` migrados (Input→`TextInput`, Separator→`Divider`, toggles→`Switch`/`Checkbox`) + `Toaster` do Seven (`main.tsx`) + `error-boundary` button→`Button` + `skeleton`→`SkeletonLoader`. `typecheck:client` + `build` verdes; **0 consumidores** dos 4 caseiros (input/separator/skeleton/sonner). **Validação visual no browser:** shell (expandido/colapsado), settings (Profile+Notifications), account, team, integrations (página + dialog), Toaster (toast confirmado no DOM). `login`/`dashboard`/`workspaces`/`404`/`invite` já eram só-Seven (sem caseiros). Notas: `error-boundary` é dead-code (0 consumidores → candidato a delete); skeleton/loading é transitório (impraticável de capturar por throttle — bundle fica branco antes do render).
+
+**Refinamento de composição (2026-06-16):** as 3 telas que já eram só-Seven foram elevadas a componentes de mais alto nível do DS (em vez de `Card` caseiro): **dashboard** stats → `DashboardCard` (`title`/`value`/`valueDescription`/`icon`, sem deltas inventados — `KPICard` esconde o subtexto sem delta); **login** card central → split-screen do `/login` **curado** do Seven (`<main>`+`<aside>` landmarks, botão mint primário, painel de marca `bg-muted`, OAuth-only); **workspaces** banner super-admin → `Callout variant="success"` e empty-state → `Empty`/`EmptyMedia`/`EmptyTitle`/`EmptyDescription`. Validado no browser (workspaces super-admin via override client-side de `/api/me`). **230 testes verdes sem alterar nenhum teste** (composição preservou a intenção); `<main>`/`<aside>` no login satisfez `root-layout` legitimamente.
+
+**Auditoria de fidelidade da sidebar/topbar (2026-06-17):** todas as 11 telas conferidas contra o showcase publicado — UI 100% Seven, sem drift. **1 desvio cosmético corrigido** (brand mark do 404/invite/landing → plate mint, igual login/sidebar). **1 achado upstream:** o item ativo da sidebar aparece com fundo **mint forte** (`--sidebar-accent`) vs o **cinza sutil** do Figma (`--sidebar-nav-item-bg-hover`) — **não é defeito do boilerplate**, é o comportamento real do componente `SidebarMenuButton`. Causa raiz = **bug no Seven**: a estilização Figma (`group-data-[mode]:`) só vale no dual mode; o render single não expõe `data-mode` no `group` div. Fix do `data-mode` aplicado no working tree do Seven (ativa ícone 16→20px / padding / gap / fonte); resíduo de cascata no active-bg entregue ao time. Writeup: `seven/docs/audits/sidebar-single-mode-styling-bug.md`.
+
+---
+
+## Fase 4 — Limpeza, bundle e guard-rails (P2/P3)
+
+**Objetivo:** travar regressão, remover atalhos caseiros e domar o bundle (D5/R4).
+**Depende de:** Fases 2 e 3.
+
+### U4.1 — Remover caseiros migrados
+- Deletar `components/ui/{input,separator,skeleton,sonner}.tsx` após zero consumidores. (`sidebar.tsx` **não** é deletado — foi reescrito como `AppSidebar` idiomático na Fase 2.)
+- **Verde:** `grep -rE "components/ui/(input|separator|skeleton|sonner)" src/client` vazio.
+
+### U4.2 — Bundle das rotas públicas (D5/R4)
+- Com runtime `@etus/seven-react`, garantir que `/login` e públicas não puxem o megabundle: lazy-load/code-split, importar o mínimo.
+- **Verde:** chunk da rota pública sob controle no relatório de `pnpm build`.
+- **⛔ Investigado 2026-06-17 — bloqueado upstream (sem fix limpo no boilerplate).** O `autoCodeSplitting` já isola cada rota (chunk de `/login` = **4,6 kB**). O gargalo é o chunk `index` compartilhado (**2,2 MB / 648 kB gzip**) que **toda** rota carrega, porque `@etus/ui/dist/index.js` é um **bundle monolítico de 1,7 MB** (inlina todos os componentes + `recharts` num módulo só). Testado `sideEffects: false` nos 2 pacotes + cache do vite limpo → **build byte-idêntico** (tree-shaking no consumidor é impossível num bundle monolítico). `/login` usa o `Button` → puxa o módulo indivisível. jspdf (1,8 MB) já fica **fora** do bundle client (lazy). **Fix real = upstream no Seven** (publicar ESM por componente + `sideEffects`). Paliativo possível (não aplicado): `manualChunks` separa vendors → ganho só de **cache entre deploys**, **não** reduz o first-load do `/login`.
+
+### U4.3 — Regra de lint + detector do Seven
+- `eslint-plugin-boundaries` (instalado) + `no-restricted-syntax` barrando `<button>/<input>/<select>/<textarea>` cru e imports de UI fora de `@etus/seven-react`. Opcional: `npx seven detect src/client` (pacote `@etus/seven-skill`, 35 regras de marca) no lint/CI.
+- **Verde:** `pnpm lint` reprova um caso proposital e passa no código migrado.
+
+### U4.4 — Documentar a regra do DS
+- `CLAUDE.md`: "todo elemento de UI vem de `@etus/seven-react`; tokens via `@etus/tokens`; seguir `seven/DESIGN.md`". Manter `lucide-react` (decisão de ícones). Seção "como adicionar UI" + apontar os blocks do showcase.
+- **Verde:** CLAUDE.md atualizado.
+
+**Checkpoint Fase 4:** ✅ executado 2026-06-16 (parcial) — U4.1 deletados `input`/`separator`/`skeleton`/`sonner` caseiros; U4.3 lint guard-rail (raw `<button>/<input>/<select>/<textarea>` barrados em `routes/**` + `sidebar.tsx`, **provado** que dispara); U4.4 CLAUDE.md doc "UI = Seven". `typecheck:client` + `build` + `lint src/client` verdes. **U4.2:** investigado 2026-06-17 → **bloqueado upstream** — o chunk de `/login` já é 4,6 kB, mas o `index` compartilhado de 2,2 MB é inevitável enquanto o Seven publicar `@etus/ui` como bundle monolítico (defeats tree-shaking). Ver U4.2 p/ a medição completa.
+
+---
+
+## Fase 5 — Verificação final
+
+- Rodar: `pnpm lint`, `pnpm typecheck:client`, `pnpm build`, `pnpm test:unit:client`, `pnpm test:e2e` (incl. tags `@visual`/`@a11y`).
+- Revisão visual das telas-chave (login, dashboard, account, settings, team, workspaces, integrations).
+- **Verde (parcial 2026-06-16):** `lint` + `typecheck:client` + `build` + `test:unit:client` verdes — **230 testes, coverage 89.7%/84.5%/94.4%** (acima dos thresholds). Os testes de client foram atualizados p/ a estrutura Seven + setup jsdom corrigido (`ResizeObserver` construtível, shims Radix de pointer-capture). O rewrite pegou um **bug real**: o menu de usuário no rodapé não abria (`SidebarAvatar` não repassa props → não serve de `DropdownMenuTrigger`) → trocado por `SidebarMenuButton` (validado no browser). **Pendente:** `test:e2e`.
+
+---
+
+## Definition of Done (DoD)
+
+- [ ] D1–D5 resolvidos e registrados
+- [ ] Shell reescrito com o sistema Sidebar do Seven (sem `sidebar.tsx` caseiro)
+- [ ] `@theme` local só contém tokens que o Seven não fornece
+- [ ] Zero componentes caseiros de UI em `components/ui/` (exceto o que for genuinamente fora do escopo do Seven)
+- [ ] Zero HTML cru de controle em rotas/componentes
+- [ ] Regra de lint impedindo regressão, ativa em `pnpm lint`
+- [ ] `pnpm lint && pnpm typecheck:client && pnpm build && pnpm test:unit:client && pnpm test:e2e` verdes
+- [ ] CLAUDE.md documenta a regra "UI = Seven"
+
+## Validação por fase
+
+| Fase | Comandos de checkpoint |
+|---|---|
+| 0 | (manual — decisões registradas) |
+| 1 (fundação) | `pnpm typecheck:client`, `pnpm build` + revisão visual |
+| 2 (shell) | `pnpm typecheck:client`, `pnpm build` + conferir vs screenshots canonical |
+| 3 (telas) | `pnpm typecheck:client`, `pnpm test:unit:client`, `pnpm build`, `pnpm test:e2e` |
+| 4 (limpeza) | `pnpm lint`, `pnpm build` |
+| 5 | `pnpm lint && pnpm typecheck:client && pnpm build && pnpm test:unit:client && pnpm test:e2e` |
+
+## Grafo de dependências
+
+```
+Fase 0 (D1–D5) → Fase 1 (fundação CSS/tokens/fontes) → Fase 2 (shell canônico)
+   → Fase 3 (telas por blocks) → Fase 4 (limpeza + bundle + guard-rails) → Fase 5 (verificação)
+```
+
+## Mapa caseiro → Seven (referência)
+
+| Caseiro hoje | Seven | Consumidores |
+|---|---|---|
+| `components/sidebar.tsx` (267 linhas) | `SidebarProvider`/`Sidebar*`/`SidebarInset` | `_authenticated` |
+| `components/ui/input.tsx` | `TextInput` | account, settings, team, integrations |
+| `components/ui/separator.tsx` | `Divider` | sidebar, account, settings, integrations |
+| `components/ui/skeleton.tsx` | `SkeletonLoader` | loading-skeleton |
+| `components/ui/sonner.tsx` | `Toaster` | main + 4 `toast()` |
+| `error-boundary.tsx` `<button>` | `Button` | — |
+| `settings.tsx` NotificationToggle | `Switch` | settings |
+| `integrations.tsx` event toggles | `Checkbox` | integrations |
+
+## Riscos
+
+- **R1 — Breakpoints (U1.1):** trocar a escala local (sm=640) pela do Seven (sm=360) muda os pontos de quebra de todas as telas. Validar responsivo antes de fechar a Fase 1.
+- **R2 — Props divergentes (Fase 2):** `TextInput`/`Divider`/`SkeletonLoader` não são drop-in dos caseiros; orçar ajuste de call-site, não só de import.
+- **R3 — Beta:** os pacotes do Seven estão em `beta` — API pode mudar; fixar versões e revisar changelog em upgrade.
+- **R4 — Bundle na rota pública:** `@etus/ui` é um megabundle (~1.4MB) que **não tree-shake** (sem `sideEffects`). Importar 1 componente puxa a lib; o Rollup hoista num shared chunk quando ≥2 rotas importam, mas a rota **pública** `/login` não deveria carregar 1.4MB. Manter públicas enxutas (lazy-load ou poucos componentes). Correção real é upstream (subpath exports).
+- **R5 — `Badge variant` deprecado:** usar `type` (`badge-color`/`badge-outline`) + `color` (`success`/`muted`…); `@typescript-eslint/no-deprecated` reprova `variant=` (a regra de lint da U4.3 pega isso).
+- **R6 — Testes de UI no rewrite:** reescrever a árvore visual quebra seletores/snapshots dos testes de componente. Preservar os E2E de **fluxo** (login/invite/CRUD) reescrevendo por roles/labels acessíveis; orçar atualização da suíte unit de client.
+
+## Out of scope
+
+- Alinhar tokens de motion locais (`--animate-*`) aos do Seven (`--duration-*`/`--ease-*`) — P2, opcional.
+- Substituir `lucide-react` por um wrapper de ícone do Seven (mantido por decisão D-ícones).
+- Componentes avançados do Seven ainda não usados (DataTable, Charts, Kanban, etc.) — adoção sob demanda.
+
+## Referências
+
+- Diagnóstico: esta sessão (2026-06-16).
+- Catálogo do Seven: `node_modules/@etus/ui/dist/index.d.ts`, `node_modules/@etus/tokens/dist/tokens.{css,meta.json}`.
+- Repo do Seven: `~/Dropbox/aa-projects/Github/seven` — `DESIGN.md`, `apps/showcase` (shell `routes/__root.tsx`, blocks `src/data/blocks/`), skill `seven-design-system`, CLI `packages/cli/registry`.
+- Fundação atual: `src/client/index.css`, `src/client/hooks/use-theme.tsx`.
diff --git a/index.html b/index.html
index 313cc16..21f6ef8 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <title>Hono Boilerplate</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/package.json b/package.json
index 6a8caae..13cde28 100644
--- a/package.json
+++ b/package.json
@@ -59,8 +59,8 @@
   "dependencies": {
     "@etus/auth": "^0.9.1",
     "@etus/seven-react": "0.1.0-beta.3",
-    "@etus/tokens": "0.4.0-beta.2",
-    "@etus/ui": "0.4.0-beta.2",
+    "@etus/tokens": "0.4.0-beta.8",
+    "@etus/ui": "0.4.0-beta.10",
     "@hono/swagger-ui": "^0.6.1",
     "@hono/zod-openapi": "^1.4.0",
     "@hookform/resolvers": "^5.2.2",
diff --git a/packages/bhono-app/templates/base/.npmrc b/packages/bhono-app/templates/base/.npmrc
index 6df6def..031ca5d 100644
--- a/packages/bhono-app/templates/base/.npmrc
+++ b/packages/bhono-app/templates/base/.npmrc
@@ -1,7 +1,7 @@
 @etus:registry=https://registry.npmjs.org/
 //registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}
-# Resolve internal workspace deps (e.g. create-bhono -> @etus/bhono) to the local
-# package instead of the registry. Without this, a release bump points the dep at
-# a version that isn't published yet, so `pnpm install` can't resolve it and every
-# release stalls on the lockfile (ERR_PNPM_NO_MATCHING_VERSION / OUTDATED_LOCKFILE).
-link-workspace-packages=true
+# Internal monorepo deps (create-bhono -> @etus/bhono) use the `workspace:`
+# protocol (see packages/create-bhono/package.json) so they always resolve to the
+# local package, never the registry — @etus/bhono is unpublished. This replaces the
+# deprecated `link-workspace-packages`, which pnpm 10 ignores: after a release bump
+# any re-resolution 404'd on the registry instead of linking the workspace package.
diff --git a/packages/bhono-app/templates/base/CLAUDE.md b/packages/bhono-app/templates/base/CLAUDE.md
index 1a38c9f..31b53b5 100644
--- a/packages/bhono-app/templates/base/CLAUDE.md
+++ b/packages/bhono-app/templates/base/CLAUDE.md
@@ -222,6 +222,16 @@ Defined in `config/wrangler.json`:
 2. Use `createFileRoute` from TanStack Router
 3. Access auth via `useAuth()` hook
 
+### Frontend UI — Design System (Seven)
+
+Every UI element comes from **Seven** (`@etus/seven-react`, which re-exports `@etus/ui` + `@etus/tokens`). Do not build controls with raw HTML or local UI components.
+
+- **Components:** `import { Button, TextInput, Card, Dialog, Switch, Checkbox, Divider, SkeletonLoader, Toaster, Sidebar } from '@etus/seven-react'`. Names are not shadcn's (e.g. `TextInput` not `Input`; `Divider` not `Separator`) — verify exports at **runtime** (`Object.keys(await import('@etus/ui'))`), not from the `.d.ts`.
+- **Tokens:** `@etus/tokens` is the source for color/radius/spacing/typography (via `@import "@etus/seven-react/styles.css"` in `src/client/index.css`). The local `@theme` only keeps what Seven does not provide.
+- **Brand (`DESIGN.md` in the Seven repo):** Inter + JetBrains Mono; only `mint`/`lime` are brand (fuchsia is charts-only); no decoration; sentence-case pt-BR; Tailwind v4 type hints (`bg-[color:var(--token)]`).
+- **Guard-rail:** ESLint bans raw `<button>/<input>/<select>/<textarea>` in routes (`config/eslint.config.js`). Icons via `lucide-react`.
+- **Validation:** compare each screen against the published showcase at `seven.etus.io` (not only the code). Reference source: `~/Dropbox/aa-projects/Github/seven` (`apps/showcase`, `DESIGN.md`).
+
 ### Database Changes
 
 1. Update `schema.sql`
diff --git a/packages/bhono-app/templates/base/config/eslint.config.js b/packages/bhono-app/templates/base/config/eslint.config.js
index 7c72858..b9278b9 100644
--- a/packages/bhono-app/templates/base/config/eslint.config.js
+++ b/packages/bhono-app/templates/base/config/eslint.config.js
@@ -34,6 +34,7 @@ export default tseslint.config(
       "**/.claude/**",
       "**/.agents/**",
       "**/.codex/**",
+      "**/.remember/**",
       "**/e2e/**",
       "**/packages/**",
       "**/.pnpm*",
@@ -311,6 +312,40 @@ export default tseslint.config(
     },
   },
 
+  // ==============================================
+  // DS GUARD-RAIL: app screens use Seven controls, not raw HTML
+  // (every interactive control must come from @etus/seven-react)
+  // ==============================================
+  {
+    files: ["src/client/routes/**/*.{ts,tsx}", "src/client/components/**/*.{ts,tsx}"],
+    ignores: ["src/client/components/icons.tsx"],
+    rules: {
+      "no-restricted-syntax": [
+        "error",
+        {
+          selector: "JSXOpeningElement[name.name='button']",
+          message:
+            "Use Button from '@etus/seven-react' instead of a raw <button>.",
+        },
+        {
+          selector: "JSXOpeningElement[name.name='input']",
+          message:
+            "Use TextInput/Checkbox/Switch from '@etus/seven-react' instead of a raw <input>.",
+        },
+        {
+          selector: "JSXOpeningElement[name.name='select']",
+          message:
+            "Use Select/NativeSelect from '@etus/seven-react' instead of a raw <select>.",
+        },
+        {
+          selector: "JSXOpeningElement[name.name='textarea']",
+          message:
+            "Use Textarea from '@etus/seven-react' instead of a raw <textarea>.",
+        },
+      ],
+    },
+  },
+
   // === TEST FILES - DISABLE TYPE-CHECKED RULES ===
   {
     files: [
diff --git a/packages/bhono-app/templates/base/index.html b/packages/bhono-app/templates/base/index.html
index 313cc16..21f6ef8 100644
--- a/packages/bhono-app/templates/base/index.html
+++ b/packages/bhono-app/templates/base/index.html
@@ -7,7 +7,7 @@
     <title>Hono Boilerplate</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/packages/bhono-app/templates/base/package.json b/packages/bhono-app/templates/base/package.json
index 7d606b2..eb5aace 100644
--- a/packages/bhono-app/templates/base/package.json
+++ b/packages/bhono-app/templates/base/package.json
@@ -46,8 +46,8 @@
   "dependencies": {
     "@etus/auth": "^0.9.1",
     "@etus/seven-react": "0.1.0-beta.3",
-    "@etus/tokens": "0.4.0-beta.2",
-    "@etus/ui": "0.4.0-beta.2",
+    "@etus/tokens": "0.4.0-beta.8",
+    "@etus/ui": "0.4.0-beta.10",
     "@hono/swagger-ui": "^0.6.1",
     "@hono/zod-openapi": "^1.4.0",
     "@hookform/resolvers": "^5.2.2",
diff --git a/packages/bhono-app/templates/base/src/client/components/app-toaster.tsx b/packages/bhono-app/templates/base/src/client/components/app-toaster.tsx
new file mode 100644
index 0000000..b7a0309
--- /dev/null
+++ b/packages/bhono-app/templates/base/src/client/components/app-toaster.tsx
@@ -0,0 +1,8 @@
+import { Toaster } from '@etus/seven-react'
+import { useTheme } from '@/hooks/use-theme'
+
+/** Seven's Toaster wired to the app theme (needs the ThemeProvider context). */
+export function AppToaster() {
+  const { resolvedTheme } = useTheme()
+  return <Toaster theme={resolvedTheme} />
+}
diff --git a/packages/bhono-app/templates/base/src/client/components/error-boundary.tsx b/packages/bhono-app/templates/base/src/client/components/error-boundary.tsx
index ab472b4..77eb30c 100644
--- a/packages/bhono-app/templates/base/src/client/components/error-boundary.tsx
+++ b/packages/bhono-app/templates/base/src/client/components/error-boundary.tsx
@@ -1,5 +1,6 @@
 // src/client/components/error-boundary.tsx
 import { Component, type ReactNode } from 'react'
+import { Button } from '@etus/seven-react'
 
 interface ErrorBoundaryProps {
   children: ReactNode
@@ -52,12 +53,12 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
             <p className="mt-2 text-sm text-muted-foreground">
               {this.state.error?.message ?? 'An unexpected error occurred'}
             </p>
-            <button
+            <Button
+              className="mt-4"
               onClick={() => { this.setState({ hasError: false, error: null }) }}
-              className="mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
             >
               Try again
-            </button>
+            </Button>
           </div>
         </div>
       )
diff --git a/packages/bhono-app/templates/base/src/client/components/sidebar.tsx b/packages/bhono-app/templates/base/src/client/components/sidebar.tsx
index 02cbb2f..6418d93 100644
--- a/packages/bhono-app/templates/base/src/client/components/sidebar.tsx
+++ b/packages/bhono-app/templates/base/src/client/components/sidebar.tsx
@@ -1,36 +1,53 @@
 import { Link, useLocation } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
-import { cn } from '@/lib/utils'
-import { Avatar, AvatarFallback, AvatarImage, Button } from '@etus/seven-react'
-import { Separator } from '@/components/ui/separator'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarTrigger,
+  Text,
+} from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 import { useTheme } from '@/hooks/use-theme'
 
-interface SidebarProps {
-  defaultCollapsed?: boolean
-}
-
 const mainNavItems = [
   { to: '/dashboard', label: 'Dashboard', icon: Icons.dashboard },
   { to: '/team', label: 'Team', icon: Icons.users },
   { to: '/workspaces', label: 'Workspaces', icon: Icons.layers },
   { to: '/integrations', label: 'Integrations', icon: Icons.blocks },
-]
+] as const
 
 const accountNavItems = [
   { to: '/account', label: 'Account', icon: Icons.user },
   { to: '/settings', label: 'Settings', icon: Icons.settings },
-]
-
-// Detect platform for keyboard shortcut display (use userAgent since platform is deprecated)
-const getIsMac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
-
-export function Sidebar({ defaultCollapsed = false }: SidebarProps) {
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed)
-  const [isMac] = useState(getIsMac)
-  const { user, logout, isLoggingOut } = useAuth()
+] as const
+
+/**
+ * App shell sidebar, composed from the Seven `Sidebar` system (single mode,
+ * collapsible to icon rail). Navigation/auth/theme logic is preserved; the
+ * presentation is the Seven DS. The footer uses `SidebarAvatar` + a dropdown
+ * (the idiomatic user-identity footer), and active items carry aria-current.
+ */
+export function AppSidebar() {
   const location = useLocation()
+  const { user, logout, isLoggingOut } = useAuth()
   const { theme, setTheme, resolvedTheme } = useTheme()
 
   const initials = user?.name
@@ -39,229 +56,113 @@ export function Sidebar({ defaultCollapsed = false }: SidebarProps) {
       ? user.email[0].toUpperCase()
       : '?'
 
-  // Keyboard shortcut to toggle sidebar
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'b' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setIsCollapsed((prev) => !prev)
-      }
-    }
-    window.addEventListener('keydown', handleKeyDown)
-    return () => { window.removeEventListener('keydown', handleKeyDown) }
-  }, [])
-
-  return (
-    <aside
-      className={cn(
-        "flex h-screen flex-col border-r bg-sidebar transition-all duration-300 ease-in-out",
-        isCollapsed ? "w-16" : "w-64"
-      )}
-    >
-      {/* Header */}
-      <div className={cn(
-        "flex h-14 items-center border-b px-3",
-        isCollapsed ? "justify-center" : "justify-between"
-      )}>
-        <Link
-          to="/dashboard"
-          className={cn(
-            "flex items-center gap-2 font-semibold transition-opacity",
-            isCollapsed && "justify-center"
-          )}
-        >
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-            <Icons.command className="h-4 w-4" />
-          </div>
-          {!isCollapsed && <span className="text-sidebar-foreground">Hono</span>}
-        </Link>
-
-        {!isCollapsed && (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
-            onClick={() => { setIsCollapsed(true) }}
-          >
-            <Icons.chevronRight className="h-4 w-4 rotate-180" />
-          </Button>
-        )}
-      </div>
-
-      {/* Expand button when collapsed */}
-      {isCollapsed && (
-        <div className="flex justify-center py-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
-            onClick={() => { setIsCollapsed(false) }}
-          >
-            <Icons.chevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-      )}
-
-      {/* Main Navigation */}
-      <nav className="flex-1 space-y-1 overflow-y-auto p-2">
-        <div className="space-y-1">
-          {!isCollapsed && (
-            <p className="px-3 py-2 text-xs font-medium text-sidebar-foreground/50 uppercase tracking-wider">
-              Main
-            </p>
-          )}
-          {mainNavItems.map((item) => (
-            <NavItem
-              key={item.to}
-              to={item.to}
-              label={item.label}
-              icon={item.icon}
-              isActive={location.pathname === item.to}
-              isCollapsed={isCollapsed}
-            />
-          ))}
-        </div>
-
-        <Separator className="my-4 bg-sidebar-border" />
-
-        <div className="space-y-1">
-          {!isCollapsed && (
-            <p className="px-3 py-2 text-xs font-medium text-sidebar-foreground/50 uppercase tracking-wider">
-              Account
-            </p>
-          )}
-          {accountNavItems.map((item) => (
-            <NavItem
-              key={item.to}
-              to={item.to}
-              label={item.label}
-              icon={item.icon}
-              isActive={location.pathname === item.to}
-              isCollapsed={isCollapsed}
-            />
-          ))}
-        </div>
-      </nav>
-
-      {/* Theme toggle and keyboard shortcut hint */}
-      <div className={cn(
-        "px-3 py-2",
-        isCollapsed ? "flex justify-center" : "flex items-center justify-between"
-      )}>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-8 w-8 text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
-          onClick={() => {
-            const next = theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light'
-            setTheme(next)
-          }}
-          title={`Theme: ${theme} (click to change)`}
-        >
-          {resolvedTheme === 'dark' ? (
-            <Icons.moon className="h-4 w-4" />
-          ) : (
-            <Icons.sun className="h-4 w-4" />
-          )}
-        </Button>
-        {!isCollapsed && (
-          <p className="text-xs text-sidebar-foreground/40">
-            <kbd className="px-1.5 py-0.5 text-[10px] font-mono bg-sidebar-accent rounded">
-              {isMac ? '⌘' : 'Ctrl+'}B
-            </kbd>
-            {' '}collapse
-          </p>
-        )}
-      </div>
-
-      <Separator className="bg-sidebar-border" />
-
-      {/* User Profile */}
-      <div className={cn(
-        "p-3",
-        isCollapsed ? "flex justify-center" : ""
-      )}>
-        {isCollapsed ? (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-10 w-10 rounded-full p-0 hover:bg-sidebar-accent"
-            onClick={() => { logout() }}
-            disabled={isLoggingOut}
-          >
-            <Avatar className="h-8 w-8">
-              <AvatarImage src={user?.picture ?? undefined} alt={user?.name ?? ''} />
-              <AvatarFallback className="text-xs bg-sidebar-accent text-sidebar-foreground">
-                {initials}
-              </AvatarFallback>
-            </Avatar>
-          </Button>
-        ) : (
-          <div className="flex items-center gap-3 rounded-lg p-2 hover:bg-sidebar-accent transition-colors">
-            <Avatar className="h-9 w-9 shrink-0">
-              <AvatarImage src={user?.picture ?? undefined} alt={user?.name ?? ''} />
-              <AvatarFallback className="text-xs bg-sidebar-accent text-sidebar-foreground">
-                {initials}
-              </AvatarFallback>
-            </Avatar>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-sidebar-foreground truncate">
-                {user?.name}
-              </p>
-              <p className="text-xs text-sidebar-foreground/60 truncate">
-                {user?.email}
-              </p>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 shrink-0 text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
-              onClick={() => { logout() }}
-              disabled={isLoggingOut}
-            >
-              {isLoggingOut ? (
-                <Icons.spinner className="h-4 w-4 animate-spin" />
-              ) : (
-                <Icons.logout className="h-4 w-4" />
-              )}
-            </Button>
-          </div>
-        )}
-      </div>
-    </aside>
-  )
-}
+  const cycleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light')
+  }
 
-function NavItem({
-  to,
-  label,
-  icon: Icon,
-  isActive,
-  isCollapsed,
-}: {
-  to: string
-  label: string
-  icon: React.ComponentType<{ className?: string }>
-  isActive: boolean
-  isCollapsed: boolean
-}) {
   return (
-    <Link
-      to={to}
-      className={cn(
-        "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all",
-        isCollapsed && "justify-center px-2",
-        isActive
-          ? "bg-sidebar-accent text-sidebar-foreground"
-          : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
-      )}
-      title={isCollapsed ? label : undefined}
-    >
-      <Icon className={cn("h-5 w-5 shrink-0", isActive && "text-primary")} />
-      {!isCollapsed && <span>{label}</span>}
-      {!isCollapsed && isActive && (
-        <div className="ml-auto h-1.5 w-1.5 rounded-full bg-primary" />
-      )}
-    </Link>
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem className="flex items-center justify-between gap-2">
+            <SidebarMenuButton asChild size="lg" tooltip="Hono" className="flex-1">
+              <Link to="/dashboard">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                  <Icons.command className="size-4" />
+                </div>
+                <Text as="span" weight="semibold">Hono</Text>
+              </Link>
+            </SidebarMenuButton>
+            {/* Collapse trigger lives in the sidebar header (right of the logo),
+                matching Seven's single-mode; hidden when collapsed to icon rail. */}
+            <SidebarTrigger className="-mr-1 group-data-[collapsible=icon]:hidden" />
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Main</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {mainNavItems.map((item) => {
+                const active = location.pathname === item.to
+                return (
+                  <SidebarMenuItem key={item.to}>
+                    <SidebarMenuButton asChild isActive={active} tooltip={item.label}>
+                      <Link aria-current={active ? 'page' : undefined} to={item.to}>
+                        <item.icon />
+                        <span>{item.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                )
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarGroupLabel>Account</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {accountNavItems.map((item) => {
+                const active = location.pathname === item.to
+                return (
+                  <SidebarMenuItem key={item.to}>
+                    <SidebarMenuButton asChild isActive={active} tooltip={item.label}>
+                      <Link aria-current={active ? 'page' : undefined} to={item.to}>
+                        <item.icon />
+                        <span>{item.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                )
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton tooltip={`Theme: ${theme}`} onClick={cycleTheme}>
+              {resolvedTheme === 'dark' ? <Icons.moon /> : <Icons.sun />}
+              <span>Theme</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton size="lg">
+                  <Avatar className="size-8 rounded-lg">
+                    <AvatarImage alt={user?.name ?? ''} src={user?.picture ?? undefined} />
+                    <AvatarFallback className="rounded-lg text-xs">{initials}</AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+                    <span className="truncate font-medium">{user?.name}</span>
+                    <span className="truncate text-xs text-muted-foreground">{user?.email}</span>
+                  </div>
+                  <Icons.chevronRight className="ml-auto size-4 rotate-90 group-data-[collapsible=icon]:hidden" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56" side="top">
+                <DropdownMenuLabel className="truncate font-medium">
+                  {user?.name ?? user?.email}
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem disabled={isLoggingOut} onClick={() => { logout() }}>
+                  <Icons.logout />
+                  Sign out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
   )
 }
diff --git a/packages/bhono-app/templates/base/src/client/components/ui/error-fallback.tsx b/packages/bhono-app/templates/base/src/client/components/ui/error-fallback.tsx
index 0fdd348..bff250d 100644
--- a/packages/bhono-app/templates/base/src/client/components/ui/error-fallback.tsx
+++ b/packages/bhono-app/templates/base/src/client/components/ui/error-fallback.tsx
@@ -148,8 +148,8 @@ export function Unauthorized({
     <div className="flex min-h-[400px] items-center justify-center p-6">
       <div className="mx-auto max-w-md text-center">
         {/* Icon */}
-        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-amber-500/10">
-          <AlertTriangle className="h-8 w-8 text-amber-500" />
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-warning-subtle">
+          <AlertTriangle className="h-8 w-8 text-warning" />
         </div>
 
         {/* Title */}
diff --git a/packages/bhono-app/templates/base/src/client/components/ui/input.tsx b/packages/bhono-app/templates/base/src/client/components/ui/input.tsx
deleted file mode 100644
index d9511fc..0000000
--- a/packages/bhono-app/templates/base/src/client/components/ui/input.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { ComponentProps, Ref } from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({
-  className,
-  type,
-  ref,
-  ...props
-}: ComponentProps<"input"> & { ref?: Ref<HTMLInputElement> }) {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-}
-
-export { Input }
diff --git a/packages/bhono-app/templates/base/src/client/components/ui/loading-skeleton.tsx b/packages/bhono-app/templates/base/src/client/components/ui/loading-skeleton.tsx
index 39c24f6..f764f89 100644
--- a/packages/bhono-app/templates/base/src/client/components/ui/loading-skeleton.tsx
+++ b/packages/bhono-app/templates/base/src/client/components/ui/loading-skeleton.tsx
@@ -1,5 +1,4 @@
-import { Skeleton } from "./skeleton"
-import { Card, CardContent, CardHeader } from '@etus/seven-react'
+import { Card, CardContent, CardHeader, SkeletonLoader as Skeleton } from '@etus/seven-react'
 // Helper to create stable keys for skeleton items
 const skeletonItems = (count: number, prefix: string) =>
   Array.from({ length: count }, (_, i) => `${prefix}-${String(i)}`)
@@ -111,43 +110,3 @@ export function PageSkeleton() {
     </div>
   )
 }
-
-export function SidebarSkeleton() {
-  return (
-    <aside className="flex h-screen w-64 flex-col border-r bg-sidebar">
-      {/* Header */}
-      <div className="flex h-14 items-center justify-between border-b px-3">
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-8 w-8 rounded-lg" />
-          <Skeleton className="h-5 w-16" />
-        </div>
-      </div>
-
-      {/* Navigation */}
-      <nav className="flex-1 space-y-1 p-2">
-        <Skeleton className="h-4 w-12 mx-3 my-2" />
-        {skeletonItems(3, "nav-main").map((key) => (
-          <Skeleton key={key} className="h-10 w-full rounded-lg" />
-        ))}
-
-        <div className="my-4" />
-
-        <Skeleton className="h-4 w-16 mx-3 my-2" />
-        {skeletonItems(2, "nav-account").map((key) => (
-          <Skeleton key={key} className="h-10 w-full rounded-lg" />
-        ))}
-      </nav>
-
-      {/* User profile */}
-      <div className="border-t p-3">
-        <div className="flex items-center gap-3 p-2">
-          <Skeleton className="h-9 w-9 rounded-full" />
-          <div className="flex-1 space-y-2">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-3 w-32" />
-          </div>
-        </div>
-      </div>
-    </aside>
-  )
-}
diff --git a/packages/bhono-app/templates/base/src/client/components/ui/separator.tsx b/packages/bhono-app/templates/base/src/client/components/ui/separator.tsx
deleted file mode 100644
index 3676ce5..0000000
--- a/packages/bhono-app/templates/base/src/client/components/ui/separator.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { HTMLAttributes, Ref } from "react"
-
-import { cn } from "@/lib/utils"
-
-interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
-  orientation?: "horizontal" | "vertical"
-  decorative?: boolean
-  ref?: Ref<HTMLDivElement>
-}
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ref,
-  ...props
-}: SeparatorProps) {
-  return (
-    <div
-      ref={ref}
-      role={decorative ? "none" : "separator"}
-      aria-orientation={decorative ? undefined : orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
diff --git a/packages/bhono-app/templates/base/src/client/components/ui/skeleton.tsx b/packages/bhono-app/templates/base/src/client/components/ui/skeleton.tsx
deleted file mode 100644
index 2374b67..0000000
--- a/packages/bhono-app/templates/base/src/client/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/packages/bhono-app/templates/base/src/client/components/ui/sonner.tsx b/packages/bhono-app/templates/base/src/client/components/ui/sonner.tsx
deleted file mode 100644
index 8cfbe6f..0000000
--- a/packages/bhono-app/templates/base/src/client/components/ui/sonner.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Toaster as Sonner } from "sonner"
-import { useTheme } from "@/hooks/use-theme"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-function Toaster({ ...props }: ToasterProps) {
-  const { resolvedTheme } = useTheme()
-
-  return (
-    <Sonner
-      theme={resolvedTheme}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }
diff --git a/packages/bhono-app/templates/base/src/client/index.css b/packages/bhono-app/templates/base/src/client/index.css
index 3900338..96abed3 100644
--- a/packages/bhono-app/templates/base/src/client/index.css
+++ b/packages/bhono-app/templates/base/src/client/index.css
@@ -40,123 +40,16 @@
   --color-info-solid: oklch(61.19% 0.1963 255.1);
   --color-info-solid-foreground: oklch(100% 0 0);
 
-  /* --- Green Palette (Primary) --- */
-  --color-green-50: oklch(97.78% 0.0219 153.08);
-  --color-green-100: oklch(94.42% 0.0639 151.07);
-  --color-green-200: oklch(89.76% 0.1134 150.7);
-  --color-green-300: oklch(83.6% 0.1697 150.26);
-  --color-green-400: oklch(81.06% 0.2032 150.12);
-  --color-green-500: oklch(72.27% 0.1939 149.58);
-  --color-green-600: oklch(59.49% 0.1623 148.36);
-  --color-green-700: oklch(48.24% 0.1293 148.23);
-  --color-green-800: oklch(40.42% 0.1025 149.21);
-  --color-green-900: oklch(35.66% 0.0827 151.04);
-  --color-green-950: oklch(22.73% 0.0553 152.1);
-
-  /* --- Blue Palette --- */
-  --color-blue-50: oklch(97.05% 0.0139 236.62);
-  --color-blue-100: oklch(93.22% 0.032 254.6);
-  --color-blue-200: oklch(88.25% 0.0599 252.3);
-  --color-blue-300: oklch(80.93% 0.1054 251.81);
-  --color-blue-400: oklch(71.4% 0.1527 248.66);
-  --color-blue-500: oklch(61.19% 0.1963 255.1);
-  --color-blue-600: oklch(54.62% 0.2148 262.88);
-  --color-blue-700: oklch(48.82% 0.2171 264.38);
-  --color-blue-800: oklch(42.44% 0.1776 265.64);
-  --color-blue-900: oklch(37.91% 0.1383 265.52);
-  --color-blue-950: oklch(28.24% 0.0913 267.94);
-
-  /* --- Gray Palette --- */
-  --color-gray-50: oklch(98.51% 0 0);
-  --color-gray-100: oklch(96.83% 0 0);
-  --color-gray-200: oklch(92.2% 0 0);
-  --color-gray-300: oklch(87.17% 0 0);
-  --color-gray-400: oklch(70.7% 0 0);
-  --color-gray-500: oklch(55.55% 0.0234 264.36);
-  --color-gray-600: oklch(44.62% 0.0303 265.75);
-  --color-gray-700: oklch(37.18% 0.0275 265.75);
-  --color-gray-800: oklch(27.81% 0.0275 265.75);
-  --color-gray-900: oklch(20.79% 0.0424 265.75);
-  --color-gray-950: oklch(12.94% 0.0219 264.7);
-
-  /* --- Red Palette --- */
-  --color-red-50: oklch(97.05% 0.013 17.38);
-  --color-red-100: oklch(93.58% 0.0294 17.72);
-  --color-red-200: oklch(88.61% 0.0605 18.33);
-  --color-red-300: oklch(80.79% 0.1108 19.57);
-  --color-red-400: oklch(70.44% 0.1912 22.21);
-  --color-red-500: oklch(62.8% 0.2577 29.23);
-  --color-red-600: oklch(57.71% 0.2449 27.33);
-  --color-red-700: oklch(50.54% 0.2059 27.52);
-  --color-red-800: oklch(44.38% 0.1715 26.9);
-  --color-red-900: oklch(39.59% 0.1407 25.72);
-  --color-red-950: oklch(25.82% 0.0913 26.04);
-
-  /* --- Yellow Palette --- */
-  --color-yellow-50: oklch(98.69% 0.0294 102.85);
-  --color-yellow-100: oklch(97.35% 0.0769 103.19);
-  --color-yellow-200: oklch(94.49% 0.1297 99.39);
-  --color-yellow-300: oklch(90.54% 0.1638 91.39);
-  --color-yellow-400: oklch(85.2% 0.1702 84.43);
-  --color-yellow-500: oklch(79.88% 0.1702 70.08);
-  --color-yellow-600: oklch(66.59% 0.1587 52.25);
-  --color-yellow-700: oklch(55.47% 0.1424 47.09);
-  --color-yellow-800: oklch(47.64% 0.1211 46.2);
-  --color-yellow-900: oklch(42.16% 0.1036 47.45);
-  --color-yellow-950: oklch(28.6% 0.0719 48.72);
-
-  /* --- Pink Palette --- */
-  --color-pink-50: oklch(97.05% 0.0155 343.23);
-  --color-pink-100: oklch(94.05% 0.0326 343.23);
-  --color-pink-200: oklch(89.76% 0.0613 343.23);
-  --color-pink-300: oklch(82.33% 0.1108 343.23);
-  --color-pink-400: oklch(71.4% 0.1912 343.23);
-  --color-pink-500: oklch(65.64% 0.2196 354.31);
-  --color-pink-600: oklch(59.13% 0.2268 0.19);
-  --color-pink-700: oklch(52.55% 0.2059 1.26);
-  --color-pink-800: oklch(45.47% 0.1697 359.77);
-  --color-pink-900: oklch(40.42% 0.1407 358.28);
-  --color-pink-950: oklch(27.09% 0.0981 356.03);
-
-  /* --- Main-1 Palette --- */
-  --color-main1-50: oklch(96.68% 0.0164 237.45);
-  --color-main1-100: oklch(93.95% 0.0314 238.02);
-  --color-main1-200: oklch(89.4% 0.0555 236.93);
-  --color-main1-300: oklch(82.7% 0.0913 239.23);
-  --color-main1-400: oklch(74.7% 0.1211 236.02);
-  --color-main1-500: oklch(63.87% 0.1424 239.23);
-  --color-main1-600: oklch(54.26% 0.137 241.31);
-  --color-main1-700: oklch(47.27% 0.1163 240.99);
-  --color-main1-800: oklch(40.42% 0.0949 241.31);
-  --color-main1-900: oklch(35.66% 0.0769 243.07);
-  --color-main1-950: oklch(26.36% 0.0555 246.77);
-
-  /* --- Main-2 Palette --- */
-  --color-main2-50: oklch(96.68% 0.0196 246.77);
-  --color-main2-100: oklch(93.58% 0.0408 248.66);
-  --color-main2-200: oklch(88.61% 0.0739 247.97);
-  --color-main2-300: oklch(80.93% 0.1211 249.74);
-  --color-main2-400: oklch(71.4% 0.1638 251.81);
-  --color-main2-500: oklch(59.85% 0.1912 256.27);
-  --color-main2-600: oklch(50.17% 0.1912 260.73);
-  --color-main2-700: oklch(43.52% 0.1702 262.04);
-  --color-main2-800: oklch(37.91% 0.1407 263.36);
-  --color-main2-900: oklch(33.43% 0.1163 265.04);
-  --color-main2-950: oklch(25.1% 0.0827 267.35);
-
-  /* --- Border Radius --- */
-  --radius-xs: 0.0625rem;
-  --radius-sm: 0.125rem;
-  --radius-md: 0.25rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 0.875rem;
-  --radius-full: 9999px;
-
-  /* --- Typography --- */
+  /* Paletas de cor locais (green/blue/gray/red/yellow/pink/main1/main2) removidas
+     (D1 = opção b): o Seven é a fonte única de cor (--primary/--secondary/--brand-*).
+     Decoração com cor arbitrária é proibida pelo DESIGN.md — os efeitos que as
+     usavam foram removidos abaixo. */
+
+  /* Radius: fornecido pelo Seven (@etus/tokens) — escala local removida (D2). */
+
+  /* --- Typography (Seven: Inter + JetBrains Mono; sem serif/Geist/Space Grotesk) --- */
   --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  --font-serif: "Georgia", Cambria, "Times New Roman", Times, serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
   /* --- Container --- */
   --container-xs: 20rem;
@@ -172,11 +65,7 @@
   --container-7xl: 80rem;
 
   /* --- Shadows --- */
-  --shadow-xs: 0px 1px 2px 0px oklch(0% 0 0 / 0.05);
-  --shadow-sm: 0px 1px 3px 0px oklch(0% 0 0 / 0.1), 0px 1px 2px -1px oklch(0% 0 0 / 0.1);
-  --shadow-md: 0px 4px 6px -1px oklch(0% 0 0 / 0.1), 0px 2px 4px -2px oklch(0% 0 0 / 0.1);
-  --shadow-lg: 0px 10px 15px -3px oklch(0% 0 0 / 0.1), 0px 4px 6px -4px oklch(0% 0 0 / 0.1);
-  --shadow-xl: 0px 20px 25px -5px oklch(0% 0 0 / 0.1), 0px 8px 10px -6px oklch(0% 0 0 / 0.1);
+  /* shadow xs–xl: fornecidos pelo Seven (D2); mantido só o extra: */
   --shadow-2xl: 0px 25px 50px -12px oklch(0% 0 0 / 0.25);
   --shadow-inner: inset 0px 2px 4px 0px oklch(0% 0 0 / 0.05);
 
@@ -211,23 +100,9 @@
   --card-padding: 1.5rem;         /* 24px - card internal padding */
   --card-padding-compact: 1rem;   /* 16px - compact card padding */
 
-  /* --- Breakpoints --- */
-  --breakpoint-sm: 40rem;         /* 640px - mobile landscape */
-  --breakpoint-md: 48rem;         /* 768px - tablets */
-  --breakpoint-lg: 64rem;         /* 1024px - desktop */
-  --breakpoint-xl: 80rem;         /* 1280px - large desktop */
-  --breakpoint-2xl: 96rem;        /* 1536px - wide screens */
-
-  /* --- Typography Scale (Major Third - 1.25) --- */
-  --text-xs: 0.75rem;             /* 12px */
-  --text-sm: 0.875rem;            /* 14px */
-  --text-base: 1rem;              /* 16px */
-  --text-lg: 1.125rem;            /* 18px */
-  --text-xl: 1.25rem;             /* 20px */
-  --text-2xl: 1.5rem;             /* 24px */
-  --text-3xl: 1.875rem;           /* 30px */
-  --text-4xl: 2.25rem;            /* 36px */
-  --text-5xl: 3rem;               /* 48px */
+  /* Breakpoints: fornecidos pelo Seven (sm 360 / md 768 / lg 1024 / xl 1280 / 2xl 1440) — D2. */
+
+  /* Type scale (--text-*): fornecida pelo Seven (2xs…9xl) — D2. */
 
   /* --- Line Heights --- */
   --leading-none: 1;
@@ -237,14 +112,7 @@
   --leading-relaxed: 1.625;
   --leading-loose: 2;
 
-  /* --- Font Weights --- */
-  --font-thin: 100;
-  --font-light: 300;
-  --font-normal: 400;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-  --font-extrabold: 800;
+  /* Font weights: Tailwind usa --font-weight-* (Seven, 100–900). Locais removidos (D2). */
 
   /* --- Grid System --- */
   --grid-gap-xs: 0.5rem;          /* 8px - tight grid */
@@ -500,32 +368,8 @@ body {
    Scrollbar Styling
    ======================================== */
 
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--color-muted);
-  border-radius: var(--radius-full);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-gray-400);
-  border-radius: var(--radius-full);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-gray-500);
-}
-
-.dark ::-webkit-scrollbar-thumb {
-  background: var(--color-gray-600);
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-gray-500);
-}
+/* Scrollbar: fornecido pelo Seven (@etus/ui/styles.css, tokenizado cross-browser).
+   Bloco local removido para não duplicar/divergir. */
 
 /* ========================================
    Loading & Skeleton States
@@ -535,7 +379,7 @@ body {
   background: linear-gradient(
     90deg in oklch,
     var(--color-muted) 25%,
-    var(--color-gray-200) 50%,
+    var(--color-border) 50%,
     var(--color-muted) 75%
   );
   background-size: 200% 100%;
@@ -546,68 +390,15 @@ body {
     background: linear-gradient(
       90deg in oklch,
       var(--color-muted) 25%,
-      var(--color-gray-700) 50%,
+      var(--color-border) 50%,
       var(--color-muted) 75%
     );
   }
 }
 
-/* ========================================
-   Glass Effect
-   ======================================== */
-
-@utility glass {
-  background: oklch(100% 0 0 / 0.7);
-  backdrop-filter: blur(var(--blur-lg));
-  border: 1px solid oklch(100% 0 0 / 0.2);
-
-  @variant dark {
-    background: oklch(12.94% 0.0219 264.7 / 0.7);
-    border: 1px solid oklch(100% 0 0 / 0.1);
-  }
-}
-
-/* ========================================
-   Gradient Utilities
-   ======================================== */
-
-@utility gradient-primary {
-  background: linear-gradient(
-    135deg in oklch,
-    var(--color-green-400) 0%,
-    var(--color-green-500) 50%,
-    var(--color-green-600) 100%
-  );
-}
-
-@utility gradient-accent {
-  background: linear-gradient(
-    135deg in oklch,
-    var(--color-blue-400) 0%,
-    var(--color-main2-500) 50%,
-    var(--color-pink-500) 100%
-  );
-}
-
-@utility gradient-warm {
-  background: linear-gradient(
-    135deg in oklch,
-    var(--color-yellow-400) 0%,
-    var(--color-red-400) 100%
-  );
-}
-
-/* Text gradient */
-@utility text-gradient-primary {
-  background: linear-gradient(
-    135deg in oklch,
-    var(--color-green-400) 0%,
-    var(--color-green-600) 100%
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
+/* Glass effect e gradientes decorativos removidos — proibidos pelo DESIGN.md do
+   Seven (sem texture / ambient gradients / glassmorphism / "AI purple"). Não eram
+   usados em nenhuma tela. */
 
 /* ========================================
    Enter Animations (@starting-style)
@@ -688,44 +479,8 @@ body {
   container-name: main;
 }
 
-/* ========================================
-   Advanced Gradient Utilities
-   ======================================== */
-
-/* Radial gradients for highlights */
-@utility gradient-radial-primary {
-  background: radial-gradient(circle at center, var(--color-green-400) 0%, transparent 70%);
-}
-
-@utility gradient-radial-accent {
-  background: radial-gradient(circle at center, var(--color-blue-400) 0%, transparent 70%);
-}
-
-@utility gradient-radial-glow {
-  background: radial-gradient(ellipse at top, var(--color-primary) 0%, transparent 50%);
-}
-
-/* Conic gradients for spinners/progress */
-@utility gradient-conic-spinner {
-  background: conic-gradient(from 0deg, transparent 0deg, var(--color-primary) 270deg, transparent 360deg);
-}
-
-@utility gradient-conic-progress {
-  background: conic-gradient(var(--color-primary) var(--progress, 0%), var(--color-muted) 0%);
-}
-
-@utility gradient-conic-rainbow {
-  background: conic-gradient(
-    in oklch,
-    var(--color-red-500) 0deg,
-    var(--color-yellow-500) 60deg,
-    var(--color-green-500) 120deg,
-    var(--color-blue-500) 180deg,
-    var(--color-main2-500) 240deg,
-    var(--color-pink-500) 300deg,
-    var(--color-red-500) 360deg
-  );
-}
+/* Gradientes avançados (radial/conic/rainbow) removidos — decoração proibida pelo
+   DESIGN.md do Seven; não usados em nenhuma tela. */
 
 /* ========================================
    Form Field Utilities
@@ -820,3 +575,15 @@ Use in-* when:
 - Parent is a third-party component
 - You want implicit parent state detection
 */
+
+/* ── Shell: borderless sidebar ──────────────────────────────────────────────
+   The single-mode Sidebar (variant="sidebar") ships a right border — shadcn's
+   default for a standard sidebar shell. But this layout separates content with
+   the tucked card (SidebarInset content: rounded-tl + border), so that border is
+   redundant: it runs the full height (behind the topbar) and draws an orphan line
+   that clashes with the card's rounded corner. Drop it — the --sidebar bg tint
+   (98.5% vs 100% background) still gives a soft edge. Unlayered so it beats
+   Tailwind's group-data-[side=left]:border-r utility without !important. */
+[data-slot="sidebar-container"] {
+  border-right-width: 0;
+}
diff --git a/packages/bhono-app/templates/base/src/client/main.tsx b/packages/bhono-app/templates/base/src/client/main.tsx
index bef0a05..6d3b65e 100644
--- a/packages/bhono-app/templates/base/src/client/main.tsx
+++ b/packages/bhono-app/templates/base/src/client/main.tsx
@@ -7,7 +7,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { router } from './router'
 import { queryClient } from './lib/query-client'
 import { ThemeProvider } from './hooks/use-theme'
-import { Toaster } from './components/ui/sonner'
+import { AppToaster } from './components/app-toaster'
 import './index.css'
 
 const rootElement = document.getElementById('root')
@@ -18,7 +18,7 @@ createRoot(rootElement).render(
     <ThemeProvider>
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
-        <Toaster />
+        <AppToaster />
         {import.meta.env.DEV && <ReactQueryDevtools />}
       </QueryClientProvider>
     </ThemeProvider>
diff --git a/packages/bhono-app/templates/base/src/client/routes/$.tsx b/packages/bhono-app/templates/base/src/client/routes/$.tsx
index c84e00c..1004cb6 100644
--- a/packages/bhono-app/templates/base/src/client/routes/$.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/$.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
-import { Button } from '@etus/seven-react'
+import { Button, ErrorPage, Link as SevenLink, Text } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 
 export const Route = createFileRoute('/$')({
@@ -12,66 +12,47 @@ function NotFoundPage() {
       {/* Header */}
       <header className="container flex h-14 items-center">
         <Link to="/" className="flex items-center space-x-2">
-          <Icons.command className="h-6 w-6" />
+          <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+            <Icons.command className="size-4" />
+          </div>
           <span className="font-semibold">Hono</span>
         </Link>
       </header>
 
-      {/* Main Content */}
+      {/* Main Content — Seven ErrorPage (English copy to match the rest of the app) */}
       <main className="flex flex-1 items-center justify-center px-4">
-        <div className="mx-auto max-w-md text-center">
-          {/* Large 404 */}
-          <div className="relative mb-8">
-            <div className="text-[12rem] font-bold leading-none tracking-tighter text-muted/20 select-none">
-              404
-            </div>
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="rounded-full bg-background px-6 py-2 shadow-lg ring-1 ring-border">
-                <span className="text-lg font-medium">Page not found</span>
+        <ErrorPage
+          type="404"
+          title="Page not found"
+          description="The page you're looking for doesn't exist or was moved."
+          showHomeLink={false}
+          actions={
+            <>
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
+                <Button asChild>
+                  <Link to="/">
+                    <Icons.arrowRight className="rotate-180" />
+                    Back to Home
+                  </Link>
+                </Button>
+                <Button variant="outline" asChild>
+                  <Link to="/dashboard">
+                    <Icons.dashboard />
+                    Go to Dashboard
+                  </Link>
+                </Button>
               </div>
-            </div>
-          </div>
-
-          {/* Message */}
-          <p className="mb-8 text-muted-foreground">
-            The page you're looking for doesn't exist or has been moved.
-            Let's get you back on track.
-          </p>
-
-          {/* Actions */}
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
-            <Button asChild>
-              <Link to="/">
-                <Icons.arrowRight className="mr-2 h-4 w-4 rotate-180" />
-                Back to Home
-              </Link>
-            </Button>
-            <Button variant="outline" asChild>
-              <Link to="/dashboard">
-                <Icons.dashboard className="mr-2 h-4 w-4" />
-                Go to Dashboard
-              </Link>
-            </Button>
-          </div>
-
-          {/* Help Link */}
-          <p className="mt-8 text-sm text-muted-foreground">
-            Need help?{' '}
-            <a
-              href="mailto:support@example.com"
-              className="font-medium text-foreground underline underline-offset-4"
-            >
-              Contact support
-            </a>
-          </p>
-        </div>
+              <Text variant="caption1" color="muted">
+                Need help?{' '}
+                {/* TODO: replace with the product's real support email */}
+                <SevenLink href="mailto:support@example.com" variant="inline">
+                  Contact support
+                </SevenLink>
+              </Text>
+            </>
+          }
+        />
       </main>
-
-      {/* Decorative Background */}
-      <div className="fixed inset-0 -z-10 overflow-hidden">
-        <div className="absolute -top-40 right-0 h-[500px] w-[500px] rounded-full bg-primary/5 blur-3xl" />
-        <div className="absolute -bottom-40 left-0 h-[500px] w-[500px] rounded-full bg-primary/5 blur-3xl" />
-      </div>
     </div>
   )
 }
diff --git a/packages/bhono-app/templates/base/src/client/routes/_authenticated.tsx b/packages/bhono-app/templates/base/src/client/routes/_authenticated.tsx
index 80fa958..10c03f2 100644
--- a/packages/bhono-app/templates/base/src/client/routes/_authenticated.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/_authenticated.tsx
@@ -1,7 +1,18 @@
-import { createFileRoute, Outlet, redirect, useRouter } from '@tanstack/react-router'
-import { Sidebar } from '@/components/sidebar'
+import type { ReactNode } from 'react'
+import { createFileRoute, Outlet, redirect, useRouter, useRouterState } from '@tanstack/react-router'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  SidebarInset,
+  SidebarProvider,
+  Topbar,
+  TopbarLeading,
+} from '@etus/seven-react'
+import { AppSidebar } from '@/components/sidebar'
 import { ErrorFallback } from '@/components/ui/error-fallback'
-import { SidebarSkeleton, PageSkeleton } from '@/components/ui/loading-skeleton'
+import { PageSkeleton } from '@/components/ui/loading-skeleton'
 import { queryClient } from '@/lib/query-client'
 
 export const Route = createFileRoute('/_authenticated')({
@@ -20,30 +31,56 @@ export const Route = createFileRoute('/_authenticated')({
   errorComponent: AuthenticatedErrorComponent,
 })
 
-function AuthenticatedLayout() {
+/** Topbar breadcrumb derived from the first path segment. */
+function RouteBreadcrumb() {
+  const { location } = useRouterState()
+  const seg = location.pathname.split('/').find(Boolean)
+  const label = seg ? seg.charAt(0).toUpperCase() + seg.slice(1) : 'Dashboard'
+
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar />
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbPage className="font-semibold">{label}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
 
-      {/* Main content */}
-      <main className="flex-1 overflow-y-auto">
-        <div className="container max-w-[var(--content-width)] p-8">
-          <Outlet />
+/** Canonical Seven app shell: collapsible sidebar + inset with topbar and tucked content. */
+function AppShell({ children }: { children: ReactNode }) {
+  return (
+    <SidebarProvider mode="single">
+      <AppSidebar />
+      <SidebarInset>
+        <header>
+          <Topbar variant="default" className="h-12">
+            <TopbarLeading>
+              <RouteBreadcrumb />
+            </TopbarLeading>
+          </Topbar>
+        </header>
+        <div className="flex-1 overflow-auto rounded-tl-[24px] border bg-background px-8 py-6">
+          {children}
         </div>
-      </main>
-    </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AuthenticatedLayout() {
+  return (
+    <AppShell>
+      <Outlet />
+    </AppShell>
   )
 }
 
 export function AuthenticatedPendingComponent() {
   return (
-    <div className="flex h-screen overflow-hidden">
-      <SidebarSkeleton />
-      <main className="flex-1 overflow-y-auto">
-        <div className="container max-w-[var(--content-width)] p-8">
-          <PageSkeleton />
-        </div>
-      </main>
+    <div className="flex h-screen items-center justify-center p-8">
+      <PageSkeleton />
     </div>
   )
 }
@@ -52,18 +89,15 @@ export function AuthenticatedErrorComponent({ error }: { error: Error }) {
   const router = useRouter()
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar />
-      <main className="flex-1 overflow-y-auto">
-        <ErrorFallback
-          error={error}
-          title="Something went wrong"
-          message="An error occurred while loading this page. Please try again."
-          onRetry={() => { void router.invalidate() }}
-          onGoBack={() => { router.history.back() }}
-          onGoHome={() => { void router.navigate({ to: '/dashboard' }) }}
-        />
-      </main>
+    <div className="flex h-screen items-center justify-center p-8">
+      <ErrorFallback
+        error={error}
+        title="Something went wrong"
+        message="An error occurred while loading this page. Please try again."
+        onRetry={() => { void router.invalidate() }}
+        onGoBack={() => { router.history.back() }}
+        onGoHome={() => { void router.navigate({ to: '/dashboard' }) }}
+      />
     </div>
   )
 }
diff --git a/packages/bhono-app/templates/base/src/client/routes/_authenticated/account.tsx b/packages/bhono-app/templates/base/src/client/routes/_authenticated/account.tsx
index fd05964..4cd0bae 100644
--- a/packages/bhono-app/templates/base/src/client/routes/_authenticated/account.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/_authenticated/account.tsx
@@ -5,6 +5,15 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { toast } from 'sonner'
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Badge,
   Button,
   Card,
@@ -19,15 +28,17 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  Divider,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  Heading,
+  Text,
+  TextInput,
 } from '@etus/seven-react'
-import { Input } from '@/components/ui/input'
-import { Separator } from '@/components/ui/separator'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 
@@ -38,23 +49,48 @@ export const Route = createFileRoute('/_authenticated/account')({
 function AccountPage() {
   const { user }  = useAuth()
 
+  // TODO(stub): wire GitHub OAuth account-link flow
+  const handleConnectGitHub = () => {
+    toast.info('Conectar GitHub — em breve')
+  }
+
+  // TODO(stub): wire 2FA setup flow
+  const handleEnable2FA = () => {
+    toast.info('Ativar 2FA — em breve')
+  }
+
+  // TODO(stub): wire revoke-all-sessions endpoint
+  const handleSignOutAll = () => {
+    toast.info('Encerrar todas as sessões — em breve')
+  }
+
+  // TODO(stub): wire API key creation flow
+  const handleCreateKey = () => {
+    toast.info('Criar API key — em breve')
+  }
+
+  // TODO(stub): wire data export
+  const handleExport = () => {
+    toast.info('Exportar dados — em breve')
+  }
+
   return (
     <div className="space-y-8">
       {/* Page Header */}
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Account</h1>
-        <p className="text-muted-foreground">
+        <Heading level={1} size="2xl" weight="semibold">Account</Heading>
+        <Text variant="p2" color="muted">
           Manage your account settings, security, and connected services.
-        </p>
+        </Text>
       </div>
 
       {/* Connected Accounts Section */}
       <section className="space-y-4">
         <div>
-          <h2 className="text-lg font-medium">Connected Accounts</h2>
-          <p className="text-sm text-muted-foreground">
+          <Heading level={2} size="lg" weight="medium">Connected Accounts</Heading>
+          <Text variant="p3" color="muted">
             Manage OAuth providers linked to your account.
-          </p>
+          </Text>
         </div>
 
         <div className="grid gap-4">
@@ -66,17 +102,17 @@ function AccountPage() {
               </div>
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                  <p className="font-medium">Google</p>
+                  <Text variant="p2" weight="medium">Google</Text>
                   <Badge color="success" className="text-xs">Connected</Badge>
                 </div>
-                <p className="text-sm text-muted-foreground truncate">
+                <Text variant="p3" color="muted" truncate>
                   {user?.email}
-                </p>
+                </Text>
               </div>
               <div className="flex items-center gap-2">
-                <span className="text-xs text-muted-foreground hidden sm:block">
+                <Text variant="caption1" color="muted" className="hidden sm:block">
                   Primary login method
-                </span>
+                </Text>
               </div>
             </div>
           </Card>
@@ -89,14 +125,14 @@ function AccountPage() {
               </div>
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                  <p className="font-medium">GitHub</p>
+                  <Text variant="p2" weight="medium">GitHub</Text>
                   <Badge type="badge-outline" className="text-xs">Not connected</Badge>
                 </div>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p3" color="muted">
                   Connect for additional sign-in options
-                </p>
+                </Text>
               </div>
-              <Button variant="outline" size="sm">
+              <Button variant="outline" size="sm" onClick={handleConnectGitHub}>
                 <Icons.plus className="mr-2 h-4 w-4" />
                 Connect
               </Button>
@@ -105,34 +141,34 @@ function AccountPage() {
         </div>
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* Security Section */}
       <section className="space-y-4">
         <div>
-          <h2 className="text-lg font-medium">Security</h2>
-          <p className="text-sm text-muted-foreground">
+          <Heading level={2} size="lg" weight="medium">Security</Heading>
+          <Text variant="p3" color="muted">
             Keep your account secure with these settings.
-          </p>
+          </Text>
         </div>
 
         <div className="grid gap-4">
           {/* Two-Factor Authentication */}
           <Card>
             <div className="flex items-center gap-4 p-4">
-              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/30">
-                <Icons.shield className="h-6 w-6 text-amber-600 dark:text-amber-400" />
+              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-warning-subtle">
+                <Icons.shield className="h-6 w-6 text-warning" />
               </div>
               <div className="flex-1">
                 <div className="flex items-center gap-2">
-                  <p className="font-medium">Two-Factor Authentication</p>
+                  <Text variant="p2" weight="medium">Two-Factor Authentication</Text>
                   <Badge color="warning" className="text-xs">Recommended</Badge>
                 </div>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p3" color="muted">
                   Add an extra layer of security to your account
-                </p>
+                </Text>
               </div>
-              <Button variant="outline" size="sm">
+              <Button variant="outline" size="sm" onClick={handleEnable2FA}>
                 Enable
               </Button>
             </div>
@@ -145,10 +181,10 @@ function AccountPage() {
                 <Icons.key className="h-6 w-6 text-muted-foreground" />
               </div>
               <div className="flex-1">
-                <p className="font-medium">Password</p>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p2" weight="medium">Password</Text>
+                <Text variant="p3" color="muted">
                   Using OAuth login - no password set
-                </p>
+                </Text>
               </div>
               <Button variant="outline" size="sm" disabled>
                 <Icons.pencil className="mr-2 h-4 w-4" />
@@ -159,20 +195,39 @@ function AccountPage() {
         </div>
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* Active Sessions Section */}
       <section className="space-y-4">
         <div className="flex items-center justify-between">
           <div>
-            <h2 className="text-lg font-medium">Active Sessions</h2>
-            <p className="text-sm text-muted-foreground">
+            <Heading level={2} size="lg" weight="medium">Active Sessions</Heading>
+            <Text variant="p3" color="muted">
               Devices where you're currently logged in.
-            </p>
+            </Text>
           </div>
-          <Button variant="outline" size="sm">
-            Sign out all
-          </Button>
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="outline" size="sm">
+                Sign out all
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Sign out all sessions?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This signs you out on every other device. You'll need to sign in
+                  again on those devices. Your current session stays active.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="destructive" onClick={handleSignOutAll}>
+                  Sign out all
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
         </div>
 
         <div className="grid gap-4">
@@ -190,22 +245,22 @@ function AccountPage() {
         </div>
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* API Access Section */}
       <section className="space-y-4">
         <div>
-          <h2 className="text-lg font-medium">API Access</h2>
-          <p className="text-sm text-muted-foreground">
+          <Heading level={2} size="lg" weight="medium">API Access</Heading>
+          <Text variant="p3" color="muted">
             Manage API keys for programmatic access.
-          </p>
+          </Text>
         </div>
 
         <Card>
           <CardHeader className="pb-3">
             <div className="flex items-center justify-between">
               <CardTitle className="text-base">API Keys</CardTitle>
-              <Button size="sm">
+              <Button size="sm" onClick={handleCreateKey}>
                 <Icons.plus className="mr-2 h-4 w-4" />
                 Create Key
               </Button>
@@ -217,26 +272,26 @@ function AccountPage() {
           <CardContent>
             <div className="rounded-lg border border-dashed p-8 text-center">
               <Icons.key className="mx-auto h-8 w-8 text-muted-foreground/50" />
-              <p className="mt-2 text-sm text-muted-foreground">
+              <Text variant="p3" color="muted" className="mt-2">
                 No API keys created yet
-              </p>
-              <p className="text-xs text-muted-foreground">
+              </Text>
+              <Text variant="caption1" color="muted" as="p">
                 Create a key to get started with the API
-              </p>
+              </Text>
             </div>
           </CardContent>
         </Card>
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* Danger Zone */}
       <section className="space-y-4">
         <div>
-          <h2 className="text-lg font-medium text-destructive">Danger Zone</h2>
-          <p className="text-sm text-muted-foreground">
+          <Heading level={2} size="lg" weight="medium" color="destructive">Danger Zone</Heading>
+          <Text variant="p3" color="muted">
             Irreversible and destructive actions.
-          </p>
+          </Text>
         </div>
 
         <Card className="border-destructive/30 bg-destructive/5">
@@ -244,11 +299,11 @@ function AccountPage() {
             <div className="grid gap-4 sm:grid-cols-2">
               {/* Export Data */}
               <div className="space-y-2">
-                <p className="font-medium">Export Data</p>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p2" weight="medium">Export Data</Text>
+                <Text variant="p3" color="muted">
                   Download a copy of all your data.
-                </p>
-                <Button variant="outline" size="sm">
+                </Text>
+                <Button variant="outline" size="sm" onClick={handleExport}>
                   <Icons.arrowRight className="mr-2 h-4 w-4 -rotate-45" />
                   Export
                 </Button>
@@ -256,10 +311,10 @@ function AccountPage() {
 
               {/* Delete Account */}
               <div className="space-y-2">
-                <p className="font-medium">Delete Account</p>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p2" weight="medium">Delete Account</Text>
+                <Text variant="p3" color="muted">
                   Permanently delete your account and data.
-                </p>
+                </Text>
                 <DeleteAccountDialog userEmail={user?.email ?? ''} />
               </div>
             </div>
@@ -281,6 +336,11 @@ function SessionCard({
   lastActive: string
   isCurrent?: boolean
 }) {
+  // TODO(stub): wire per-session revoke endpoint
+  const handleSignOutSession = () => {
+    toast.info('Encerrar sessão — em breve')
+  }
+
   return (
     <div className="flex items-center gap-4 rounded-lg border p-4">
       <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
@@ -288,19 +348,38 @@ function SessionCard({
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <p className="font-medium text-sm">{device}</p>
+          <Text variant="p3" weight="medium">{device}</Text>
           {isCurrent && (
             <Badge color="success" className="text-xs">Current</Badge>
           )}
         </div>
-        <p className="text-xs text-muted-foreground">
+        <Text variant="caption1" color="muted" as="p">
           {location} · {lastActive}
-        </p>
+        </Text>
       </div>
       {!isCurrent && (
-        <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
-          <Icons.logout className="h-4 w-4" />
-        </Button>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
+              <Icons.logout className="h-4 w-4" />
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Sign out this session?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This signs out {device} in {location}. You'll need to sign in
+                again on that device.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction variant="destructive" onClick={handleSignOutSession}>
+                Sign out
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       )}
     </div>
   )
@@ -383,7 +462,7 @@ function DeleteAccountDialog({ userEmail }: { userEmail: string }) {
                       Type <span className="font-mono font-medium">{userEmail}</span> to confirm
                     </FormLabel>
                     <FormControl>
-                      <Input
+                      <TextInput
                         placeholder="Enter your email"
                         className="font-mono"
                         {...field}
diff --git a/packages/bhono-app/templates/base/src/client/routes/_authenticated/dashboard.tsx b/packages/bhono-app/templates/base/src/client/routes/_authenticated/dashboard.tsx
index 16791fd..c68e72d 100644
--- a/packages/bhono-app/templates/base/src/client/routes/_authenticated/dashboard.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/_authenticated/dashboard.tsx
@@ -1,5 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@etus/seven-react'
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DashboardCard, Heading, Text } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 
@@ -15,39 +16,39 @@ function DashboardPage() {
     <div className="space-y-8">
       {/* Welcome section */}
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">
+        <Heading level={1} size="2xl">
           Welcome back, {firstName}
-        </h1>
-        <p className="text-muted-foreground">
+        </Heading>
+        <Text variant="p2" color="muted">
           Here&apos;s an overview of your workspace.
-        </p>
+        </Text>
       </div>
 
       {/* Stats cards */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <StatsCard
+        <DashboardCard
           title="Total Users"
           value="0"
-          description="Active team members"
-          icon={<Icons.users className="h-4 w-4 text-muted-foreground" />}
+          valueDescription="Active team members"
+          icon={<Icons.users className="size-4" />}
         />
-        <StatsCard
+        <DashboardCard
           title="Accounts"
           value="1"
-          description="Connected accounts"
-          icon={<Icons.layers className="h-4 w-4 text-muted-foreground" />}
+          valueDescription="Connected accounts"
+          icon={<Icons.layers className="size-4" />}
         />
-        <StatsCard
+        <DashboardCard
           title="API Requests"
           value="0"
-          description="Last 30 days"
-          icon={<Icons.zap className="h-4 w-4 text-muted-foreground" />}
+          valueDescription="Last 30 days"
+          icon={<Icons.zap className="size-4" />}
         />
-        <StatsCard
+        <DashboardCard
           title="Uptime"
           value="100%"
-          description="Last 30 days"
-          icon={<Icons.globe className="h-4 w-4 text-muted-foreground" />}
+          valueDescription="Last 30 days"
+          icon={<Icons.globe className="size-4" />}
         />
       </div>
 
@@ -64,10 +65,15 @@ function DashboardPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground">
+            <Text variant="p3" color="muted">
               Use the API to send invitations or manage users programmatically.
-            </p>
+            </Text>
           </CardContent>
+          <CardFooter>
+            <Button asChild variant="outline" size="sm">
+              <Link to="/team">Invite members</Link>
+            </Button>
+          </CardFooter>
         </Card>
 
         <Card>
@@ -81,10 +87,22 @@ function DashboardPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground">
+            <Text variant="p3" color="muted">
               Built with SQL-first access to Cloudflare D1.
-            </p>
+            </Text>
           </CardContent>
+          <CardFooter>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                // TODO(stub)
+                toast.info('Database management is coming soon')
+              }}
+            >
+              Manage database
+            </Button>
+          </CardFooter>
         </Card>
 
         <Card>
@@ -98,10 +116,22 @@ function DashboardPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground">
+            <Text variant="p3" color="muted">
               Role-based access control and audit logging enabled.
-            </p>
+            </Text>
           </CardContent>
+          <CardFooter>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                // TODO(stub)
+                toast.info('Security settings are coming soon')
+              }}
+            >
+              Review security
+            </Button>
+          </CardFooter>
         </Card>
       </div>
 
@@ -114,38 +144,13 @@ function DashboardPage() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex h-32 items-center justify-center rounded-md border border-dashed">
-            <p className="text-sm text-muted-foreground">
+          <div className="flex h-32 items-center justify-center">
+            <Text variant="p3" color="muted">
               No recent activity
-            </p>
+            </Text>
           </div>
         </CardContent>
       </Card>
     </div>
   )
 }
-
-function StatsCard({
-  title,
-  value,
-  description,
-  icon,
-}: {
-  title: string
-  value: string
-  description: string
-  icon: React.ReactNode
-}) {
-  return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">{title}</CardTitle>
-        {icon}
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">{value}</div>
-        <p className="text-xs text-muted-foreground">{description}</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/packages/bhono-app/templates/base/src/client/routes/_authenticated/integrations.tsx b/packages/bhono-app/templates/base/src/client/routes/_authenticated/integrations.tsx
index 218b6fb..60e5675 100644
--- a/packages/bhono-app/templates/base/src/client/routes/_authenticated/integrations.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/_authenticated/integrations.tsx
@@ -3,10 +3,20 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Badge,
   Button,
   Card,
   CardContent,
+  Checkbox,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -14,6 +24,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  Divider,
   Form,
   FormControl,
   FormDescription,
@@ -21,9 +32,12 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  Heading,
+  SearchInput,
+  Text,
+  TextInput,
 } from '@etus/seven-react'
-import { Input } from '@/components/ui/input'
-import { Separator } from '@/components/ui/separator'
+import { toast } from 'sonner'
 import { Icons } from '@/components/icons'
 import { CreateWebhookSchema, type CreateWebhookInput } from '@shared/schemas'
 
@@ -122,28 +136,29 @@ function IntegrationsPage() {
       {/* Page Header */}
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Integrations</h1>
-          <p className="text-muted-foreground">
+          <Heading level={1} size="2xl" weight="semibold" className="tracking-tight">
+            Integrations
+          </Heading>
+          <Text variant="p2" color="muted">
             Connect third-party services and manage webhooks.
-          </p>
+          </Text>
         </div>
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <div className="flex h-2 w-2 rounded-full bg-emerald-500" />
+          <div className="flex h-2 w-2 rounded-full bg-success" />
           {connectedCount} connected
         </div>
       </div>
 
       {/* Search and Filters */}
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-        <div className="relative flex-1 max-w-sm">
-          <Icons.search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            placeholder="Search integrations..."
-            value={searchQuery}
-            onChange={(e) => { setSearchQuery(e.target.value) }}
-            className="pl-9"
-          />
-        </div>
+        <SearchInput
+          className="flex-1 max-w-sm"
+          placeholder="Search integrations..."
+          value={searchQuery}
+          onChange={(e) => { setSearchQuery(e.target.value) }}
+          showClearButton
+          onClear={() => { setSearchQuery('') }}
+        />
         <div className="flex gap-1 overflow-x-auto pb-1">
           {categories.map((category) => (
             <Button
@@ -161,7 +176,7 @@ function IntegrationsPage() {
 
       {/* Integrations Grid */}
       <section className="space-y-4">
-        <h2 className="text-lg font-medium">Available Integrations</h2>
+        <Heading level={2} size="lg" weight="medium">Available Integrations</Heading>
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {filteredIntegrations.map((integration) => (
             <IntegrationCard key={integration.id} integration={integration} />
@@ -170,23 +185,23 @@ function IntegrationsPage() {
         {filteredIntegrations.length === 0 && (
           <div className="rounded-lg border border-dashed p-8 text-center">
             <Icons.search className="mx-auto h-8 w-8 text-muted-foreground/50" />
-            <p className="mt-2 text-sm text-muted-foreground">
+            <Text variant="p3" color="muted" className="mt-2">
               No integrations found matching your search.
-            </p>
+            </Text>
           </div>
         )}
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* Webhooks Section */}
       <section className="space-y-4">
         <div className="flex items-center justify-between">
           <div>
-            <h2 className="text-lg font-medium">Webhooks</h2>
-            <p className="text-sm text-muted-foreground">
+            <Heading level={2} size="lg" weight="medium">Webhooks</Heading>
+            <Text variant="p3" color="muted">
               Receive real-time notifications when events happen.
-            </p>
+            </Text>
           </div>
           <CreateWebhookDialog />
         </div>
@@ -201,16 +216,16 @@ function IntegrationsPage() {
           <Card>
             <CardContent className="p-8 text-center">
               <Icons.globe className="mx-auto h-8 w-8 text-muted-foreground/50" />
-              <p className="mt-2 text-sm font-medium">No webhooks configured</p>
-              <p className="text-xs text-muted-foreground">
+              <Text variant="p3" className="mt-2 font-medium">No webhooks configured</Text>
+              <Text as="p" variant="caption1" color="muted" className="font-normal">
                 Create a webhook to receive real-time event notifications.
-              </p>
+              </Text>
             </CardContent>
           </Card>
         )}
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* API Documentation Link */}
       <section>
@@ -221,15 +236,18 @@ function IntegrationsPage() {
                 <Icons.zap className="h-5 w-5" />
               </div>
               <div>
-                <p className="font-medium">Build Custom Integrations</p>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p2" className="font-medium">Build Custom Integrations</Text>
+                <Text variant="p3" color="muted">
                   Use our API to build your own integrations.
-                </p>
+                </Text>
               </div>
             </div>
-            <Button variant="outline">
-              View API Docs
-              <Icons.arrowRight className="ml-2 h-4 w-4" />
+            <Button asChild variant="outline">
+              {/* TODO(stub): apontar href para a URL real das docs da API */}
+              <a href="#">
+                View API Docs
+                <Icons.arrowRight className="ml-2 h-4 w-4" />
+              </a>
             </Button>
           </CardContent>
         </Card>
@@ -244,64 +262,131 @@ function IntegrationCard({ integration }: { integration: Integration }) {
   const [isConnecting, setIsConnecting] = useState(false)
   const [connected, setConnected] = useState(integration.connected)
 
-  const handleToggle = async () => {
+  // TODO(stub): trocar mock por mutation real de conexão
+  const handleConnect = async () => {
     setIsConnecting(true)
     await new Promise((resolve) => setTimeout(resolve, 1000))
-    setConnected(!connected)
+    setConnected(true)
     setIsConnecting(false)
+    toast.success(`${integration.name} conectado`)
+  }
+
+  const handleDisconnect = () => {
+    // TODO(stub): ligar à desconexão real
+    toast.info('Desconectar — em breve')
   }
 
   const Icon = integration.icon
 
   return (
-    <Card className={`transition-all hover:shadow-md ${connected ? 'ring-1 ring-emerald-500/20' : ''}`}>
+    <Card className={`transition-all hover:shadow-md ${connected ? 'ring-1 ring-success/20' : ''}`}>
       <CardContent className="p-4">
         <div className="flex items-start gap-4">
-          <div className={`flex h-12 w-12 items-center justify-center rounded-lg ${connected ? 'bg-emerald-100 dark:bg-emerald-900/30' : 'bg-muted'}`}>
-            <Icon className={`h-6 w-6 ${connected ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`} />
+          <div className={`flex h-12 w-12 items-center justify-center rounded-lg ${connected ? 'bg-success-subtle' : 'bg-muted'}`}>
+            <Icon className={`h-6 w-6 ${connected ? 'text-success' : 'text-muted-foreground'}`} />
           </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
-              <p className="font-medium">{integration.name}</p>
+              <Text variant="p2" className="font-medium">{integration.name}</Text>
               {connected && (
                 <Badge color="success" className="text-xs">Connected</Badge>
               )}
             </div>
-            <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+            <Text variant="p3" color="muted" className="mt-1 line-clamp-2">
               {integration.description}
-            </p>
+            </Text>
           </div>
         </div>
         <div className="mt-4 flex items-center justify-between">
           <Badge type="badge-outline" className="text-xs capitalize">
             {integration.category}
           </Badge>
-          <Button
-            variant={connected ? 'outline' : 'default'}
-            size="sm"
-            onClick={() => { void handleToggle() }}
-            disabled={isConnecting}
-          >
-            {isConnecting ? (
-              <Icons.spinner className="h-4 w-4 animate-spin" />
-            ) : connected ? (
-              <>
-                <Icons.settings className="mr-2 h-4 w-4" />
-                Configure
-              </>
-            ) : (
-              <>
-                <Icons.plus className="mr-2 h-4 w-4" />
-                Connect
-              </>
-            )}
-          </Button>
+          {connected ? (
+            <div className="flex items-center gap-2">
+              <ConfigureDialog integration={integration} />
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive"
+                  >
+                    Disconnect
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Disconnect {integration.name}?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This stops syncing data with {integration.name}. You can reconnect at any time.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction variant="destructive" onClick={handleDisconnect}>
+                      Disconnect
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          ) : (
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => { void handleConnect() }}
+              disabled={isConnecting}
+            >
+              {isConnecting ? (
+                <Icons.spinner className="h-4 w-4 animate-spin" />
+              ) : (
+                <>
+                  <Icons.plus className="mr-2 h-4 w-4" />
+                  Connect
+                </>
+              )}
+            </Button>
+          )}
         </div>
       </CardContent>
     </Card>
   )
 }
 
+function ConfigureDialog({ integration }: { integration: Integration }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Icons.settings className="mr-2 h-4 w-4" />
+          Configure
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Configure {integration.name}</DialogTitle>
+          <DialogDescription>
+            Manage how {integration.name} connects to your workspace.
+          </DialogDescription>
+        </DialogHeader>
+        {/* TODO(stub): formulário de configuração real */}
+        <div className="py-4">
+          <Text variant="p3" color="muted">
+            Configuration options for this integration are coming soon.
+          </Text>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => { setIsOpen(false) }}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
 type Webhook = typeof webhooks[0]
 
 function WebhookCard({ webhook }: { webhook: Webhook }) {
@@ -319,7 +404,7 @@ function WebhookCard({ webhook }: { webhook: Webhook }) {
         <div className="flex items-start justify-between gap-4">
           <div className="flex-1 min-w-0 space-y-3">
             <div className="flex items-center gap-2">
-              <div className={`h-2 w-2 rounded-full ${webhook.status === 'active' ? 'bg-emerald-500' : 'bg-amber-500'}`} />
+              <div className={`h-2 w-2 rounded-full ${webhook.status === 'active' ? 'bg-success' : 'bg-warning'}`} />
               <code className="text-sm font-mono truncate">{webhook.url}</code>
             </div>
             <div className="flex flex-wrap gap-1.5">
@@ -334,7 +419,7 @@ function WebhookCard({ webhook }: { webhook: Webhook }) {
                 <Icons.clock className="h-3 w-3" />
                 Last delivery: {webhook.lastDelivery}
               </span>
-              <span className={`flex items-center gap-1 ${webhook.lastStatus === 'success' ? 'text-emerald-600' : 'text-destructive'}`}>
+              <span className={`flex items-center gap-1 ${webhook.lastStatus === 'success' ? 'text-success' : 'text-destructive'}`}>
                 {webhook.lastStatus === 'success' ? (
                   <Icons.check className="h-3 w-3" />
                 ) : (
@@ -443,7 +528,7 @@ function CreateWebhookDialog() {
                   <FormItem>
                     <FormLabel>Endpoint URL</FormLabel>
                     <FormControl>
-                      <Input
+                      <TextInput
                         type="url"
                         placeholder="https://api.example.com/webhooks"
                         className="font-mono text-sm"
@@ -469,23 +554,20 @@ function CreateWebhookDialog() {
                         {eventTypes.map((event) => {
                           const isSelected = selectedEvents.includes(event.id)
                           return (
-                            <button
+                            <label
                               key={event.id}
-                              type="button"
-                              onClick={() => { toggleEvent(event.id) }}
-                              className={`flex items-center gap-2 rounded-lg border p-3 text-left text-sm transition-colors ${
+                              className={`flex cursor-pointer items-center gap-2 rounded-lg border p-3 text-left text-sm transition-colors ${
                                 isSelected
                                   ? 'border-primary bg-primary/5'
                                   : 'border-border hover:border-primary/50'
                               }`}
                             >
-                              <div className={`flex h-4 w-4 items-center justify-center rounded border ${
-                                isSelected ? 'border-primary bg-primary' : 'border-muted-foreground'
-                              }`}>
-                                {isSelected && <Icons.check className="h-3 w-3 text-primary-foreground" />}
-                              </div>
+                              <Checkbox
+                                checked={isSelected}
+                                onCheckedChange={() => { toggleEvent(event.id) }}
+                              />
                               <span className={isSelected ? 'font-medium' : ''}>{event.label}</span>
-                            </button>
+                            </label>
                           )
                         })}
                       </div>
diff --git a/packages/bhono-app/templates/base/src/client/routes/_authenticated/settings.tsx b/packages/bhono-app/templates/base/src/client/routes/_authenticated/settings.tsx
index 6a03486..ee24782 100644
--- a/packages/bhono-app/templates/base/src/client/routes/_authenticated/settings.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/_authenticated/settings.tsx
@@ -4,6 +4,15 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { toast } from 'sonner'
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -13,20 +22,25 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
+  Divider,
+  FileUpload,
+  FileUploadTrigger,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  Heading,
   Label,
+  Switch,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
+  Text,
+  TextInput,
 } from '@etus/seven-react'
-import { Input } from '@/components/ui/input'
-import { Separator } from '@/components/ui/separator'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 import { UpdateProfileSchema, type UpdateProfileInput } from '@shared/schemas'
@@ -62,14 +76,34 @@ function SettingsPage() {
     }
   }
 
+  const handlePhotoChange = () => {
+    toast.info('Trocar foto — em breve')
+    // TODO(stub)
+  }
+
+  const handleDisconnectProvider = () => {
+    toast.info('Desconectar conta — em breve')
+    // TODO(stub)
+  }
+
+  const handleRevokeSession = () => {
+    toast.info('Revogar sessão — em breve')
+    // TODO(stub)
+  }
+
+  const handleDeleteAccount = () => {
+    toast.info('Excluir conta — em breve')
+    // TODO(stub)
+  }
+
   return (
     <div className="space-y-8">
       {/* Page Header */}
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
-        <p className="text-muted-foreground">
+        <Heading level={1} size="2xl">Settings</Heading>
+        <Text variant="p2" color="muted">
           Manage your account settings and preferences.
-        </p>
+        </Text>
       </div>
 
       <Tabs defaultValue="profile" className="space-y-6">
@@ -103,13 +137,21 @@ function SettingsPage() {
                 <AvatarFallback className="text-lg">{initials}</AvatarFallback>
               </Avatar>
               <div className="space-y-2">
-                <Button variant="outline" size="sm">
-                  <Icons.camera className="mr-2 h-4 w-4" />
-                  Change Photo
-                </Button>
-                <p className="text-xs text-muted-foreground">
+                <FileUpload
+                  accept="image/jpeg,image/png,image/gif"
+                  maxSize={2 * 1024 * 1024}
+                  showPreview={false}
+                  onChange={handlePhotoChange}
+                  className="w-auto"
+                >
+                  <FileUploadTrigger className="h-8 border border-input bg-background px-3 text-xs text-foreground hover:bg-accent hover:text-accent-foreground">
+                    <Icons.camera className="h-4 w-4" />
+                    Change Photo
+                  </FileUploadTrigger>
+                </FileUpload>
+                <Text as="p" variant="caption1" color="muted">
                   JPG, PNG or GIF. Max 2MB.
-                </p>
+                </Text>
               </div>
             </CardContent>
           </Card>
@@ -132,7 +174,7 @@ function SettingsPage() {
                         <FormItem>
                           <FormLabel>Full Name</FormLabel>
                           <FormControl>
-                            <Input placeholder="Enter your name" {...field} />
+                            <TextInput placeholder="Enter your name" {...field} />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -140,23 +182,20 @@ function SettingsPage() {
                     />
                     <div className="space-y-2">
                       <Label>Email Address</Label>
-                      <Input
+                      <TextInput
                         type="email"
                         defaultValue={user?.email ?? ''}
                         placeholder="Enter your email"
                         disabled
                       />
-                      <p className="text-xs text-muted-foreground">
+                      <Text as="p" variant="caption1" color="muted">
                         Email cannot be changed.
-                      </p>
+                      </Text>
                     </div>
                   </div>
 
                   <div className="flex justify-end">
-                    <Button type="submit" disabled={form.formState.isSubmitting}>
-                      {form.formState.isSubmitting && (
-                        <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-                      )}
+                    <Button type="submit" loading={form.formState.isSubmitting}>
                       Save Changes
                     </Button>
                   </div>
@@ -182,17 +221,42 @@ function SettingsPage() {
                     <Icons.google className="h-5 w-5" />
                   </div>
                   <div>
-                    <p className="font-medium">Google</p>
-                    <p className="text-sm text-muted-foreground">
+                    <Text as="p" weight="medium">Google</Text>
+                    <Text variant="p3" color="muted">
                       {user?.email}
-                    </p>
+                    </Text>
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="flex items-center gap-1 text-sm text-emerald-600">
+                  <span className="flex items-center gap-1 text-sm text-success">
                     <Icons.check className="h-4 w-4" />
                     Connected
                   </span>
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button variant="outline" size="sm">
+                        Desconectar
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Desconectar conta Google?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          Você precisará reconectar este provedor para acessar sua conta por
+                          ele novamente.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                        <AlertDialogAction
+                          variant="destructive"
+                          onClick={handleDisconnectProvider}
+                        >
+                          Desconectar
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
                 </div>
               </div>
             </CardContent>
@@ -212,13 +276,40 @@ function SettingsPage() {
                     <Icons.globe className="h-5 w-5" />
                   </div>
                   <div>
-                    <p className="font-medium">Current Session</p>
-                    <p className="text-sm text-muted-foreground">
+                    <Text as="p" weight="medium">Current Session</Text>
+                    <Text variant="p3" color="muted">
                       Your current browser session
-                    </p>
+                    </Text>
                   </div>
                 </div>
-                <span className="text-sm text-emerald-600">Active</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-success">Active</span>
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button variant="outline" size="sm">
+                        Revogar
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Revogar esta sessão?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          Você será desconectado deste dispositivo e precisará entrar
+                          novamente.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                        <AlertDialogAction
+                          variant="destructive"
+                          onClick={handleRevokeSession}
+                        >
+                          Revogar
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </div>
               </div>
             </CardContent>
           </Card>
@@ -233,14 +324,36 @@ function SettingsPage() {
             <CardContent>
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="font-medium">Delete Account</p>
-                  <p className="text-sm text-muted-foreground">
+                  <Text as="p" weight="medium">Delete Account</Text>
+                  <Text variant="p3" color="muted">
                     Permanently delete your account and all associated data.
-                  </p>
+                  </Text>
                 </div>
-                <Button variant="destructive" size="sm">
-                  Delete Account
-                </Button>
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button variant="destructive" size="sm">
+                      Delete Account
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Excluir conta?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        Esta ação é permanente e não pode ser desfeita. Todos os seus dados
+                        serão removidos.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                      <AlertDialogAction
+                        variant="destructive"
+                        onClick={handleDeleteAccount}
+                      >
+                        Excluir conta
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
               </div>
             </CardContent>
           </Card>
@@ -261,13 +374,13 @@ function SettingsPage() {
                 description="Receive emails when someone invites you to a team."
                 defaultChecked
               />
-              <Separator />
+              <Divider />
               <NotificationToggle
                 title="Product Updates"
                 description="News about product updates and new features."
                 defaultChecked
               />
-              <Separator />
+              <Divider />
               <NotificationToggle
                 title="Security Alerts"
                 description="Important notifications about your account security."
@@ -298,29 +411,15 @@ function NotificationToggle({
   return (
     <div className="flex items-center justify-between">
       <div className="space-y-0.5">
-        <p className="font-medium">{title}</p>
-        <p className="text-sm text-muted-foreground">{description}</p>
+        <Text as="p" weight="medium">{title}</Text>
+        <Text variant="p3" color="muted">{description}</Text>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={checked}
+      <Switch
+        aria-label={title}
+        checked={checked}
         disabled={disabled}
-        onClick={() => { setChecked(!checked); }}
-        className={`
-          relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent
-          transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-          disabled:cursor-not-allowed disabled:opacity-50
-          ${checked ? 'bg-primary' : 'bg-input'}
-        `}
-      >
-        <span
-          className={`
-            pointer-events-none inline-block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
-            ${checked ? 'translate-x-5' : 'translate-x-0'}
-          `}
-        />
-      </button>
+        onCheckedChange={setChecked}
+      />
     </div>
   )
 }
diff --git a/packages/bhono-app/templates/base/src/client/routes/_authenticated/team.tsx b/packages/bhono-app/templates/base/src/client/routes/_authenticated/team.tsx
index f4a6bb1..d220a1b 100644
--- a/packages/bhono-app/templates/base/src/client/routes/_authenticated/team.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/_authenticated/team.tsx
@@ -6,6 +6,15 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { toast } from 'sonner'
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -23,6 +32,11 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   Form,
   FormControl,
   FormDescription,
@@ -30,8 +44,12 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  Heading,
+  SearchInput,
+  Spinner,
+  Text,
+  TextInput,
 } from '@etus/seven-react'
-import { Input } from '@/components/ui/input'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 import type { Account, AuthUser } from '@shared/types'
@@ -206,16 +224,15 @@ function TeamPage() {
     <div className="space-y-8">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Team Members</h1>
-          <p className="text-muted-foreground">
+          <Heading level={1} size="2xl" weight="semibold">Team Members</Heading>
+          <Text color="muted">
             Manage your team and invite new members.
-          </p>
+          </Text>
         </div>
 
         <Dialog open={isInviteOpen} onOpenChange={handleOpenChange}>
           <DialogTrigger asChild>
-            <Button disabled={!currentAccount}>
-              <Icons.userPlus className="mr-2 h-4 w-4" />
+            <Button disabled={!currentAccount} leftIcon={<Icons.userPlus />}>
               Invite Member
             </Button>
           </DialogTrigger>
@@ -237,7 +254,7 @@ function TeamPage() {
                       <FormItem>
                         <FormLabel>Email Address</FormLabel>
                         <FormControl>
-                          <Input
+                          <TextInput
                             type="email"
                             placeholder="colleague@example.com"
                             {...field}
@@ -287,8 +304,7 @@ function TeamPage() {
                   <Button type="button" variant="outline" onClick={() => { setIsInviteOpen(false) }}>
                     Cancel
                   </Button>
-                  <Button type="submit" disabled={inviteMutation.isPending}>
-                    {inviteMutation.isPending && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+                  <Button type="submit" loading={inviteMutation.isPending}>
                     Send Invitation
                   </Button>
                 </DialogFooter>
@@ -298,15 +314,14 @@ function TeamPage() {
         </Dialog>
       </div>
 
-      <div className="relative max-w-sm">
-        <Icons.search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          placeholder="Search members..."
-          value={searchQuery}
-          onChange={(e) => { setSearchQuery(e.target.value) }}
-          className="pl-9"
-        />
-      </div>
+      <SearchInput
+        className="max-w-sm"
+        placeholder="Search members..."
+        value={searchQuery}
+        onChange={(e) => { setSearchQuery(e.target.value) }}
+        showClearButton
+        onClear={() => { setSearchQuery('') }}
+      />
 
       <Card>
         <CardHeader>
@@ -318,8 +333,9 @@ function TeamPage() {
         <CardContent>
           <div className="divide-y">
             {isLoadingTeam && (
-              <div className="py-8 text-center text-muted-foreground">
-                Loading members...
+              <div className="flex items-center justify-center gap-2 py-8">
+                <Spinner />
+                <Text variant="p3" color="muted">Loading members...</Text>
               </div>
             )}
             {!isLoadingTeam && filteredMembers.map((member) => (
@@ -409,9 +425,46 @@ function TeamMemberRow({
           {member.role}
         </Badge>
         {!isCurrentUser && (
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <Icons.more className="h-4 w-4" />
-          </Button>
+          <AlertDialog>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <Icons.more className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => { toast.info('Mudar papel — em breve') }}>
+                  <Icons.user className="mr-2 h-4 w-4" />
+                  Mudar papel
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <AlertDialogTrigger asChild>
+                  <DropdownMenuItem
+                    className="text-destructive"
+                    onSelect={(e) => { e.preventDefault() }}
+                  >
+                    <Icons.userMinus className="mr-2 h-4 w-4" />
+                    Remover
+                  </DropdownMenuItem>
+                </AlertDialogTrigger>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Remover {name}?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Esta ação remove o membro do workspace. Você pode convidá-lo novamente depois.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                {/* TODO(stub): ligar à mutation de remoção real */}
+                <AlertDialogAction onClick={() => { toast.info('Remover membro — em breve') }}>
+                  Remover
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
         )}
       </div>
     </div>
@@ -453,15 +506,11 @@ function InvitationRow({
           variant="ghost"
           size="sm"
           onClick={onRevoke}
-          disabled={isRevoking}
+          loading={isRevoking}
+          leftIcon={<Icons.close />}
           className="text-destructive hover:text-destructive"
         >
-          {isRevoking ? (
-            <Icons.spinner className="h-4 w-4 animate-spin" />
-          ) : (
-            <Icons.close className="h-4 w-4" />
-          )}
-          <span className="ml-2 hidden sm:inline">Revoke</span>
+          <span className="hidden sm:inline">Revoke</span>
         </Button>
       </div>
     </div>
diff --git a/packages/bhono-app/templates/base/src/client/routes/_authenticated/workspaces.tsx b/packages/bhono-app/templates/base/src/client/routes/_authenticated/workspaces.tsx
index 3adfae3..bf2bb22 100644
--- a/packages/bhono-app/templates/base/src/client/routes/_authenticated/workspaces.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/_authenticated/workspaces.tsx
@@ -1,11 +1,20 @@
 import { createFileRoute } from '@tanstack/react-router'
 import {
   Badge,
+  Callout,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  Heading,
+  Spinner,
+  Text,
 } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 import { useGatewayAccounts, type AccountRole } from '@/hooks/use-gateway-accounts'
@@ -31,44 +40,40 @@ function WorkspacesPage() {
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Workspaces</h1>
-        <p className="text-muted-foreground">
+        <Heading level={1} size="2xl" weight="semibold">
+          Workspaces
+        </Heading>
+        <Text variant="p2" color="muted">
           The gateway accounts you belong to and the role you hold in each. Roles are
           resolved by the gateway (viewer &lt; editor &lt; manager &lt; admin).
-        </p>
+        </Text>
       </div>
 
       {superAdmin && (
-        <Card className="border-primary/40 bg-primary/5">
-          <CardHeader className="flex flex-row items-center gap-3 space-y-0">
-            <Icons.shield className="h-5 w-5 text-primary" />
-            <div>
-              <CardTitle className="text-base">Super admin</CardTitle>
-              <CardDescription>
-                You have admin-level access across every workspace, regardless of the list below.
-              </CardDescription>
-            </div>
-          </CardHeader>
-        </Card>
+        <Callout icon={<Icons.shield />} title="Super admin" variant="success">
+          You have admin-level access across every workspace, regardless of the list below.
+        </Callout>
       )}
 
       {isLoading ? (
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <Icons.spinner className="h-4 w-4 animate-spin" />
+          <Spinner />
           Loading workspaces…
         </div>
       ) : accounts.length === 0 ? (
-        <Card>
-          <CardContent className="flex flex-col items-center justify-center gap-2 py-12 text-center">
-            <Icons.layers className="h-8 w-8 text-muted-foreground/60" />
-            <p className="font-medium">No workspaces yet</p>
-            <p className="max-w-md text-sm text-muted-foreground">
+        <Empty className="border">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Icons.layers />
+            </EmptyMedia>
+            <EmptyTitle>No workspaces yet</EmptyTitle>
+            <EmptyDescription>
               {superAdmin
                 ? 'You hold no explicit per-workspace role, but super admin grants access everywhere.'
                 : "You don't belong to any gateway workspace yet. An admin can grant you a role."}
-            </p>
-          </CardContent>
-        </Card>
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
       ) : (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {accounts.map((account) => {
@@ -81,13 +86,15 @@ function WorkspacesPage() {
                       <CardTitle className="truncate text-base">{account.name}</CardTitle>
                       <CardDescription className="truncate">{account.slug}</CardDescription>
                     </div>
-                    <Badge color={meta.color} className="shrink-0 capitalize">
+                    <Badge color={meta.color} tooltip={meta.blurb} className="shrink-0 capitalize">
                       {account.role}
                     </Badge>
                   </div>
                 </CardHeader>
                 <CardContent>
-                  <p className="text-sm text-muted-foreground">{meta.blurb}</p>
+                  <Text variant="p3" color="muted">
+                    {meta.blurb}
+                  </Text>
                 </CardContent>
               </Card>
             )
diff --git a/packages/bhono-app/templates/base/src/client/routes/index.tsx b/packages/bhono-app/templates/base/src/client/routes/index.tsx
index 37f45c2..e079114 100644
--- a/packages/bhono-app/templates/base/src/client/routes/index.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/index.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
-import { Button } from '@etus/seven-react'
+import { Badge, Button, Card, FeaturedIcon, Heading, Text } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 
 export const Route = createFileRoute('/')({
@@ -10,12 +10,16 @@ function HomePage() {
   return (
     <div className="flex min-h-screen flex-col">
       {/* Navigation */}
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <header className="sticky top-0 z-50 w-full border-b bg-background">
         <div className="container flex h-14 max-w-[var(--content-wide)] items-center">
-          <div className="flex items-center space-x-2">
-            <Icons.command className="h-6 w-6" />
-            <span className="font-semibold">Hono</span>
-          </div>
+          <Link to="/" className="flex items-center gap-2">
+            <FeaturedIcon size="sm" tone="brand">
+              <Icons.command />
+            </FeaturedIcon>
+            <Text as="span" weight="semibold">
+              Hono
+            </Text>
+          </Link>
           <nav className="ml-auto flex items-center space-x-4">
             <Link
               to="/login"
@@ -33,36 +37,44 @@ function HomePage() {
       {/* Hero Section */}
       <main className="flex-1">
         <section className="container flex flex-col items-center justify-center gap-4 py-24 md:py-32">
-          <div className="flex items-center gap-2 rounded-full border bg-muted px-4 py-1.5 text-sm font-medium">
-            <Icons.zap className="h-4 w-4" />
-            <span>Built on Cloudflare Workers</span>
-          </div>
+          <Badge color="secondary" leadingIcon={<Icons.zap />}>
+            Built on Cloudflare Workers
+          </Badge>
 
-          <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
+          <Heading
+            level={1}
+            align="center"
+            className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl"
+          >
             Build your SaaS
             <br />
             <span className="text-muted-foreground">faster than ever</span>
-          </h1>
+          </Heading>
 
-          <p className="max-w-[42rem] text-center text-lg text-muted-foreground sm:text-xl">
+          <Text
+            variant="p1"
+            color="muted"
+            className="max-w-[42rem] text-center"
+          >
             A production-ready multi-tenant boilerplate with authentication,
             database, and API — all on the edge.
-          </p>
+          </Text>
 
           <div className="flex flex-col gap-4 sm:flex-row">
             <Button size="lg" asChild>
               <Link to="/login">
                 Get Started
-                <Icons.arrowRight className="ml-2 h-4 w-4" />
+                <Icons.arrowRight />
               </Link>
             </Button>
+            {/* TODO: apontar para o repositório real do produto */}
             <Button variant="outline" size="lg" asChild>
               <a
                 href="https://github.com"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <Icons.gitHub className="mr-2 h-4 w-4" />
+                <Icons.gitHub />
                 GitHub
               </a>
             </Button>
@@ -73,17 +85,17 @@ function HomePage() {
         <section className="container py-24 md:py-32">
           <div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-3">
             <FeatureCard
-              icon={<Icons.zap className="h-10 w-10" />}
+              icon={<Icons.zap />}
               title="Edge-First"
               description="Deploy globally on Cloudflare Workers with D1 database for lightning-fast responses."
             />
             <FeatureCard
-              icon={<Icons.shield className="h-10 w-10" />}
+              icon={<Icons.shield />}
               title="Secure by Default"
               description="Gateway OAuth, HTTP-only session cookies, and role-based access control built-in."
             />
             <FeatureCard
-              icon={<Icons.users className="h-10 w-10" />}
+              icon={<Icons.users />}
               title="Multi-Tenant"
               description="Isolated accounts, team invitations, and audit logging ready to go."
             />
@@ -91,12 +103,19 @@ function HomePage() {
         </section>
 
         {/* Tech Stack Section */}
-        <section className="border-t bg-muted/50">
+        <section className="border-t">
           <div className="container py-16">
-            <h2 className="mb-8 text-center text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            <Heading
+              level={2}
+              size="sm"
+              weight="semibold"
+              color="muted"
+              align="center"
+              className="mb-8 uppercase tracking-wider"
+            >
               Built with modern tools
-            </h2>
-            <div className="flex flex-wrap items-center justify-center gap-8 text-muted-foreground">
+            </Heading>
+            <div className="flex flex-wrap items-center justify-center gap-4">
               <TechBadge name="Hono" />
               <TechBadge name="React" />
               <TechBadge name="TypeScript" />
@@ -111,10 +130,11 @@ function HomePage() {
       {/* Footer */}
       <footer className="border-t py-6">
         <div className="container flex flex-col items-center justify-between gap-4 md:flex-row">
-          <p className="text-sm text-muted-foreground">
+          <Text variant="p3" color="muted">
             Built with Hono and Cloudflare Workers.
-          </p>
+          </Text>
           <div className="flex items-center gap-4">
+            {/* TODO: apontar para o repositório real do produto */}
             <a
               href="https://github.com"
               target="_blank"
@@ -140,16 +160,22 @@ function FeatureCard({
   description: string
 }) {
   return (
-    <div className="flex flex-col items-center text-center">
-      <div className="mb-4 rounded-lg bg-muted p-3">{icon}</div>
-      <h3 className="mb-2 text-lg font-semibold">{title}</h3>
-      <p className="text-sm text-muted-foreground">{description}</p>
-    </div>
+    <Card variant="ghost" className="items-center text-center">
+      <FeaturedIcon size="lg">{icon}</FeaturedIcon>
+      <Heading level={3} size="lg" align="center">
+        {title}
+      </Heading>
+      <Text variant="p3" color="muted">
+        {description}
+      </Text>
+    </Card>
   )
 }
 
 function TechBadge({ name }: { name: string }) {
   return (
-    <span className="text-sm font-medium">{name}</span>
+    <Badge type="pill-outline" color="secondary">
+      {name}
+    </Badge>
   )
 }
diff --git a/packages/bhono-app/templates/base/src/client/routes/invite.$token.tsx b/packages/bhono-app/templates/base/src/client/routes/invite.$token.tsx
index e7905e2..62b841d 100644
--- a/packages/bhono-app/templates/base/src/client/routes/invite.$token.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/invite.$token.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useState } from 'react'
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@etus/seven-react'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Heading } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 
 export const Route = createFileRoute('/invite/$token')({
@@ -14,7 +14,9 @@ function Shell({ children }: { children: React.ReactNode }) {
     <div className="flex min-h-screen flex-col">
       <header className="container flex h-14 items-center">
         <Link to="/" className="flex items-center space-x-2">
-          <Icons.command className="h-6 w-6" />
+          <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+            <Icons.command className="size-4" />
+          </div>
           <span className="font-semibold">Hono</span>
         </Link>
       </header>
@@ -56,10 +58,14 @@ function AcceptInvitationPage() {
       <Shell>
         <Card className="w-full max-w-md text-center">
           <CardHeader className="pb-4">
-            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/30">
-              <Icons.check className="h-8 w-8 text-emerald-600 dark:text-emerald-400" />
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-success-subtle">
+              <Icons.check className="h-8 w-8 text-success" />
             </div>
-            <CardTitle className="text-xl">Invitation accepted</CardTitle>
+            <CardTitle>
+              <Heading level={1} size="xl" align="center">
+                Invitation accepted
+              </Heading>
+            </CardTitle>
             <CardDescription>You&apos;re now a member of the workspace.</CardDescription>
           </CardHeader>
           <CardContent>
@@ -80,14 +86,21 @@ function AcceptInvitationPage() {
             <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
               <Icons.close className="h-8 w-8 text-destructive" />
             </div>
-            <CardTitle className="text-xl">Invitation could not be accepted</CardTitle>
+            <CardTitle>
+              <Heading level={1} size="xl" align="center">
+                Invitation could not be accepted
+              </Heading>
+            </CardTitle>
             <CardDescription>
               This invitation may have expired, been revoked, or already been used. Ask the
               workspace admin for a new invitation.
             </CardDescription>
           </CardHeader>
-          <CardContent>
-            <Button asChild className="w-full">
+          <CardContent className="space-y-3">
+            <Button className="w-full" onClick={() => { setStatus('pending') }}>
+              Tentar de novo
+            </Button>
+            <Button variant="outline" asChild className="w-full">
               <Link to="/">Go to Homepage</Link>
             </Button>
           </CardContent>
@@ -103,7 +116,11 @@ function AcceptInvitationPage() {
           <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
             <Icons.mailPlus className="h-8 w-8 text-primary" />
           </div>
-          <CardTitle className="text-xl">You&apos;ve been invited</CardTitle>
+          <CardTitle>
+            <Heading level={1} size="xl" align="center">
+              You&apos;ve been invited
+            </Heading>
+          </CardTitle>
           <CardDescription>
             Accept this invitation to join the workspace. The invitation is validated when you
             accept it.
diff --git a/packages/bhono-app/templates/base/src/client/routes/login.tsx b/packages/bhono-app/templates/base/src/client/routes/login.tsx
index b308da1..9831a6a 100644
--- a/packages/bhono-app/templates/base/src/client/routes/login.tsx
+++ b/packages/bhono-app/templates/base/src/client/routes/login.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useState } from 'react'
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@etus/seven-react'
+import { Button, Divider, Heading, Link as SevenLink, Text } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 
 export const Route = createFileRoute('/login')({
@@ -16,76 +16,78 @@ function LoginPage() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col">
-      {/* Simple header */}
-      <header className="container flex h-14 items-center">
-        <Link to="/" className="flex items-center space-x-2">
-          <Icons.command className="h-6 w-6" />
-          <span className="font-semibold">Hono</span>
-        </Link>
-      </header>
+    <div className="w-full lg:grid lg:min-h-screen lg:grid-cols-2">
+      {/* Form panel — primary content */}
+      <main className="flex min-h-screen items-center justify-center px-4 py-12 lg:min-h-0">
+        <div className="mx-auto grid w-full max-w-sm gap-6">
+          {/* Brand mark */}
+          <Link to="/" className="flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+              <Icons.command className="size-4" />
+            </div>
+            <span className="font-semibold">Hono</span>
+          </Link>
 
-      {/* Login form */}
-      <main className="flex flex-1 items-center justify-center px-4">
-        <Card className="w-full max-w-sm">
-          <CardHeader className="space-y-1 text-center">
-            <CardTitle className="text-2xl font-semibold tracking-tight">
+          <div className="grid gap-2">
+            <Heading level={1} size="3xl" weight="bold">
               Welcome back
-            </CardTitle>
-            <CardDescription>
+            </Heading>
+            <Text variant="p2" color="muted" className="text-balance">
               Sign in to your account to continue
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-4">
+            </Text>
+          </div>
+
+          <div className="grid gap-4">
             <Button
-              variant="outline"
-              className="w-full"
+              fullWidth
+              loading={isLoading}
+              loadingText="Redirecting..."
+              leftIcon={<Icons.shield className="size-4" />}
               onClick={handleLogin}
-              disabled={isLoading}
             >
-              {isLoading ? (
-                <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Icons.shield className="mr-2 h-4 w-4" />
-              )}
-              {isLoading ? 'Redirecting...' : 'Continue with ETUS'}
+              Continue with ETUS
             </Button>
 
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <span className="w-full border-t" />
-              </div>
-              <div className="relative flex justify-center text-xs uppercase">
-                <span className="bg-card px-2 text-muted-foreground">
-                  Secure authentication
-                </span>
-              </div>
-            </div>
+            <Divider type="text">Secure authentication</Divider>
 
-            <p className="text-center text-xs text-muted-foreground">
+            <Text as="p" variant="caption1" color="muted" className="text-center">
               By continuing, you agree to our{' '}
-              <a href="#" className="underline underline-offset-4 hover:text-foreground">
+              {/* TODO: URL real de Terms of Service */}
+              <SevenLink href="#" underline="always">
                 Terms of Service
-              </a>{' '}
+              </SevenLink>{' '}
               and{' '}
-              <a href="#" className="underline underline-offset-4 hover:text-foreground">
+              {/* TODO: URL real de Privacy Policy */}
+              <SevenLink href="#" underline="always">
                 Privacy Policy
-              </a>
+              </SevenLink>
               .
-            </p>
-          </CardContent>
-        </Card>
+            </Text>
+          </div>
+
+          <Text as="p" variant="p3" color="muted" className="text-center">
+            Don&apos;t have an account?{' '}
+            {/* TODO: URL real de Contact us */}
+            <SevenLink href="#" underline="always">
+              Contact us
+            </SevenLink>
+          </Text>
+        </div>
       </main>
 
-      {/* Footer */}
-      <footer className="py-6 text-center">
-        <p className="text-sm text-muted-foreground">
-          Don&apos;t have an account?{' '}
-          <a href="#" className="font-medium text-foreground underline underline-offset-4">
-            Contact us
-          </a>
-        </p>
-      </footer>
+      {/* Brand panel — complementary */}
+      <aside className="hidden bg-muted lg:block">
+        <div className="flex h-full items-center justify-center p-10">
+          <div className="max-w-md space-y-2">
+            <Heading level={2} size="3xl" weight="bold">
+              Welcome to Hono
+            </Heading>
+            <Text variant="p1" color="muted">
+              Production-ready multi-tenant SaaS, deployed on Cloudflare Workers.
+            </Text>
+          </div>
+        </div>
+      </aside>
     </div>
   )
 }
diff --git a/packages/bhono-app/templates/base/tests/helpers/client-setup.ts b/packages/bhono-app/templates/base/tests/helpers/client-setup.ts
index 5488073..cfa7f45 100644
--- a/packages/bhono-app/templates/base/tests/helpers/client-setup.ts
+++ b/packages/bhono-app/templates/base/tests/helpers/client-setup.ts
@@ -76,12 +76,20 @@ Object.defineProperty(window, "matchMedia", {
   })),
 })
 
-// Mock ResizeObserver
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
+// Mock ResizeObserver — must be a real constructor: Radix-based Seven
+// components call `new ResizeObserver()` (via useSize). An arrow function
+// cannot be constructed, which broke tests after adopting @etus/seven-react.
+global.ResizeObserver = class ResizeObserver {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+} as unknown as typeof globalThis.ResizeObserver
+
+// Radix UI (used by Seven) needs these jsdom shims for menus/dialogs/selects.
+Element.prototype.hasPointerCapture = vi.fn(() => false)
+Element.prototype.setPointerCapture = vi.fn()
+Element.prototype.releasePointerCapture = vi.fn()
+Element.prototype.scrollIntoView = vi.fn()
 
 // Mock localStorage
 const localStorageMock = (() => {
diff --git a/packages/bhono-app/templates/base/tests/unit/client/components/app-toaster.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/components/app-toaster.test.tsx
new file mode 100644
index 0000000..de37195
--- /dev/null
+++ b/packages/bhono-app/templates/base/tests/unit/client/components/app-toaster.test.tsx
@@ -0,0 +1,22 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render } from '@testing-library/react'
+
+// Capture the theme prop Seven's Toaster receives.
+vi.mock('@etus/seven-react', () => ({
+  Toaster: ({ theme }: { theme?: string }) => <div data-testid="toaster" data-theme={theme} />,
+}))
+vi.mock('@/hooks/use-theme', () => ({
+  useTheme: () => ({ resolvedTheme: 'dark', theme: 'dark', setTheme: vi.fn() }),
+}))
+
+import { AppToaster } from '@/components/app-toaster'
+
+describe('AppToaster', () => {
+  it("forwards the app's resolved theme to Seven's Toaster", () => {
+    const { getByTestId } = render(<AppToaster />)
+
+    // Guards the theme wiring: if AppToaster stops forwarding resolvedTheme,
+    // the toaster renders with the wrong (or no) theme.
+    expect(getByTestId('toaster')).toHaveAttribute('data-theme', 'dark')
+  })
+})
diff --git a/packages/bhono-app/templates/base/tests/unit/client/components/sidebar.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/components/sidebar.test.tsx
index 8804020..dae43fe 100644
--- a/packages/bhono-app/templates/base/tests/unit/client/components/sidebar.test.tsx
+++ b/packages/bhono-app/templates/base/tests/unit/client/components/sidebar.test.tsx
@@ -1,21 +1,30 @@
-import type { Mock } from "vitest";
+import type { Mock } from "vitest"
 import { describe, it, expect, vi, beforeEach } from "vitest"
 import { render, screen } from "@tests/helpers/client-test-utils"
 import userEvent from "@testing-library/user-event"
-import { Sidebar } from "@/components/sidebar"
+import { SidebarProvider } from "@etus/seven-react"
+import { AppSidebar } from "@/components/sidebar"
 
 // Mock useAuth hook
 vi.mock("@/hooks/use-auth", () => ({
   useAuth: vi.fn(),
 }))
 
-// Mock @tanstack/react-router with importOriginal to keep other exports
+// Mock @tanstack/react-router Link/useLocation (keep the rest)
 vi.mock("@tanstack/react-router", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@tanstack/react-router")>()
   return {
     ...actual,
-    Link: ({ children, to, className, title }: { children: React.ReactNode; to: string; className?: string; title?: string }) => (
-      <a href={to} className={className} title={title} data-testid={`link-${to}`}>
+    Link: ({
+      children,
+      to,
+      "aria-current": ariaCurrent,
+    }: {
+      children: React.ReactNode
+      to: string
+      "aria-current"?: "page"
+    }) => (
+      <a aria-current={ariaCurrent} data-testid={`link-${to}`} href={to}>
         {children}
       </a>
     ),
@@ -34,7 +43,16 @@ const mockUser = {
   role: "admin",
 }
 
-describe("Sidebar", () => {
+// AppSidebar reads useSidebar(), so it must render inside a SidebarProvider.
+function renderSidebar() {
+  return render(
+    <SidebarProvider>
+      <AppSidebar />
+    </SidebarProvider>,
+  )
+}
+
+describe("AppSidebar", () => {
   beforeEach(() => {
     vi.clearAllMocks()
     ;(useAuth as Mock).mockReturnValue({
@@ -44,160 +62,65 @@ describe("Sidebar", () => {
       isAuthenticated: true,
       isLoading: false,
     })
-    ;(useLocation as Mock).mockReturnValue({
-      pathname: "/dashboard",
-    })
+    ;(useLocation as Mock).mockReturnValue({ pathname: "/dashboard" })
   })
 
-  it("renders sidebar navigation items", () => {
-    render(<Sidebar />)
+  it("renders the navigation items", () => {
+    renderSidebar()
 
     expect(screen.getByText("Dashboard")).toBeInTheDocument()
     expect(screen.getByText("Team")).toBeInTheDocument()
+    expect(screen.getByText("Workspaces")).toBeInTheDocument()
     expect(screen.getByText("Integrations")).toBeInTheDocument()
-    // "Account" appears both as section header and nav item
+    // "Account" appears as both a group label and a nav item
     expect(screen.getAllByText("Account").length).toBeGreaterThanOrEqual(1)
     expect(screen.getByText("Settings")).toBeInTheDocument()
   })
 
-  it("shows user info when authenticated", () => {
-    render(<Sidebar />)
+  it("shows the authenticated user's name and email", () => {
+    renderSidebar()
 
     expect(screen.getByText("John Doe")).toBeInTheDocument()
     expect(screen.getByText("john@example.com")).toBeInTheDocument()
   })
 
-  it("shows user initials in avatar fallback", () => {
-    render(<Sidebar />)
-
-    // Avatar fallback should show initials "JD" for "John Doe"
-    const avatarFallbacks = screen.getAllByText("JD")
-    expect(avatarFallbacks.length).toBeGreaterThan(0)
-  })
-
-  it("highlights active route", () => {
-    ;(useLocation as Mock).mockReturnValue({
-      pathname: "/dashboard",
-    })
-
-    render(<Sidebar />)
-
-    // The active nav item link should have the active class (bg-sidebar-accent)
-    // There are two links to dashboard (logo and nav item), get all and check the nav item
-    const dashboardLinks = screen.getAllByTestId("link-/dashboard")
-    // The nav item link has rounded-lg class (not the logo link)
-    const navItemLink = dashboardLinks.find((link) => link.classList.contains("rounded-lg"))
-    expect(navItemLink).toHaveClass("bg-sidebar-accent")
-  })
-
-  it("handles navigation clicks", async () => {
-    render(<Sidebar />)
-
-    const teamLink = screen.getByText("Team")
-    expect(teamLink).toBeInTheDocument()
-
-    // Team link should be clickable
-    const teamNavItem = screen.getByTestId("link-/team")
-    expect(teamNavItem).toHaveAttribute("href", "/team")
-  })
-
-  it("handles logout button click", async () => {
-    const user = userEvent.setup()
-    const mockLogout = vi.fn()
-    ;(useAuth as Mock).mockReturnValue({
-      user: mockUser,
-      logout: mockLogout,
-      isLoggingOut: false,
-      isAuthenticated: true,
-      isLoading: false,
-    })
-
-    render(<Sidebar />)
-
-    // Find the logout button (by finding the button in the user profile area)
-    const logoutButtons = screen.getAllByRole("button")
-
-    // Click the last button in the profile area which should trigger logout
-    await user.click(logoutButtons[logoutButtons.length - 1])
-    expect(mockLogout).toHaveBeenCalled()
-  })
-
-  it("can be collapsed by default", () => {
-    render(<Sidebar defaultCollapsed={true} />)
-
-    // When collapsed, the sidebar should have the collapsed width class
-    const sidebar = screen.getByRole("complementary")
-    expect(sidebar).toHaveClass("w-16")
-  })
-
-  it("expands when collapsed and expand button is clicked", async () => {
-    const user = userEvent.setup()
-    render(<Sidebar defaultCollapsed={true} />)
-
-    const sidebar = screen.getByRole("complementary")
-    expect(sidebar).toHaveClass("w-16")
-
-    // Find and click the expand button
-    const expandButton = screen.getAllByRole("button")[0]
-    await user.click(expandButton)
+  it("shows the user initials in the avatar fallback", () => {
+    renderSidebar()
 
-    expect(sidebar).toHaveClass("w-64")
-  })
-
-  it("shows keyboard shortcut hint when expanded", () => {
-    render(<Sidebar />)
-
-    // The sidebar shows a keyboard shortcut hint like "⌘B collapse" or "Ctrl+B collapse"
-    expect(screen.getByText(/collapse/)).toBeInTheDocument()
-  })
-
-  it("hides navigation labels when collapsed", () => {
-    render(<Sidebar defaultCollapsed={true} />)
-
-    // Navigation labels should not be visible when collapsed
-    expect(screen.queryByText("Dashboard")).not.toBeInTheDocument()
+    expect(screen.getAllByText("JD").length).toBeGreaterThan(0)
   })
 
-  it("collapses when collapse button is clicked", async () => {
-    const user = userEvent.setup()
-    render(<Sidebar />)
-
-    const sidebar = screen.getByRole("complementary")
-    expect(sidebar).toHaveClass("w-64")
+  it("marks the active route with aria-current", () => {
+    ;(useLocation as Mock).mockReturnValue({ pathname: "/dashboard" })
+    renderSidebar()
 
-    // Find and click the collapse button (chevron icon button in header)
-    const collapseButton = screen.getAllByRole("button")[0]
-    await user.click(collapseButton)
-
-    expect(sidebar).toHaveClass("w-16")
+    // Target the nav item via its label (the logo also links to /dashboard)
+    expect(screen.getByText("Dashboard").closest("a")).toHaveAttribute("aria-current", "page")
+    expect(screen.getByText("Team").closest("a")).not.toHaveAttribute("aria-current", "page")
   })
 
-  it("toggles sidebar with keyboard shortcut", async () => {
-    const user = userEvent.setup()
-    render(<Sidebar />)
-
-    const sidebar = screen.getByRole("complementary")
-    expect(sidebar).toHaveClass("w-64")
+  it("links each item to its route", () => {
+    renderSidebar()
 
-    // Press Ctrl+B (or Cmd+B on Mac) to toggle
-    await user.keyboard("{Control>}b{/Control}")
-
-    expect(sidebar).toHaveClass("w-16")
+    expect(screen.getByTestId("link-/team")).toHaveAttribute("href", "/team")
+    expect(screen.getByTestId("link-/settings")).toHaveAttribute("href", "/settings")
   })
 
-  it("toggles theme when theme button is clicked", async () => {
+  it("persists a theme change when the theme toggle is clicked", async () => {
     const user = userEvent.setup()
-    render(<Sidebar />)
+    renderSidebar()
 
-    // Find the theme toggle button (has title attribute with "Theme:")
-    const themeButton = screen.getByTitle(/theme:/i)
-    expect(themeButton).toBeInTheDocument()
+    const before = localStorage.getItem("theme")
+    await user.click(screen.getByText("Theme"))
 
-    await user.click(themeButton)
-    // Theme should cycle (we just verify click doesn't throw)
+    // The toggle must actually drive + persist the theme (light → dark → system → …),
+    // not just render — a render-only test can't catch a broken toggle (Rule 6).
+    const after = localStorage.getItem("theme")
+    expect(after).toMatch(/^(light|dark|system)$/)
+    expect(after).not.toBe(before)
   })
 
-  it("shows logout button when collapsed and handles click", async () => {
+  it("logs out from the user menu", async () => {
     const user = userEvent.setup()
     const mockLogout = vi.fn()
     ;(useAuth as Mock).mockReturnValue({
@@ -208,52 +131,14 @@ describe("Sidebar", () => {
       isLoading: false,
     })
 
-    render(<Sidebar defaultCollapsed={true} />)
-
-    // When collapsed, the avatar button should be the logout trigger
-    const avatarButton = screen.getAllByRole("button").pop()!
-    await user.click(avatarButton)
+    renderSidebar()
 
+    await user.click(screen.getByRole("button", { name: /john doe/i }))
+    await user.click(await screen.findByText("Sign out"))
     expect(mockLogout).toHaveBeenCalled()
   })
 
-  it("shows loading spinner when logging out", () => {
-    ;(useAuth as Mock).mockReturnValue({
-      user: mockUser,
-      logout: vi.fn(),
-      isLoggingOut: true,
-      isAuthenticated: true,
-      isLoading: false,
-    })
-
-    render(<Sidebar />)
-
-    // Logout button should be disabled during logout
-    const buttons = screen.getAllByRole("button")
-    const logoutButton = buttons[buttons.length - 1]
-    expect(logoutButton).toBeDisabled()
-  })
-
-  it("renders the user avatar when a picture is set", () => {
-    ;(useAuth as Mock).mockReturnValue({
-      user: { ...mockUser, picture: "https://example.com/avatar.jpg" },
-      logout: vi.fn(),
-      isLoggingOut: false,
-      isAuthenticated: true,
-      isLoading: false,
-    })
-
-    render(<Sidebar />)
-
-    // Seven's Avatar (Radix) mounts the <img> only after the picture reports
-    // `load`, which jsdom never simulates — so the image element isn't queryable
-    // here. Actual image display is covered by the visual/E2E suite. At the unit
-    // level we assert the avatar mounts for the user via its initials fallback
-    // (collapsed + expanded sidebar variants both render it).
-    expect(screen.getAllByText("JD").length).toBeGreaterThan(0)
-  })
-
-  it("shows single letter initial when user has no name", () => {
+  it("falls back to a single initial when the user has no name", () => {
     ;(useAuth as Mock).mockReturnValue({
       user: { ...mockUser, name: null },
       logout: vi.fn(),
@@ -262,14 +147,12 @@ describe("Sidebar", () => {
       isLoading: false,
     })
 
-    render(<Sidebar />)
+    renderSidebar()
 
-    // Should show first letter of email "J" for "john@example.com"
-    const avatarFallbacks = screen.getAllByText("J")
-    expect(avatarFallbacks.length).toBeGreaterThan(0)
+    expect(screen.getAllByText("J").length).toBeGreaterThan(0)
   })
 
-  it("shows question mark when user has no name or email", () => {
+  it("falls back to '?' when the user has no name or email", () => {
     ;(useAuth as Mock).mockReturnValue({
       user: { id: "1", email: null, name: null, picture: null, role: "admin" },
       logout: vi.fn(),
@@ -278,9 +161,8 @@ describe("Sidebar", () => {
       isLoading: false,
     })
 
-    render(<Sidebar />)
+    renderSidebar()
 
-    const avatarFallbacks = screen.getAllByText("?")
-    expect(avatarFallbacks.length).toBeGreaterThan(0)
+    expect(screen.getAllByText("?").length).toBeGreaterThan(0)
   })
 })
diff --git a/packages/bhono-app/templates/base/tests/unit/client/components/ui/input.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/components/ui/input.test.tsx
deleted file mode 100644
index b01f4cd..0000000
--- a/packages/bhono-app/templates/base/tests/unit/client/components/ui/input.test.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { describe, it, expect, vi } from "vitest"
-import { render, screen } from "@tests/helpers/client-test-utils"
-import userEvent from "@testing-library/user-event"
-import { createRef } from "react"
-import { Input } from "@/components/ui/input"
-
-describe("Input", () => {
-  it("renders with placeholder", () => {
-    render(<Input placeholder="Enter text" />)
-
-    expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument()
-  })
-
-  it("renders as textbox by default", () => {
-    render(<Input placeholder="text input" />)
-
-    const input = screen.getByPlaceholderText("text input")
-    // Input defaults to text type when no type is specified
-    expect(input).toBeInTheDocument()
-    expect(screen.getByRole("textbox")).toBeInTheDocument()
-  })
-
-  it("renders with specified type", () => {
-    render(<Input type="email" placeholder="email input" />)
-
-    const input = screen.getByPlaceholderText("email input")
-    expect(input).toHaveAttribute("type", "email")
-  })
-
-  it("handles value changes", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-
-    render(<Input onChange={onChange} placeholder="type here" />)
-
-    const input = screen.getByPlaceholderText("type here")
-    await user.type(input, "hello")
-
-    expect(onChange).toHaveBeenCalled()
-    expect(input).toHaveValue("hello")
-  })
-
-  it("shows disabled state", () => {
-    render(<Input disabled placeholder="disabled input" />)
-
-    const input = screen.getByPlaceholderText("disabled input")
-    expect(input).toBeDisabled()
-    expect(input).toHaveClass("disabled:cursor-not-allowed")
-    expect(input).toHaveClass("disabled:opacity-50")
-  })
-
-  it("forwards ref correctly", () => {
-    const ref = createRef<HTMLInputElement>()
-
-    render(<Input ref={ref} placeholder="ref test" />)
-
-    expect(ref.current).toBeInstanceOf(HTMLInputElement)
-    expect(ref.current?.placeholder).toBe("ref test")
-  })
-
-  it("applies custom className", () => {
-    render(<Input className="custom-class" placeholder="custom" />)
-
-    const input = screen.getByPlaceholderText("custom")
-    expect(input).toHaveClass("custom-class")
-  })
-
-  it("handles controlled value", () => {
-    const { rerender } = render(<Input value="initial" onChange={() => {}} placeholder="controlled" />)
-
-    const input = screen.getByPlaceholderText("controlled")
-    expect(input).toHaveValue("initial")
-
-    rerender(<Input value="updated" onChange={() => {}} placeholder="controlled" />)
-    expect(input).toHaveValue("updated")
-  })
-
-  it("renders password type input", () => {
-    render(<Input type="password" placeholder="password" />)
-
-    const input = screen.getByPlaceholderText("password")
-    expect(input).toHaveAttribute("type", "password")
-  })
-
-  it("supports aria attributes", () => {
-    render(
-      <Input
-        aria-label="Email address"
-        aria-describedby="email-hint"
-        placeholder="email"
-      />
-    )
-
-    const input = screen.getByPlaceholderText("email")
-    expect(input).toHaveAttribute("aria-label", "Email address")
-    expect(input).toHaveAttribute("aria-describedby", "email-hint")
-  })
-})
diff --git a/packages/bhono-app/templates/base/tests/unit/client/components/ui/loading-skeleton.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/components/ui/loading-skeleton.test.tsx
index 50a08d1..8d9a957 100644
--- a/packages/bhono-app/templates/base/tests/unit/client/components/ui/loading-skeleton.test.tsx
+++ b/packages/bhono-app/templates/base/tests/unit/client/components/ui/loading-skeleton.test.tsx
@@ -4,7 +4,6 @@ import {
   DashboardSkeleton,
   TeamSkeleton,
   PageSkeleton,
-  SidebarSkeleton,
 } from "@/components/ui/loading-skeleton"
 
 describe("DashboardSkeleton", () => {
@@ -93,48 +92,3 @@ describe("PageSkeleton", () => {
     expect(contentLines.length).toBeGreaterThanOrEqual(4)
   })
 })
-
-describe("SidebarSkeleton", () => {
-  it("renders sidebar skeleton structure", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    // Should be an aside element
-    const sidebar = container.querySelector("aside")
-    expect(sidebar).toBeInTheDocument()
-  })
-
-  it("renders with correct width", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    const sidebar = container.querySelector("aside")
-    expect(sidebar).toHaveClass("w-64")
-  })
-
-  it("renders header with logo placeholder", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    // Logo skeleton (h-8 w-8 rounded-lg)
-    const logoSkeleton = container.querySelector(".h-8.w-8.rounded-lg")
-    expect(logoSkeleton).toBeInTheDocument()
-  })
-
-  it("renders navigation skeletons", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    // Nav element
-    const nav = container.querySelector("nav")
-    expect(nav).toBeInTheDocument()
-
-    // Navigation item skeletons (h-10 w-full rounded-lg)
-    const navItems = container.querySelectorAll(".h-10.w-full.rounded-lg")
-    expect(navItems.length).toBeGreaterThanOrEqual(5)
-  })
-
-  it("renders user profile skeleton at bottom", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    // User avatar skeleton (h-9 w-9 rounded-full)
-    const userAvatar = container.querySelector(".h-9.w-9.rounded-full")
-    expect(userAvatar).toBeInTheDocument()
-  })
-})
diff --git a/packages/bhono-app/templates/base/tests/unit/client/components/ui/skeleton.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/components/ui/skeleton.test.tsx
deleted file mode 100644
index 8a3c2a2..0000000
--- a/packages/bhono-app/templates/base/tests/unit/client/components/ui/skeleton.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { render, screen } from "@tests/helpers/client-test-utils"
-import { createRef } from "react"
-import { Skeleton } from "@/components/ui/skeleton"
-
-describe("Skeleton", () => {
-  it("renders a skeleton element", () => {
-    render(<Skeleton data-testid="skeleton" />)
-
-    expect(screen.getByTestId("skeleton")).toBeInTheDocument()
-  })
-
-  it("applies default styles", () => {
-    render(<Skeleton data-testid="skeleton" />)
-
-    const skeleton = screen.getByTestId("skeleton")
-    expect(skeleton).toHaveClass("animate-pulse")
-    expect(skeleton).toHaveClass("rounded-md")
-    expect(skeleton).toHaveClass("bg-muted")
-  })
-
-  it("applies custom className", () => {
-    render(<Skeleton data-testid="skeleton" className="h-8 w-32" />)
-
-    const skeleton = screen.getByTestId("skeleton")
-    expect(skeleton).toHaveClass("h-8")
-    expect(skeleton).toHaveClass("w-32")
-    expect(skeleton).toHaveClass("animate-pulse") // Still has default
-  })
-
-  it("renders as div element", () => {
-    render(<Skeleton data-testid="skeleton" />)
-
-    const skeleton = screen.getByTestId("skeleton")
-    expect(skeleton.tagName).toBe("DIV")
-  })
-
-  it("passes through additional props", () => {
-    render(<Skeleton data-testid="skeleton" aria-label="Loading..." />)
-
-    const skeleton = screen.getByTestId("skeleton")
-    expect(skeleton).toHaveAttribute("aria-label", "Loading...")
-  })
-})
diff --git a/packages/bhono-app/templates/base/tests/unit/client/components/ui/sonner.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/components/ui/sonner.test.tsx
deleted file mode 100644
index 22fc9d7..0000000
--- a/packages/bhono-app/templates/base/tests/unit/client/components/ui/sonner.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { render, screen } from "@tests/helpers/client-test-utils"
-import { Toaster } from "@/components/ui/sonner"
-
-describe("Toaster", () => {
-  it("renders toaster component", () => {
-    render(<Toaster data-testid="toaster" />)
-
-    // Sonner creates a container with role="region"
-    expect(screen.getByRole("region")).toBeInTheDocument()
-  })
-
-  it("uses theme from context", () => {
-    // The render function from test-utils wraps with ThemeProvider
-    // which defaults to system theme (light in jsdom)
-    render(<Toaster />)
-
-    // Toaster should be rendered (theme integration works)
-    expect(screen.getByRole("region")).toBeInTheDocument()
-  })
-
-  it("passes through additional props", () => {
-    render(<Toaster position="top-center" />)
-
-    // Toaster should render with custom position
-    expect(screen.getByRole("region")).toBeInTheDocument()
-  })
-})
diff --git a/packages/bhono-app/templates/base/tests/unit/client/routes/_authenticated/integrations.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/routes/_authenticated/integrations.test.tsx
index cd53858..cad8bcb 100644
--- a/packages/bhono-app/templates/base/tests/unit/client/routes/_authenticated/integrations.test.tsx
+++ b/packages/bhono-app/templates/base/tests/unit/client/routes/_authenticated/integrations.test.tsx
@@ -256,7 +256,8 @@ describe('Integrations Page', () => {
         expect(screen.getByText('Build Custom Integrations')).toBeInTheDocument()
       }, { timeout: 10000 })
       expect(screen.getByText('Use our API to build your own integrations.')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: /view api docs/i })).toBeInTheDocument()
+      // "View API Docs" is a Button asChild → <a> (a styled link), so its role is `link`.
+      expect(screen.getByRole('link', { name: /view api docs/i })).toBeInTheDocument()
     })
   })
 
@@ -298,9 +299,13 @@ describe('Integrations Page', () => {
 
       await user.click(configureButtons[0])
 
-      // Should show loading state during toggle
+      // Configure now OPENS a configuration dialog. Previously it called the
+      // toggle/disconnect handler — that label-vs-behavior mismatch was the bug
+      // this change fixed, so we assert the dialog opens instead of a disable.
       await waitFor(() => {
-        expect(configureButtons[0]).toBeDisabled()
+        expect(
+          screen.getByText(/configuration options for this integration are coming soon/i),
+        ).toBeInTheDocument()
       })
     })
   })
@@ -326,12 +331,12 @@ describe('Integrations Page', () => {
         expect(screen.getByText('https://api.example.com/webhooks/receive')).toBeInTheDocument()
       }, { timeout: 10000 })
 
-      // Find the delete button (trash icon button with destructive text styling).
-      // Filter on `text-destructive` specifically: Seven's Button base class
-      // includes `border-destructive`/`ring-destructive` on every button, so a
-      // bare `destructive` match would select all buttons.
+      // Find the webhook delete button: an icon-only destructive button. The
+      // IntegrationCard "Disconnect" buttons are also `text-destructive` but
+      // carry a text label (and open a confirm dialog), so filter to the
+      // icon-only one (empty text content) — that's the webhook delete.
       const deleteButtons = screen.getAllByRole('button').filter(btn =>
-        btn.className.includes('text-destructive')
+        btn.className.includes('text-destructive') && btn.textContent?.trim() === ''
       )
       expect(deleteButtons.length).toBeGreaterThan(0)
 
@@ -448,7 +453,7 @@ describe('Integrations Page', () => {
       })
 
       // Click on User Created event
-      const userCreatedButton = screen.getByText('User Created').closest('button')!
+      const userCreatedButton = screen.getByText('User Created').closest('label')!
       await user.click(userCreatedButton)
 
       // Event should be selected (check for visual indicator)
diff --git a/packages/bhono-app/templates/base/tests/unit/client/routes/authenticated-layout.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/routes/authenticated-layout.test.tsx
index 26c1234..c40945e 100644
--- a/packages/bhono-app/templates/base/tests/unit/client/routes/authenticated-layout.test.tsx
+++ b/packages/bhono-app/templates/base/tests/unit/client/routes/authenticated-layout.test.tsx
@@ -20,11 +20,11 @@ describe('Authenticated Layout', () => {
       renderRoute({ initialEntries: ['/dashboard'] })
 
       await waitFor(() => {
-        // Sidebar should be visible
-        expect(screen.getByRole('navigation')).toBeInTheDocument()
+        // Seven's Sidebar renders <nav aria-label="Main navigation">
+        expect(screen.getByRole('navigation', { name: /main navigation/i })).toBeInTheDocument()
       })
 
-      // Main content should be rendered
+      // SidebarInset is the <main> content area
       expect(screen.getByRole('main')).toBeInTheDocument()
     })
 
@@ -83,7 +83,7 @@ describe('Authenticated Layout', () => {
 
       // Should show skeleton loading states
       await waitFor(() => {
-        const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
+        const skeletons = document.querySelectorAll('[data-slot="skeleton-loader"]')
         expect(skeletons.length).toBeGreaterThan(0)
       }, { timeout: 1000 })
 
@@ -123,7 +123,7 @@ describe('Authenticated Layout', () => {
 
       // Should show skeleton elements
       await waitFor(() => {
-        const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
+        const skeletons = document.querySelectorAll('[data-slot="skeleton-loader"]')
         expect(skeletons.length).toBeGreaterThan(0)
       }, { timeout: 1000 })
 
diff --git a/packages/bhono-app/templates/base/tests/unit/client/routes/dashboard.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/routes/dashboard.test.tsx
index 26dfcfd..7c2382a 100644
--- a/packages/bhono-app/templates/base/tests/unit/client/routes/dashboard.test.tsx
+++ b/packages/bhono-app/templates/base/tests/unit/client/routes/dashboard.test.tsx
@@ -44,7 +44,8 @@ describe('Dashboard Page', () => {
       renderRoute({ initialEntries: ['/dashboard'] })
 
       await waitFor(() => {
-        expect(screen.getByText('Dashboard')).toBeInTheDocument()
+        // "Dashboard" appears in both the breadcrumb and the sidebar nav
+        expect(screen.getAllByText('Dashboard').length).toBeGreaterThan(0)
       })
 
       expect(screen.getByText('Team')).toBeInTheDocument()
diff --git a/packages/bhono-app/templates/base/tests/unit/client/routes/error-components.test.tsx b/packages/bhono-app/templates/base/tests/unit/client/routes/error-components.test.tsx
index b7f79a2..b38251a 100644
--- a/packages/bhono-app/templates/base/tests/unit/client/routes/error-components.test.tsx
+++ b/packages/bhono-app/templates/base/tests/unit/client/routes/error-components.test.tsx
@@ -121,14 +121,6 @@ describe('AuthenticatedErrorComponent', () => {
     expect(screen.getByText(/Detailed auth error message/)).toBeInTheDocument()
   })
 
-  it('renders sidebar alongside error', () => {
-    const error = new Error('Error')
-    render(<AuthenticatedErrorComponent error={error} />)
-
-    // Sidebar should be present (navigation)
-    expect(screen.getByRole('navigation')).toBeInTheDocument()
-  })
-
   it('renders try again button', () => {
     const error = new Error('Error')
     render(<AuthenticatedErrorComponent error={error} />)
@@ -155,7 +147,7 @@ describe('AuthenticatedErrorComponent', () => {
     const { container } = render(<AuthenticatedErrorComponent error={error} />)
 
     const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveClass('flex', 'h-screen', 'overflow-hidden')
+    expect(wrapper).toHaveClass('h-screen')
   })
 
   it('handles button clicks', () => {
@@ -170,31 +162,18 @@ describe('AuthenticatedErrorComponent', () => {
 })
 
 describe('AuthenticatedPendingComponent', () => {
-  it('renders skeleton loader', () => {
+  it('renders Seven skeleton loaders', () => {
     render(<AuthenticatedPendingComponent />)
 
-    const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
+    const skeletons = document.querySelectorAll('[data-slot="skeleton-loader"]')
     expect(skeletons.length).toBeGreaterThan(0)
   })
 
-  it('has correct layout structure', () => {
+  it('is centered full-screen with no sidebar in the pending state', () => {
     const { container } = render(<AuthenticatedPendingComponent />)
 
     const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveClass('flex', 'h-screen', 'overflow-hidden')
-  })
-
-  it('renders main content area', () => {
-    render(<AuthenticatedPendingComponent />)
-
-    expect(screen.getByRole('main')).toBeInTheDocument()
-  })
-
-  it('renders sidebar skeleton area', () => {
-    const { container } = render(<AuthenticatedPendingComponent />)
-
-    // Should have the sidebar skeleton (aside element)
-    const aside = container.querySelector('aside')
-    expect(aside).toBeInTheDocument()
+    expect(wrapper).toHaveClass('h-screen')
+    expect(container.querySelector('aside')).not.toBeInTheDocument()
   })
 })
diff --git a/packages/create-bhono/package.json b/packages/create-bhono/package.json
index 1e97751..a8144e4 100644
--- a/packages/create-bhono/package.json
+++ b/packages/create-bhono/package.json
@@ -14,6 +14,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@etus/bhono": "^0.4.0"
+    "@etus/bhono": "workspace:^"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 414f03a..21e5b28 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,11 +18,11 @@ importers:
         specifier: 0.1.0-beta.3
         version: 0.1.0-beta.3(@floating-ui/dom@1.7.6)(@tiptap/extension-code-block@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extension-list@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extensions@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)
       '@etus/tokens':
-        specifier: 0.4.0-beta.2
-        version: 0.4.0-beta.2
+        specifier: 0.4.0-beta.8
+        version: 0.4.0-beta.8
       '@etus/ui':
-        specifier: 0.4.0-beta.2
-        version: 0.4.0-beta.2(@floating-ui/dom@1.7.6)(@tiptap/extension-code-block@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extension-list@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extensions@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)
+        specifier: 0.4.0-beta.10
+        version: 0.4.0-beta.10(@floating-ui/dom@1.7.6)(@tiptap/extension-code-block@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extension-list@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extensions@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)
       '@hono/swagger-ui':
         specifier: ^0.6.1
         version: 0.6.1(hono@4.12.21)
@@ -260,7 +260,7 @@ importers:
   packages/create-bhono:
     dependencies:
       '@etus/bhono':
-        specifier: ^0.4.0
+        specifier: workspace:^
         version: link:../bhono-app
 
 packages:
@@ -1079,11 +1079,11 @@ packages:
       react: ^19.0.0
       react-dom: ^19.0.0
 
-  '@etus/tokens@0.4.0-beta.2':
-    resolution: {integrity: sha512-00x1pRQzZn241qOosifHB4yYpmLJhpEVjJ5KiKHIoBENY8Ec/WxmDXcfrpNP0cHRVEG9s+YDfOIj9X0L87vWJQ==}
+  '@etus/tokens@0.4.0-beta.8':
+    resolution: {integrity: sha512-6C4satITSQE7QppGHT0k3sv/ldwMl4r5lJ/koILx51ZcnlqjURmTaS06iBW+pkdZUAzw1QtfYZi7ojwd5qUUMA==}
 
-  '@etus/ui@0.4.0-beta.2':
-    resolution: {integrity: sha512-z2KdvjNKKEMufHMPsCR8CJ454TtwZgil7cnYWLjFpofeSikq/sfnKsTWsYKqy14K1IzqNvh0vmlmgApoRphRvA==}
+  '@etus/ui@0.4.0-beta.10':
+    resolution: {integrity: sha512-wG7Mbwfu+mSp4sauufXt4yQJjDwyQ/Wk1+pRyQWmRl6I2z8Xe4dWAUB4qNabw+lNEiFvlOvEJ3J+eKi9+GdSqQ==}
     peerDependencies:
       react: ^19.0.0
       react-dom: ^19.0.0
@@ -6368,8 +6368,8 @@ snapshots:
 
   '@etus/seven-react@0.1.0-beta.3(@floating-ui/dom@1.7.6)(@tiptap/extension-code-block@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extension-list@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extensions@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)':
     dependencies:
-      '@etus/tokens': 0.4.0-beta.2
-      '@etus/ui': 0.4.0-beta.2(@floating-ui/dom@1.7.6)(@tiptap/extension-code-block@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extension-list@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extensions@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)
+      '@etus/tokens': 0.4.0-beta.8
+      '@etus/ui': 0.4.0-beta.10(@floating-ui/dom@1.7.6)(@tiptap/extension-code-block@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extension-list@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extensions@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)
       react: 19.2.6
       react-dom: 19.2.6(react@19.2.6)
     transitivePeerDependencies:
@@ -6384,14 +6384,14 @@ snapshots:
       - react-is
       - redux
 
-  '@etus/tokens@0.4.0-beta.2': {}
+  '@etus/tokens@0.4.0-beta.8': {}
 
-  '@etus/ui@0.4.0-beta.2(@floating-ui/dom@1.7.6)(@tiptap/extension-code-block@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extension-list@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extensions@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)':
+  '@etus/ui@0.4.0-beta.10(@floating-ui/dom@1.7.6)(@tiptap/extension-code-block@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extension-list@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@tiptap/extensions@3.23.6(@tiptap/core@3.23.6(@tiptap/pm@3.23.6))(@tiptap/pm@3.23.6))(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(highlight.js@11.11.1)(lowlight@3.3.0)(react-dom@19.2.6(react@19.2.6))(react-is@17.0.2)(react@19.2.6)(redux@5.0.1)':
     dependencies:
       '@dnd-kit/core': 6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@dnd-kit/sortable': 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(react@19.2.6)
       '@dnd-kit/utilities': 3.2.2(react@19.2.6)
-      '@etus/tokens': 0.4.0-beta.2
+      '@etus/tokens': 0.4.0-beta.8
       '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-aspect-ratio': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
diff --git a/src/client/components/app-toaster.tsx b/src/client/components/app-toaster.tsx
new file mode 100644
index 0000000..b7a0309
--- /dev/null
+++ b/src/client/components/app-toaster.tsx
@@ -0,0 +1,8 @@
+import { Toaster } from '@etus/seven-react'
+import { useTheme } from '@/hooks/use-theme'
+
+/** Seven's Toaster wired to the app theme (needs the ThemeProvider context). */
+export function AppToaster() {
+  const { resolvedTheme } = useTheme()
+  return <Toaster theme={resolvedTheme} />
+}
diff --git a/src/client/components/error-boundary.tsx b/src/client/components/error-boundary.tsx
index ab472b4..77eb30c 100644
--- a/src/client/components/error-boundary.tsx
+++ b/src/client/components/error-boundary.tsx
@@ -1,5 +1,6 @@
 // src/client/components/error-boundary.tsx
 import { Component, type ReactNode } from 'react'
+import { Button } from '@etus/seven-react'
 
 interface ErrorBoundaryProps {
   children: ReactNode
@@ -52,12 +53,12 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
             <p className="mt-2 text-sm text-muted-foreground">
               {this.state.error?.message ?? 'An unexpected error occurred'}
             </p>
-            <button
+            <Button
+              className="mt-4"
               onClick={() => { this.setState({ hasError: false, error: null }) }}
-              className="mt-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
             >
               Try again
-            </button>
+            </Button>
           </div>
         </div>
       )
diff --git a/src/client/components/sidebar.tsx b/src/client/components/sidebar.tsx
index 02cbb2f..6418d93 100644
--- a/src/client/components/sidebar.tsx
+++ b/src/client/components/sidebar.tsx
@@ -1,36 +1,53 @@
 import { Link, useLocation } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
-import { cn } from '@/lib/utils'
-import { Avatar, AvatarFallback, AvatarImage, Button } from '@etus/seven-react'
-import { Separator } from '@/components/ui/separator'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarRail,
+  SidebarTrigger,
+  Text,
+} from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 import { useTheme } from '@/hooks/use-theme'
 
-interface SidebarProps {
-  defaultCollapsed?: boolean
-}
-
 const mainNavItems = [
   { to: '/dashboard', label: 'Dashboard', icon: Icons.dashboard },
   { to: '/team', label: 'Team', icon: Icons.users },
   { to: '/workspaces', label: 'Workspaces', icon: Icons.layers },
   { to: '/integrations', label: 'Integrations', icon: Icons.blocks },
-]
+] as const
 
 const accountNavItems = [
   { to: '/account', label: 'Account', icon: Icons.user },
   { to: '/settings', label: 'Settings', icon: Icons.settings },
-]
-
-// Detect platform for keyboard shortcut display (use userAgent since platform is deprecated)
-const getIsMac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
-
-export function Sidebar({ defaultCollapsed = false }: SidebarProps) {
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed)
-  const [isMac] = useState(getIsMac)
-  const { user, logout, isLoggingOut } = useAuth()
+] as const
+
+/**
+ * App shell sidebar, composed from the Seven `Sidebar` system (single mode,
+ * collapsible to icon rail). Navigation/auth/theme logic is preserved; the
+ * presentation is the Seven DS. The footer uses `SidebarAvatar` + a dropdown
+ * (the idiomatic user-identity footer), and active items carry aria-current.
+ */
+export function AppSidebar() {
   const location = useLocation()
+  const { user, logout, isLoggingOut } = useAuth()
   const { theme, setTheme, resolvedTheme } = useTheme()
 
   const initials = user?.name
@@ -39,229 +56,113 @@ export function Sidebar({ defaultCollapsed = false }: SidebarProps) {
       ? user.email[0].toUpperCase()
       : '?'
 
-  // Keyboard shortcut to toggle sidebar
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'b' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setIsCollapsed((prev) => !prev)
-      }
-    }
-    window.addEventListener('keydown', handleKeyDown)
-    return () => { window.removeEventListener('keydown', handleKeyDown) }
-  }, [])
-
-  return (
-    <aside
-      className={cn(
-        "flex h-screen flex-col border-r bg-sidebar transition-all duration-300 ease-in-out",
-        isCollapsed ? "w-16" : "w-64"
-      )}
-    >
-      {/* Header */}
-      <div className={cn(
-        "flex h-14 items-center border-b px-3",
-        isCollapsed ? "justify-center" : "justify-between"
-      )}>
-        <Link
-          to="/dashboard"
-          className={cn(
-            "flex items-center gap-2 font-semibold transition-opacity",
-            isCollapsed && "justify-center"
-          )}
-        >
-          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
-            <Icons.command className="h-4 w-4" />
-          </div>
-          {!isCollapsed && <span className="text-sidebar-foreground">Hono</span>}
-        </Link>
-
-        {!isCollapsed && (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
-            onClick={() => { setIsCollapsed(true) }}
-          >
-            <Icons.chevronRight className="h-4 w-4 rotate-180" />
-          </Button>
-        )}
-      </div>
-
-      {/* Expand button when collapsed */}
-      {isCollapsed && (
-        <div className="flex justify-center py-2">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
-            onClick={() => { setIsCollapsed(false) }}
-          >
-            <Icons.chevronRight className="h-4 w-4" />
-          </Button>
-        </div>
-      )}
-
-      {/* Main Navigation */}
-      <nav className="flex-1 space-y-1 overflow-y-auto p-2">
-        <div className="space-y-1">
-          {!isCollapsed && (
-            <p className="px-3 py-2 text-xs font-medium text-sidebar-foreground/50 uppercase tracking-wider">
-              Main
-            </p>
-          )}
-          {mainNavItems.map((item) => (
-            <NavItem
-              key={item.to}
-              to={item.to}
-              label={item.label}
-              icon={item.icon}
-              isActive={location.pathname === item.to}
-              isCollapsed={isCollapsed}
-            />
-          ))}
-        </div>
-
-        <Separator className="my-4 bg-sidebar-border" />
-
-        <div className="space-y-1">
-          {!isCollapsed && (
-            <p className="px-3 py-2 text-xs font-medium text-sidebar-foreground/50 uppercase tracking-wider">
-              Account
-            </p>
-          )}
-          {accountNavItems.map((item) => (
-            <NavItem
-              key={item.to}
-              to={item.to}
-              label={item.label}
-              icon={item.icon}
-              isActive={location.pathname === item.to}
-              isCollapsed={isCollapsed}
-            />
-          ))}
-        </div>
-      </nav>
-
-      {/* Theme toggle and keyboard shortcut hint */}
-      <div className={cn(
-        "px-3 py-2",
-        isCollapsed ? "flex justify-center" : "flex items-center justify-between"
-      )}>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-8 w-8 text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
-          onClick={() => {
-            const next = theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light'
-            setTheme(next)
-          }}
-          title={`Theme: ${theme} (click to change)`}
-        >
-          {resolvedTheme === 'dark' ? (
-            <Icons.moon className="h-4 w-4" />
-          ) : (
-            <Icons.sun className="h-4 w-4" />
-          )}
-        </Button>
-        {!isCollapsed && (
-          <p className="text-xs text-sidebar-foreground/40">
-            <kbd className="px-1.5 py-0.5 text-[10px] font-mono bg-sidebar-accent rounded">
-              {isMac ? '⌘' : 'Ctrl+'}B
-            </kbd>
-            {' '}collapse
-          </p>
-        )}
-      </div>
-
-      <Separator className="bg-sidebar-border" />
-
-      {/* User Profile */}
-      <div className={cn(
-        "p-3",
-        isCollapsed ? "flex justify-center" : ""
-      )}>
-        {isCollapsed ? (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-10 w-10 rounded-full p-0 hover:bg-sidebar-accent"
-            onClick={() => { logout() }}
-            disabled={isLoggingOut}
-          >
-            <Avatar className="h-8 w-8">
-              <AvatarImage src={user?.picture ?? undefined} alt={user?.name ?? ''} />
-              <AvatarFallback className="text-xs bg-sidebar-accent text-sidebar-foreground">
-                {initials}
-              </AvatarFallback>
-            </Avatar>
-          </Button>
-        ) : (
-          <div className="flex items-center gap-3 rounded-lg p-2 hover:bg-sidebar-accent transition-colors">
-            <Avatar className="h-9 w-9 shrink-0">
-              <AvatarImage src={user?.picture ?? undefined} alt={user?.name ?? ''} />
-              <AvatarFallback className="text-xs bg-sidebar-accent text-sidebar-foreground">
-                {initials}
-              </AvatarFallback>
-            </Avatar>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-sidebar-foreground truncate">
-                {user?.name}
-              </p>
-              <p className="text-xs text-sidebar-foreground/60 truncate">
-                {user?.email}
-              </p>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 shrink-0 text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent"
-              onClick={() => { logout() }}
-              disabled={isLoggingOut}
-            >
-              {isLoggingOut ? (
-                <Icons.spinner className="h-4 w-4 animate-spin" />
-              ) : (
-                <Icons.logout className="h-4 w-4" />
-              )}
-            </Button>
-          </div>
-        )}
-      </div>
-    </aside>
-  )
-}
+  const cycleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light')
+  }
 
-function NavItem({
-  to,
-  label,
-  icon: Icon,
-  isActive,
-  isCollapsed,
-}: {
-  to: string
-  label: string
-  icon: React.ComponentType<{ className?: string }>
-  isActive: boolean
-  isCollapsed: boolean
-}) {
   return (
-    <Link
-      to={to}
-      className={cn(
-        "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all",
-        isCollapsed && "justify-center px-2",
-        isActive
-          ? "bg-sidebar-accent text-sidebar-foreground"
-          : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
-      )}
-      title={isCollapsed ? label : undefined}
-    >
-      <Icon className={cn("h-5 w-5 shrink-0", isActive && "text-primary")} />
-      {!isCollapsed && <span>{label}</span>}
-      {!isCollapsed && isActive && (
-        <div className="ml-auto h-1.5 w-1.5 rounded-full bg-primary" />
-      )}
-    </Link>
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem className="flex items-center justify-between gap-2">
+            <SidebarMenuButton asChild size="lg" tooltip="Hono" className="flex-1">
+              <Link to="/dashboard">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                  <Icons.command className="size-4" />
+                </div>
+                <Text as="span" weight="semibold">Hono</Text>
+              </Link>
+            </SidebarMenuButton>
+            {/* Collapse trigger lives in the sidebar header (right of the logo),
+                matching Seven's single-mode; hidden when collapsed to icon rail. */}
+            <SidebarTrigger className="-mr-1 group-data-[collapsible=icon]:hidden" />
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Main</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {mainNavItems.map((item) => {
+                const active = location.pathname === item.to
+                return (
+                  <SidebarMenuItem key={item.to}>
+                    <SidebarMenuButton asChild isActive={active} tooltip={item.label}>
+                      <Link aria-current={active ? 'page' : undefined} to={item.to}>
+                        <item.icon />
+                        <span>{item.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                )
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarGroupLabel>Account</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {accountNavItems.map((item) => {
+                const active = location.pathname === item.to
+                return (
+                  <SidebarMenuItem key={item.to}>
+                    <SidebarMenuButton asChild isActive={active} tooltip={item.label}>
+                      <Link aria-current={active ? 'page' : undefined} to={item.to}>
+                        <item.icon />
+                        <span>{item.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                )
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton tooltip={`Theme: ${theme}`} onClick={cycleTheme}>
+              {resolvedTheme === 'dark' ? <Icons.moon /> : <Icons.sun />}
+              <span>Theme</span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton size="lg">
+                  <Avatar className="size-8 rounded-lg">
+                    <AvatarImage alt={user?.name ?? ''} src={user?.picture ?? undefined} />
+                    <AvatarFallback className="rounded-lg text-xs">{initials}</AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+                    <span className="truncate font-medium">{user?.name}</span>
+                    <span className="truncate text-xs text-muted-foreground">{user?.email}</span>
+                  </div>
+                  <Icons.chevronRight className="ml-auto size-4 rotate-90 group-data-[collapsible=icon]:hidden" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56" side="top">
+                <DropdownMenuLabel className="truncate font-medium">
+                  {user?.name ?? user?.email}
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem disabled={isLoggingOut} onClick={() => { logout() }}>
+                  <Icons.logout />
+                  Sign out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
   )
 }
diff --git a/src/client/components/ui/error-fallback.tsx b/src/client/components/ui/error-fallback.tsx
index 0fdd348..bff250d 100644
--- a/src/client/components/ui/error-fallback.tsx
+++ b/src/client/components/ui/error-fallback.tsx
@@ -148,8 +148,8 @@ export function Unauthorized({
     <div className="flex min-h-[400px] items-center justify-center p-6">
       <div className="mx-auto max-w-md text-center">
         {/* Icon */}
-        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-amber-500/10">
-          <AlertTriangle className="h-8 w-8 text-amber-500" />
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-warning-subtle">
+          <AlertTriangle className="h-8 w-8 text-warning" />
         </div>
 
         {/* Title */}
diff --git a/src/client/components/ui/input.tsx b/src/client/components/ui/input.tsx
deleted file mode 100644
index d9511fc..0000000
--- a/src/client/components/ui/input.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { ComponentProps, Ref } from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({
-  className,
-  type,
-  ref,
-  ...props
-}: ComponentProps<"input"> & { ref?: Ref<HTMLInputElement> }) {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-}
-
-export { Input }
diff --git a/src/client/components/ui/loading-skeleton.tsx b/src/client/components/ui/loading-skeleton.tsx
index 39c24f6..f764f89 100644
--- a/src/client/components/ui/loading-skeleton.tsx
+++ b/src/client/components/ui/loading-skeleton.tsx
@@ -1,5 +1,4 @@
-import { Skeleton } from "./skeleton"
-import { Card, CardContent, CardHeader } from '@etus/seven-react'
+import { Card, CardContent, CardHeader, SkeletonLoader as Skeleton } from '@etus/seven-react'
 // Helper to create stable keys for skeleton items
 const skeletonItems = (count: number, prefix: string) =>
   Array.from({ length: count }, (_, i) => `${prefix}-${String(i)}`)
@@ -111,43 +110,3 @@ export function PageSkeleton() {
     </div>
   )
 }
-
-export function SidebarSkeleton() {
-  return (
-    <aside className="flex h-screen w-64 flex-col border-r bg-sidebar">
-      {/* Header */}
-      <div className="flex h-14 items-center justify-between border-b px-3">
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-8 w-8 rounded-lg" />
-          <Skeleton className="h-5 w-16" />
-        </div>
-      </div>
-
-      {/* Navigation */}
-      <nav className="flex-1 space-y-1 p-2">
-        <Skeleton className="h-4 w-12 mx-3 my-2" />
-        {skeletonItems(3, "nav-main").map((key) => (
-          <Skeleton key={key} className="h-10 w-full rounded-lg" />
-        ))}
-
-        <div className="my-4" />
-
-        <Skeleton className="h-4 w-16 mx-3 my-2" />
-        {skeletonItems(2, "nav-account").map((key) => (
-          <Skeleton key={key} className="h-10 w-full rounded-lg" />
-        ))}
-      </nav>
-
-      {/* User profile */}
-      <div className="border-t p-3">
-        <div className="flex items-center gap-3 p-2">
-          <Skeleton className="h-9 w-9 rounded-full" />
-          <div className="flex-1 space-y-2">
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="h-3 w-32" />
-          </div>
-        </div>
-      </div>
-    </aside>
-  )
-}
diff --git a/src/client/components/ui/separator.tsx b/src/client/components/ui/separator.tsx
deleted file mode 100644
index 3676ce5..0000000
--- a/src/client/components/ui/separator.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { HTMLAttributes, Ref } from "react"
-
-import { cn } from "@/lib/utils"
-
-interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
-  orientation?: "horizontal" | "vertical"
-  decorative?: boolean
-  ref?: Ref<HTMLDivElement>
-}
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ref,
-  ...props
-}: SeparatorProps) {
-  return (
-    <div
-      ref={ref}
-      role={decorative ? "none" : "separator"}
-      aria-orientation={decorative ? undefined : orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
diff --git a/src/client/components/ui/skeleton.tsx b/src/client/components/ui/skeleton.tsx
deleted file mode 100644
index 2374b67..0000000
--- a/src/client/components/ui/skeleton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
diff --git a/src/client/components/ui/sonner.tsx b/src/client/components/ui/sonner.tsx
deleted file mode 100644
index 8cfbe6f..0000000
--- a/src/client/components/ui/sonner.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Toaster as Sonner } from "sonner"
-import { useTheme } from "@/hooks/use-theme"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-function Toaster({ ...props }: ToasterProps) {
-  const { resolvedTheme } = useTheme()
-
-  return (
-    <Sonner
-      theme={resolvedTheme}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }
diff --git a/src/client/index.css b/src/client/index.css
index 3900338..96abed3 100644
--- a/src/client/index.css
+++ b/src/client/index.css
@@ -40,123 +40,16 @@
   --color-info-solid: oklch(61.19% 0.1963 255.1);
   --color-info-solid-foreground: oklch(100% 0 0);
 
-  /* --- Green Palette (Primary) --- */
-  --color-green-50: oklch(97.78% 0.0219 153.08);
-  --color-green-100: oklch(94.42% 0.0639 151.07);
-  --color-green-200: oklch(89.76% 0.1134 150.7);
-  --color-green-300: oklch(83.6% 0.1697 150.26);
-  --color-green-400: oklch(81.06% 0.2032 150.12);
-  --color-green-500: oklch(72.27% 0.1939 149.58);
-  --color-green-600: oklch(59.49% 0.1623 148.36);
-  --color-green-700: oklch(48.24% 0.1293 148.23);
-  --color-green-800: oklch(40.42% 0.1025 149.21);
-  --color-green-900: oklch(35.66% 0.0827 151.04);
-  --color-green-950: oklch(22.73% 0.0553 152.1);
-
-  /* --- Blue Palette --- */
-  --color-blue-50: oklch(97.05% 0.0139 236.62);
-  --color-blue-100: oklch(93.22% 0.032 254.6);
-  --color-blue-200: oklch(88.25% 0.0599 252.3);
-  --color-blue-300: oklch(80.93% 0.1054 251.81);
-  --color-blue-400: oklch(71.4% 0.1527 248.66);
-  --color-blue-500: oklch(61.19% 0.1963 255.1);
-  --color-blue-600: oklch(54.62% 0.2148 262.88);
-  --color-blue-700: oklch(48.82% 0.2171 264.38);
-  --color-blue-800: oklch(42.44% 0.1776 265.64);
-  --color-blue-900: oklch(37.91% 0.1383 265.52);
-  --color-blue-950: oklch(28.24% 0.0913 267.94);
-
-  /* --- Gray Palette --- */
-  --color-gray-50: oklch(98.51% 0 0);
-  --color-gray-100: oklch(96.83% 0 0);
-  --color-gray-200: oklch(92.2% 0 0);
-  --color-gray-300: oklch(87.17% 0 0);
-  --color-gray-400: oklch(70.7% 0 0);
-  --color-gray-500: oklch(55.55% 0.0234 264.36);
-  --color-gray-600: oklch(44.62% 0.0303 265.75);
-  --color-gray-700: oklch(37.18% 0.0275 265.75);
-  --color-gray-800: oklch(27.81% 0.0275 265.75);
-  --color-gray-900: oklch(20.79% 0.0424 265.75);
-  --color-gray-950: oklch(12.94% 0.0219 264.7);
-
-  /* --- Red Palette --- */
-  --color-red-50: oklch(97.05% 0.013 17.38);
-  --color-red-100: oklch(93.58% 0.0294 17.72);
-  --color-red-200: oklch(88.61% 0.0605 18.33);
-  --color-red-300: oklch(80.79% 0.1108 19.57);
-  --color-red-400: oklch(70.44% 0.1912 22.21);
-  --color-red-500: oklch(62.8% 0.2577 29.23);
-  --color-red-600: oklch(57.71% 0.2449 27.33);
-  --color-red-700: oklch(50.54% 0.2059 27.52);
-  --color-red-800: oklch(44.38% 0.1715 26.9);
-  --color-red-900: oklch(39.59% 0.1407 25.72);
-  --color-red-950: oklch(25.82% 0.0913 26.04);
-
-  /* --- Yellow Palette --- */
-  --color-yellow-50: oklch(98.69% 0.0294 102.85);
-  --color-yellow-100: oklch(97.35% 0.0769 103.19);
-  --color-yellow-200: oklch(94.49% 0.1297 99.39);
-  --color-yellow-300: oklch(90.54% 0.1638 91.39);
-  --color-yellow-400: oklch(85.2% 0.1702 84.43);
-  --color-yellow-500: oklch(79.88% 0.1702 70.08);
-  --color-yellow-600: oklch(66.59% 0.1587 52.25);
-  --color-yellow-700: oklch(55.47% 0.1424 47.09);
-  --color-yellow-800: oklch(47.64% 0.1211 46.2);
-  --color-yellow-900: oklch(42.16% 0.1036 47.45);
-  --color-yellow-950: oklch(28.6% 0.0719 48.72);
-
-  /* --- Pink Palette --- */
-  --color-pink-50: oklch(97.05% 0.0155 343.23);
-  --color-pink-100: oklch(94.05% 0.0326 343.23);
-  --color-pink-200: oklch(89.76% 0.0613 343.23);
-  --color-pink-300: oklch(82.33% 0.1108 343.23);
-  --color-pink-400: oklch(71.4% 0.1912 343.23);
-  --color-pink-500: oklch(65.64% 0.2196 354.31);
-  --color-pink-600: oklch(59.13% 0.2268 0.19);
-  --color-pink-700: oklch(52.55% 0.2059 1.26);
-  --color-pink-800: oklch(45.47% 0.1697 359.77);
-  --color-pink-900: oklch(40.42% 0.1407 358.28);
-  --color-pink-950: oklch(27.09% 0.0981 356.03);
-
-  /* --- Main-1 Palette --- */
-  --color-main1-50: oklch(96.68% 0.0164 237.45);
-  --color-main1-100: oklch(93.95% 0.0314 238.02);
-  --color-main1-200: oklch(89.4% 0.0555 236.93);
-  --color-main1-300: oklch(82.7% 0.0913 239.23);
-  --color-main1-400: oklch(74.7% 0.1211 236.02);
-  --color-main1-500: oklch(63.87% 0.1424 239.23);
-  --color-main1-600: oklch(54.26% 0.137 241.31);
-  --color-main1-700: oklch(47.27% 0.1163 240.99);
-  --color-main1-800: oklch(40.42% 0.0949 241.31);
-  --color-main1-900: oklch(35.66% 0.0769 243.07);
-  --color-main1-950: oklch(26.36% 0.0555 246.77);
-
-  /* --- Main-2 Palette --- */
-  --color-main2-50: oklch(96.68% 0.0196 246.77);
-  --color-main2-100: oklch(93.58% 0.0408 248.66);
-  --color-main2-200: oklch(88.61% 0.0739 247.97);
-  --color-main2-300: oklch(80.93% 0.1211 249.74);
-  --color-main2-400: oklch(71.4% 0.1638 251.81);
-  --color-main2-500: oklch(59.85% 0.1912 256.27);
-  --color-main2-600: oklch(50.17% 0.1912 260.73);
-  --color-main2-700: oklch(43.52% 0.1702 262.04);
-  --color-main2-800: oklch(37.91% 0.1407 263.36);
-  --color-main2-900: oklch(33.43% 0.1163 265.04);
-  --color-main2-950: oklch(25.1% 0.0827 267.35);
-
-  /* --- Border Radius --- */
-  --radius-xs: 0.0625rem;
-  --radius-sm: 0.125rem;
-  --radius-md: 0.25rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 0.875rem;
-  --radius-full: 9999px;
-
-  /* --- Typography --- */
+  /* Paletas de cor locais (green/blue/gray/red/yellow/pink/main1/main2) removidas
+     (D1 = opção b): o Seven é a fonte única de cor (--primary/--secondary/--brand-*).
+     Decoração com cor arbitrária é proibida pelo DESIGN.md — os efeitos que as
+     usavam foram removidos abaixo. */
+
+  /* Radius: fornecido pelo Seven (@etus/tokens) — escala local removida (D2). */
+
+  /* --- Typography (Seven: Inter + JetBrains Mono; sem serif/Geist/Space Grotesk) --- */
   --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  --font-serif: "Georgia", Cambria, "Times New Roman", Times, serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
   /* --- Container --- */
   --container-xs: 20rem;
@@ -172,11 +65,7 @@
   --container-7xl: 80rem;
 
   /* --- Shadows --- */
-  --shadow-xs: 0px 1px 2px 0px oklch(0% 0 0 / 0.05);
-  --shadow-sm: 0px 1px 3px 0px oklch(0% 0 0 / 0.1), 0px 1px 2px -1px oklch(0% 0 0 / 0.1);
-  --shadow-md: 0px 4px 6px -1px oklch(0% 0 0 / 0.1), 0px 2px 4px -2px oklch(0% 0 0 / 0.1);
-  --shadow-lg: 0px 10px 15px -3px oklch(0% 0 0 / 0.1), 0px 4px 6px -4px oklch(0% 0 0 / 0.1);
-  --shadow-xl: 0px 20px 25px -5px oklch(0% 0 0 / 0.1), 0px 8px 10px -6px oklch(0% 0 0 / 0.1);
+  /* shadow xs–xl: fornecidos pelo Seven (D2); mantido só o extra: */
   --shadow-2xl: 0px 25px 50px -12px oklch(0% 0 0 / 0.25);
   --shadow-inner: inset 0px 2px 4px 0px oklch(0% 0 0 / 0.05);
 
@@ -211,23 +100,9 @@
   --card-padding: 1.5rem;         /* 24px - card internal padding */
   --card-padding-compact: 1rem;   /* 16px - compact card padding */
 
-  /* --- Breakpoints --- */
-  --breakpoint-sm: 40rem;         /* 640px - mobile landscape */
-  --breakpoint-md: 48rem;         /* 768px - tablets */
-  --breakpoint-lg: 64rem;         /* 1024px - desktop */
-  --breakpoint-xl: 80rem;         /* 1280px - large desktop */
-  --breakpoint-2xl: 96rem;        /* 1536px - wide screens */
-
-  /* --- Typography Scale (Major Third - 1.25) --- */
-  --text-xs: 0.75rem;             /* 12px */
-  --text-sm: 0.875rem;            /* 14px */
-  --text-base: 1rem;              /* 16px */
-  --text-lg: 1.125rem;            /* 18px */
-  --text-xl: 1.25rem;             /* 20px */
-  --text-2xl: 1.5rem;             /* 24px */
-  --text-3xl: 1.875rem;           /* 30px */
-  --text-4xl: 2.25rem;            /* 36px */
-  --text-5xl: 3rem;               /* 48px */
+  /* Breakpoints: fornecidos pelo Seven (sm 360 / md 768 / lg 1024 / xl 1280 / 2xl 1440) — D2. */
+
+  /* Type scale (--text-*): fornecida pelo Seven (2xs…9xl) — D2. */
 
   /* --- Line Heights --- */
   --leading-none: 1;
@@ -237,14 +112,7 @@
   --leading-relaxed: 1.625;
   --leading-loose: 2;
 
-  /* --- Font Weights --- */
-  --font-thin: 100;
-  --font-light: 300;
-  --font-normal: 400;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-  --font-extrabold: 800;
+  /* Font weights: Tailwind usa --font-weight-* (Seven, 100–900). Locais removidos (D2). */
 
   /* --- Grid System --- */
   --grid-gap-xs: 0.5rem;          /* 8px - tight grid */
@@ -500,32 +368,8 @@ body {
    Scrollbar Styling
    ======================================== */
 
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--color-muted);
-  border-radius: var(--radius-full);
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-gray-400);
-  border-radius: var(--radius-full);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-gray-500);
-}
-
-.dark ::-webkit-scrollbar-thumb {
-  background: var(--color-gray-600);
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-gray-500);
-}
+/* Scrollbar: fornecido pelo Seven (@etus/ui/styles.css, tokenizado cross-browser).
+   Bloco local removido para não duplicar/divergir. */
 
 /* ========================================
    Loading & Skeleton States
@@ -535,7 +379,7 @@ body {
   background: linear-gradient(
     90deg in oklch,
     var(--color-muted) 25%,
-    var(--color-gray-200) 50%,
+    var(--color-border) 50%,
     var(--color-muted) 75%
   );
   background-size: 200% 100%;
@@ -546,68 +390,15 @@ body {
     background: linear-gradient(
       90deg in oklch,
       var(--color-muted) 25%,
-      var(--color-gray-700) 50%,
+      var(--color-border) 50%,
       var(--color-muted) 75%
     );
   }
 }
 
-/* ========================================
-   Glass Effect
-   ======================================== */
-
-@utility glass {
-  background: oklch(100% 0 0 / 0.7);
-  backdrop-filter: blur(var(--blur-lg));
-  border: 1px solid oklch(100% 0 0 / 0.2);
-
-  @variant dark {
-    background: oklch(12.94% 0.0219 264.7 / 0.7);
-    border: 1px solid oklch(100% 0 0 / 0.1);
-  }
-}
-
-/* ========================================
-   Gradient Utilities
-   ======================================== */
-
-@utility gradient-primary {
-  background: linear-gradient(
-    135deg in oklch,
-    var(--color-green-400) 0%,
-    var(--color-green-500) 50%,
-    var(--color-green-600) 100%
-  );
-}
-
-@utility gradient-accent {
-  background: linear-gradient(
-    135deg in oklch,
-    var(--color-blue-400) 0%,
-    var(--color-main2-500) 50%,
-    var(--color-pink-500) 100%
-  );
-}
-
-@utility gradient-warm {
-  background: linear-gradient(
-    135deg in oklch,
-    var(--color-yellow-400) 0%,
-    var(--color-red-400) 100%
-  );
-}
-
-/* Text gradient */
-@utility text-gradient-primary {
-  background: linear-gradient(
-    135deg in oklch,
-    var(--color-green-400) 0%,
-    var(--color-green-600) 100%
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
+/* Glass effect e gradientes decorativos removidos — proibidos pelo DESIGN.md do
+   Seven (sem texture / ambient gradients / glassmorphism / "AI purple"). Não eram
+   usados em nenhuma tela. */
 
 /* ========================================
    Enter Animations (@starting-style)
@@ -688,44 +479,8 @@ body {
   container-name: main;
 }
 
-/* ========================================
-   Advanced Gradient Utilities
-   ======================================== */
-
-/* Radial gradients for highlights */
-@utility gradient-radial-primary {
-  background: radial-gradient(circle at center, var(--color-green-400) 0%, transparent 70%);
-}
-
-@utility gradient-radial-accent {
-  background: radial-gradient(circle at center, var(--color-blue-400) 0%, transparent 70%);
-}
-
-@utility gradient-radial-glow {
-  background: radial-gradient(ellipse at top, var(--color-primary) 0%, transparent 50%);
-}
-
-/* Conic gradients for spinners/progress */
-@utility gradient-conic-spinner {
-  background: conic-gradient(from 0deg, transparent 0deg, var(--color-primary) 270deg, transparent 360deg);
-}
-
-@utility gradient-conic-progress {
-  background: conic-gradient(var(--color-primary) var(--progress, 0%), var(--color-muted) 0%);
-}
-
-@utility gradient-conic-rainbow {
-  background: conic-gradient(
-    in oklch,
-    var(--color-red-500) 0deg,
-    var(--color-yellow-500) 60deg,
-    var(--color-green-500) 120deg,
-    var(--color-blue-500) 180deg,
-    var(--color-main2-500) 240deg,
-    var(--color-pink-500) 300deg,
-    var(--color-red-500) 360deg
-  );
-}
+/* Gradientes avançados (radial/conic/rainbow) removidos — decoração proibida pelo
+   DESIGN.md do Seven; não usados em nenhuma tela. */
 
 /* ========================================
    Form Field Utilities
@@ -820,3 +575,15 @@ Use in-* when:
 - Parent is a third-party component
 - You want implicit parent state detection
 */
+
+/* ── Shell: borderless sidebar ──────────────────────────────────────────────
+   The single-mode Sidebar (variant="sidebar") ships a right border — shadcn's
+   default for a standard sidebar shell. But this layout separates content with
+   the tucked card (SidebarInset content: rounded-tl + border), so that border is
+   redundant: it runs the full height (behind the topbar) and draws an orphan line
+   that clashes with the card's rounded corner. Drop it — the --sidebar bg tint
+   (98.5% vs 100% background) still gives a soft edge. Unlayered so it beats
+   Tailwind's group-data-[side=left]:border-r utility without !important. */
+[data-slot="sidebar-container"] {
+  border-right-width: 0;
+}
diff --git a/src/client/main.tsx b/src/client/main.tsx
index bef0a05..6d3b65e 100644
--- a/src/client/main.tsx
+++ b/src/client/main.tsx
@@ -7,7 +7,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { router } from './router'
 import { queryClient } from './lib/query-client'
 import { ThemeProvider } from './hooks/use-theme'
-import { Toaster } from './components/ui/sonner'
+import { AppToaster } from './components/app-toaster'
 import './index.css'
 
 const rootElement = document.getElementById('root')
@@ -18,7 +18,7 @@ createRoot(rootElement).render(
     <ThemeProvider>
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
-        <Toaster />
+        <AppToaster />
         {import.meta.env.DEV && <ReactQueryDevtools />}
       </QueryClientProvider>
     </ThemeProvider>
diff --git a/src/client/routes/$.tsx b/src/client/routes/$.tsx
index c84e00c..1004cb6 100644
--- a/src/client/routes/$.tsx
+++ b/src/client/routes/$.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
-import { Button } from '@etus/seven-react'
+import { Button, ErrorPage, Link as SevenLink, Text } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 
 export const Route = createFileRoute('/$')({
@@ -12,66 +12,47 @@ function NotFoundPage() {
       {/* Header */}
       <header className="container flex h-14 items-center">
         <Link to="/" className="flex items-center space-x-2">
-          <Icons.command className="h-6 w-6" />
+          <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+            <Icons.command className="size-4" />
+          </div>
           <span className="font-semibold">Hono</span>
         </Link>
       </header>
 
-      {/* Main Content */}
+      {/* Main Content — Seven ErrorPage (English copy to match the rest of the app) */}
       <main className="flex flex-1 items-center justify-center px-4">
-        <div className="mx-auto max-w-md text-center">
-          {/* Large 404 */}
-          <div className="relative mb-8">
-            <div className="text-[12rem] font-bold leading-none tracking-tighter text-muted/20 select-none">
-              404
-            </div>
-            <div className="absolute inset-0 flex items-center justify-center">
-              <div className="rounded-full bg-background px-6 py-2 shadow-lg ring-1 ring-border">
-                <span className="text-lg font-medium">Page not found</span>
+        <ErrorPage
+          type="404"
+          title="Page not found"
+          description="The page you're looking for doesn't exist or was moved."
+          showHomeLink={false}
+          actions={
+            <>
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
+                <Button asChild>
+                  <Link to="/">
+                    <Icons.arrowRight className="rotate-180" />
+                    Back to Home
+                  </Link>
+                </Button>
+                <Button variant="outline" asChild>
+                  <Link to="/dashboard">
+                    <Icons.dashboard />
+                    Go to Dashboard
+                  </Link>
+                </Button>
               </div>
-            </div>
-          </div>
-
-          {/* Message */}
-          <p className="mb-8 text-muted-foreground">
-            The page you're looking for doesn't exist or has been moved.
-            Let's get you back on track.
-          </p>
-
-          {/* Actions */}
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
-            <Button asChild>
-              <Link to="/">
-                <Icons.arrowRight className="mr-2 h-4 w-4 rotate-180" />
-                Back to Home
-              </Link>
-            </Button>
-            <Button variant="outline" asChild>
-              <Link to="/dashboard">
-                <Icons.dashboard className="mr-2 h-4 w-4" />
-                Go to Dashboard
-              </Link>
-            </Button>
-          </div>
-
-          {/* Help Link */}
-          <p className="mt-8 text-sm text-muted-foreground">
-            Need help?{' '}
-            <a
-              href="mailto:support@example.com"
-              className="font-medium text-foreground underline underline-offset-4"
-            >
-              Contact support
-            </a>
-          </p>
-        </div>
+              <Text variant="caption1" color="muted">
+                Need help?{' '}
+                {/* TODO: replace with the product's real support email */}
+                <SevenLink href="mailto:support@example.com" variant="inline">
+                  Contact support
+                </SevenLink>
+              </Text>
+            </>
+          }
+        />
       </main>
-
-      {/* Decorative Background */}
-      <div className="fixed inset-0 -z-10 overflow-hidden">
-        <div className="absolute -top-40 right-0 h-[500px] w-[500px] rounded-full bg-primary/5 blur-3xl" />
-        <div className="absolute -bottom-40 left-0 h-[500px] w-[500px] rounded-full bg-primary/5 blur-3xl" />
-      </div>
     </div>
   )
 }
diff --git a/src/client/routes/_authenticated.tsx b/src/client/routes/_authenticated.tsx
index 80fa958..10c03f2 100644
--- a/src/client/routes/_authenticated.tsx
+++ b/src/client/routes/_authenticated.tsx
@@ -1,7 +1,18 @@
-import { createFileRoute, Outlet, redirect, useRouter } from '@tanstack/react-router'
-import { Sidebar } from '@/components/sidebar'
+import type { ReactNode } from 'react'
+import { createFileRoute, Outlet, redirect, useRouter, useRouterState } from '@tanstack/react-router'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbPage,
+  SidebarInset,
+  SidebarProvider,
+  Topbar,
+  TopbarLeading,
+} from '@etus/seven-react'
+import { AppSidebar } from '@/components/sidebar'
 import { ErrorFallback } from '@/components/ui/error-fallback'
-import { SidebarSkeleton, PageSkeleton } from '@/components/ui/loading-skeleton'
+import { PageSkeleton } from '@/components/ui/loading-skeleton'
 import { queryClient } from '@/lib/query-client'
 
 export const Route = createFileRoute('/_authenticated')({
@@ -20,30 +31,56 @@ export const Route = createFileRoute('/_authenticated')({
   errorComponent: AuthenticatedErrorComponent,
 })
 
-function AuthenticatedLayout() {
+/** Topbar breadcrumb derived from the first path segment. */
+function RouteBreadcrumb() {
+  const { location } = useRouterState()
+  const seg = location.pathname.split('/').find(Boolean)
+  const label = seg ? seg.charAt(0).toUpperCase() + seg.slice(1) : 'Dashboard'
+
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar />
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbPage className="font-semibold">{label}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
 
-      {/* Main content */}
-      <main className="flex-1 overflow-y-auto">
-        <div className="container max-w-[var(--content-width)] p-8">
-          <Outlet />
+/** Canonical Seven app shell: collapsible sidebar + inset with topbar and tucked content. */
+function AppShell({ children }: { children: ReactNode }) {
+  return (
+    <SidebarProvider mode="single">
+      <AppSidebar />
+      <SidebarInset>
+        <header>
+          <Topbar variant="default" className="h-12">
+            <TopbarLeading>
+              <RouteBreadcrumb />
+            </TopbarLeading>
+          </Topbar>
+        </header>
+        <div className="flex-1 overflow-auto rounded-tl-[24px] border bg-background px-8 py-6">
+          {children}
         </div>
-      </main>
-    </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+function AuthenticatedLayout() {
+  return (
+    <AppShell>
+      <Outlet />
+    </AppShell>
   )
 }
 
 export function AuthenticatedPendingComponent() {
   return (
-    <div className="flex h-screen overflow-hidden">
-      <SidebarSkeleton />
-      <main className="flex-1 overflow-y-auto">
-        <div className="container max-w-[var(--content-width)] p-8">
-          <PageSkeleton />
-        </div>
-      </main>
+    <div className="flex h-screen items-center justify-center p-8">
+      <PageSkeleton />
     </div>
   )
 }
@@ -52,18 +89,15 @@ export function AuthenticatedErrorComponent({ error }: { error: Error }) {
   const router = useRouter()
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar />
-      <main className="flex-1 overflow-y-auto">
-        <ErrorFallback
-          error={error}
-          title="Something went wrong"
-          message="An error occurred while loading this page. Please try again."
-          onRetry={() => { void router.invalidate() }}
-          onGoBack={() => { router.history.back() }}
-          onGoHome={() => { void router.navigate({ to: '/dashboard' }) }}
-        />
-      </main>
+    <div className="flex h-screen items-center justify-center p-8">
+      <ErrorFallback
+        error={error}
+        title="Something went wrong"
+        message="An error occurred while loading this page. Please try again."
+        onRetry={() => { void router.invalidate() }}
+        onGoBack={() => { router.history.back() }}
+        onGoHome={() => { void router.navigate({ to: '/dashboard' }) }}
+      />
     </div>
   )
 }
diff --git a/src/client/routes/_authenticated/account.tsx b/src/client/routes/_authenticated/account.tsx
index fd05964..4cd0bae 100644
--- a/src/client/routes/_authenticated/account.tsx
+++ b/src/client/routes/_authenticated/account.tsx
@@ -5,6 +5,15 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { toast } from 'sonner'
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Badge,
   Button,
   Card,
@@ -19,15 +28,17 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  Divider,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  Heading,
+  Text,
+  TextInput,
 } from '@etus/seven-react'
-import { Input } from '@/components/ui/input'
-import { Separator } from '@/components/ui/separator'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 
@@ -38,23 +49,48 @@ export const Route = createFileRoute('/_authenticated/account')({
 function AccountPage() {
   const { user }  = useAuth()
 
+  // TODO(stub): wire GitHub OAuth account-link flow
+  const handleConnectGitHub = () => {
+    toast.info('Conectar GitHub — em breve')
+  }
+
+  // TODO(stub): wire 2FA setup flow
+  const handleEnable2FA = () => {
+    toast.info('Ativar 2FA — em breve')
+  }
+
+  // TODO(stub): wire revoke-all-sessions endpoint
+  const handleSignOutAll = () => {
+    toast.info('Encerrar todas as sessões — em breve')
+  }
+
+  // TODO(stub): wire API key creation flow
+  const handleCreateKey = () => {
+    toast.info('Criar API key — em breve')
+  }
+
+  // TODO(stub): wire data export
+  const handleExport = () => {
+    toast.info('Exportar dados — em breve')
+  }
+
   return (
     <div className="space-y-8">
       {/* Page Header */}
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Account</h1>
-        <p className="text-muted-foreground">
+        <Heading level={1} size="2xl" weight="semibold">Account</Heading>
+        <Text variant="p2" color="muted">
           Manage your account settings, security, and connected services.
-        </p>
+        </Text>
       </div>
 
       {/* Connected Accounts Section */}
       <section className="space-y-4">
         <div>
-          <h2 className="text-lg font-medium">Connected Accounts</h2>
-          <p className="text-sm text-muted-foreground">
+          <Heading level={2} size="lg" weight="medium">Connected Accounts</Heading>
+          <Text variant="p3" color="muted">
             Manage OAuth providers linked to your account.
-          </p>
+          </Text>
         </div>
 
         <div className="grid gap-4">
@@ -66,17 +102,17 @@ function AccountPage() {
               </div>
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                  <p className="font-medium">Google</p>
+                  <Text variant="p2" weight="medium">Google</Text>
                   <Badge color="success" className="text-xs">Connected</Badge>
                 </div>
-                <p className="text-sm text-muted-foreground truncate">
+                <Text variant="p3" color="muted" truncate>
                   {user?.email}
-                </p>
+                </Text>
               </div>
               <div className="flex items-center gap-2">
-                <span className="text-xs text-muted-foreground hidden sm:block">
+                <Text variant="caption1" color="muted" className="hidden sm:block">
                   Primary login method
-                </span>
+                </Text>
               </div>
             </div>
           </Card>
@@ -89,14 +125,14 @@ function AccountPage() {
               </div>
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                  <p className="font-medium">GitHub</p>
+                  <Text variant="p2" weight="medium">GitHub</Text>
                   <Badge type="badge-outline" className="text-xs">Not connected</Badge>
                 </div>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p3" color="muted">
                   Connect for additional sign-in options
-                </p>
+                </Text>
               </div>
-              <Button variant="outline" size="sm">
+              <Button variant="outline" size="sm" onClick={handleConnectGitHub}>
                 <Icons.plus className="mr-2 h-4 w-4" />
                 Connect
               </Button>
@@ -105,34 +141,34 @@ function AccountPage() {
         </div>
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* Security Section */}
       <section className="space-y-4">
         <div>
-          <h2 className="text-lg font-medium">Security</h2>
-          <p className="text-sm text-muted-foreground">
+          <Heading level={2} size="lg" weight="medium">Security</Heading>
+          <Text variant="p3" color="muted">
             Keep your account secure with these settings.
-          </p>
+          </Text>
         </div>
 
         <div className="grid gap-4">
           {/* Two-Factor Authentication */}
           <Card>
             <div className="flex items-center gap-4 p-4">
-              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-amber-100 dark:bg-amber-900/30">
-                <Icons.shield className="h-6 w-6 text-amber-600 dark:text-amber-400" />
+              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-warning-subtle">
+                <Icons.shield className="h-6 w-6 text-warning" />
               </div>
               <div className="flex-1">
                 <div className="flex items-center gap-2">
-                  <p className="font-medium">Two-Factor Authentication</p>
+                  <Text variant="p2" weight="medium">Two-Factor Authentication</Text>
                   <Badge color="warning" className="text-xs">Recommended</Badge>
                 </div>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p3" color="muted">
                   Add an extra layer of security to your account
-                </p>
+                </Text>
               </div>
-              <Button variant="outline" size="sm">
+              <Button variant="outline" size="sm" onClick={handleEnable2FA}>
                 Enable
               </Button>
             </div>
@@ -145,10 +181,10 @@ function AccountPage() {
                 <Icons.key className="h-6 w-6 text-muted-foreground" />
               </div>
               <div className="flex-1">
-                <p className="font-medium">Password</p>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p2" weight="medium">Password</Text>
+                <Text variant="p3" color="muted">
                   Using OAuth login - no password set
-                </p>
+                </Text>
               </div>
               <Button variant="outline" size="sm" disabled>
                 <Icons.pencil className="mr-2 h-4 w-4" />
@@ -159,20 +195,39 @@ function AccountPage() {
         </div>
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* Active Sessions Section */}
       <section className="space-y-4">
         <div className="flex items-center justify-between">
           <div>
-            <h2 className="text-lg font-medium">Active Sessions</h2>
-            <p className="text-sm text-muted-foreground">
+            <Heading level={2} size="lg" weight="medium">Active Sessions</Heading>
+            <Text variant="p3" color="muted">
               Devices where you're currently logged in.
-            </p>
+            </Text>
           </div>
-          <Button variant="outline" size="sm">
-            Sign out all
-          </Button>
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="outline" size="sm">
+                Sign out all
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Sign out all sessions?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  This signs you out on every other device. You'll need to sign in
+                  again on those devices. Your current session stays active.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction variant="destructive" onClick={handleSignOutAll}>
+                  Sign out all
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
         </div>
 
         <div className="grid gap-4">
@@ -190,22 +245,22 @@ function AccountPage() {
         </div>
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* API Access Section */}
       <section className="space-y-4">
         <div>
-          <h2 className="text-lg font-medium">API Access</h2>
-          <p className="text-sm text-muted-foreground">
+          <Heading level={2} size="lg" weight="medium">API Access</Heading>
+          <Text variant="p3" color="muted">
             Manage API keys for programmatic access.
-          </p>
+          </Text>
         </div>
 
         <Card>
           <CardHeader className="pb-3">
             <div className="flex items-center justify-between">
               <CardTitle className="text-base">API Keys</CardTitle>
-              <Button size="sm">
+              <Button size="sm" onClick={handleCreateKey}>
                 <Icons.plus className="mr-2 h-4 w-4" />
                 Create Key
               </Button>
@@ -217,26 +272,26 @@ function AccountPage() {
           <CardContent>
             <div className="rounded-lg border border-dashed p-8 text-center">
               <Icons.key className="mx-auto h-8 w-8 text-muted-foreground/50" />
-              <p className="mt-2 text-sm text-muted-foreground">
+              <Text variant="p3" color="muted" className="mt-2">
                 No API keys created yet
-              </p>
-              <p className="text-xs text-muted-foreground">
+              </Text>
+              <Text variant="caption1" color="muted" as="p">
                 Create a key to get started with the API
-              </p>
+              </Text>
             </div>
           </CardContent>
         </Card>
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* Danger Zone */}
       <section className="space-y-4">
         <div>
-          <h2 className="text-lg font-medium text-destructive">Danger Zone</h2>
-          <p className="text-sm text-muted-foreground">
+          <Heading level={2} size="lg" weight="medium" color="destructive">Danger Zone</Heading>
+          <Text variant="p3" color="muted">
             Irreversible and destructive actions.
-          </p>
+          </Text>
         </div>
 
         <Card className="border-destructive/30 bg-destructive/5">
@@ -244,11 +299,11 @@ function AccountPage() {
             <div className="grid gap-4 sm:grid-cols-2">
               {/* Export Data */}
               <div className="space-y-2">
-                <p className="font-medium">Export Data</p>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p2" weight="medium">Export Data</Text>
+                <Text variant="p3" color="muted">
                   Download a copy of all your data.
-                </p>
-                <Button variant="outline" size="sm">
+                </Text>
+                <Button variant="outline" size="sm" onClick={handleExport}>
                   <Icons.arrowRight className="mr-2 h-4 w-4 -rotate-45" />
                   Export
                 </Button>
@@ -256,10 +311,10 @@ function AccountPage() {
 
               {/* Delete Account */}
               <div className="space-y-2">
-                <p className="font-medium">Delete Account</p>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p2" weight="medium">Delete Account</Text>
+                <Text variant="p3" color="muted">
                   Permanently delete your account and data.
-                </p>
+                </Text>
                 <DeleteAccountDialog userEmail={user?.email ?? ''} />
               </div>
             </div>
@@ -281,6 +336,11 @@ function SessionCard({
   lastActive: string
   isCurrent?: boolean
 }) {
+  // TODO(stub): wire per-session revoke endpoint
+  const handleSignOutSession = () => {
+    toast.info('Encerrar sessão — em breve')
+  }
+
   return (
     <div className="flex items-center gap-4 rounded-lg border p-4">
       <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
@@ -288,19 +348,38 @@ function SessionCard({
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <p className="font-medium text-sm">{device}</p>
+          <Text variant="p3" weight="medium">{device}</Text>
           {isCurrent && (
             <Badge color="success" className="text-xs">Current</Badge>
           )}
         </div>
-        <p className="text-xs text-muted-foreground">
+        <Text variant="caption1" color="muted" as="p">
           {location} · {lastActive}
-        </p>
+        </Text>
       </div>
       {!isCurrent && (
-        <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
-          <Icons.logout className="h-4 w-4" />
-        </Button>
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive">
+              <Icons.logout className="h-4 w-4" />
+            </Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Sign out this session?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This signs out {device} in {location}. You'll need to sign in
+                again on that device.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction variant="destructive" onClick={handleSignOutSession}>
+                Sign out
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
       )}
     </div>
   )
@@ -383,7 +462,7 @@ function DeleteAccountDialog({ userEmail }: { userEmail: string }) {
                       Type <span className="font-mono font-medium">{userEmail}</span> to confirm
                     </FormLabel>
                     <FormControl>
-                      <Input
+                      <TextInput
                         placeholder="Enter your email"
                         className="font-mono"
                         {...field}
diff --git a/src/client/routes/_authenticated/dashboard.tsx b/src/client/routes/_authenticated/dashboard.tsx
index 16791fd..c68e72d 100644
--- a/src/client/routes/_authenticated/dashboard.tsx
+++ b/src/client/routes/_authenticated/dashboard.tsx
@@ -1,5 +1,6 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@etus/seven-react'
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DashboardCard, Heading, Text } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 
@@ -15,39 +16,39 @@ function DashboardPage() {
     <div className="space-y-8">
       {/* Welcome section */}
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">
+        <Heading level={1} size="2xl">
           Welcome back, {firstName}
-        </h1>
-        <p className="text-muted-foreground">
+        </Heading>
+        <Text variant="p2" color="muted">
           Here&apos;s an overview of your workspace.
-        </p>
+        </Text>
       </div>
 
       {/* Stats cards */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <StatsCard
+        <DashboardCard
           title="Total Users"
           value="0"
-          description="Active team members"
-          icon={<Icons.users className="h-4 w-4 text-muted-foreground" />}
+          valueDescription="Active team members"
+          icon={<Icons.users className="size-4" />}
         />
-        <StatsCard
+        <DashboardCard
           title="Accounts"
           value="1"
-          description="Connected accounts"
-          icon={<Icons.layers className="h-4 w-4 text-muted-foreground" />}
+          valueDescription="Connected accounts"
+          icon={<Icons.layers className="size-4" />}
         />
-        <StatsCard
+        <DashboardCard
           title="API Requests"
           value="0"
-          description="Last 30 days"
-          icon={<Icons.zap className="h-4 w-4 text-muted-foreground" />}
+          valueDescription="Last 30 days"
+          icon={<Icons.zap className="size-4" />}
         />
-        <StatsCard
+        <DashboardCard
           title="Uptime"
           value="100%"
-          description="Last 30 days"
-          icon={<Icons.globe className="h-4 w-4 text-muted-foreground" />}
+          valueDescription="Last 30 days"
+          icon={<Icons.globe className="size-4" />}
         />
       </div>
 
@@ -64,10 +65,15 @@ function DashboardPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground">
+            <Text variant="p3" color="muted">
               Use the API to send invitations or manage users programmatically.
-            </p>
+            </Text>
           </CardContent>
+          <CardFooter>
+            <Button asChild variant="outline" size="sm">
+              <Link to="/team">Invite members</Link>
+            </Button>
+          </CardFooter>
         </Card>
 
         <Card>
@@ -81,10 +87,22 @@ function DashboardPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground">
+            <Text variant="p3" color="muted">
               Built with SQL-first access to Cloudflare D1.
-            </p>
+            </Text>
           </CardContent>
+          <CardFooter>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                // TODO(stub)
+                toast.info('Database management is coming soon')
+              }}
+            >
+              Manage database
+            </Button>
+          </CardFooter>
         </Card>
 
         <Card>
@@ -98,10 +116,22 @@ function DashboardPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground">
+            <Text variant="p3" color="muted">
               Role-based access control and audit logging enabled.
-            </p>
+            </Text>
           </CardContent>
+          <CardFooter>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                // TODO(stub)
+                toast.info('Security settings are coming soon')
+              }}
+            >
+              Review security
+            </Button>
+          </CardFooter>
         </Card>
       </div>
 
@@ -114,38 +144,13 @@ function DashboardPage() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex h-32 items-center justify-center rounded-md border border-dashed">
-            <p className="text-sm text-muted-foreground">
+          <div className="flex h-32 items-center justify-center">
+            <Text variant="p3" color="muted">
               No recent activity
-            </p>
+            </Text>
           </div>
         </CardContent>
       </Card>
     </div>
   )
 }
-
-function StatsCard({
-  title,
-  value,
-  description,
-  icon,
-}: {
-  title: string
-  value: string
-  description: string
-  icon: React.ReactNode
-}) {
-  return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">{title}</CardTitle>
-        {icon}
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">{value}</div>
-        <p className="text-xs text-muted-foreground">{description}</p>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/src/client/routes/_authenticated/integrations.tsx b/src/client/routes/_authenticated/integrations.tsx
index 218b6fb..60e5675 100644
--- a/src/client/routes/_authenticated/integrations.tsx
+++ b/src/client/routes/_authenticated/integrations.tsx
@@ -3,10 +3,20 @@ import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Badge,
   Button,
   Card,
   CardContent,
+  Checkbox,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -14,6 +24,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  Divider,
   Form,
   FormControl,
   FormDescription,
@@ -21,9 +32,12 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  Heading,
+  SearchInput,
+  Text,
+  TextInput,
 } from '@etus/seven-react'
-import { Input } from '@/components/ui/input'
-import { Separator } from '@/components/ui/separator'
+import { toast } from 'sonner'
 import { Icons } from '@/components/icons'
 import { CreateWebhookSchema, type CreateWebhookInput } from '@shared/schemas'
 
@@ -122,28 +136,29 @@ function IntegrationsPage() {
       {/* Page Header */}
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Integrations</h1>
-          <p className="text-muted-foreground">
+          <Heading level={1} size="2xl" weight="semibold" className="tracking-tight">
+            Integrations
+          </Heading>
+          <Text variant="p2" color="muted">
             Connect third-party services and manage webhooks.
-          </p>
+          </Text>
         </div>
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <div className="flex h-2 w-2 rounded-full bg-emerald-500" />
+          <div className="flex h-2 w-2 rounded-full bg-success" />
           {connectedCount} connected
         </div>
       </div>
 
       {/* Search and Filters */}
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
-        <div className="relative flex-1 max-w-sm">
-          <Icons.search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            placeholder="Search integrations..."
-            value={searchQuery}
-            onChange={(e) => { setSearchQuery(e.target.value) }}
-            className="pl-9"
-          />
-        </div>
+        <SearchInput
+          className="flex-1 max-w-sm"
+          placeholder="Search integrations..."
+          value={searchQuery}
+          onChange={(e) => { setSearchQuery(e.target.value) }}
+          showClearButton
+          onClear={() => { setSearchQuery('') }}
+        />
         <div className="flex gap-1 overflow-x-auto pb-1">
           {categories.map((category) => (
             <Button
@@ -161,7 +176,7 @@ function IntegrationsPage() {
 
       {/* Integrations Grid */}
       <section className="space-y-4">
-        <h2 className="text-lg font-medium">Available Integrations</h2>
+        <Heading level={2} size="lg" weight="medium">Available Integrations</Heading>
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {filteredIntegrations.map((integration) => (
             <IntegrationCard key={integration.id} integration={integration} />
@@ -170,23 +185,23 @@ function IntegrationsPage() {
         {filteredIntegrations.length === 0 && (
           <div className="rounded-lg border border-dashed p-8 text-center">
             <Icons.search className="mx-auto h-8 w-8 text-muted-foreground/50" />
-            <p className="mt-2 text-sm text-muted-foreground">
+            <Text variant="p3" color="muted" className="mt-2">
               No integrations found matching your search.
-            </p>
+            </Text>
           </div>
         )}
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* Webhooks Section */}
       <section className="space-y-4">
         <div className="flex items-center justify-between">
           <div>
-            <h2 className="text-lg font-medium">Webhooks</h2>
-            <p className="text-sm text-muted-foreground">
+            <Heading level={2} size="lg" weight="medium">Webhooks</Heading>
+            <Text variant="p3" color="muted">
               Receive real-time notifications when events happen.
-            </p>
+            </Text>
           </div>
           <CreateWebhookDialog />
         </div>
@@ -201,16 +216,16 @@ function IntegrationsPage() {
           <Card>
             <CardContent className="p-8 text-center">
               <Icons.globe className="mx-auto h-8 w-8 text-muted-foreground/50" />
-              <p className="mt-2 text-sm font-medium">No webhooks configured</p>
-              <p className="text-xs text-muted-foreground">
+              <Text variant="p3" className="mt-2 font-medium">No webhooks configured</Text>
+              <Text as="p" variant="caption1" color="muted" className="font-normal">
                 Create a webhook to receive real-time event notifications.
-              </p>
+              </Text>
             </CardContent>
           </Card>
         )}
       </section>
 
-      <Separator />
+      <Divider />
 
       {/* API Documentation Link */}
       <section>
@@ -221,15 +236,18 @@ function IntegrationsPage() {
                 <Icons.zap className="h-5 w-5" />
               </div>
               <div>
-                <p className="font-medium">Build Custom Integrations</p>
-                <p className="text-sm text-muted-foreground">
+                <Text variant="p2" className="font-medium">Build Custom Integrations</Text>
+                <Text variant="p3" color="muted">
                   Use our API to build your own integrations.
-                </p>
+                </Text>
               </div>
             </div>
-            <Button variant="outline">
-              View API Docs
-              <Icons.arrowRight className="ml-2 h-4 w-4" />
+            <Button asChild variant="outline">
+              {/* TODO(stub): apontar href para a URL real das docs da API */}
+              <a href="#">
+                View API Docs
+                <Icons.arrowRight className="ml-2 h-4 w-4" />
+              </a>
             </Button>
           </CardContent>
         </Card>
@@ -244,64 +262,131 @@ function IntegrationCard({ integration }: { integration: Integration }) {
   const [isConnecting, setIsConnecting] = useState(false)
   const [connected, setConnected] = useState(integration.connected)
 
-  const handleToggle = async () => {
+  // TODO(stub): trocar mock por mutation real de conexão
+  const handleConnect = async () => {
     setIsConnecting(true)
     await new Promise((resolve) => setTimeout(resolve, 1000))
-    setConnected(!connected)
+    setConnected(true)
     setIsConnecting(false)
+    toast.success(`${integration.name} conectado`)
+  }
+
+  const handleDisconnect = () => {
+    // TODO(stub): ligar à desconexão real
+    toast.info('Desconectar — em breve')
   }
 
   const Icon = integration.icon
 
   return (
-    <Card className={`transition-all hover:shadow-md ${connected ? 'ring-1 ring-emerald-500/20' : ''}`}>
+    <Card className={`transition-all hover:shadow-md ${connected ? 'ring-1 ring-success/20' : ''}`}>
       <CardContent className="p-4">
         <div className="flex items-start gap-4">
-          <div className={`flex h-12 w-12 items-center justify-center rounded-lg ${connected ? 'bg-emerald-100 dark:bg-emerald-900/30' : 'bg-muted'}`}>
-            <Icon className={`h-6 w-6 ${connected ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`} />
+          <div className={`flex h-12 w-12 items-center justify-center rounded-lg ${connected ? 'bg-success-subtle' : 'bg-muted'}`}>
+            <Icon className={`h-6 w-6 ${connected ? 'text-success' : 'text-muted-foreground'}`} />
           </div>
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
-              <p className="font-medium">{integration.name}</p>
+              <Text variant="p2" className="font-medium">{integration.name}</Text>
               {connected && (
                 <Badge color="success" className="text-xs">Connected</Badge>
               )}
             </div>
-            <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+            <Text variant="p3" color="muted" className="mt-1 line-clamp-2">
               {integration.description}
-            </p>
+            </Text>
           </div>
         </div>
         <div className="mt-4 flex items-center justify-between">
           <Badge type="badge-outline" className="text-xs capitalize">
             {integration.category}
           </Badge>
-          <Button
-            variant={connected ? 'outline' : 'default'}
-            size="sm"
-            onClick={() => { void handleToggle() }}
-            disabled={isConnecting}
-          >
-            {isConnecting ? (
-              <Icons.spinner className="h-4 w-4 animate-spin" />
-            ) : connected ? (
-              <>
-                <Icons.settings className="mr-2 h-4 w-4" />
-                Configure
-              </>
-            ) : (
-              <>
-                <Icons.plus className="mr-2 h-4 w-4" />
-                Connect
-              </>
-            )}
-          </Button>
+          {connected ? (
+            <div className="flex items-center gap-2">
+              <ConfigureDialog integration={integration} />
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive hover:text-destructive"
+                  >
+                    Disconnect
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Disconnect {integration.name}?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This stops syncing data with {integration.name}. You can reconnect at any time.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction variant="destructive" onClick={handleDisconnect}>
+                      Disconnect
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+          ) : (
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => { void handleConnect() }}
+              disabled={isConnecting}
+            >
+              {isConnecting ? (
+                <Icons.spinner className="h-4 w-4 animate-spin" />
+              ) : (
+                <>
+                  <Icons.plus className="mr-2 h-4 w-4" />
+                  Connect
+                </>
+              )}
+            </Button>
+          )}
         </div>
       </CardContent>
     </Card>
   )
 }
 
+function ConfigureDialog({ integration }: { integration: Integration }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Icons.settings className="mr-2 h-4 w-4" />
+          Configure
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Configure {integration.name}</DialogTitle>
+          <DialogDescription>
+            Manage how {integration.name} connects to your workspace.
+          </DialogDescription>
+        </DialogHeader>
+        {/* TODO(stub): formulário de configuração real */}
+        <div className="py-4">
+          <Text variant="p3" color="muted">
+            Configuration options for this integration are coming soon.
+          </Text>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => { setIsOpen(false) }}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
 type Webhook = typeof webhooks[0]
 
 function WebhookCard({ webhook }: { webhook: Webhook }) {
@@ -319,7 +404,7 @@ function WebhookCard({ webhook }: { webhook: Webhook }) {
         <div className="flex items-start justify-between gap-4">
           <div className="flex-1 min-w-0 space-y-3">
             <div className="flex items-center gap-2">
-              <div className={`h-2 w-2 rounded-full ${webhook.status === 'active' ? 'bg-emerald-500' : 'bg-amber-500'}`} />
+              <div className={`h-2 w-2 rounded-full ${webhook.status === 'active' ? 'bg-success' : 'bg-warning'}`} />
               <code className="text-sm font-mono truncate">{webhook.url}</code>
             </div>
             <div className="flex flex-wrap gap-1.5">
@@ -334,7 +419,7 @@ function WebhookCard({ webhook }: { webhook: Webhook }) {
                 <Icons.clock className="h-3 w-3" />
                 Last delivery: {webhook.lastDelivery}
               </span>
-              <span className={`flex items-center gap-1 ${webhook.lastStatus === 'success' ? 'text-emerald-600' : 'text-destructive'}`}>
+              <span className={`flex items-center gap-1 ${webhook.lastStatus === 'success' ? 'text-success' : 'text-destructive'}`}>
                 {webhook.lastStatus === 'success' ? (
                   <Icons.check className="h-3 w-3" />
                 ) : (
@@ -443,7 +528,7 @@ function CreateWebhookDialog() {
                   <FormItem>
                     <FormLabel>Endpoint URL</FormLabel>
                     <FormControl>
-                      <Input
+                      <TextInput
                         type="url"
                         placeholder="https://api.example.com/webhooks"
                         className="font-mono text-sm"
@@ -469,23 +554,20 @@ function CreateWebhookDialog() {
                         {eventTypes.map((event) => {
                           const isSelected = selectedEvents.includes(event.id)
                           return (
-                            <button
+                            <label
                               key={event.id}
-                              type="button"
-                              onClick={() => { toggleEvent(event.id) }}
-                              className={`flex items-center gap-2 rounded-lg border p-3 text-left text-sm transition-colors ${
+                              className={`flex cursor-pointer items-center gap-2 rounded-lg border p-3 text-left text-sm transition-colors ${
                                 isSelected
                                   ? 'border-primary bg-primary/5'
                                   : 'border-border hover:border-primary/50'
                               }`}
                             >
-                              <div className={`flex h-4 w-4 items-center justify-center rounded border ${
-                                isSelected ? 'border-primary bg-primary' : 'border-muted-foreground'
-                              }`}>
-                                {isSelected && <Icons.check className="h-3 w-3 text-primary-foreground" />}
-                              </div>
+                              <Checkbox
+                                checked={isSelected}
+                                onCheckedChange={() => { toggleEvent(event.id) }}
+                              />
                               <span className={isSelected ? 'font-medium' : ''}>{event.label}</span>
-                            </button>
+                            </label>
                           )
                         })}
                       </div>
diff --git a/src/client/routes/_authenticated/settings.tsx b/src/client/routes/_authenticated/settings.tsx
index 6a03486..ee24782 100644
--- a/src/client/routes/_authenticated/settings.tsx
+++ b/src/client/routes/_authenticated/settings.tsx
@@ -4,6 +4,15 @@ import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { toast } from 'sonner'
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -13,20 +22,25 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
+  Divider,
+  FileUpload,
+  FileUploadTrigger,
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
+  Heading,
   Label,
+  Switch,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
+  Text,
+  TextInput,
 } from '@etus/seven-react'
-import { Input } from '@/components/ui/input'
-import { Separator } from '@/components/ui/separator'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 import { UpdateProfileSchema, type UpdateProfileInput } from '@shared/schemas'
@@ -62,14 +76,34 @@ function SettingsPage() {
     }
   }
 
+  const handlePhotoChange = () => {
+    toast.info('Trocar foto — em breve')
+    // TODO(stub)
+  }
+
+  const handleDisconnectProvider = () => {
+    toast.info('Desconectar conta — em breve')
+    // TODO(stub)
+  }
+
+  const handleRevokeSession = () => {
+    toast.info('Revogar sessão — em breve')
+    // TODO(stub)
+  }
+
+  const handleDeleteAccount = () => {
+    toast.info('Excluir conta — em breve')
+    // TODO(stub)
+  }
+
   return (
     <div className="space-y-8">
       {/* Page Header */}
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
-        <p className="text-muted-foreground">
+        <Heading level={1} size="2xl">Settings</Heading>
+        <Text variant="p2" color="muted">
           Manage your account settings and preferences.
-        </p>
+        </Text>
       </div>
 
       <Tabs defaultValue="profile" className="space-y-6">
@@ -103,13 +137,21 @@ function SettingsPage() {
                 <AvatarFallback className="text-lg">{initials}</AvatarFallback>
               </Avatar>
               <div className="space-y-2">
-                <Button variant="outline" size="sm">
-                  <Icons.camera className="mr-2 h-4 w-4" />
-                  Change Photo
-                </Button>
-                <p className="text-xs text-muted-foreground">
+                <FileUpload
+                  accept="image/jpeg,image/png,image/gif"
+                  maxSize={2 * 1024 * 1024}
+                  showPreview={false}
+                  onChange={handlePhotoChange}
+                  className="w-auto"
+                >
+                  <FileUploadTrigger className="h-8 border border-input bg-background px-3 text-xs text-foreground hover:bg-accent hover:text-accent-foreground">
+                    <Icons.camera className="h-4 w-4" />
+                    Change Photo
+                  </FileUploadTrigger>
+                </FileUpload>
+                <Text as="p" variant="caption1" color="muted">
                   JPG, PNG or GIF. Max 2MB.
-                </p>
+                </Text>
               </div>
             </CardContent>
           </Card>
@@ -132,7 +174,7 @@ function SettingsPage() {
                         <FormItem>
                           <FormLabel>Full Name</FormLabel>
                           <FormControl>
-                            <Input placeholder="Enter your name" {...field} />
+                            <TextInput placeholder="Enter your name" {...field} />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -140,23 +182,20 @@ function SettingsPage() {
                     />
                     <div className="space-y-2">
                       <Label>Email Address</Label>
-                      <Input
+                      <TextInput
                         type="email"
                         defaultValue={user?.email ?? ''}
                         placeholder="Enter your email"
                         disabled
                       />
-                      <p className="text-xs text-muted-foreground">
+                      <Text as="p" variant="caption1" color="muted">
                         Email cannot be changed.
-                      </p>
+                      </Text>
                     </div>
                   </div>
 
                   <div className="flex justify-end">
-                    <Button type="submit" disabled={form.formState.isSubmitting}>
-                      {form.formState.isSubmitting && (
-                        <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-                      )}
+                    <Button type="submit" loading={form.formState.isSubmitting}>
                       Save Changes
                     </Button>
                   </div>
@@ -182,17 +221,42 @@ function SettingsPage() {
                     <Icons.google className="h-5 w-5" />
                   </div>
                   <div>
-                    <p className="font-medium">Google</p>
-                    <p className="text-sm text-muted-foreground">
+                    <Text as="p" weight="medium">Google</Text>
+                    <Text variant="p3" color="muted">
                       {user?.email}
-                    </p>
+                    </Text>
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="flex items-center gap-1 text-sm text-emerald-600">
+                  <span className="flex items-center gap-1 text-sm text-success">
                     <Icons.check className="h-4 w-4" />
                     Connected
                   </span>
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button variant="outline" size="sm">
+                        Desconectar
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Desconectar conta Google?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          Você precisará reconectar este provedor para acessar sua conta por
+                          ele novamente.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                        <AlertDialogAction
+                          variant="destructive"
+                          onClick={handleDisconnectProvider}
+                        >
+                          Desconectar
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
                 </div>
               </div>
             </CardContent>
@@ -212,13 +276,40 @@ function SettingsPage() {
                     <Icons.globe className="h-5 w-5" />
                   </div>
                   <div>
-                    <p className="font-medium">Current Session</p>
-                    <p className="text-sm text-muted-foreground">
+                    <Text as="p" weight="medium">Current Session</Text>
+                    <Text variant="p3" color="muted">
                       Your current browser session
-                    </p>
+                    </Text>
                   </div>
                 </div>
-                <span className="text-sm text-emerald-600">Active</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-sm text-success">Active</span>
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button variant="outline" size="sm">
+                        Revogar
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Revogar esta sessão?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          Você será desconectado deste dispositivo e precisará entrar
+                          novamente.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                        <AlertDialogAction
+                          variant="destructive"
+                          onClick={handleRevokeSession}
+                        >
+                          Revogar
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </div>
               </div>
             </CardContent>
           </Card>
@@ -233,14 +324,36 @@ function SettingsPage() {
             <CardContent>
               <div className="flex items-center justify-between">
                 <div>
-                  <p className="font-medium">Delete Account</p>
-                  <p className="text-sm text-muted-foreground">
+                  <Text as="p" weight="medium">Delete Account</Text>
+                  <Text variant="p3" color="muted">
                     Permanently delete your account and all associated data.
-                  </p>
+                  </Text>
                 </div>
-                <Button variant="destructive" size="sm">
-                  Delete Account
-                </Button>
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button variant="destructive" size="sm">
+                      Delete Account
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Excluir conta?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        Esta ação é permanente e não pode ser desfeita. Todos os seus dados
+                        serão removidos.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                      <AlertDialogAction
+                        variant="destructive"
+                        onClick={handleDeleteAccount}
+                      >
+                        Excluir conta
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
               </div>
             </CardContent>
           </Card>
@@ -261,13 +374,13 @@ function SettingsPage() {
                 description="Receive emails when someone invites you to a team."
                 defaultChecked
               />
-              <Separator />
+              <Divider />
               <NotificationToggle
                 title="Product Updates"
                 description="News about product updates and new features."
                 defaultChecked
               />
-              <Separator />
+              <Divider />
               <NotificationToggle
                 title="Security Alerts"
                 description="Important notifications about your account security."
@@ -298,29 +411,15 @@ function NotificationToggle({
   return (
     <div className="flex items-center justify-between">
       <div className="space-y-0.5">
-        <p className="font-medium">{title}</p>
-        <p className="text-sm text-muted-foreground">{description}</p>
+        <Text as="p" weight="medium">{title}</Text>
+        <Text variant="p3" color="muted">{description}</Text>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={checked}
+      <Switch
+        aria-label={title}
+        checked={checked}
         disabled={disabled}
-        onClick={() => { setChecked(!checked); }}
-        className={`
-          relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent
-          transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-          disabled:cursor-not-allowed disabled:opacity-50
-          ${checked ? 'bg-primary' : 'bg-input'}
-        `}
-      >
-        <span
-          className={`
-            pointer-events-none inline-block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
-            ${checked ? 'translate-x-5' : 'translate-x-0'}
-          `}
-        />
-      </button>
+        onCheckedChange={setChecked}
+      />
     </div>
   )
 }
diff --git a/src/client/routes/_authenticated/team.tsx b/src/client/routes/_authenticated/team.tsx
index f4a6bb1..d220a1b 100644
--- a/src/client/routes/_authenticated/team.tsx
+++ b/src/client/routes/_authenticated/team.tsx
@@ -6,6 +6,15 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { toast } from 'sonner'
 import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -23,6 +32,11 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   Form,
   FormControl,
   FormDescription,
@@ -30,8 +44,12 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  Heading,
+  SearchInput,
+  Spinner,
+  Text,
+  TextInput,
 } from '@etus/seven-react'
-import { Input } from '@/components/ui/input'
 import { Icons } from '@/components/icons'
 import { useAuth } from '@/hooks/use-auth'
 import type { Account, AuthUser } from '@shared/types'
@@ -206,16 +224,15 @@ function TeamPage() {
     <div className="space-y-8">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">Team Members</h1>
-          <p className="text-muted-foreground">
+          <Heading level={1} size="2xl" weight="semibold">Team Members</Heading>
+          <Text color="muted">
             Manage your team and invite new members.
-          </p>
+          </Text>
         </div>
 
         <Dialog open={isInviteOpen} onOpenChange={handleOpenChange}>
           <DialogTrigger asChild>
-            <Button disabled={!currentAccount}>
-              <Icons.userPlus className="mr-2 h-4 w-4" />
+            <Button disabled={!currentAccount} leftIcon={<Icons.userPlus />}>
               Invite Member
             </Button>
           </DialogTrigger>
@@ -237,7 +254,7 @@ function TeamPage() {
                       <FormItem>
                         <FormLabel>Email Address</FormLabel>
                         <FormControl>
-                          <Input
+                          <TextInput
                             type="email"
                             placeholder="colleague@example.com"
                             {...field}
@@ -287,8 +304,7 @@ function TeamPage() {
                   <Button type="button" variant="outline" onClick={() => { setIsInviteOpen(false) }}>
                     Cancel
                   </Button>
-                  <Button type="submit" disabled={inviteMutation.isPending}>
-                    {inviteMutation.isPending && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+                  <Button type="submit" loading={inviteMutation.isPending}>
                     Send Invitation
                   </Button>
                 </DialogFooter>
@@ -298,15 +314,14 @@ function TeamPage() {
         </Dialog>
       </div>
 
-      <div className="relative max-w-sm">
-        <Icons.search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          placeholder="Search members..."
-          value={searchQuery}
-          onChange={(e) => { setSearchQuery(e.target.value) }}
-          className="pl-9"
-        />
-      </div>
+      <SearchInput
+        className="max-w-sm"
+        placeholder="Search members..."
+        value={searchQuery}
+        onChange={(e) => { setSearchQuery(e.target.value) }}
+        showClearButton
+        onClear={() => { setSearchQuery('') }}
+      />
 
       <Card>
         <CardHeader>
@@ -318,8 +333,9 @@ function TeamPage() {
         <CardContent>
           <div className="divide-y">
             {isLoadingTeam && (
-              <div className="py-8 text-center text-muted-foreground">
-                Loading members...
+              <div className="flex items-center justify-center gap-2 py-8">
+                <Spinner />
+                <Text variant="p3" color="muted">Loading members...</Text>
               </div>
             )}
             {!isLoadingTeam && filteredMembers.map((member) => (
@@ -409,9 +425,46 @@ function TeamMemberRow({
           {member.role}
         </Badge>
         {!isCurrentUser && (
-          <Button variant="ghost" size="icon" className="h-8 w-8">
-            <Icons.more className="h-4 w-4" />
-          </Button>
+          <AlertDialog>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <Icons.more className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => { toast.info('Mudar papel — em breve') }}>
+                  <Icons.user className="mr-2 h-4 w-4" />
+                  Mudar papel
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <AlertDialogTrigger asChild>
+                  <DropdownMenuItem
+                    className="text-destructive"
+                    onSelect={(e) => { e.preventDefault() }}
+                  >
+                    <Icons.userMinus className="mr-2 h-4 w-4" />
+                    Remover
+                  </DropdownMenuItem>
+                </AlertDialogTrigger>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>Remover {name}?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Esta ação remove o membro do workspace. Você pode convidá-lo novamente depois.
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancelar</AlertDialogCancel>
+                {/* TODO(stub): ligar à mutation de remoção real */}
+                <AlertDialogAction onClick={() => { toast.info('Remover membro — em breve') }}>
+                  Remover
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
         )}
       </div>
     </div>
@@ -453,15 +506,11 @@ function InvitationRow({
           variant="ghost"
           size="sm"
           onClick={onRevoke}
-          disabled={isRevoking}
+          loading={isRevoking}
+          leftIcon={<Icons.close />}
           className="text-destructive hover:text-destructive"
         >
-          {isRevoking ? (
-            <Icons.spinner className="h-4 w-4 animate-spin" />
-          ) : (
-            <Icons.close className="h-4 w-4" />
-          )}
-          <span className="ml-2 hidden sm:inline">Revoke</span>
+          <span className="hidden sm:inline">Revoke</span>
         </Button>
       </div>
     </div>
diff --git a/src/client/routes/_authenticated/workspaces.tsx b/src/client/routes/_authenticated/workspaces.tsx
index 3adfae3..bf2bb22 100644
--- a/src/client/routes/_authenticated/workspaces.tsx
+++ b/src/client/routes/_authenticated/workspaces.tsx
@@ -1,11 +1,20 @@
 import { createFileRoute } from '@tanstack/react-router'
 import {
   Badge,
+  Callout,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  Heading,
+  Spinner,
+  Text,
 } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 import { useGatewayAccounts, type AccountRole } from '@/hooks/use-gateway-accounts'
@@ -31,44 +40,40 @@ function WorkspacesPage() {
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-2xl font-semibold tracking-tight">Workspaces</h1>
-        <p className="text-muted-foreground">
+        <Heading level={1} size="2xl" weight="semibold">
+          Workspaces
+        </Heading>
+        <Text variant="p2" color="muted">
           The gateway accounts you belong to and the role you hold in each. Roles are
           resolved by the gateway (viewer &lt; editor &lt; manager &lt; admin).
-        </p>
+        </Text>
       </div>
 
       {superAdmin && (
-        <Card className="border-primary/40 bg-primary/5">
-          <CardHeader className="flex flex-row items-center gap-3 space-y-0">
-            <Icons.shield className="h-5 w-5 text-primary" />
-            <div>
-              <CardTitle className="text-base">Super admin</CardTitle>
-              <CardDescription>
-                You have admin-level access across every workspace, regardless of the list below.
-              </CardDescription>
-            </div>
-          </CardHeader>
-        </Card>
+        <Callout icon={<Icons.shield />} title="Super admin" variant="success">
+          You have admin-level access across every workspace, regardless of the list below.
+        </Callout>
       )}
 
       {isLoading ? (
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <Icons.spinner className="h-4 w-4 animate-spin" />
+          <Spinner />
           Loading workspaces…
         </div>
       ) : accounts.length === 0 ? (
-        <Card>
-          <CardContent className="flex flex-col items-center justify-center gap-2 py-12 text-center">
-            <Icons.layers className="h-8 w-8 text-muted-foreground/60" />
-            <p className="font-medium">No workspaces yet</p>
-            <p className="max-w-md text-sm text-muted-foreground">
+        <Empty className="border">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Icons.layers />
+            </EmptyMedia>
+            <EmptyTitle>No workspaces yet</EmptyTitle>
+            <EmptyDescription>
               {superAdmin
                 ? 'You hold no explicit per-workspace role, but super admin grants access everywhere.'
                 : "You don't belong to any gateway workspace yet. An admin can grant you a role."}
-            </p>
-          </CardContent>
-        </Card>
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
       ) : (
         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {accounts.map((account) => {
@@ -81,13 +86,15 @@ function WorkspacesPage() {
                       <CardTitle className="truncate text-base">{account.name}</CardTitle>
                       <CardDescription className="truncate">{account.slug}</CardDescription>
                     </div>
-                    <Badge color={meta.color} className="shrink-0 capitalize">
+                    <Badge color={meta.color} tooltip={meta.blurb} className="shrink-0 capitalize">
                       {account.role}
                     </Badge>
                   </div>
                 </CardHeader>
                 <CardContent>
-                  <p className="text-sm text-muted-foreground">{meta.blurb}</p>
+                  <Text variant="p3" color="muted">
+                    {meta.blurb}
+                  </Text>
                 </CardContent>
               </Card>
             )
diff --git a/src/client/routes/index.tsx b/src/client/routes/index.tsx
index 37f45c2..e079114 100644
--- a/src/client/routes/index.tsx
+++ b/src/client/routes/index.tsx
@@ -1,5 +1,5 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
-import { Button } from '@etus/seven-react'
+import { Badge, Button, Card, FeaturedIcon, Heading, Text } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 
 export const Route = createFileRoute('/')({
@@ -10,12 +10,16 @@ function HomePage() {
   return (
     <div className="flex min-h-screen flex-col">
       {/* Navigation */}
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <header className="sticky top-0 z-50 w-full border-b bg-background">
         <div className="container flex h-14 max-w-[var(--content-wide)] items-center">
-          <div className="flex items-center space-x-2">
-            <Icons.command className="h-6 w-6" />
-            <span className="font-semibold">Hono</span>
-          </div>
+          <Link to="/" className="flex items-center gap-2">
+            <FeaturedIcon size="sm" tone="brand">
+              <Icons.command />
+            </FeaturedIcon>
+            <Text as="span" weight="semibold">
+              Hono
+            </Text>
+          </Link>
           <nav className="ml-auto flex items-center space-x-4">
             <Link
               to="/login"
@@ -33,36 +37,44 @@ function HomePage() {
       {/* Hero Section */}
       <main className="flex-1">
         <section className="container flex flex-col items-center justify-center gap-4 py-24 md:py-32">
-          <div className="flex items-center gap-2 rounded-full border bg-muted px-4 py-1.5 text-sm font-medium">
-            <Icons.zap className="h-4 w-4" />
-            <span>Built on Cloudflare Workers</span>
-          </div>
+          <Badge color="secondary" leadingIcon={<Icons.zap />}>
+            Built on Cloudflare Workers
+          </Badge>
 
-          <h1 className="text-center text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
+          <Heading
+            level={1}
+            align="center"
+            className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl"
+          >
             Build your SaaS
             <br />
             <span className="text-muted-foreground">faster than ever</span>
-          </h1>
+          </Heading>
 
-          <p className="max-w-[42rem] text-center text-lg text-muted-foreground sm:text-xl">
+          <Text
+            variant="p1"
+            color="muted"
+            className="max-w-[42rem] text-center"
+          >
             A production-ready multi-tenant boilerplate with authentication,
             database, and API — all on the edge.
-          </p>
+          </Text>
 
           <div className="flex flex-col gap-4 sm:flex-row">
             <Button size="lg" asChild>
               <Link to="/login">
                 Get Started
-                <Icons.arrowRight className="ml-2 h-4 w-4" />
+                <Icons.arrowRight />
               </Link>
             </Button>
+            {/* TODO: apontar para o repositório real do produto */}
             <Button variant="outline" size="lg" asChild>
               <a
                 href="https://github.com"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                <Icons.gitHub className="mr-2 h-4 w-4" />
+                <Icons.gitHub />
                 GitHub
               </a>
             </Button>
@@ -73,17 +85,17 @@ function HomePage() {
         <section className="container py-24 md:py-32">
           <div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-3">
             <FeatureCard
-              icon={<Icons.zap className="h-10 w-10" />}
+              icon={<Icons.zap />}
               title="Edge-First"
               description="Deploy globally on Cloudflare Workers with D1 database for lightning-fast responses."
             />
             <FeatureCard
-              icon={<Icons.shield className="h-10 w-10" />}
+              icon={<Icons.shield />}
               title="Secure by Default"
               description="Gateway OAuth, HTTP-only session cookies, and role-based access control built-in."
             />
             <FeatureCard
-              icon={<Icons.users className="h-10 w-10" />}
+              icon={<Icons.users />}
               title="Multi-Tenant"
               description="Isolated accounts, team invitations, and audit logging ready to go."
             />
@@ -91,12 +103,19 @@ function HomePage() {
         </section>
 
         {/* Tech Stack Section */}
-        <section className="border-t bg-muted/50">
+        <section className="border-t">
           <div className="container py-16">
-            <h2 className="mb-8 text-center text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+            <Heading
+              level={2}
+              size="sm"
+              weight="semibold"
+              color="muted"
+              align="center"
+              className="mb-8 uppercase tracking-wider"
+            >
               Built with modern tools
-            </h2>
-            <div className="flex flex-wrap items-center justify-center gap-8 text-muted-foreground">
+            </Heading>
+            <div className="flex flex-wrap items-center justify-center gap-4">
               <TechBadge name="Hono" />
               <TechBadge name="React" />
               <TechBadge name="TypeScript" />
@@ -111,10 +130,11 @@ function HomePage() {
       {/* Footer */}
       <footer className="border-t py-6">
         <div className="container flex flex-col items-center justify-between gap-4 md:flex-row">
-          <p className="text-sm text-muted-foreground">
+          <Text variant="p3" color="muted">
             Built with Hono and Cloudflare Workers.
-          </p>
+          </Text>
           <div className="flex items-center gap-4">
+            {/* TODO: apontar para o repositório real do produto */}
             <a
               href="https://github.com"
               target="_blank"
@@ -140,16 +160,22 @@ function FeatureCard({
   description: string
 }) {
   return (
-    <div className="flex flex-col items-center text-center">
-      <div className="mb-4 rounded-lg bg-muted p-3">{icon}</div>
-      <h3 className="mb-2 text-lg font-semibold">{title}</h3>
-      <p className="text-sm text-muted-foreground">{description}</p>
-    </div>
+    <Card variant="ghost" className="items-center text-center">
+      <FeaturedIcon size="lg">{icon}</FeaturedIcon>
+      <Heading level={3} size="lg" align="center">
+        {title}
+      </Heading>
+      <Text variant="p3" color="muted">
+        {description}
+      </Text>
+    </Card>
   )
 }
 
 function TechBadge({ name }: { name: string }) {
   return (
-    <span className="text-sm font-medium">{name}</span>
+    <Badge type="pill-outline" color="secondary">
+      {name}
+    </Badge>
   )
 }
diff --git a/src/client/routes/invite.$token.tsx b/src/client/routes/invite.$token.tsx
index e7905e2..62b841d 100644
--- a/src/client/routes/invite.$token.tsx
+++ b/src/client/routes/invite.$token.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useState } from 'react'
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@etus/seven-react'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Heading } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 
 export const Route = createFileRoute('/invite/$token')({
@@ -14,7 +14,9 @@ function Shell({ children }: { children: React.ReactNode }) {
     <div className="flex min-h-screen flex-col">
       <header className="container flex h-14 items-center">
         <Link to="/" className="flex items-center space-x-2">
-          <Icons.command className="h-6 w-6" />
+          <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+            <Icons.command className="size-4" />
+          </div>
           <span className="font-semibold">Hono</span>
         </Link>
       </header>
@@ -56,10 +58,14 @@ function AcceptInvitationPage() {
       <Shell>
         <Card className="w-full max-w-md text-center">
           <CardHeader className="pb-4">
-            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-900/30">
-              <Icons.check className="h-8 w-8 text-emerald-600 dark:text-emerald-400" />
+            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-success-subtle">
+              <Icons.check className="h-8 w-8 text-success" />
             </div>
-            <CardTitle className="text-xl">Invitation accepted</CardTitle>
+            <CardTitle>
+              <Heading level={1} size="xl" align="center">
+                Invitation accepted
+              </Heading>
+            </CardTitle>
             <CardDescription>You&apos;re now a member of the workspace.</CardDescription>
           </CardHeader>
           <CardContent>
@@ -80,14 +86,21 @@ function AcceptInvitationPage() {
             <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
               <Icons.close className="h-8 w-8 text-destructive" />
             </div>
-            <CardTitle className="text-xl">Invitation could not be accepted</CardTitle>
+            <CardTitle>
+              <Heading level={1} size="xl" align="center">
+                Invitation could not be accepted
+              </Heading>
+            </CardTitle>
             <CardDescription>
               This invitation may have expired, been revoked, or already been used. Ask the
               workspace admin for a new invitation.
             </CardDescription>
           </CardHeader>
-          <CardContent>
-            <Button asChild className="w-full">
+          <CardContent className="space-y-3">
+            <Button className="w-full" onClick={() => { setStatus('pending') }}>
+              Tentar de novo
+            </Button>
+            <Button variant="outline" asChild className="w-full">
               <Link to="/">Go to Homepage</Link>
             </Button>
           </CardContent>
@@ -103,7 +116,11 @@ function AcceptInvitationPage() {
           <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
             <Icons.mailPlus className="h-8 w-8 text-primary" />
           </div>
-          <CardTitle className="text-xl">You&apos;ve been invited</CardTitle>
+          <CardTitle>
+            <Heading level={1} size="xl" align="center">
+              You&apos;ve been invited
+            </Heading>
+          </CardTitle>
           <CardDescription>
             Accept this invitation to join the workspace. The invitation is validated when you
             accept it.
diff --git a/src/client/routes/login.tsx b/src/client/routes/login.tsx
index b308da1..9831a6a 100644
--- a/src/client/routes/login.tsx
+++ b/src/client/routes/login.tsx
@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useState } from 'react'
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@etus/seven-react'
+import { Button, Divider, Heading, Link as SevenLink, Text } from '@etus/seven-react'
 import { Icons } from '@/components/icons'
 
 export const Route = createFileRoute('/login')({
@@ -16,76 +16,78 @@ function LoginPage() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col">
-      {/* Simple header */}
-      <header className="container flex h-14 items-center">
-        <Link to="/" className="flex items-center space-x-2">
-          <Icons.command className="h-6 w-6" />
-          <span className="font-semibold">Hono</span>
-        </Link>
-      </header>
+    <div className="w-full lg:grid lg:min-h-screen lg:grid-cols-2">
+      {/* Form panel — primary content */}
+      <main className="flex min-h-screen items-center justify-center px-4 py-12 lg:min-h-0">
+        <div className="mx-auto grid w-full max-w-sm gap-6">
+          {/* Brand mark */}
+          <Link to="/" className="flex items-center gap-2">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+              <Icons.command className="size-4" />
+            </div>
+            <span className="font-semibold">Hono</span>
+          </Link>
 
-      {/* Login form */}
-      <main className="flex flex-1 items-center justify-center px-4">
-        <Card className="w-full max-w-sm">
-          <CardHeader className="space-y-1 text-center">
-            <CardTitle className="text-2xl font-semibold tracking-tight">
+          <div className="grid gap-2">
+            <Heading level={1} size="3xl" weight="bold">
               Welcome back
-            </CardTitle>
-            <CardDescription>
+            </Heading>
+            <Text variant="p2" color="muted" className="text-balance">
               Sign in to your account to continue
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="grid gap-4">
+            </Text>
+          </div>
+
+          <div className="grid gap-4">
             <Button
-              variant="outline"
-              className="w-full"
+              fullWidth
+              loading={isLoading}
+              loadingText="Redirecting..."
+              leftIcon={<Icons.shield className="size-4" />}
               onClick={handleLogin}
-              disabled={isLoading}
             >
-              {isLoading ? (
-                <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Icons.shield className="mr-2 h-4 w-4" />
-              )}
-              {isLoading ? 'Redirecting...' : 'Continue with ETUS'}
+              Continue with ETUS
             </Button>
 
-            <div className="relative">
-              <div className="absolute inset-0 flex items-center">
-                <span className="w-full border-t" />
-              </div>
-              <div className="relative flex justify-center text-xs uppercase">
-                <span className="bg-card px-2 text-muted-foreground">
-                  Secure authentication
-                </span>
-              </div>
-            </div>
+            <Divider type="text">Secure authentication</Divider>
 
-            <p className="text-center text-xs text-muted-foreground">
+            <Text as="p" variant="caption1" color="muted" className="text-center">
               By continuing, you agree to our{' '}
-              <a href="#" className="underline underline-offset-4 hover:text-foreground">
+              {/* TODO: URL real de Terms of Service */}
+              <SevenLink href="#" underline="always">
                 Terms of Service
-              </a>{' '}
+              </SevenLink>{' '}
               and{' '}
-              <a href="#" className="underline underline-offset-4 hover:text-foreground">
+              {/* TODO: URL real de Privacy Policy */}
+              <SevenLink href="#" underline="always">
                 Privacy Policy
-              </a>
+              </SevenLink>
               .
-            </p>
-          </CardContent>
-        </Card>
+            </Text>
+          </div>
+
+          <Text as="p" variant="p3" color="muted" className="text-center">
+            Don&apos;t have an account?{' '}
+            {/* TODO: URL real de Contact us */}
+            <SevenLink href="#" underline="always">
+              Contact us
+            </SevenLink>
+          </Text>
+        </div>
       </main>
 
-      {/* Footer */}
-      <footer className="py-6 text-center">
-        <p className="text-sm text-muted-foreground">
-          Don&apos;t have an account?{' '}
-          <a href="#" className="font-medium text-foreground underline underline-offset-4">
-            Contact us
-          </a>
-        </p>
-      </footer>
+      {/* Brand panel — complementary */}
+      <aside className="hidden bg-muted lg:block">
+        <div className="flex h-full items-center justify-center p-10">
+          <div className="max-w-md space-y-2">
+            <Heading level={2} size="3xl" weight="bold">
+              Welcome to Hono
+            </Heading>
+            <Text variant="p1" color="muted">
+              Production-ready multi-tenant SaaS, deployed on Cloudflare Workers.
+            </Text>
+          </div>
+        </div>
+      </aside>
     </div>
   )
 }
diff --git a/tests/helpers/client-setup.ts b/tests/helpers/client-setup.ts
index 5488073..cfa7f45 100644
--- a/tests/helpers/client-setup.ts
+++ b/tests/helpers/client-setup.ts
@@ -76,12 +76,20 @@ Object.defineProperty(window, "matchMedia", {
   })),
 })
 
-// Mock ResizeObserver
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
+// Mock ResizeObserver — must be a real constructor: Radix-based Seven
+// components call `new ResizeObserver()` (via useSize). An arrow function
+// cannot be constructed, which broke tests after adopting @etus/seven-react.
+global.ResizeObserver = class ResizeObserver {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+} as unknown as typeof globalThis.ResizeObserver
+
+// Radix UI (used by Seven) needs these jsdom shims for menus/dialogs/selects.
+Element.prototype.hasPointerCapture = vi.fn(() => false)
+Element.prototype.setPointerCapture = vi.fn()
+Element.prototype.releasePointerCapture = vi.fn()
+Element.prototype.scrollIntoView = vi.fn()
 
 // Mock localStorage
 const localStorageMock = (() => {
diff --git a/tests/unit/client/components/app-toaster.test.tsx b/tests/unit/client/components/app-toaster.test.tsx
new file mode 100644
index 0000000..de37195
--- /dev/null
+++ b/tests/unit/client/components/app-toaster.test.tsx
@@ -0,0 +1,22 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render } from '@testing-library/react'
+
+// Capture the theme prop Seven's Toaster receives.
+vi.mock('@etus/seven-react', () => ({
+  Toaster: ({ theme }: { theme?: string }) => <div data-testid="toaster" data-theme={theme} />,
+}))
+vi.mock('@/hooks/use-theme', () => ({
+  useTheme: () => ({ resolvedTheme: 'dark', theme: 'dark', setTheme: vi.fn() }),
+}))
+
+import { AppToaster } from '@/components/app-toaster'
+
+describe('AppToaster', () => {
+  it("forwards the app's resolved theme to Seven's Toaster", () => {
+    const { getByTestId } = render(<AppToaster />)
+
+    // Guards the theme wiring: if AppToaster stops forwarding resolvedTheme,
+    // the toaster renders with the wrong (or no) theme.
+    expect(getByTestId('toaster')).toHaveAttribute('data-theme', 'dark')
+  })
+})
diff --git a/tests/unit/client/components/sidebar.test.tsx b/tests/unit/client/components/sidebar.test.tsx
index 8804020..dae43fe 100644
--- a/tests/unit/client/components/sidebar.test.tsx
+++ b/tests/unit/client/components/sidebar.test.tsx
@@ -1,21 +1,30 @@
-import type { Mock } from "vitest";
+import type { Mock } from "vitest"
 import { describe, it, expect, vi, beforeEach } from "vitest"
 import { render, screen } from "@tests/helpers/client-test-utils"
 import userEvent from "@testing-library/user-event"
-import { Sidebar } from "@/components/sidebar"
+import { SidebarProvider } from "@etus/seven-react"
+import { AppSidebar } from "@/components/sidebar"
 
 // Mock useAuth hook
 vi.mock("@/hooks/use-auth", () => ({
   useAuth: vi.fn(),
 }))
 
-// Mock @tanstack/react-router with importOriginal to keep other exports
+// Mock @tanstack/react-router Link/useLocation (keep the rest)
 vi.mock("@tanstack/react-router", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@tanstack/react-router")>()
   return {
     ...actual,
-    Link: ({ children, to, className, title }: { children: React.ReactNode; to: string; className?: string; title?: string }) => (
-      <a href={to} className={className} title={title} data-testid={`link-${to}`}>
+    Link: ({
+      children,
+      to,
+      "aria-current": ariaCurrent,
+    }: {
+      children: React.ReactNode
+      to: string
+      "aria-current"?: "page"
+    }) => (
+      <a aria-current={ariaCurrent} data-testid={`link-${to}`} href={to}>
         {children}
       </a>
     ),
@@ -34,7 +43,16 @@ const mockUser = {
   role: "admin",
 }
 
-describe("Sidebar", () => {
+// AppSidebar reads useSidebar(), so it must render inside a SidebarProvider.
+function renderSidebar() {
+  return render(
+    <SidebarProvider>
+      <AppSidebar />
+    </SidebarProvider>,
+  )
+}
+
+describe("AppSidebar", () => {
   beforeEach(() => {
     vi.clearAllMocks()
     ;(useAuth as Mock).mockReturnValue({
@@ -44,160 +62,65 @@ describe("Sidebar", () => {
       isAuthenticated: true,
       isLoading: false,
     })
-    ;(useLocation as Mock).mockReturnValue({
-      pathname: "/dashboard",
-    })
+    ;(useLocation as Mock).mockReturnValue({ pathname: "/dashboard" })
   })
 
-  it("renders sidebar navigation items", () => {
-    render(<Sidebar />)
+  it("renders the navigation items", () => {
+    renderSidebar()
 
     expect(screen.getByText("Dashboard")).toBeInTheDocument()
     expect(screen.getByText("Team")).toBeInTheDocument()
+    expect(screen.getByText("Workspaces")).toBeInTheDocument()
     expect(screen.getByText("Integrations")).toBeInTheDocument()
-    // "Account" appears both as section header and nav item
+    // "Account" appears as both a group label and a nav item
     expect(screen.getAllByText("Account").length).toBeGreaterThanOrEqual(1)
     expect(screen.getByText("Settings")).toBeInTheDocument()
   })
 
-  it("shows user info when authenticated", () => {
-    render(<Sidebar />)
+  it("shows the authenticated user's name and email", () => {
+    renderSidebar()
 
     expect(screen.getByText("John Doe")).toBeInTheDocument()
     expect(screen.getByText("john@example.com")).toBeInTheDocument()
   })
 
-  it("shows user initials in avatar fallback", () => {
-    render(<Sidebar />)
-
-    // Avatar fallback should show initials "JD" for "John Doe"
-    const avatarFallbacks = screen.getAllByText("JD")
-    expect(avatarFallbacks.length).toBeGreaterThan(0)
-  })
-
-  it("highlights active route", () => {
-    ;(useLocation as Mock).mockReturnValue({
-      pathname: "/dashboard",
-    })
-
-    render(<Sidebar />)
-
-    // The active nav item link should have the active class (bg-sidebar-accent)
-    // There are two links to dashboard (logo and nav item), get all and check the nav item
-    const dashboardLinks = screen.getAllByTestId("link-/dashboard")
-    // The nav item link has rounded-lg class (not the logo link)
-    const navItemLink = dashboardLinks.find((link) => link.classList.contains("rounded-lg"))
-    expect(navItemLink).toHaveClass("bg-sidebar-accent")
-  })
-
-  it("handles navigation clicks", async () => {
-    render(<Sidebar />)
-
-    const teamLink = screen.getByText("Team")
-    expect(teamLink).toBeInTheDocument()
-
-    // Team link should be clickable
-    const teamNavItem = screen.getByTestId("link-/team")
-    expect(teamNavItem).toHaveAttribute("href", "/team")
-  })
-
-  it("handles logout button click", async () => {
-    const user = userEvent.setup()
-    const mockLogout = vi.fn()
-    ;(useAuth as Mock).mockReturnValue({
-      user: mockUser,
-      logout: mockLogout,
-      isLoggingOut: false,
-      isAuthenticated: true,
-      isLoading: false,
-    })
-
-    render(<Sidebar />)
-
-    // Find the logout button (by finding the button in the user profile area)
-    const logoutButtons = screen.getAllByRole("button")
-
-    // Click the last button in the profile area which should trigger logout
-    await user.click(logoutButtons[logoutButtons.length - 1])
-    expect(mockLogout).toHaveBeenCalled()
-  })
-
-  it("can be collapsed by default", () => {
-    render(<Sidebar defaultCollapsed={true} />)
-
-    // When collapsed, the sidebar should have the collapsed width class
-    const sidebar = screen.getByRole("complementary")
-    expect(sidebar).toHaveClass("w-16")
-  })
-
-  it("expands when collapsed and expand button is clicked", async () => {
-    const user = userEvent.setup()
-    render(<Sidebar defaultCollapsed={true} />)
-
-    const sidebar = screen.getByRole("complementary")
-    expect(sidebar).toHaveClass("w-16")
-
-    // Find and click the expand button
-    const expandButton = screen.getAllByRole("button")[0]
-    await user.click(expandButton)
+  it("shows the user initials in the avatar fallback", () => {
+    renderSidebar()
 
-    expect(sidebar).toHaveClass("w-64")
-  })
-
-  it("shows keyboard shortcut hint when expanded", () => {
-    render(<Sidebar />)
-
-    // The sidebar shows a keyboard shortcut hint like "⌘B collapse" or "Ctrl+B collapse"
-    expect(screen.getByText(/collapse/)).toBeInTheDocument()
-  })
-
-  it("hides navigation labels when collapsed", () => {
-    render(<Sidebar defaultCollapsed={true} />)
-
-    // Navigation labels should not be visible when collapsed
-    expect(screen.queryByText("Dashboard")).not.toBeInTheDocument()
+    expect(screen.getAllByText("JD").length).toBeGreaterThan(0)
   })
 
-  it("collapses when collapse button is clicked", async () => {
-    const user = userEvent.setup()
-    render(<Sidebar />)
-
-    const sidebar = screen.getByRole("complementary")
-    expect(sidebar).toHaveClass("w-64")
+  it("marks the active route with aria-current", () => {
+    ;(useLocation as Mock).mockReturnValue({ pathname: "/dashboard" })
+    renderSidebar()
 
-    // Find and click the collapse button (chevron icon button in header)
-    const collapseButton = screen.getAllByRole("button")[0]
-    await user.click(collapseButton)
-
-    expect(sidebar).toHaveClass("w-16")
+    // Target the nav item via its label (the logo also links to /dashboard)
+    expect(screen.getByText("Dashboard").closest("a")).toHaveAttribute("aria-current", "page")
+    expect(screen.getByText("Team").closest("a")).not.toHaveAttribute("aria-current", "page")
   })
 
-  it("toggles sidebar with keyboard shortcut", async () => {
-    const user = userEvent.setup()
-    render(<Sidebar />)
-
-    const sidebar = screen.getByRole("complementary")
-    expect(sidebar).toHaveClass("w-64")
+  it("links each item to its route", () => {
+    renderSidebar()
 
-    // Press Ctrl+B (or Cmd+B on Mac) to toggle
-    await user.keyboard("{Control>}b{/Control}")
-
-    expect(sidebar).toHaveClass("w-16")
+    expect(screen.getByTestId("link-/team")).toHaveAttribute("href", "/team")
+    expect(screen.getByTestId("link-/settings")).toHaveAttribute("href", "/settings")
   })
 
-  it("toggles theme when theme button is clicked", async () => {
+  it("persists a theme change when the theme toggle is clicked", async () => {
     const user = userEvent.setup()
-    render(<Sidebar />)
+    renderSidebar()
 
-    // Find the theme toggle button (has title attribute with "Theme:")
-    const themeButton = screen.getByTitle(/theme:/i)
-    expect(themeButton).toBeInTheDocument()
+    const before = localStorage.getItem("theme")
+    await user.click(screen.getByText("Theme"))
 
-    await user.click(themeButton)
-    // Theme should cycle (we just verify click doesn't throw)
+    // The toggle must actually drive + persist the theme (light → dark → system → …),
+    // not just render — a render-only test can't catch a broken toggle (Rule 6).
+    const after = localStorage.getItem("theme")
+    expect(after).toMatch(/^(light|dark|system)$/)
+    expect(after).not.toBe(before)
   })
 
-  it("shows logout button when collapsed and handles click", async () => {
+  it("logs out from the user menu", async () => {
     const user = userEvent.setup()
     const mockLogout = vi.fn()
     ;(useAuth as Mock).mockReturnValue({
@@ -208,52 +131,14 @@ describe("Sidebar", () => {
       isLoading: false,
     })
 
-    render(<Sidebar defaultCollapsed={true} />)
-
-    // When collapsed, the avatar button should be the logout trigger
-    const avatarButton = screen.getAllByRole("button").pop()!
-    await user.click(avatarButton)
+    renderSidebar()
 
+    await user.click(screen.getByRole("button", { name: /john doe/i }))
+    await user.click(await screen.findByText("Sign out"))
     expect(mockLogout).toHaveBeenCalled()
   })
 
-  it("shows loading spinner when logging out", () => {
-    ;(useAuth as Mock).mockReturnValue({
-      user: mockUser,
-      logout: vi.fn(),
-      isLoggingOut: true,
-      isAuthenticated: true,
-      isLoading: false,
-    })
-
-    render(<Sidebar />)
-
-    // Logout button should be disabled during logout
-    const buttons = screen.getAllByRole("button")
-    const logoutButton = buttons[buttons.length - 1]
-    expect(logoutButton).toBeDisabled()
-  })
-
-  it("renders the user avatar when a picture is set", () => {
-    ;(useAuth as Mock).mockReturnValue({
-      user: { ...mockUser, picture: "https://example.com/avatar.jpg" },
-      logout: vi.fn(),
-      isLoggingOut: false,
-      isAuthenticated: true,
-      isLoading: false,
-    })
-
-    render(<Sidebar />)
-
-    // Seven's Avatar (Radix) mounts the <img> only after the picture reports
-    // `load`, which jsdom never simulates — so the image element isn't queryable
-    // here. Actual image display is covered by the visual/E2E suite. At the unit
-    // level we assert the avatar mounts for the user via its initials fallback
-    // (collapsed + expanded sidebar variants both render it).
-    expect(screen.getAllByText("JD").length).toBeGreaterThan(0)
-  })
-
-  it("shows single letter initial when user has no name", () => {
+  it("falls back to a single initial when the user has no name", () => {
     ;(useAuth as Mock).mockReturnValue({
       user: { ...mockUser, name: null },
       logout: vi.fn(),
@@ -262,14 +147,12 @@ describe("Sidebar", () => {
       isLoading: false,
     })
 
-    render(<Sidebar />)
+    renderSidebar()
 
-    // Should show first letter of email "J" for "john@example.com"
-    const avatarFallbacks = screen.getAllByText("J")
-    expect(avatarFallbacks.length).toBeGreaterThan(0)
+    expect(screen.getAllByText("J").length).toBeGreaterThan(0)
   })
 
-  it("shows question mark when user has no name or email", () => {
+  it("falls back to '?' when the user has no name or email", () => {
     ;(useAuth as Mock).mockReturnValue({
       user: { id: "1", email: null, name: null, picture: null, role: "admin" },
       logout: vi.fn(),
@@ -278,9 +161,8 @@ describe("Sidebar", () => {
       isLoading: false,
     })
 
-    render(<Sidebar />)
+    renderSidebar()
 
-    const avatarFallbacks = screen.getAllByText("?")
-    expect(avatarFallbacks.length).toBeGreaterThan(0)
+    expect(screen.getAllByText("?").length).toBeGreaterThan(0)
   })
 })
diff --git a/tests/unit/client/components/ui/input.test.tsx b/tests/unit/client/components/ui/input.test.tsx
deleted file mode 100644
index b01f4cd..0000000
--- a/tests/unit/client/components/ui/input.test.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { describe, it, expect, vi } from "vitest"
-import { render, screen } from "@tests/helpers/client-test-utils"
-import userEvent from "@testing-library/user-event"
-import { createRef } from "react"
-import { Input } from "@/components/ui/input"
-
-describe("Input", () => {
-  it("renders with placeholder", () => {
-    render(<Input placeholder="Enter text" />)
-
-    expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument()
-  })
-
-  it("renders as textbox by default", () => {
-    render(<Input placeholder="text input" />)
-
-    const input = screen.getByPlaceholderText("text input")
-    // Input defaults to text type when no type is specified
-    expect(input).toBeInTheDocument()
-    expect(screen.getByRole("textbox")).toBeInTheDocument()
-  })
-
-  it("renders with specified type", () => {
-    render(<Input type="email" placeholder="email input" />)
-
-    const input = screen.getByPlaceholderText("email input")
-    expect(input).toHaveAttribute("type", "email")
-  })
-
-  it("handles value changes", async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-
-    render(<Input onChange={onChange} placeholder="type here" />)
-
-    const input = screen.getByPlaceholderText("type here")
-    await user.type(input, "hello")
-
-    expect(onChange).toHaveBeenCalled()
-    expect(input).toHaveValue("hello")
-  })
-
-  it("shows disabled state", () => {
-    render(<Input disabled placeholder="disabled input" />)
-
-    const input = screen.getByPlaceholderText("disabled input")
-    expect(input).toBeDisabled()
-    expect(input).toHaveClass("disabled:cursor-not-allowed")
-    expect(input).toHaveClass("disabled:opacity-50")
-  })
-
-  it("forwards ref correctly", () => {
-    const ref = createRef<HTMLInputElement>()
-
-    render(<Input ref={ref} placeholder="ref test" />)
-
-    expect(ref.current).toBeInstanceOf(HTMLInputElement)
-    expect(ref.current?.placeholder).toBe("ref test")
-  })
-
-  it("applies custom className", () => {
-    render(<Input className="custom-class" placeholder="custom" />)
-
-    const input = screen.getByPlaceholderText("custom")
-    expect(input).toHaveClass("custom-class")
-  })
-
-  it("handles controlled value", () => {
-    const { rerender } = render(<Input value="initial" onChange={() => {}} placeholder="controlled" />)
-
-    const input = screen.getByPlaceholderText("controlled")
-    expect(input).toHaveValue("initial")
-
-    rerender(<Input value="updated" onChange={() => {}} placeholder="controlled" />)
-    expect(input).toHaveValue("updated")
-  })
-
-  it("renders password type input", () => {
-    render(<Input type="password" placeholder="password" />)
-
-    const input = screen.getByPlaceholderText("password")
-    expect(input).toHaveAttribute("type", "password")
-  })
-
-  it("supports aria attributes", () => {
-    render(
-      <Input
-        aria-label="Email address"
-        aria-describedby="email-hint"
-        placeholder="email"
-      />
-    )
-
-    const input = screen.getByPlaceholderText("email")
-    expect(input).toHaveAttribute("aria-label", "Email address")
-    expect(input).toHaveAttribute("aria-describedby", "email-hint")
-  })
-})
diff --git a/tests/unit/client/components/ui/loading-skeleton.test.tsx b/tests/unit/client/components/ui/loading-skeleton.test.tsx
index 50a08d1..8d9a957 100644
--- a/tests/unit/client/components/ui/loading-skeleton.test.tsx
+++ b/tests/unit/client/components/ui/loading-skeleton.test.tsx
@@ -4,7 +4,6 @@ import {
   DashboardSkeleton,
   TeamSkeleton,
   PageSkeleton,
-  SidebarSkeleton,
 } from "@/components/ui/loading-skeleton"
 
 describe("DashboardSkeleton", () => {
@@ -93,48 +92,3 @@ describe("PageSkeleton", () => {
     expect(contentLines.length).toBeGreaterThanOrEqual(4)
   })
 })
-
-describe("SidebarSkeleton", () => {
-  it("renders sidebar skeleton structure", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    // Should be an aside element
-    const sidebar = container.querySelector("aside")
-    expect(sidebar).toBeInTheDocument()
-  })
-
-  it("renders with correct width", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    const sidebar = container.querySelector("aside")
-    expect(sidebar).toHaveClass("w-64")
-  })
-
-  it("renders header with logo placeholder", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    // Logo skeleton (h-8 w-8 rounded-lg)
-    const logoSkeleton = container.querySelector(".h-8.w-8.rounded-lg")
-    expect(logoSkeleton).toBeInTheDocument()
-  })
-
-  it("renders navigation skeletons", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    // Nav element
-    const nav = container.querySelector("nav")
-    expect(nav).toBeInTheDocument()
-
-    // Navigation item skeletons (h-10 w-full rounded-lg)
-    const navItems = container.querySelectorAll(".h-10.w-full.rounded-lg")
-    expect(navItems.length).toBeGreaterThanOrEqual(5)
-  })
-
-  it("renders user profile skeleton at bottom", () => {
-    const { container } = render(<SidebarSkeleton />)
-
-    // User avatar skeleton (h-9 w-9 rounded-full)
-    const userAvatar = container.querySelector(".h-9.w-9.rounded-full")
-    expect(userAvatar).toBeInTheDocument()
-  })
-})
diff --git a/tests/unit/client/components/ui/skeleton.test.tsx b/tests/unit/client/components/ui/skeleton.test.tsx
deleted file mode 100644
index 8a3c2a2..0000000
--- a/tests/unit/client/components/ui/skeleton.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { render, screen } from "@tests/helpers/client-test-utils"
-import { createRef } from "react"
-import { Skeleton } from "@/components/ui/skeleton"
-
-describe("Skeleton", () => {
-  it("renders a skeleton element", () => {
-    render(<Skeleton data-testid="skeleton" />)
-
-    expect(screen.getByTestId("skeleton")).toBeInTheDocument()
-  })
-
-  it("applies default styles", () => {
-    render(<Skeleton data-testid="skeleton" />)
-
-    const skeleton = screen.getByTestId("skeleton")
-    expect(skeleton).toHaveClass("animate-pulse")
-    expect(skeleton).toHaveClass("rounded-md")
-    expect(skeleton).toHaveClass("bg-muted")
-  })
-
-  it("applies custom className", () => {
-    render(<Skeleton data-testid="skeleton" className="h-8 w-32" />)
-
-    const skeleton = screen.getByTestId("skeleton")
-    expect(skeleton).toHaveClass("h-8")
-    expect(skeleton).toHaveClass("w-32")
-    expect(skeleton).toHaveClass("animate-pulse") // Still has default
-  })
-
-  it("renders as div element", () => {
-    render(<Skeleton data-testid="skeleton" />)
-
-    const skeleton = screen.getByTestId("skeleton")
-    expect(skeleton.tagName).toBe("DIV")
-  })
-
-  it("passes through additional props", () => {
-    render(<Skeleton data-testid="skeleton" aria-label="Loading..." />)
-
-    const skeleton = screen.getByTestId("skeleton")
-    expect(skeleton).toHaveAttribute("aria-label", "Loading...")
-  })
-})
diff --git a/tests/unit/client/components/ui/sonner.test.tsx b/tests/unit/client/components/ui/sonner.test.tsx
deleted file mode 100644
index 22fc9d7..0000000
--- a/tests/unit/client/components/ui/sonner.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { describe, it, expect } from "vitest"
-import { render, screen } from "@tests/helpers/client-test-utils"
-import { Toaster } from "@/components/ui/sonner"
-
-describe("Toaster", () => {
-  it("renders toaster component", () => {
-    render(<Toaster data-testid="toaster" />)
-
-    // Sonner creates a container with role="region"
-    expect(screen.getByRole("region")).toBeInTheDocument()
-  })
-
-  it("uses theme from context", () => {
-    // The render function from test-utils wraps with ThemeProvider
-    // which defaults to system theme (light in jsdom)
-    render(<Toaster />)
-
-    // Toaster should be rendered (theme integration works)
-    expect(screen.getByRole("region")).toBeInTheDocument()
-  })
-
-  it("passes through additional props", () => {
-    render(<Toaster position="top-center" />)
-
-    // Toaster should render with custom position
-    expect(screen.getByRole("region")).toBeInTheDocument()
-  })
-})
diff --git a/tests/unit/client/routes/_authenticated/integrations.test.tsx b/tests/unit/client/routes/_authenticated/integrations.test.tsx
index cd53858..cad8bcb 100644
--- a/tests/unit/client/routes/_authenticated/integrations.test.tsx
+++ b/tests/unit/client/routes/_authenticated/integrations.test.tsx
@@ -256,7 +256,8 @@ describe('Integrations Page', () => {
         expect(screen.getByText('Build Custom Integrations')).toBeInTheDocument()
       }, { timeout: 10000 })
       expect(screen.getByText('Use our API to build your own integrations.')).toBeInTheDocument()
-      expect(screen.getByRole('button', { name: /view api docs/i })).toBeInTheDocument()
+      // "View API Docs" is a Button asChild → <a> (a styled link), so its role is `link`.
+      expect(screen.getByRole('link', { name: /view api docs/i })).toBeInTheDocument()
     })
   })
 
@@ -298,9 +299,13 @@ describe('Integrations Page', () => {
 
       await user.click(configureButtons[0])
 
-      // Should show loading state during toggle
+      // Configure now OPENS a configuration dialog. Previously it called the
+      // toggle/disconnect handler — that label-vs-behavior mismatch was the bug
+      // this change fixed, so we assert the dialog opens instead of a disable.
       await waitFor(() => {
-        expect(configureButtons[0]).toBeDisabled()
+        expect(
+          screen.getByText(/configuration options for this integration are coming soon/i),
+        ).toBeInTheDocument()
       })
     })
   })
@@ -326,12 +331,12 @@ describe('Integrations Page', () => {
         expect(screen.getByText('https://api.example.com/webhooks/receive')).toBeInTheDocument()
       }, { timeout: 10000 })
 
-      // Find the delete button (trash icon button with destructive text styling).
-      // Filter on `text-destructive` specifically: Seven's Button base class
-      // includes `border-destructive`/`ring-destructive` on every button, so a
-      // bare `destructive` match would select all buttons.
+      // Find the webhook delete button: an icon-only destructive button. The
+      // IntegrationCard "Disconnect" buttons are also `text-destructive` but
+      // carry a text label (and open a confirm dialog), so filter to the
+      // icon-only one (empty text content) — that's the webhook delete.
       const deleteButtons = screen.getAllByRole('button').filter(btn =>
-        btn.className.includes('text-destructive')
+        btn.className.includes('text-destructive') && btn.textContent?.trim() === ''
       )
       expect(deleteButtons.length).toBeGreaterThan(0)
 
@@ -448,7 +453,7 @@ describe('Integrations Page', () => {
       })
 
       // Click on User Created event
-      const userCreatedButton = screen.getByText('User Created').closest('button')!
+      const userCreatedButton = screen.getByText('User Created').closest('label')!
       await user.click(userCreatedButton)
 
       // Event should be selected (check for visual indicator)
diff --git a/tests/unit/client/routes/authenticated-layout.test.tsx b/tests/unit/client/routes/authenticated-layout.test.tsx
index 26c1234..c40945e 100644
--- a/tests/unit/client/routes/authenticated-layout.test.tsx
+++ b/tests/unit/client/routes/authenticated-layout.test.tsx
@@ -20,11 +20,11 @@ describe('Authenticated Layout', () => {
       renderRoute({ initialEntries: ['/dashboard'] })
 
       await waitFor(() => {
-        // Sidebar should be visible
-        expect(screen.getByRole('navigation')).toBeInTheDocument()
+        // Seven's Sidebar renders <nav aria-label="Main navigation">
+        expect(screen.getByRole('navigation', { name: /main navigation/i })).toBeInTheDocument()
       })
 
-      // Main content should be rendered
+      // SidebarInset is the <main> content area
       expect(screen.getByRole('main')).toBeInTheDocument()
     })
 
@@ -83,7 +83,7 @@ describe('Authenticated Layout', () => {
 
       // Should show skeleton loading states
       await waitFor(() => {
-        const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
+        const skeletons = document.querySelectorAll('[data-slot="skeleton-loader"]')
         expect(skeletons.length).toBeGreaterThan(0)
       }, { timeout: 1000 })
 
@@ -123,7 +123,7 @@ describe('Authenticated Layout', () => {
 
       // Should show skeleton elements
       await waitFor(() => {
-        const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
+        const skeletons = document.querySelectorAll('[data-slot="skeleton-loader"]')
         expect(skeletons.length).toBeGreaterThan(0)
       }, { timeout: 1000 })
 
diff --git a/tests/unit/client/routes/dashboard.test.tsx b/tests/unit/client/routes/dashboard.test.tsx
index 26dfcfd..7c2382a 100644
--- a/tests/unit/client/routes/dashboard.test.tsx
+++ b/tests/unit/client/routes/dashboard.test.tsx
@@ -44,7 +44,8 @@ describe('Dashboard Page', () => {
       renderRoute({ initialEntries: ['/dashboard'] })
 
       await waitFor(() => {
-        expect(screen.getByText('Dashboard')).toBeInTheDocument()
+        // "Dashboard" appears in both the breadcrumb and the sidebar nav
+        expect(screen.getAllByText('Dashboard').length).toBeGreaterThan(0)
       })
 
       expect(screen.getByText('Team')).toBeInTheDocument()
diff --git a/tests/unit/client/routes/error-components.test.tsx b/tests/unit/client/routes/error-components.test.tsx
index b7f79a2..b38251a 100644
--- a/tests/unit/client/routes/error-components.test.tsx
+++ b/tests/unit/client/routes/error-components.test.tsx
@@ -121,14 +121,6 @@ describe('AuthenticatedErrorComponent', () => {
     expect(screen.getByText(/Detailed auth error message/)).toBeInTheDocument()
   })
 
-  it('renders sidebar alongside error', () => {
-    const error = new Error('Error')
-    render(<AuthenticatedErrorComponent error={error} />)
-
-    // Sidebar should be present (navigation)
-    expect(screen.getByRole('navigation')).toBeInTheDocument()
-  })
-
   it('renders try again button', () => {
     const error = new Error('Error')
     render(<AuthenticatedErrorComponent error={error} />)
@@ -155,7 +147,7 @@ describe('AuthenticatedErrorComponent', () => {
     const { container } = render(<AuthenticatedErrorComponent error={error} />)
 
     const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveClass('flex', 'h-screen', 'overflow-hidden')
+    expect(wrapper).toHaveClass('h-screen')
   })
 
   it('handles button clicks', () => {
@@ -170,31 +162,18 @@ describe('AuthenticatedErrorComponent', () => {
 })
 
 describe('AuthenticatedPendingComponent', () => {
-  it('renders skeleton loader', () => {
+  it('renders Seven skeleton loaders', () => {
     render(<AuthenticatedPendingComponent />)
 
-    const skeletons = document.querySelectorAll('[data-slot="skeleton"]')
+    const skeletons = document.querySelectorAll('[data-slot="skeleton-loader"]')
     expect(skeletons.length).toBeGreaterThan(0)
   })
 
-  it('has correct layout structure', () => {
+  it('is centered full-screen with no sidebar in the pending state', () => {
     const { container } = render(<AuthenticatedPendingComponent />)
 
     const wrapper = container.firstChild as HTMLElement
-    expect(wrapper).toHaveClass('flex', 'h-screen', 'overflow-hidden')
-  })
-
-  it('renders main content area', () => {
-    render(<AuthenticatedPendingComponent />)
-
-    expect(screen.getByRole('main')).toBeInTheDocument()
-  })
-
-  it('renders sidebar skeleton area', () => {
-    const { container } = render(<AuthenticatedPendingComponent />)
-
-    // Should have the sidebar skeleton (aside element)
-    const aside = container.querySelector('aside')
-    expect(aside).toBeInTheDocument()
+    expect(wrapper).toHaveClass('h-screen')
+    expect(container.querySelector('aside')).not.toBeInTheDocument()
   })
 })