@prenta/admin 2.6.0 → 2.7.0

package/src/views/WidgetsPlaceholder.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
+import { EmptyState } from '../components/ui/EmptyState.js'
+import { LayoutGrid } from 'lucide-react'
+
+export function WidgetsPlaceholder() {
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <PageHeader
+        flush
+        title="Widgets"
+        subtitle="Widget areas will be editable here."
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Dashboard', path: '/' },
+              // No Appearance landing screen exists yet, so the section is not a link.
+              { label: 'Appearance' },
+              { label: 'Widgets' },
+            ]}
+          />
+        }
+      />
+      <EmptyState
+        icon={<LayoutGrid size={24} aria-hidden />}
+        title="No widgets yet"
+        description="This screen is a placeholder. Header and footer are edited from Appearance."
+      />
+    </div>
+  )
+}

package/src/views/dashboard/kpi-grid.ts

@@ -0,0 +1,38 @@
+/**
+ * Dashboard KPI grid (SHELL.md §8, Dashboard.html `.kpis`).
+ *
+ * Five cards: one row of five from 1400px; below that a six-track grid where
+ * the first two cards span three tracks and the rest two (2+3); on phones two
+ * columns, the last card spanning both.
+ *
+ * Any other count (four, when the site has a single content collection) gets
+ * the same tiers without empty slots: one row from 1400px, two columns below,
+ * and an odd last card spanning both columns.
+ *
+ * 1400px is the kit's own step, not a layout tier, so it uses the stock
+ * `min-[1400px]:` variant. The classes are written out in full so Tailwind
+ * sees them.
+ */
+
+const WIDE_COLUMNS: Record<number, string> = {
+  1: 'min-[1400px]:grid-cols-1',
+  2: 'min-[1400px]:grid-cols-2',
+  3: 'min-[1400px]:grid-cols-3',
+  4: 'min-[1400px]:grid-cols-4',
+  5: 'min-[1400px]:grid-cols-5',
+}
+
+export function kpiGridClass(count: number): string {
+  const wide = WIDE_COLUMNS[count] ?? 'min-[1400px]:grid-cols-5'
+  const base = count === 5 ? 'grid-cols-6 mobile:grid-cols-2' : 'grid-cols-2'
+  return `grid gap-3 mobile:gap-2 ${base} ${wide}`
+}
+
+export function kpiCardSpan(index: number, count: number): string {
+  const last = index === count - 1
+  if (count === 5) {
+    const tablet = index < 2 ? 'col-span-3' : 'col-span-2'
+    return `${tablet} min-[1400px]:col-span-1 ${last ? 'mobile:col-span-2' : 'mobile:col-span-1'}`
+  }
+  return last && count % 2 === 1 ? 'col-span-2 min-[1400px]:col-span-1' : ''
+}

package/src/views/lazy-views.tsx

@@ -18,6 +18,18 @@ export const MediaBrowser = lazy(() =>
 )
 export const Settings = lazy(() => import('./Settings.js').then((m) => ({ default: m.Settings })))
 export const Jobs = lazy(() => import('./Jobs.js').then((m) => ({ default: m.Jobs })))
+export const AppearanceChrome = lazy(() =>
+  import('./AppearanceChrome.js').then((m) => ({ default: m.AppearanceChrome })),
+)
+export const WidgetsPlaceholder = lazy(() =>
+  import('./WidgetsPlaceholder.js').then((m) => ({ default: m.WidgetsPlaceholder })),
+)
+export const FormsSettings = lazy(() =>
+  import('./FormsSettings.js').then((m) => ({ default: m.FormsSettings })),
+)
+export const SpamFolder = lazy(() =>
+  import('./SpamFolder.js').then((m) => ({ default: m.SpamFolder })),
+)
 export const Profile = lazy(() => import('./Profile.js').then((m) => ({ default: m.Profile })))
 export const Forms = lazy(() => import('./Forms.js').then((m) => ({ default: m.Forms })))
 export const FormEditor = lazy(() =>

package/src/views/page-editor/PageTab.tsx

@@ -157,7 +157,7 @@ export function PageTab({
             breaks nothing, and warning about it would train editors to dismiss
             the warning that matters. */}
         {move && (
-          <div className="bg-warning/10 border-warning/30 space-y-2 rounded-lg border p-2.5">
+          <div className="bg-warn-l border-warning/30 space-y-2 rounded-lg border p-2.5">
             <div className="flex gap-2">
               <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
               <p className="text-[11.5px] leading-normal">
@@ -336,7 +336,7 @@ export function PageTab({
         </div>
 
         {!directives.index && (
-          <div className="bg-warning/10 border-warning/30 flex gap-2 rounded-lg border p-2.5">
+          <div className="bg-warn-l border-warning/30 flex gap-2 rounded-lg border p-2.5">
             <AlertTriangle size={14} className="text-warning mt-px shrink-0" aria-hidden />
             <p className="text-[11.5px] leading-normal">
               <b className="font-semibold">This page is hidden from search.</b> Publishing will not

package/src/views/page-editor/ReviewBar.tsx

@@ -36,7 +36,7 @@ export function ReviewBar({
       // whole canvas means, and a screen-reader user gets no equivalent of the
       // amber colour that announces it to everyone else.
       role="status"
-      className="border-warning/35 bg-warning/10 text-foreground mx-auto mb-3 flex w-fit max-w-full flex-wrap items-center gap-2.5 rounded-full border py-1.5 pr-1.5 pl-3.5 text-[11.5px]"
+      className="border-warning/35 bg-warn-l text-foreground mx-auto mb-3 flex w-fit max-w-full flex-wrap items-center gap-2.5 rounded-full border py-1.5 pr-1.5 pl-3.5 text-[11.5px]"
     >
       <History className="text-warning h-3.5 w-3.5 shrink-0" aria-hidden />
       <span className="min-w-0">

package/src/views/page-editor/VersionHistoryPanel.tsx

@@ -159,7 +159,7 @@ export function VersionHistoryPanel({
 
 const TONE_CLASS: Record<string, string> = {
   live: 'bg-success/15 text-success',
-  draft: 'bg-warning/15 text-warning',
+  draft: 'bg-warn-l text-warning',
   neutral: 'bg-muted text-muted-foreground',
   danger: 'bg-destructive/15 text-destructive',
 }

package/src/views/seo/AuditTab.tsx

@@ -125,7 +125,7 @@ function AuditSummaryCards({ refetchKey }: { refetchKey: number }) {
       {coverage?.partial ? (
         <div
           role="status"
-          className="border-warning/30 bg-warning/10 text-foreground rounded-lg border p-4"
+          className="border-warning/30 bg-warn-l text-foreground rounded-lg border p-4"
         >
           <div className="flex items-start gap-3">
             <AlertTriangle size={20} className="text-warning shrink-0" aria-hidden="true" />

package/src/views/seo/OverviewTab.tsx

@@ -57,9 +57,10 @@ export function OverviewTab({
 
   return (
     <div className="space-y-6">
-      {/* Site score + metrics */}
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-        <SectionCard title="Site SEO Score" className="lg:col-span-1">
+      {/* Site score + metrics. One column up to 1024px, where the score stops
+          fighting the metrics (cms-layouts.css `.ov-top`, tablet). */}
+      <div className="not-narrow:grid-cols-3 grid grid-cols-1 gap-4">
+        <SectionCard title="Site SEO Score" className="not-narrow:col-span-1">
           <div className="flex items-center gap-4">
             <div className="flex flex-col">
               <span className="text-foreground text-4xl font-medium tabular-nums">
@@ -98,7 +99,7 @@ export function OverviewTab({
           )}
         </SectionCard>
 
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-2">
+        <div className="not-narrow:col-span-2 grid grid-cols-1 gap-4 sm:grid-cols-2">
           {metrics.length === 0 ? (
             <div className="sm:col-span-2">
               <SeoEmptyState
@@ -165,7 +166,7 @@ export function OverviewTab({
                   tone === 'poor'
                     ? 'bg-destructive/10 text-destructive'
                     : tone === 'fair'
-                      ? 'bg-warning/10 text-warning'
+                      ? 'bg-warn-l text-warning'
                       : 'bg-success/10 text-success'
                 return (
                   <li key={w.id} className="flex items-start justify-between gap-3 py-3">

package/src/views/seo/ProposalsTab.tsx

@@ -233,7 +233,7 @@ function AutopilotChip({
       ? `Autopilot paused — ${chipPauseLabel(autopilot.pausedReason)}`
       : `Autopilot on · ${autopilot.appliedLast7d} applied this week`
   const tone = paused
-    ? 'border-warning/40 bg-warning/10 text-foreground hover:bg-warning/20'
+    ? 'border-warning/40 bg-warn-l text-foreground hover:bg-warning/20'
     : 'border-border bg-muted/40 text-foreground hover:bg-accent'
   return (
     <button

package/src/views/settings/AISettingsTab.tsx

@@ -8,7 +8,8 @@ import { BrandVoiceCard, type BrandVoiceAiReadiness } from './BrandVoiceCard.js'
 import { ModelSelector } from './ModelSelector.js'
 import { MonthlyUsageCard } from './MonthlyUsageCard.js'
 import { ProviderConnectionCard } from './ProviderConnectionCard.js'
-import { SettingsCard, SettingsSaveBar } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsCard, useSavedToast } from './components.js'
 import {
   useAiSettings,
   type AiProviderKey,
@@ -37,6 +38,7 @@ export interface AISettingsTabProps {
 export function AISettingsTab({ role, config }: AISettingsTabProps) {
   const canEdit = role === 'ADMIN'
   const ai = useAiSettings(canEdit)
+  useSavedToast(ai.saveState)
 
   const brandVoiceAiReadiness = useMemo((): BrandVoiceAiReadiness => {
     const contentWriting = ai.form.features.find((f) => f.key === 'ai.features.contentWriting')
@@ -165,13 +167,15 @@ export function AISettingsTab({ role, config }: AISettingsTabProps) {
         </div>
       )}
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={ai.dirty}
-        canEdit={canEdit}
-        hasErrors={Boolean(ai.budgetError)}
-        saveState={ai.saveState}
+        saving={ai.saveState === 'saving'}
+        saveDisabled={!canEdit || Boolean(ai.budgetError)}
         onSave={ai.save}
-        onReset={ai.reset}
+        onDiscard={ai.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/AccessProtectionCard.tsx

@@ -78,7 +78,7 @@ export function AccessProtectionCard({
           </p>
         )}
         {entries.length > 0 && (
-          <div className="border-warning/30 bg-warning/10 text-warning flex items-start gap-2 rounded-md border p-2.5 text-sm">
+          <div className="border-warning/30 bg-warn-l text-warning flex items-start gap-2 rounded-md border p-2.5 text-sm">
             <AlertTriangle size={15} className="mt-0.5 shrink-0" aria-hidden="true" />
             <span>
               Make sure your own IP

package/src/views/settings/AdminThemeCard.tsx

@@ -1,18 +1,44 @@
 'use client'
 
-import { ACCENT_PRESET_LIST } from '@prenta/core/appearance'
-import type { ColorMode, SidebarDensity } from '@prenta/core/appearance'
-import { Check, Monitor, Moon, Sun } from 'lucide-react'
+import {
+  ACCENT_PRESETS,
+  ACCENT_PRESET_LIST,
+  isAccentPreset,
+  toHex,
+  type SidebarDensity,
+} from '@prenta/core/appearance'
+import { Check } from 'lucide-react'
+import { useState } from 'react'
 
+import type { ThemeBase } from '../../components/ThemeProvider.js'
+import { inputVariants } from '../../components/ui/Input.js'
+import { Toggle } from '../../components/ui/Toggle.js'
 import { SettingsSourceBadge } from './components.js'
 import type { UseAppearanceSettings } from './useAppearanceSettings.js'
 
-const COLOR_MODES: { value: ColorMode; label: string; Icon: typeof Sun }[] = [
-  { value: 'light', label: 'Light', Icon: Sun },
-  { value: 'dark', label: 'Dark', Icon: Moon },
-  { value: 'system', label: 'System', Icon: Monitor },
+/** The kit's three bases (prototype/design-system/theme.js `BASES`). */
+const BASES: { id: ThemeBase; name: string; desc: string }[] = [
+  { id: 'porcelain', name: 'Porcelain', desc: 'Cool neutral light' },
+  { id: 'linen', name: 'Linen', desc: 'Warm neutral light' },
+  { id: 'graphite', name: 'Graphite', desc: 'Neutral dark' },
 ]
 
+const DEFAULT_ACCENT = ACCENT_PRESET_LIST[0]!
+
+/** A typed or picked hex that equals a preset swatch is stored as that preset. */
+function accentFromHex(hex: string): string {
+  return ACCENT_PRESET_LIST.find((p) => p.swatch.toLowerCase() === hex)?.name ?? hex
+}
+
+/**
+ * Rainbow behind the custom-color swatch, built from the preset picks so it
+ * stays tied to the palette instead of carrying its own hex values.
+ */
+const CUSTOM_SWATCH_BG = `conic-gradient(from 0deg, ${[
+  ...[2, 3, 1, 0, 4].map((i) => ACCENT_PRESET_LIST[i]!.swatch),
+  ACCENT_PRESET_LIST[2]!.swatch,
+].join(', ')})`
+
 const DENSITIES: { value: SidebarDensity; label: string }[] = [
   { value: 'default', label: 'Default' },
   { value: 'compact', label: 'Compact' },
@@ -27,7 +53,7 @@ function SegmentedGroup<T extends string>({
 }: {
   label: string
   value: T
-  options: { value: T; label: string; Icon?: typeof Sun }[]
+  options: { value: T; label: string }[]
   canEdit: boolean
   onChange: (v: T) => void
 }) {
@@ -37,7 +63,7 @@ function SegmentedGroup<T extends string>({
       aria-label={label}
       className="border-border bg-muted inline-flex flex-wrap rounded-md border p-0.5"
     >
-      {options.map(({ value: v, label: text, Icon }) => {
+      {options.map(({ value: v, label: text }) => {
         const active = value === v
         return (
           <button
@@ -53,7 +79,6 @@ function SegmentedGroup<T extends string>({
                 : 'text-muted-foreground hover:text-foreground'
             }`}
           >
-            {Icon && <Icon size={14} aria-hidden="true" />}
             {text}
           </button>
         )
@@ -62,7 +87,86 @@ function SegmentedGroup<T extends string>({
   )
 }
 
+/**
+ * A base card. The preview paints with that base's real tokens
+ * (`.prenta-base-preview[data-base]` in prenta-tokens.css) and the picked
+ * accent, so it can't drift from what the admin renders.
+ */
+function BaseCard({
+  base,
+  checked,
+  disabled,
+  onPick,
+}: {
+  base: (typeof BASES)[number]
+  checked: boolean
+  disabled: boolean
+  onPick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      role="radio"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={onPick}
+      className={`bg-card focus-visible:shadow-ring flex flex-col overflow-hidden rounded-[11px] border-[1.5px] text-left transition-colors duration-[var(--mo-fast)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+        checked ? 'border-acc shadow-[0_0_0_3px_var(--acc-l)]' : 'border-bdr hover:border-faint'
+      }`}
+    >
+      <div aria-hidden="true" className="prenta-base-preview w-full" data-base={base.id}>
+        <div className="border-bdr bg-bg flex h-[92px] gap-[7px] border-b p-[9px]">
+          <div className="border-bdr bg-card rounded-5 flex w-[30%] flex-col gap-[5px] border p-1.5">
+            <i className="bg-acc block h-[5px] rounded-[3px]" />
+            <i className="bg-bdr block h-[5px] rounded-[3px]" />
+            <i className="bg-bdr block h-[5px] rounded-[3px]" />
+          </div>
+          <div className="flex flex-1">
+            <div className="border-bdr bg-card rounded-5 flex flex-1 flex-col gap-1.5 border p-2">
+              <i className="bg-txt block h-[5px] w-[46%] rounded-[3px]" />
+              <i className="bg-bdr block h-[5px] w-[78%] rounded-[3px]" />
+              <span className="bg-acc rounded-4 mt-auto h-3 w-[38px]" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="relative flex items-baseline gap-2 px-3 py-2.5">
+        <span className="text-body text-txt font-semibold">{base.name}</span>
+        <span className="text-hint text-sub">{base.desc}</span>
+        {checked && (
+          <span className="bg-acc text-acc-on absolute top-[9px] right-2.5 flex h-5 w-5 items-center justify-center rounded-full">
+            <Check size={13} aria-hidden="true" />
+          </span>
+        )}
+      </div>
+    </button>
+  )
+}
+
 export function AdminThemeCard({ s, canEdit }: { s: UseAppearanceSettings; canEdit: boolean }) {
+  const { colorMode, lightBase, accent } = s.appearance
+  const matchSystem = colorMode === 'system'
+  const current: ThemeBase = colorMode === 'dark' ? 'graphite' : lightBase
+  const accentEditable = canEdit && s.sources.accent?.editable !== false
+
+  // Legacy names (`purple`, `blue`, …) are stored aliases of a picker preset.
+  const preset = isAccentPreset(accent)
+    ? ACCENT_PRESET_LIST.find((p) => p.swatch === ACCENT_PRESETS[accent].swatch)
+    : undefined
+  const accentHex = preset?.swatch ?? toHex(accent) ?? DEFAULT_ACCENT.swatch
+  // What the hex field shows while a value is half-typed; null shows the accent.
+  const [hexDraft, setHexDraft] = useState<string | null>(null)
+
+  const onHex = (raw: string) => {
+    const v = raw.startsWith('#') ? raw : `#${raw}`
+    if (/^#[0-9a-f]{6}$/i.test(v)) {
+      setHexDraft(null)
+      s.setAccent(accentFromHex(v.toLowerCase()))
+    } else {
+      setHexDraft(v)
+    }
+  }
+
   return (
     <section className="border-border bg-card rounded-lg border p-6">
       <header className="mb-4">
@@ -75,61 +179,150 @@ export function AdminThemeCard({ s, canEdit }: { s: UseAppearanceSettings; canEd
       <div className="space-y-5">
         <div>
           <div className="mb-2 flex items-center gap-2">
-            <span className="text-foreground text-base font-medium">Color mode</span>
+            <span id="admin-theme-base" className="text-sm2 text-txt font-semibold">
+              Base theme
+            </span>
             <SettingsSourceBadge meta={s.sources.colorMode} />
           </div>
-          <SegmentedGroup
-            label="Color mode"
-            value={s.appearance.colorMode}
-            options={COLOR_MODES}
-            canEdit={canEdit}
-            onChange={s.setColorMode}
+          <div
+            role="radiogroup"
+            aria-labelledby="admin-theme-base"
+            className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-3"
+          >
+            {BASES.map((base) => (
+              <BaseCard
+                key={base.id}
+                base={base}
+                checked={!matchSystem && current === base.id}
+                disabled={!canEdit}
+                onPick={() => s.setBase(base.id)}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between gap-5">
+          <div>
+            <div id="admin-theme-system" className="text-body text-txt font-semibold">
+              Match operating system
+            </div>
+            <div id="admin-theme-system-hint" className="text-hint text-sub mt-[3px]">
+              Uses {lightBase === 'linen' ? 'Linen' : 'Porcelain'} by day and Graphite when your OS
+              is in dark mode.
+            </div>
+          </div>
+          <Toggle
+            checked={matchSystem}
+            onCheckedChange={s.setMatchSystem}
+            disabled={!canEdit}
+            aria-labelledby="admin-theme-system"
+            aria-describedby="admin-theme-system-hint"
           />
         </div>
 
         <div>
           <div className="mb-2 flex items-center gap-2">
-            <span className="text-foreground text-base font-medium">Accent color</span>
+            <span id="admin-theme-accent" className="text-sm2 text-txt font-semibold">
+              Accent color
+            </span>
             <SettingsSourceBadge meta={s.sources.accent} />
           </div>
           <div
             role="radiogroup"
-            aria-label="Accent color"
+            aria-labelledby="admin-theme-accent"
             className="flex flex-wrap items-center gap-3"
           >
-            {ACCENT_PRESET_LIST.map((preset) => {
-              const active = s.appearance.accent === preset.name
-              const editable = s.sources.accent?.editable !== false
+            {ACCENT_PRESET_LIST.map((p) => {
+              const active = preset === p
               return (
                 <button
-                  key={preset.name}
+                  key={p.name}
                   type="button"
                   role="radio"
                   aria-checked={active}
-                  aria-label={preset.label}
-                  title={preset.label}
-                  disabled={!canEdit || !editable}
-                  onClick={() => s.setAccent(preset.name)}
-                  className={`focus-visible:ring-ring relative flex h-9 w-9 items-center justify-center rounded-full transition-transform focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
-                    active ? 'ring-foreground ring-2 ring-offset-2' : ''
+                  aria-label={p.label}
+                  title={p.label}
+                  disabled={!accentEditable}
+                  onClick={() => s.setAccent(p.name)}
+                  className={`border-card text-acc-on focus-visible:shadow-ring relative flex h-[30px] w-[30px] items-center justify-center rounded-full border-2 transition-transform hover:scale-110 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
+                    active
+                      ? 'shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--txt)]'
+                      : 'shadow-[0_0_0_1px_var(--bdr)]'
                   }`}
-                  style={{ backgroundColor: preset.swatch }}
+                  style={{ backgroundColor: p.swatch }}
                 >
-                  {active && <Check size={16} className="text-white" aria-hidden="true" />}
+                  {active && <Check size={15} className="text-white" aria-hidden="true" />}
                 </button>
               )
             })}
+            <label
+              title="Custom color"
+              className={`border-card has-[:focus-visible]:shadow-ring relative flex h-[30px] w-[30px] cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 transition-transform hover:scale-110 ${
+                preset
+                  ? 'shadow-[0_0_0_1px_var(--bdr)]'
+                  : 'shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--txt)]'
+              } ${accentEditable ? '' : 'pointer-events-none opacity-50'}`}
+              style={{ background: preset ? CUSTOM_SWATCH_BG : accentHex }}
+            >
+              <input
+                type="color"
+                aria-label="Custom accent"
+                value={toHex(accentHex)!}
+                disabled={!accentEditable}
+                onChange={(e) => s.setAccent(accentFromHex(e.target.value.toLowerCase()))}
+                className="absolute inset-0 h-full w-full cursor-pointer border-0 p-0 opacity-0"
+              />
+              {preset ? (
+                <span
+                  aria-hidden="true"
+                  className="pointer-events-none text-[15px] font-bold text-white [text-shadow:0_1px_2px_rgba(0,0,0,0.35)]"
+                >
+                  +
+                </span>
+              ) : (
+                <Check size={15} className="pointer-events-none text-white" aria-hidden="true" />
+              )}
+            </label>
             {/* Text label so accent is not communicated by color alone. */}
-            <span className="text-muted-foreground text-sm">
-              {ACCENT_PRESET_LIST.find((p) => p.name === s.appearance.accent)?.label ??
-                s.appearance.accent}
+            <span className="text-body text-txt ml-1 font-semibold">
+              {preset?.label ?? 'Custom'}
             </span>
           </div>
+          <div className="mt-3 flex items-center gap-2">
+            <span
+              aria-hidden="true"
+              className="rounded-5 h-[18px] w-[18px] shrink-0 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
+              style={{ background: accentHex }}
+            />
+            <input
+              aria-label="Accent hex value"
+              value={(hexDraft ?? accentHex).toUpperCase()}
+              spellCheck={false}
+              maxLength={7}
+              disabled={!accentEditable}
+              onChange={(e) => onHex(e.target.value)}
+              onBlur={() => setHexDraft(null)}
+              className={`${inputVariants({ size: 'sm' })} max-w-[120px] font-mono uppercase`}
+            />
+            {preset !== DEFAULT_ACCENT && accentEditable && (
+              <button
+                type="button"
+                onClick={() => s.setAccent(DEFAULT_ACCENT.name)}
+                className="text-sm2 text-sub hover:bg-acc-l hover:text-acc rounded-7 px-2.5 py-1.5 whitespace-nowrap transition-colors"
+              >
+                Reset to Cobalt
+              </button>
+            )}
+          </div>
+          <p className="text-hint text-faint mt-2 leading-[1.45]">
+            Tints, focus rings and the dark-mode variant are derived automatically. Pick a mid-tone
+            so white button text stays legible.
+          </p>
         </div>
 
         <div>
           <div className="mb-2 flex items-center gap-2">
-            <span className="text-foreground text-base font-medium">Sidebar density</span>
+            <span className="text-sm2 text-txt font-semibold">Sidebar density</span>
           </div>
           <SegmentedGroup
             label="Sidebar density"

package/src/views/settings/AppearanceTab.tsx

@@ -6,7 +6,8 @@ import { AdminThemeCard } from './AdminThemeCard.js'
 import { SiteThemeCard } from './SiteThemeCard.js'
 import { BrandPreviewCard } from './BrandPreviewCard.js'
 import { BrandingCard } from './BrandingCard.js'
-import { SettingsSaveBar, SettingsValidationSummary } from './components.js'
+import { UnsavedBar } from '../../components/ui/UnsavedBar.js'
+import { SettingsValidationSummary, useSavedToast } from './components.js'
 import { TypographyMotionCard } from './TypographyMotionCard.js'
 import { useAppearanceSettings } from './useAppearanceSettings.js'
 
@@ -23,6 +24,7 @@ function CardSkeleton() {
 export function AppearanceTab({ role, config }: AppearanceTabProps) {
   const canEdit = role === 'ADMIN'
   const s = useAppearanceSettings(canEdit, config)
+  useSavedToast(s.saveState)
 
   if (s.loading) {
     return (
@@ -70,13 +72,15 @@ export function AppearanceTab({ role, config }: AppearanceTabProps) {
       <TypographyMotionCard s={s} canEdit={canEdit} />
       <BrandPreviewCard s={s} />
 
-      <SettingsSaveBar
+      <UnsavedBar
         dirty={s.dirty}
-        canEdit={canEdit}
-        hasErrors={s.issues.some((i) => i.severity === 'error')}
-        saveState={s.saveState}
+        saving={s.saveState === 'saving'}
+        saveDisabled={!canEdit || s.issues.some((i) => i.severity === 'error')}
         onSave={s.save}
-        onReset={s.reset}
+        onDiscard={s.reset}
+        discardLabel="Reset"
+        saveLabel="Save changes"
+        variant="card"
       />
     </div>
   )

package/src/views/settings/BrandPreviewCard.tsx

@@ -66,7 +66,7 @@ export function BrandPreviewCard({ s }: { s: UseAppearanceSettings }) {
           </p>
         </div>
         {s.dirty && (
-          <span className="text-warning bg-warning/10 border-warning/30 rounded-md border px-2 py-0.5 text-xs">
+          <span className="text-warning bg-warn-l border-warning/30 rounded-md border px-2 py-0.5 text-xs">
             Unsaved
           </span>
         )}

package/src/views/settings/BrandVoiceCard.tsx

@@ -344,7 +344,7 @@ export function BrandVoiceCard({
         {aiReadiness && !aiReadiness.ready && aiReadiness.message && (
           <div
             role="status"
-            className="border-warning/40 bg-warning/10 text-foreground flex items-start gap-3 rounded-lg border p-4 text-sm"
+            className="border-warning/40 bg-warn-l text-foreground flex items-start gap-3 rounded-lg border p-4 text-sm"
           >
             <AlertTriangle size={16} className="text-warning mt-0.5 shrink-0" aria-hidden="true" />
             <p>{aiReadiness.message}</p>