diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 2dc6555..3d40544 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -15,7 +15,7 @@ const eslintConfig = defineConfig([
       // acessivel vem do botao Fechar e da tecla Esc. Fica como aviso, nao erro.
       "jsx-a11y/no-static-element-interactions": "warn",
       "no-restricted-syntax": [
-        "warn",
+        "error",
         {
           selector:
             "Literal[value=/\\b(?:bg|text|border|ring|outline|from|via|to|fill|stroke|divide|placeholder)-(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|slate|gray|zinc|neutral|stone)-\\d{2,3}\\b/]",
diff --git a/frontend/src/app/(app)/categories/page.tsx b/frontend/src/app/(app)/categories/page.tsx
index 3526d5b..6e0dd65 100644
--- a/frontend/src/app/(app)/categories/page.tsx
+++ b/frontend/src/app/(app)/categories/page.tsx
@@ -66,7 +66,7 @@ export default function CategoriesPage() {
       />
 
       {errorMessage ? (
-        <div className="mb-4 rounded-md border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">
+        <div className="mb-4 rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-4 py-3 text-sm text-[var(--danger-text)]">
           {errorMessage}
         </div>
       ) : null}
diff --git a/frontend/src/app/(app)/dashboard/page.tsx b/frontend/src/app/(app)/dashboard/page.tsx
index 47a8f8b..51f4476 100644
--- a/frontend/src/app/(app)/dashboard/page.tsx
+++ b/frontend/src/app/(app)/dashboard/page.tsx
@@ -203,7 +203,7 @@ export default function DashboardPage() {
       ) : null}
 
       {hasError ? (
-        <div className="rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-200">
+        <div className="rounded-xl border border-[color-mix(in_srgb,var(--accent-amber)_30%,transparent)] bg-[color-mix(in_srgb,var(--accent-amber)_10%,transparent)] px-4 py-3 text-sm text-[var(--accent-amber)]">
           Algumas seções não carregaram. Verifique a permissão da fatura e a disponibilidade da API.
         </div>
       ) : null}
diff --git a/frontend/src/app/(app)/ledger/join/[token]/page.tsx b/frontend/src/app/(app)/ledger/join/[token]/page.tsx
index 7cea305..9a32dfb 100644
--- a/frontend/src/app/(app)/ledger/join/[token]/page.tsx
+++ b/frontend/src/app/(app)/ledger/join/[token]/page.tsx
@@ -18,14 +18,14 @@ export default function JoinLedgerPage() {
   if (acceptErrorMessage) {
     return (
       <main className="mx-auto max-w-xl p-6">
-        <section className="surface border border-red-500/30 bg-red-500/10 p-6">
-          <p className="text-xs font-semibold tracking-[0.08em] text-red-200 uppercase">
+        <section className="surface border border-[var(--danger-border)] bg-[var(--danger-bg)] p-6">
+          <p className="text-xs font-semibold tracking-[0.08em] text-[var(--danger-text)] uppercase">
             Convite indisponível
           </p>
           <h1 className="mt-3 font-display text-4xl text-[var(--text-primary)] italic">
             Não foi possível aceitar
           </h1>
-          <p className="mt-3 text-sm text-red-100">{acceptErrorMessage}</p>
+          <p className="mt-3 text-sm text-[var(--danger-text)]">{acceptErrorMessage}</p>
           <p className="mt-2 text-sm text-[var(--text-secondary)]">
             O convite pode ter sido cancelado, expirado ou ja utilizado.
           </p>
diff --git a/frontend/src/app/(app)/ledger/page.tsx b/frontend/src/app/(app)/ledger/page.tsx
index 01e0adf..77c4542 100644
--- a/frontend/src/app/(app)/ledger/page.tsx
+++ b/frontend/src/app/(app)/ledger/page.tsx
@@ -142,7 +142,7 @@ export default function LedgerPage() {
                 Cancelar
               </button>
             </div>
-            {nameError ? <p className="text-sm text-red-300">{nameError}</p> : null}
+            {nameError ? <p className="text-sm text-[var(--danger-text)]">{nameError}</p> : null}
           </div>
         ) : (
           <div className="mt-3 flex flex-wrap items-center gap-2">
diff --git a/frontend/src/app/(app)/settings/page.tsx b/frontend/src/app/(app)/settings/page.tsx
index 1201f03..cfed98e 100644
--- a/frontend/src/app/(app)/settings/page.tsx
+++ b/frontend/src/app/(app)/settings/page.tsx
@@ -101,7 +101,7 @@ export default function SettingsPage() {
               {...profileForm.register("displayName")}
             />
             {profileForm.formState.errors.displayName ? (
-              <span className="mt-1.5 block text-xs text-red-300">
+              <span className="mt-1.5 block text-xs text-[var(--danger-text)]">
                 {profileForm.formState.errors.displayName.message}
               </span>
             ) : null}
@@ -143,7 +143,7 @@ export default function SettingsPage() {
               {...passwordForm.register("currentPassword")}
             />
             {passwordForm.formState.errors.currentPassword ? (
-              <span className="mt-1.5 block text-xs text-red-300">
+              <span className="mt-1.5 block text-xs text-[var(--danger-text)]">
                 {passwordForm.formState.errors.currentPassword.message}
               </span>
             ) : null}
@@ -159,7 +159,7 @@ export default function SettingsPage() {
               {...passwordForm.register("newPassword")}
             />
             {passwordForm.formState.errors.newPassword ? (
-              <span className="mt-1.5 block text-xs text-red-300">
+              <span className="mt-1.5 block text-xs text-[var(--danger-text)]">
                 {passwordForm.formState.errors.newPassword.message}
               </span>
             ) : null}
@@ -175,7 +175,7 @@ export default function SettingsPage() {
               {...passwordForm.register("confirmPassword")}
             />
             {passwordForm.formState.errors.confirmPassword ? (
-              <span className="mt-1.5 block text-xs text-red-300">
+              <span className="mt-1.5 block text-xs text-[var(--danger-text)]">
                 {passwordForm.formState.errors.confirmPassword.message}
               </span>
             ) : null}
diff --git a/frontend/src/app/(app)/transactions/page.tsx b/frontend/src/app/(app)/transactions/page.tsx
index 9723308..4ed9ed6 100644
--- a/frontend/src/app/(app)/transactions/page.tsx
+++ b/frontend/src/app/(app)/transactions/page.tsx
@@ -31,7 +31,7 @@ function getNetBalanceClassName(value: number) {
     return "text-[var(--expense)]";
   }
 
-  return "text-amber-300";
+  return "text-[var(--accent-amber)]";
 }
 
 export default function TransactionsPage() {
diff --git a/frontend/src/app/(auth)/forgot-password/page.tsx b/frontend/src/app/(auth)/forgot-password/page.tsx
index 3a9d7c8..0188c35 100644
--- a/frontend/src/app/(auth)/forgot-password/page.tsx
+++ b/frontend/src/app/(auth)/forgot-password/page.tsx
@@ -6,6 +6,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { BrandWordmark } from "@/components/brand/BrandWordmark";
 import { ThemeToggle } from "@/components/theme/ThemeToggle";
+import { Alert, Button, Field, Input } from "@/components/ui";
 import { useForgotPassword } from "@/hooks/useAuth";
 import { forgotPasswordSchema, type ForgotPasswordSchema } from "@/lib/validators/auth.schemas";
 
@@ -61,31 +62,21 @@ export default function ForgotPasswordPage() {
             </p>
 
             <form className="mt-6 space-y-5" onSubmit={onSubmit}>
-              <label className="block text-sm">
-                <span className="mb-1.5 block font-medium text-[var(--text-secondary)]">Email</span>
-                <input
+              <Field label="Email" htmlFor="email" error={form.formState.errors.email?.message}>
+                <Input
+                  id="email"
                   type="email"
                   autoComplete="email"
-                  className="focusable h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] px-3.5 transition-colors duration-150 outline-none"
+                  invalid={!!form.formState.errors.email}
                   {...form.register("email")}
                 />
-                {form.formState.errors.email ? (
-                  <span className="mt-1.5 block text-xs text-red-300">
-                    {form.formState.errors.email.message}
-                  </span>
-                ) : null}
-              </label>
+              </Field>
               {mutation.isError ? (
-                <p className="danger-chip rounded-xl px-3 py-2.5 text-sm">
-                  Ocorreu um erro. Tente novamente.
-                </p>
+                <Alert tone="danger">Ocorreu um erro. Tente novamente.</Alert>
               ) : null}
-              <button
-                disabled={mutation.isPending}
-                className="focusable h-11 w-full rounded-xl bg-[var(--accent)] px-4 font-semibold text-white shadow-[0_8px_24px_rgba(79,124,255,0.35)] transition-all duration-150 hover:bg-[var(--accent-hover)] disabled:cursor-not-allowed disabled:opacity-45"
-              >
+              <Button type="submit" className="w-full" disabled={mutation.isPending}>
                 {mutation.isPending ? "Enviando..." : "Enviar link de redefinição"}
-              </button>
+              </Button>
             </form>
           </div>
         )}
diff --git a/frontend/src/app/(auth)/login/page.tsx b/frontend/src/app/(auth)/login/page.tsx
index 07769e7..4b703e3 100644
--- a/frontend/src/app/(auth)/login/page.tsx
+++ b/frontend/src/app/(auth)/login/page.tsx
@@ -8,6 +8,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { BrandWordmark } from "@/components/brand/BrandWordmark";
 import { ThemeToggle } from "@/components/theme/ThemeToggle";
+import { Alert, Button, Field, Input } from "@/components/ui";
 import { useLogin } from "@/hooks/useAuth";
 import { getMyLedger } from "@/lib/api/ledger";
 import { useAuthStore } from "@/lib/store/auth.store";
@@ -122,50 +123,41 @@ export default function LoginPage() {
               </p>
 
               <form className="mt-8 space-y-5" onSubmit={onSubmit}>
-                <label className="block text-sm">
-                  <span className="mb-1.5 block font-medium text-[var(--text-secondary)]">
-                    Email
-                  </span>
-                  <input
+                <Field label="Email" htmlFor="email" error={form.formState.errors.email?.message}>
+                  <Input
+                    id="email"
                     type="email"
-                    className="focusable h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] px-3.5 transition-colors duration-150 outline-none"
+                    invalid={!!form.formState.errors.email}
                     {...form.register("email")}
                   />
-                  {form.formState.errors.email ? (
-                    <span className="mt-1.5 block text-xs text-red-300">
-                      {form.formState.errors.email.message}
-                    </span>
-                  ) : null}
-                </label>
-                <label className="block text-sm">
-                  <div className="mb-1.5 flex items-center justify-between">
-                    <span className="font-medium text-[var(--text-secondary)]">Senha</span>
+                </Field>
+                <Field
+                  label="Senha"
+                  htmlFor="password"
+                  error={form.formState.errors.password?.message}
+                  action={
                     <Link
                       className="text-xs text-[var(--text-muted)] hover:text-[var(--accent-hover)]"
                       href="/forgot-password"
                     >
                       Esqueci minha senha
                     </Link>
-                  </div>
-                  <input
+                  }
+                >
+                  <Input
+                    id="password"
                     type="password"
-                    className="focusable h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] px-3.5 transition-colors duration-150 outline-none"
+                    invalid={!!form.formState.errors.password}
                     {...form.register("password")}
                   />
-                  {form.formState.errors.password ? (
-                    <span className="mt-1.5 block text-xs text-red-300">
-                      {form.formState.errors.password.message}
-                    </span>
-                  ) : null}
-                </label>
+                </Field>
                 {loginMutation.isError ? (
-                  <p className="danger-chip rounded-xl px-3 py-2.5 text-sm">
-                    Credenciais inválidas ou servidor indisponível.
-                  </p>
+                  <Alert tone="danger">Credenciais inválidas ou servidor indisponível.</Alert>
                 ) : null}
-                <button
+                <Button
+                  type="submit"
+                  className="w-full"
                   disabled={loginMutation.isPending || isPreparingRoute || cooldownSeconds > 0}
-                  className="focusable h-11 w-full rounded-xl bg-[var(--accent)] px-4 font-semibold text-white shadow-[0_8px_24px_rgba(79,124,255,0.35)] transition-all duration-150 hover:bg-[var(--accent-hover)] disabled:cursor-not-allowed disabled:opacity-45"
                 >
                   {loginMutation.isPending
                     ? "Entrando..."
@@ -174,7 +166,7 @@ export default function LoginPage() {
                       : cooldownSeconds > 0
                         ? `Tente novamente em ${cooldownSeconds}s`
                         : "Entrar"}
-                </button>
+                </Button>
               </form>
               <p className="mt-5 text-sm text-[var(--text-secondary)]">
                 Não tem conta?{" "}
diff --git a/frontend/src/app/(auth)/register/page.tsx b/frontend/src/app/(auth)/register/page.tsx
index b03533a..b605bc1 100644
--- a/frontend/src/app/(auth)/register/page.tsx
+++ b/frontend/src/app/(auth)/register/page.tsx
@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm, useWatch } from "react-hook-form";
 import { BrandWordmark } from "@/components/brand/BrandWordmark";
 import { ThemeToggle } from "@/components/theme/ThemeToggle";
+import { Alert, Button, Field, Input } from "@/components/ui";
 import { useRegister } from "@/hooks/useAuth";
 import { registerSchema, type RegisterSchema } from "@/lib/validators/auth.schemas";
 
@@ -61,62 +62,48 @@ export default function RegisterPage() {
           Configure o Zenith em menos de um minuto.
         </p>
         <form className="mt-6 space-y-4" onSubmit={onSubmit}>
-          <label className="block text-sm">
-            <span className="mb-1 block text-[var(--text-secondary)]">Nome</span>
-            <input
-              className="focusable w-full rounded-md border bg-[var(--bg-elevated)] px-3 py-2 outline-none"
+          <Field
+            label="Nome"
+            htmlFor="displayName"
+            error={form.formState.errors.displayName?.message}
+          >
+            <Input
+              id="displayName"
+              invalid={!!form.formState.errors.displayName}
               {...form.register("displayName")}
             />
-            {form.formState.errors.displayName ? (
-              <span className="mt-1 block text-xs text-red-300">
-                {form.formState.errors.displayName.message}
-              </span>
-            ) : null}
-          </label>
-          <label className="block text-sm">
-            <span className="mb-1 block text-[var(--text-secondary)]">Email</span>
-            <input
+          </Field>
+          <Field label="Email" htmlFor="email" error={form.formState.errors.email?.message}>
+            <Input
+              id="email"
               type="email"
-              className="focusable w-full rounded-md border bg-[var(--bg-elevated)] px-3 py-2 outline-none"
+              invalid={!!form.formState.errors.email}
               {...form.register("email")}
             />
-            {form.formState.errors.email ? (
-              <span className="mt-1 block text-xs text-red-300">
-                {form.formState.errors.email.message}
-              </span>
-            ) : null}
-          </label>
-          <label className="block text-sm">
-            <span className="mb-1 block text-[var(--text-secondary)]">Senha</span>
-            <input
+          </Field>
+          <Field label="Senha" htmlFor="password" error={form.formState.errors.password?.message}>
+            <Input
+              id="password"
               type="password"
-              className="focusable w-full rounded-md border bg-[var(--bg-elevated)] px-3 py-2 outline-none"
+              invalid={!!form.formState.errors.password}
               {...form.register("password")}
             />
-            <span className="mt-1 block text-xs text-[var(--text-secondary)]">
-              Força: {strength}
-            </span>
-            {form.formState.errors.password ? (
-              <span className="mt-1 block text-xs text-red-300">
-                {form.formState.errors.password.message}
-              </span>
-            ) : null}
-          </label>
+            <p className="text-xs text-[var(--text-secondary)]">Força: {strength}</p>
+          </Field>
           {registerMutation.isError ? (
-            <p className="rounded-md bg-red-500/10 px-3 py-2 text-sm text-red-300">
-              Não foi possível cadastrar. Tente novamente.
-            </p>
+            <Alert tone="danger">Não foi possível cadastrar. Tente novamente.</Alert>
           ) : null}
-          <button
+          <Button
+            type="submit"
+            className="w-full"
             disabled={registerMutation.isPending || cooldownSeconds > 0}
-            className="focusable w-full rounded-md bg-[var(--accent)] px-4 py-2 font-medium text-white transition-all duration-150 hover:bg-[var(--accent-hover)] disabled:cursor-not-allowed disabled:opacity-40"
           >
             {registerMutation.isPending
               ? "Cadastrando..."
               : cooldownSeconds > 0
                 ? `Tente novamente em ${cooldownSeconds}s`
                 : "Cadastrar"}
-          </button>
+          </Button>
         </form>
         <p className="mt-4 text-sm text-[var(--text-secondary)]">
           Já tem conta?{" "}
diff --git a/frontend/src/app/(auth)/reset-password/page.tsx b/frontend/src/app/(auth)/reset-password/page.tsx
index e3a06c7..2a4e014 100644
--- a/frontend/src/app/(auth)/reset-password/page.tsx
+++ b/frontend/src/app/(auth)/reset-password/page.tsx
@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { BrandWordmark } from "@/components/brand/BrandWordmark";
 import { ThemeToggle } from "@/components/theme/ThemeToggle";
+import { Alert, Button, Field, Input } from "@/components/ui";
 import { useResetPassword } from "@/hooks/useAuth";
 import { resetPasswordSchema, type ResetPasswordSchema } from "@/lib/validators/auth.schemas";
 
@@ -53,47 +54,40 @@ function ResetPasswordForm() {
       </p>
 
       <form className="mt-6 space-y-5" onSubmit={onSubmit}>
-        <label className="block text-sm">
-          <span className="mb-1.5 block font-medium text-[var(--text-secondary)]">Nova senha</span>
-          <input
+        <Field
+          label="Nova senha"
+          htmlFor="newPassword"
+          error={form.formState.errors.newPassword?.message}
+        >
+          <Input
+            id="newPassword"
             type="password"
             autoComplete="new-password"
-            className="focusable h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] px-3.5 transition-colors duration-150 outline-none"
+            invalid={!!form.formState.errors.newPassword}
             {...form.register("newPassword")}
           />
-          {form.formState.errors.newPassword ? (
-            <span className="mt-1.5 block text-xs text-red-300">
-              {form.formState.errors.newPassword.message}
-            </span>
-          ) : null}
-        </label>
-        <label className="block text-sm">
-          <span className="mb-1.5 block font-medium text-[var(--text-secondary)]">
-            Confirmar senha
-          </span>
-          <input
+        </Field>
+        <Field
+          label="Confirmar senha"
+          htmlFor="confirmPassword"
+          error={form.formState.errors.confirmPassword?.message}
+        >
+          <Input
+            id="confirmPassword"
             type="password"
             autoComplete="new-password"
-            className="focusable h-11 w-full rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] px-3.5 transition-colors duration-150 outline-none"
+            invalid={!!form.formState.errors.confirmPassword}
             {...form.register("confirmPassword")}
           />
-          {form.formState.errors.confirmPassword ? (
-            <span className="mt-1.5 block text-xs text-red-300">
-              {form.formState.errors.confirmPassword.message}
-            </span>
-          ) : null}
-        </label>
+        </Field>
         {mutation.isError ? (
-          <p className="danger-chip rounded-xl px-3 py-2.5 text-sm">
+          <Alert tone="danger">
             Link inválido ou expirado. Solicite um novo link de redefinição.
-          </p>
+          </Alert>
         ) : null}
-        <button
-          disabled={mutation.isPending}
-          className="focusable h-11 w-full rounded-xl bg-[var(--accent)] px-4 font-semibold text-white shadow-[0_8px_24px_rgba(79,124,255,0.35)] transition-all duration-150 hover:bg-[var(--accent-hover)] disabled:cursor-not-allowed disabled:opacity-45"
-        >
+        <Button type="submit" className="w-full" disabled={mutation.isPending}>
           {mutation.isPending ? "Salvando..." : "Salvar nova senha"}
-        </button>
+        </Button>
       </form>
     </div>
   );
diff --git a/frontend/src/app/onboarding/page.tsx b/frontend/src/app/onboarding/page.tsx
index 6a3bf2a..024c6eb 100644
--- a/frontend/src/app/onboarding/page.tsx
+++ b/frontend/src/app/onboarding/page.tsx
@@ -77,7 +77,7 @@ export default function OnboardingPage() {
               {createLedgerMutation.isPending ? "Criando..." : "Criar fatura"}
             </button>
             {createLedgerMutation.isError ? (
-              <p className="text-sm text-red-300">Não foi possível criar a fatura.</p>
+              <p className="text-sm text-[var(--danger-text)]">Não foi possível criar a fatura.</p>
             ) : null}
             <button
               type="button"
diff --git a/frontend/src/components/categories/CategoryFormModal.tsx b/frontend/src/components/categories/CategoryFormModal.tsx
index 3162645..4485ff9 100644
--- a/frontend/src/components/categories/CategoryFormModal.tsx
+++ b/frontend/src/components/categories/CategoryFormModal.tsx
@@ -135,7 +135,7 @@ function CategoryFormContent({
             <button
               type="button"
               onClick={onClose}
-              className="focusable rounded-md border border-red-400/30 bg-red-500/10 px-4 py-2 text-red-200 transition-colors duration-150 hover:border-red-300 hover:bg-red-500/20"
+              className="focusable rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-4 py-2 text-[var(--danger-text)] transition-colors duration-150 hover:border-[var(--danger-border)] hover:bg-[var(--danger-bg)]"
             >
               Cancelar
             </button>
diff --git a/frontend/src/components/dashboard/CoupleSplitPanel.tsx b/frontend/src/components/dashboard/CoupleSplitPanel.tsx
index 5ccb4f4..defa3cf 100644
--- a/frontend/src/components/dashboard/CoupleSplitPanel.tsx
+++ b/frontend/src/components/dashboard/CoupleSplitPanel.tsx
@@ -38,10 +38,10 @@ export function CoupleSplitPanel({ data }: CoupleSplitPanelProps) {
                   : "Equilibrado";
             const statusClassName =
               delta > 0
-                ? "border border-emerald-400/40 bg-emerald-500/12 text-[var(--income)]"
+                ? "border border-[color-mix(in_srgb,var(--income)_40%,transparent)] bg-[color-mix(in_srgb,var(--income)_12%,transparent)] text-[var(--income)]"
                 : delta < 0
                   ? "danger-chip"
-                  : "border border-amber-400/35 bg-amber-500/12 text-[var(--accent-amber)]";
+                  : "border border-[color-mix(in_srgb,var(--accent-amber)_35%,transparent)] bg-[color-mix(in_srgb,var(--accent-amber)_12%,transparent)] text-[var(--accent-amber)]";
 
             return (
               <div
diff --git a/frontend/src/components/dashboard/NotificationBell.tsx b/frontend/src/components/dashboard/NotificationBell.tsx
index c4c25f1..fbe556d 100644
--- a/frontend/src/components/dashboard/NotificationBell.tsx
+++ b/frontend/src/components/dashboard/NotificationBell.tsx
@@ -103,7 +103,7 @@ export function NotificationBell() {
       >
         <BellIcon className="h-5 w-5" />
         {unreadCount > 0 ? (
-          <span className="absolute bottom-1 left-1 min-w-5 rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-semibold text-white">
+          <span className="absolute bottom-1 left-1 min-w-5 rounded-full bg-[var(--expense)] px-1.5 py-0.5 text-[10px] font-semibold text-white">
             {unreadCount > 9 ? "9+" : unreadCount}
           </span>
         ) : null}
@@ -133,7 +133,9 @@ export function NotificationBell() {
           ) : null}
 
           {notifications.isError ? (
-            <p className="text-sm text-red-300">Não foi possível carregar as notificações.</p>
+            <p className="text-sm text-[var(--danger-text)]">
+              Não foi possível carregar as notificações.
+            </p>
           ) : null}
 
           {!notifications.isLoading && !notifications.isError ? (
@@ -175,7 +177,7 @@ export function NotificationBell() {
           ) : null}
 
           {markSeen.isError ? (
-            <p className="mt-3 text-xs text-amber-300">
+            <p className="mt-3 text-xs text-[var(--accent-amber)]">
               As notificações foram abertas, mas não foi possível sincronizar o status.
             </p>
           ) : null}
diff --git a/frontend/src/components/ledger/InviteModal.tsx b/frontend/src/components/ledger/InviteModal.tsx
index c3dd45e..6fe212f 100644
--- a/frontend/src/components/ledger/InviteModal.tsx
+++ b/frontend/src/components/ledger/InviteModal.tsx
@@ -42,7 +42,7 @@ export function InviteModal({ open, onClose, onSubmit, isSubmitting = false }: I
             <button
               type="button"
               onClick={onClose}
-              className="focusable rounded-md border border-red-400/30 bg-red-500/10 px-4 py-2 text-red-200 transition-colors duration-150 hover:border-red-300 hover:bg-red-500/20"
+              className="focusable rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-4 py-2 text-[var(--danger-text)] transition-colors duration-150 hover:border-[var(--danger-border)] hover:bg-[var(--danger-bg)]"
             >
               Cancelar
             </button>
diff --git a/frontend/src/components/transactions/TransactionFilters.tsx b/frontend/src/components/transactions/TransactionFilters.tsx
index 6c52748..95ee911 100644
--- a/frontend/src/components/transactions/TransactionFilters.tsx
+++ b/frontend/src/components/transactions/TransactionFilters.tsx
@@ -19,12 +19,12 @@ export function TransactionFilters({ active, onChange }: TransactionFiltersProps
         const className =
           option === "INCOME"
             ? isActive
-              ? "border-emerald-400/80 bg-emerald-500/15 text-emerald-200"
-              : "border-emerald-500/25 bg-emerald-500/5 text-emerald-300 hover:border-emerald-400/50 hover:bg-emerald-500/10"
+              ? "border-[color-mix(in_srgb,var(--income)_80%,transparent)] bg-[color-mix(in_srgb,var(--income)_15%,transparent)] text-[var(--income)]"
+              : "border-[color-mix(in_srgb,var(--income)_25%,transparent)] bg-[color-mix(in_srgb,var(--income)_5%,transparent)] text-[var(--income)] hover:border-[color-mix(in_srgb,var(--income)_50%,transparent)] hover:bg-[color-mix(in_srgb,var(--income)_10%,transparent)]"
             : option === "EXPENSE"
               ? isActive
-                ? "border-red-400/80 bg-red-500/15 text-red-200"
-                : "border-red-500/25 bg-red-500/5 text-red-300 hover:border-red-400/50 hover:bg-red-500/10"
+                ? "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger-text)]"
+                : "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger-text)] hover:border-[var(--danger-border)] hover:bg-[var(--danger-bg)]"
               : isActive
                 ? "border-[var(--accent)] bg-[var(--accent-muted)] text-[var(--accent-hover)]"
                 : "border-[var(--surface-edge)] bg-[var(--bg-elevated)] text-[var(--text-secondary)] hover:bg-[var(--bg-muted)]";
diff --git a/frontend/src/components/transactions/TransactionTable.tsx b/frontend/src/components/transactions/TransactionTable.tsx
index 927d271..67c85e4 100644
--- a/frontend/src/components/transactions/TransactionTable.tsx
+++ b/frontend/src/components/transactions/TransactionTable.tsx
@@ -64,7 +64,7 @@ export function TransactionTable({ items, onEdit, onDelete, deletingId }: Transa
                 </button>
                 <button
                   type="button"
-                  className="focusable rounded-full border border-red-500/30 px-3 py-1 text-red-300 transition-colors duration-150 hover:border-red-400/60 hover:bg-red-500/10"
+                  className="focusable rounded-full border border-[var(--danger-border)] px-3 py-1 text-[var(--danger-text)] transition-colors duration-150 hover:border-[var(--danger-border)] hover:bg-[var(--danger-bg)]"
                   onClick={() => onDelete(item)}
                 >
                   {deletingId === item.id ? "Excluindo..." : "Excluir"}
@@ -95,7 +95,7 @@ export function TransactionTable({ items, onEdit, onDelete, deletingId }: Transa
                 </button>
                 <button
                   type="button"
-                  className="focusable rounded-full border border-red-500/30 px-3 py-1 text-red-300 transition-colors duration-150 hover:border-red-400/60 hover:bg-red-500/10"
+                  className="focusable rounded-full border border-[var(--danger-border)] px-3 py-1 text-[var(--danger-text)] transition-colors duration-150 hover:border-[var(--danger-border)] hover:bg-[var(--danger-bg)]"
                   onClick={() => onDelete(item)}
                 >
                   {deletingId === item.id ? "Excluindo..." : "Excluir"}
diff --git a/frontend/src/components/ui/Field.tsx b/frontend/src/components/ui/Field.tsx
index e8e6dd1..6990ec9 100644
--- a/frontend/src/components/ui/Field.tsx
+++ b/frontend/src/components/ui/Field.tsx
@@ -5,15 +5,19 @@ type FieldProps = {
   htmlFor?: string;
   error?: string;
   hint?: string;
+  action?: ReactNode;
   children: ReactNode;
 };
 
-export function Field({ label, htmlFor, error, hint, children }: FieldProps) {
+export function Field({ label, htmlFor, error, hint, action, children }: FieldProps) {
   return (
     <div className="space-y-1.5">
-      <label htmlFor={htmlFor} className="block text-sm font-medium text-[var(--text-secondary)]">
-        {label}
-      </label>
+      <div className="flex items-center justify-between gap-3">
+        <label htmlFor={htmlFor} className="block text-sm font-medium text-[var(--text-secondary)]">
+          {label}
+        </label>
+        {action}
+      </div>
       {children}
       {hint && !error ? <p className="text-xs text-[var(--text-muted)]">{hint}</p> : null}
       {error ? <p className="text-xs text-[var(--danger-text)]">{error}</p> : null}