UI/UX redesign: unified refined-glass design system

- Add shared UI primitives: Button, Field/Input/Select, PageHeader,
  Section, Callout, Tabs, Disclosure
- Replace gradient buttons with single blue-accent btn-primary
- Reserve gradient text for the brand wordmark only
- Rework Scanner page onto the glass system; collapse explainer and
  glossary into a disclosure, move filters into a glass toolbar
- Restructure Ticker Detail into tabs (Analysis / Indicators / S/R)
  with chart and recommendation always visible
- Align Watchlist, Rankings, Admin, Login/Register to shared primitives
- Unify stray indigo/violet/gray accents into the blue family

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/admin/JobControls.tsx

@@ -188,7 +188,7 @@ export function JobControls() {
                 type="button"
                 onClick={() => triggerJob.mutate(job.name)}
                 disabled={triggerJob.isPending || !job.enabled || anyJobRunning}
-                className="btn-gradient px-3 py-1.5 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
+                className="btn-primary px-3 py-1.5 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <span>
                   {job.running

frontend/src/components/admin/RecommendationSettings.tsx

@@ -89,7 +89,7 @@ export function RecommendationSettings() {
       </div>
 
       <div className="flex items-center gap-2">
-        <button className="btn-gradient px-4 py-2 text-sm" onClick={onSave} disabled={update.isPending}>
+        <button className="btn-primary px-4 py-2 text-sm" onClick={onSave} disabled={update.isPending}>
           {update.isPending ? 'Saving…' : 'Save Configuration'}
         </button>
         <button className="px-4 py-2 text-sm rounded border border-white/[0.1] text-gray-300 hover:text-white" onClick={onReset} disabled={update.isPending}>

frontend/src/components/admin/SettingsForm.tsx

@@ -43,8 +43,8 @@ export function SettingsForm() {
               type="button"
               onClick={() => handleToggleRegistration(setting.value)}
               disabled={updateSetting.isPending}
-              className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-[#0a0e1a] disabled:opacity-50 ${
-                setting.value === 'true' ? 'bg-gradient-to-r from-blue-600 to-indigo-600' : 'bg-white/[0.1]'
+              className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-[#0a0e1a] disabled:opacity-50 ${
+                setting.value === 'true' ? 'bg-gradient-to-r from-blue-600 to-sky-500' : 'bg-white/[0.1]'
               }`}
               role="switch"
               aria-checked={setting.value === 'true'}
@@ -64,7 +64,7 @@ export function SettingsForm() {
                 <button
                   onClick={() => handleSave(setting.key)}
                   disabled={updateSetting.isPending}
-                  className="btn-gradient px-3 py-2 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="btn-primary px-3 py-2 text-xs disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <span>{updateSetting.isPending ? 'Saving…' : 'Save'}</span>
                 </button>

frontend/src/components/admin/TickerManagement.tsx

@@ -36,7 +36,7 @@ export function TickerManagement() {
         <button
           type="submit"
           disabled={addTicker.isPending || !newSymbol.trim()}
-          className="btn-gradient px-4 py-2.5 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+          className="btn-primary px-4 py-2.5 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
         >
           <span>{addTicker.isPending ? 'Adding…' : 'Add Ticker'}</span>
         </button>

frontend/src/components/admin/TickerUniverseBootstrap.tsx

@@ -78,7 +78,7 @@ export function TickerUniverseBootstrap() {
 
       <div className="flex flex-wrap gap-2">
         <button
-          className="btn-gradient px-4 py-2 text-sm disabled:opacity-50"
+          className="btn-primary px-4 py-2 text-sm disabled:opacity-50"
           onClick={onSaveDefault}
           disabled={isLoading || updateDefault.isPending || bootstrap.isPending}
         >

frontend/src/components/admin/UserTable.tsx

@@ -64,7 +64,7 @@ export function UserTable() {
           Access
         </label>
         <button type="submit" disabled={createUser.isPending || !newUsername.trim() || !newPassword.trim()}
-          className="btn-gradient px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed">
+          className="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed">
           <span>{createUser.isPending ? 'Creating…' : 'Create User'}</span>
         </button>
       </form>
@@ -103,7 +103,7 @@ export function UserTable() {
                             placeholder="new password" className="w-32 input-glass px-2 py-1 text-xs" />
                           <button onClick={() => handleResetPassword(user.id)}
                             disabled={resetPassword.isPending || !resetPw.trim()}
-                            className="btn-gradient px-2 py-1 text-xs disabled:opacity-50">
+                            className="btn-primary px-2 py-1 text-xs disabled:opacity-50">
                             <span>Save</span>
                           </button>
                           <button onClick={() => { setResetTarget(null); setResetPw(''); }}

frontend/src/components/rankings/WeightsForm.tsx

@@ -52,7 +52,7 @@ export function WeightsForm({ weights }: WeightsFormProps) {
                 step={1}
                 value={sliderValues[key] ?? 0}
                 onChange={(e) => handleChange(key, e.target.value)}
-                className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700 accent-indigo-500"
+                className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700 accent-blue-500"
               />
               <span className="min-w-[2ch] text-right text-sm font-medium text-gray-300">
                 {sliderValues[key] ?? 0}
@@ -69,7 +69,7 @@ export function WeightsForm({ weights }: WeightsFormProps) {
       <button
         type="submit"
         disabled={updateWeights.isPending || allZero}
-        className="mt-4 btn-gradient px-4 py-2 text-sm disabled:opacity-50"
+        className="mt-4 btn-primary px-4 py-2 text-sm disabled:opacity-50"
       >
         <span>{updateWeights.isPending ? 'Updating…' : 'Update Weights'}</span>
       </button>

frontend/src/components/scanner/TradeTable.tsx

@@ -104,7 +104,7 @@ export function TradeTable({ trades, sortColumn, sortDirection, onSort }: TradeT
                 </td>
                 <td className="px-4 py-3.5">
                   <div className="space-y-0.5">
-                    <span className="text-xs font-semibold text-indigo-300">{recommendationActionLabel(trade.recommended_action)}</span>
+                    <span className="text-xs font-semibold text-blue-300">{recommendationActionLabel(trade.recommended_action)}</span>
                     {recommendationActionDirection(trade.recommended_action) !== 'neutral' && recommendationActionDirection(trade.recommended_action) !== trade.direction && (
                       <div className="text-[10px] text-amber-400">Alternative setup (not preferred)</div>
                     )}

frontend/src/components/ticker/RecommendationPanel.tsx

@@ -127,7 +127,7 @@ export function RecommendationPanel({ symbol, longSetup, shortSetup }: Recommend
       <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Recommendation</h2>
       <div className="glass p-5 space-y-4">
         <div className="flex flex-wrap items-center gap-4">
-          <span className="text-sm font-semibold text-indigo-300">{recommendationActionLabel(action)}</span>
+          <span className="text-sm font-semibold text-blue-300">{recommendationActionLabel(action)}</span>
           <span className={`text-sm font-semibold ${riskClass(summary?.risk_level ?? null)}`}>
             Risk: {summary?.risk_level ?? '—'}
           </span>

frontend/src/components/ui/Badge.tsx

@@ -1,6 +1,6 @@
 const variantStyles: Record<string, string> = {
   auto: 'bg-blue-500/15 text-blue-400 border-blue-500/20',
-  manual: 'bg-violet-500/15 text-violet-400 border-violet-500/20',
+  manual: 'bg-sky-500/15 text-sky-400 border-sky-500/20',
   default: 'bg-white/[0.06] text-gray-400 border-white/[0.08]',
 };
 

frontend/src/components/ui/Button.tsx

@@ -0,0 +1,54 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type Variant = 'primary' | 'ghost' | 'danger';
+type Size = 'sm' | 'md';
+
+const variantClasses: Record<Variant, string> = {
+  primary: 'btn-primary',
+  ghost:
+    'border border-white/[0.08] bg-white/[0.03] text-gray-300 hover:bg-white/[0.07] hover:text-gray-100 rounded-lg',
+  danger:
+    'border border-red-500/30 bg-red-500/10 text-red-400 hover:bg-red-500/20 rounded-lg',
+};
+
+const sizeClasses: Record<Size, string> = {
+  sm: 'px-3 py-1.5 text-xs',
+  md: 'px-4 py-2 text-sm',
+};
+
+export function Spinner({ className = 'h-4 w-4' }: { className?: string }) {
+  return (
+    <svg className={`animate-spin ${className}`} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+    </svg>
+  );
+}
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+  loading?: boolean;
+  children: ReactNode;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled,
+  className = '',
+  children,
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      disabled={disabled || loading}
+      className={`inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      {...rest}
+    >
+      {loading && <Spinner />}
+      {children}
+    </button>
+  );
+}

frontend/src/components/ui/Callout.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+type Variant = 'info' | 'warning' | 'error' | 'empty';
+
+const variantClasses: Record<Variant, string> = {
+  info: 'border-blue-500/20 bg-blue-500/10 text-blue-300',
+  warning: 'border-amber-500/20 bg-amber-500/10 text-amber-300',
+  error: 'border-red-500/20 bg-red-500/10 text-red-400',
+  empty: 'border-white/[0.06] bg-white/[0.02] text-gray-400 py-8 text-center',
+};
+
+interface CalloutProps {
+  variant?: Variant;
+  children: ReactNode;
+  onRetry?: () => void;
+}
+
+/** Standard inline message box for info banners, errors, and empty states. */
+export function Callout({ variant = 'info', children, onRetry }: CalloutProps) {
+  return (
+    <div className={`rounded-xl border px-4 py-3 text-sm ${variantClasses[variant]}`}>
+      {children}
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          className="mt-2 block text-xs font-medium underline opacity-80 hover:opacity-100"
+        >
+          Retry
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/Disclosure.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+interface DisclosureProps {
+  summary: string;
+  children: ReactNode;
+}
+
+/** Collapsible help/explainer block — keeps secondary content out of the way. */
+export function Disclosure({ summary, children }: DisclosureProps) {
+  return (
+    <details className="glass-sm group">
+      <summary className="flex cursor-pointer select-none items-center gap-2 px-4 py-2.5 text-xs font-medium text-gray-400 transition-colors hover:text-gray-200 [&::-webkit-details-marker]:hidden">
+        <span className="inline-block transition-transform duration-200 group-open:rotate-90">▸</span>
+        {summary}
+      </summary>
+      <div className="px-4 pb-4 pt-1 text-sm text-gray-300">{children}</div>
+    </details>
+  );
+}

frontend/src/components/ui/Field.tsx

@@ -0,0 +1,31 @@
+import type { InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from 'react';
+
+interface FieldProps {
+  label: string;
+  htmlFor?: string;
+  children: ReactNode;
+}
+
+/** Labeled form control wrapper for filter bars and forms. */
+export function Field({ label, htmlFor, children }: FieldProps) {
+  return (
+    <div>
+      <label htmlFor={htmlFor} className="mb-1 block text-xs text-gray-400">
+        {label}
+      </label>
+      {children}
+    </div>
+  );
+}
+
+export function Input({ className = '', ...rest }: InputHTMLAttributes<HTMLInputElement>) {
+  return <input className={`input-glass px-3 py-1.5 text-sm ${className}`} {...rest} />;
+}
+
+export function Select({ className = '', children, ...rest }: SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select className={`input-glass px-3 py-1.5 text-sm [&>option]:bg-[#0d1322] ${className}`} {...rest}>
+      {children}
+    </select>
+  );
+}

frontend/src/components/ui/PageHeader.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: ReactNode;
+}
+
+/** Standard page heading: plain title, muted subtitle, actions on the right. */
+export function PageHeader({ title, subtitle, actions }: PageHeaderProps) {
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-4">
+      <div>
+        <h1 className="text-2xl font-semibold text-gray-100">{title}</h1>
+        {subtitle && <p className="mt-1 text-xs text-gray-500">{subtitle}</p>}
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+}

frontend/src/components/ui/Section.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+interface SectionProps {
+  title: string;
+  hint?: string;
+  children: ReactNode;
+}
+
+/** Content section with the standard uppercase tracking label. */
+export function Section({ title, hint, children }: SectionProps) {
+  return (
+    <section>
+      <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">
+        {title}
+        {hint && <span className="ml-2 normal-case tracking-normal text-gray-600">{hint}</span>}
+      </h2>
+      {children}
+    </section>
+  );
+}

frontend/src/components/ui/Tabs.tsx

@@ -0,0 +1,28 @@
+interface TabsProps<T extends string> {
+  tabs: readonly T[];
+  active: T;
+  onChange: (tab: T) => void;
+}
+
+/** Glass pill tab bar. */
+export function Tabs<T extends string>({ tabs, active, onChange }: TabsProps<T>) {
+  return (
+    <div className="glass-sm flex w-fit gap-1 p-1" role="tablist">
+      {tabs.map((tab) => (
+        <button
+          key={tab}
+          role="tab"
+          aria-selected={active === tab}
+          onClick={() => onChange(tab)}
+          className={`rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 ${
+            active === tab
+              ? 'bg-white/[0.1] text-white shadow-lg shadow-blue-500/10'
+              : 'text-gray-400 hover:bg-white/[0.04] hover:text-gray-200'
+          }`}
+        >
+          {tab}
+        </button>
+      ))}
+    </div>
+  );
+}

frontend/src/components/watchlist/AddTickerForm.tsx

@@ -24,7 +24,7 @@ export function AddTickerForm() {
       <button
         type="submit"
         disabled={addMutation.isPending || !symbol.trim()}
-        className="btn-gradient px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
+        className="btn-primary px-4 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"
       >
         <span>{addMutation.isPending ? 'Adding…' : 'Add'}</span>
       </button>

frontend/src/pages/AdminPage.tsx

@@ -7,6 +7,8 @@ import { SettingsForm } from '../components/admin/SettingsForm';
 import { TickerManagement } from '../components/admin/TickerManagement';
 import { TickerUniverseBootstrap } from '../components/admin/TickerUniverseBootstrap';
 import { UserTable } from '../components/admin/UserTable';
+import { PageHeader } from '../components/ui/PageHeader';
+import { Tabs } from '../components/ui/Tabs';
 
 const tabs = ['Users', 'Tickers', 'Settings', 'Jobs', 'Cleanup'] as const;
 type Tab = (typeof tabs)[number];
@@ -16,27 +18,9 @@ export default function AdminPage() {
 
   return (
     <div className="space-y-6 animate-slide-up">
-      <div>
-        <h1 className="text-2xl font-bold text-gradient">Admin</h1>
-        <p className="text-xs text-gray-500 mt-1">System management</p>
-      </div>
+      <PageHeader title="Admin" subtitle="System management" />
 
-      {/* Tab bar */}
-      <div className="flex gap-1 glass-sm p-1 w-fit">
-        {tabs.map((tab) => (
-          <button
-            key={tab}
-            onClick={() => setActiveTab(tab)}
-            className={`px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
-              activeTab === tab
-                ? 'bg-white/[0.1] text-white shadow-lg shadow-blue-500/10'
-                : 'text-gray-400 hover:text-gray-200 hover:bg-white/[0.04]'
-            }`}
-          >
-            {tab}
-          </button>
-        ))}
-      </div>
+      <Tabs tabs={tabs} active={activeTab} onChange={setActiveTab} />
 
       {/* Tab content */}
       <div className="animate-fade-in">

frontend/src/pages/LoginPage.tsx

@@ -25,7 +25,7 @@ export default function LoginPage() {
     <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
       {/* Ambient glow orbs */}
       <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] animate-glow-pulse" />
-      <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-violet-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />
+      <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-sky-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />
 
       <div className="w-full max-w-sm space-y-8 animate-slide-up">
         <div className="text-center">
@@ -73,7 +73,7 @@ export default function LoginPage() {
           <button
             type="submit"
             disabled={login.isPending}
-            className="w-full btn-gradient px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full btn-primary px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <span>{login.isPending ? 'Signing in…' : 'Sign in'}</span>
           </button>

frontend/src/pages/RankingsPage.tsx

@@ -1,41 +1,29 @@
 import { useRankings } from '../hooks/useScores';
 import { RankingsTable } from '../components/rankings/RankingsTable';
 import { WeightsForm } from '../components/rankings/WeightsForm';
+import { Callout } from '../components/ui/Callout';
+import { PageHeader } from '../components/ui/PageHeader';
 import { SkeletonTable } from '../components/ui/Skeleton';
 
 export default function RankingsPage() {
   const { data, isLoading, isError, error } = useRankings();
 
-  if (isLoading) {
-    return (
-      <div className="space-y-6 animate-slide-up">
-        <h1 className="text-2xl font-bold text-gradient">Rankings</h1>
-        <SkeletonTable rows={8} cols={6} />
-      </div>
-    );
-  }
-
-  if (isError) {
-    return (
-      <div className="animate-slide-up">
-        <h1 className="text-2xl font-bold text-gradient">Rankings</h1>
-        <p className="mt-4 text-sm text-red-400">
-          Failed to load rankings: {(error as Error).message}
-        </p>
-      </div>
-    );
-  }
-
-  if (!data) return null;
-
   return (
     <div className="space-y-6 animate-slide-up">
-      <div>
-        <h1 className="text-2xl font-bold text-gradient">Rankings</h1>
-        <p className="text-xs text-gray-500 mt-1">Composite scoring leaderboard</p>
-      </div>
-      <WeightsForm weights={data.weights} />
-      <RankingsTable rankings={data.rankings} />
+      <PageHeader title="Rankings" subtitle="Composite scoring leaderboard" />
+
+      {isLoading && <SkeletonTable rows={8} cols={6} />}
+
+      {isError && (
+        <Callout variant="error">Failed to load rankings: {(error as Error).message}</Callout>
+      )}
+
+      {data && (
+        <>
+          <WeightsForm weights={data.weights} />
+          <RankingsTable rankings={data.rankings} />
+        </>
+      )}
     </div>
   );
 }

frontend/src/pages/RegisterPage.tsx

@@ -40,7 +40,7 @@ export default function RegisterPage() {
           </div>
           <Link
             to="/login"
-            className="inline-block btn-gradient px-6 py-2.5 text-sm font-medium"
+            className="inline-block btn-primary px-6 py-2.5 text-sm font-medium"
           >
             <span>Go to Login</span>
           </Link>
@@ -51,7 +51,7 @@ export default function RegisterPage() {
 
   return (
     <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
-      <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-violet-500/10 rounded-full blur-[120px] animate-glow-pulse" />
+      <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-sky-500/10 rounded-full blur-[120px] animate-glow-pulse" />
       <div className="absolute bottom-1/3 left-1/3 w-80 h-80 bg-blue-500/10 rounded-full blur-[100px] animate-glow-pulse" style={{ animationDelay: '1.5s' }} />
 
       <div className="w-full max-w-sm space-y-8 animate-slide-up">
@@ -104,7 +104,7 @@ export default function RegisterPage() {
           <button
             type="submit"
             disabled={register.isPending}
-            className="w-full btn-gradient px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full btn-primary px-4 py-2.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <span>{register.isPending ? 'Creating account…' : 'Create account'}</span>
           </button>

frontend/src/pages/ScannerPage.tsx

@@ -4,6 +4,11 @@ import { useTrades } from '../hooks/useTrades';
 import { TradeTable, type SortColumn, type SortDirection, computeTradeAnalysis } from '../components/scanner/TradeTable';
 import { SkeletonTable } from '../components/ui/Skeleton';
 import { useToast } from '../components/ui/Toast';
+import { Button } from '../components/ui/Button';
+import { Callout } from '../components/ui/Callout';
+import { Disclosure } from '../components/ui/Disclosure';
+import { Field, Input, Select } from '../components/ui/Field';
+import { PageHeader } from '../components/ui/PageHeader';
 import { triggerJob } from '../api/admin';
 import type { TradeSetup } from '../lib/types';
 import { RECOMMENDATION_ACTION_GLOSSARY, RECOMMENDATION_ACTION_LABELS } from '../lib/recommendation';
@@ -127,66 +132,46 @@ export default function ScannerPage() {
   }, [trades, minRR, directionFilter, minConfidence, actionFilter, sortColumn, sortDirection]);
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-gray-100">Trade Scanner</h1>
-        <button
-          type="button"
-          onClick={() => scanMutation.mutate()}
-          disabled={scanMutation.isPending}
-          className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-50 transition-colors duration-150"
-        >
-          {scanMutation.isPending ? 'Scanning...' : 'Run Scanner'}
-        </button>
-      </div>
+    <div className="space-y-6 animate-slide-up">
+      <PageHeader
+        title="Trade Scanner"
+        subtitle="Asymmetric risk:reward setups across the ticker universe"
+        actions={
+          <Button onClick={() => scanMutation.mutate()} loading={scanMutation.isPending}>
+            {scanMutation.isPending ? 'Scanning…' : 'Run Scanner'}
+          </Button>
+        }
+      />
 
-      {/* Explainer banner */}
-      <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 px-4 py-3 text-sm text-blue-300">
-        The scanner identifies asymmetric risk-reward trade setups by analyzing S/R levels
-        as price targets and using ATR-based stops to define risk.
-        Click <span className="font-medium">Run Scanner</span> to scan all tickers now,
-        or wait for the scheduled run.
-      </div>
-
-      {/* Filter controls */}
-      <div className="flex flex-wrap items-end gap-4">
-        <div>
-          <label htmlFor="min-rr" className="mb-1 block text-xs text-gray-400">
-            Min Risk:Reward
-          </label>
+      {/* Filter toolbar */}
+      <div className="glass-sm flex flex-wrap items-end gap-4 p-4">
+        <Field label="Min Risk:Reward" htmlFor="min-rr">
           <div className="flex items-center gap-1">
             <span className="text-sm text-gray-400">1 :</span>
-            <input
+            <Input
               id="min-rr"
               type="number"
               min={0}
               step={0.1}
               value={minRR}
               onChange={(e) => setMinRR(Number(e.target.value) || 0)}
-              className="w-20 rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
+              className="w-20"
             />
           </div>
-        </div>
-        <div>
-          <label htmlFor="direction" className="mb-1 block text-xs text-gray-400">
-            Direction
-          </label>
-          <select
+        </Field>
+        <Field label="Direction" htmlFor="direction">
+          <Select
             id="direction"
             value={directionFilter}
             onChange={(e) => setDirectionFilter(e.target.value as DirectionFilter)}
-            className="rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
           >
             <option value="both">Both</option>
             <option value="long">Long</option>
             <option value="short">Short</option>
-          </select>
-        </div>
-        <div>
-          <label htmlFor="min-confidence" className="mb-1 block text-xs text-gray-400">
-            Min Confidence
-          </label>
-          <input
+          </Select>
+        </Field>
+        <Field label="Min Confidence" htmlFor="min-confidence">
+          <Input
             id="min-confidence"
             type="number"
             min={0}
@@ -194,54 +179,55 @@ export default function ScannerPage() {
             step={1}
             value={minConfidence}
             onChange={(e) => setMinConfidence(Number(e.target.value) || 0)}
-            className="w-24 rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
+            className="w-24"
           />
-        </div>
-        <div>
-          <label htmlFor="action" className="mb-1 block text-xs text-gray-400">
-            Recommended Action
-          </label>
-          <select
+        </Field>
+        <Field label="Recommended Action" htmlFor="action">
+          <Select
             id="action"
             value={actionFilter}
             onChange={(e) => setActionFilter(e.target.value as ActionFilter)}
-            className="rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
           >
             <option value="all">All</option>
-            <option value="LONG_HIGH">LONG_HIGH</option>
-            <option value="LONG_MODERATE">LONG_MODERATE</option>
-            <option value="SHORT_HIGH">SHORT_HIGH</option>
-            <option value="SHORT_MODERATE">SHORT_MODERATE</option>
-            <option value="NEUTRAL">NEUTRAL</option>
-          </select>
-        </div>
+            <option value="LONG_HIGH">{RECOMMENDATION_ACTION_LABELS.LONG_HIGH}</option>
+            <option value="LONG_MODERATE">{RECOMMENDATION_ACTION_LABELS.LONG_MODERATE}</option>
+            <option value="SHORT_HIGH">{RECOMMENDATION_ACTION_LABELS.SHORT_HIGH}</option>
+            <option value="SHORT_MODERATE">{RECOMMENDATION_ACTION_LABELS.SHORT_MODERATE}</option>
+            <option value="NEUTRAL">{RECOMMENDATION_ACTION_LABELS.NEUTRAL}</option>
+          </Select>
+        </Field>
       </div>
 
-      <div className="rounded-lg border border-white/[0.08] bg-white/[0.02] px-4 py-3">
-        <p className="text-xs uppercase tracking-wider text-gray-500 mb-2">Recommended Action Glossary (Ticker-Level Bias)</p>
+      <Disclosure summary="How the scanner works & action glossary">
+        <p className="mb-3 text-xs text-gray-400">
+          The scanner identifies asymmetric risk-reward trade setups by analyzing S/R levels as
+          price targets and using ATR-based stops to define risk. Click{' '}
+          <span className="font-medium text-gray-300">Run Scanner</span> to scan all tickers now,
+          or wait for the scheduled run.
+        </p>
         <div className="grid gap-1 md:grid-cols-2">
           {RECOMMENDATION_ACTION_GLOSSARY.map((item) => (
             <p key={item.action} className="text-xs text-gray-300">
-              <span className="font-semibold text-indigo-300">{RECOMMENDATION_ACTION_LABELS[item.action]}:</span>{' '}
+              <span className="font-semibold text-blue-300">{RECOMMENDATION_ACTION_LABELS[item.action]}:</span>{' '}
               {item.description}
             </p>
           ))}
         </div>
-      </div>
+      </Disclosure>
 
       {/* Content */}
       {isLoading && <SkeletonTable rows={8} cols={8} />}
 
       {isError && (
-        <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">
+        <Callout variant="error">
           {error instanceof Error ? error.message : 'Failed to load trade setups'}
-        </div>
+        </Callout>
       )}
 
       {trades && processed.length === 0 && !isLoading && (
-        <div className="rounded-lg border border-gray-700 bg-gray-800/50 px-4 py-8 text-center text-sm text-gray-400">
+        <Callout variant="empty">
           No trade setups match the current filters. Try lowering the Min R:R or click Run Scanner to refresh.
-        </div>
+        </Callout>
       )}
 
       {trades && processed.length > 0 && (

frontend/src/pages/TickerDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTickerDetail } from '../hooks/useTickerDetail';
 import { useFetchSymbolData } from '../hooks/useFetchSymbolData';
@@ -9,19 +9,21 @@ import { SentimentPanel } from '../components/ticker/SentimentPanel';
 import { FundamentalsPanel } from '../components/ticker/FundamentalsPanel';
 import { IndicatorSelector } from '../components/ticker/IndicatorSelector';
 import { RecommendationPanel } from '../components/ticker/RecommendationPanel';
+import { Button } from '../components/ui/Button';
+import { Callout } from '../components/ui/Callout';
+import { Section } from '../components/ui/Section';
+import { Tabs } from '../components/ui/Tabs';
 import { formatPrice } from '../lib/format';
 import type { TradeSetup } from '../lib/types';
 
+const detailTabs = ['Analysis', 'Indicators', 'S/R Levels'] as const;
+type DetailTab = (typeof detailTabs)[number];
+
 function SectionError({ message, onRetry }: { message: string; onRetry?: () => void }) {
   return (
-    <div className="glass-sm bg-red-500/10 border-red-500/20 p-4 text-sm text-red-400">
-      <p>{message}</p>
-      {onRetry && (
-        <button onClick={onRetry} className="mt-2 text-xs font-medium text-red-300 underline hover:text-red-200">
-          Retry
-        </button>
-      )}
-    </div>
+    <Callout variant="error" onRetry={onRetry}>
+      {message}
+    </Callout>
   );
 }
 
@@ -67,6 +69,7 @@ export default function TickerDetailPage() {
   const { symbol = '' } = useParams<{ symbol: string }>();
   const { ohlcv, scores, srLevels, sentiment, fundamentals, trades } = useTickerDetail(symbol);
   const ingestion = useFetchSymbolData();
+  const [activeTab, setActiveTab] = useState<DetailTab>('Analysis');
 
   const dataStatus: DataStatusItem[] = useMemo(() => [
     {
@@ -134,24 +137,14 @@ export default function TickerDetailPage() {
   return (
     <div className="space-y-6 animate-slide-up">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="flex flex-wrap items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-bold text-gradient">{symbol.toUpperCase()}</h1>
+          <h1 className="text-3xl font-semibold text-gray-100">{symbol.toUpperCase()}</h1>
           <p className="text-sm text-gray-500 mt-0.5">Ticker Detail</p>
         </div>
-        <button
-          onClick={() => ingestion.mutate(symbol)}
-          disabled={ingestion.isPending}
-          className="btn-gradient inline-flex items-center gap-2 px-5 py-2.5 text-sm disabled:opacity-60 disabled:cursor-not-allowed"
-        >
-          {ingestion.isPending && (
-            <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-            </svg>
-          )}
-          <span>{ingestion.isPending ? 'Fetching…' : 'Fetch Data'}</span>
-        </button>
+        <Button onClick={() => ingestion.mutate(symbol)} loading={ingestion.isPending}>
+          {ingestion.isPending ? 'Fetching…' : 'Fetch Data'}
+        </Button>
       </div>
 
       {/* Data freshness bar */}
@@ -159,9 +152,8 @@ export default function TickerDetailPage() {
 
       <RecommendationPanel symbol={symbol} longSetup={longSetup} shortSetup={shortSetup} />
 
-      {/* Chart Section */}
-      <section>
-        <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Price Chart</h2>
+      {/* Chart — always visible */}
+      <Section title="Price Chart">
         {ohlcv.isLoading && <SkeletonCard className="h-[400px]" />}
         {ohlcv.isError && (
           <SectionError
@@ -173,82 +165,86 @@ export default function TickerDetailPage() {
           <div className="glass p-5">
             <CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} zones={srLevels.data?.zones} tradeSetup={tradeSetup} />
             {srLevels.isError && (
-              <p className="mt-2 text-xs text-yellow-500/80">S/R levels unavailable — chart shown without overlays</p>
+              <p className="mt-2 text-xs text-amber-500/80">S/R levels unavailable — chart shown without overlays</p>
             )}
           </div>
         )}
-      </section>
+      </Section>
 
-      {/* Scores + Side Panels */}
-      <div className="grid gap-6 lg:grid-cols-3">
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Scores</h2>
-          {scores.isLoading && <SkeletonCard />}
-          {scores.isError && (
-            <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
-          )}
-          {scores.data && (
-            <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
-          )}
-        </section>
+      {/* Detail tabs */}
+      <Tabs tabs={detailTabs} active={activeTab} onChange={setActiveTab} />
 
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Sentiment</h2>
-          {sentiment.isLoading && <SkeletonCard />}
-          {sentiment.isError && (
-            <SectionError message={sentiment.error instanceof Error ? sentiment.error.message : 'Failed to load sentiment'} onRetry={() => sentiment.refetch()} />
-          )}
-          {sentiment.data && <SentimentPanel data={sentiment.data} />}
-        </section>
+      {activeTab === 'Analysis' && (
+        <div className="grid gap-6 lg:grid-cols-3 animate-fade-in">
+          <Section title="Scores">
+            {scores.isLoading && <SkeletonCard />}
+            {scores.isError && (
+              <SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
+            )}
+            {scores.data && (
+              <ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
+            )}
+          </Section>
 
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Fundamentals</h2>
-          {fundamentals.isLoading && <SkeletonCard />}
-          {fundamentals.isError && (
-            <SectionError message={fundamentals.error instanceof Error ? fundamentals.error.message : 'Failed to load fundamentals'} onRetry={() => fundamentals.refetch()} />
-          )}
-          {fundamentals.data && <FundamentalsPanel data={fundamentals.data} />}
-        </section>
-      </div>
+          <Section title="Sentiment">
+            {sentiment.isLoading && <SkeletonCard />}
+            {sentiment.isError && (
+              <SectionError message={sentiment.error instanceof Error ? sentiment.error.message : 'Failed to load sentiment'} onRetry={() => sentiment.refetch()} />
+            )}
+            {sentiment.data && <SentimentPanel data={sentiment.data} />}
+          </Section>
 
-      {/* Indicators */}
-      <section>
-        <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Technical Indicators</h2>
-        <IndicatorSelector symbol={symbol} />
-      </section>
+          <Section title="Fundamentals">
+            {fundamentals.isLoading && <SkeletonCard />}
+            {fundamentals.isError && (
+              <SectionError message={fundamentals.error instanceof Error ? fundamentals.error.message : 'Failed to load fundamentals'} onRetry={() => fundamentals.refetch()} />
+            )}
+            {fundamentals.data && <FundamentalsPanel data={fundamentals.data} />}
+          </Section>
+        </div>
+      )}
 
-      {/* S/R Levels Table — sorted by strength */}
-      {sortedLevels.length > 0 && (
-        <section>
-          <h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">
-            Support &amp; Resistance Levels
-            <span className="ml-2 text-gray-600 normal-case tracking-normal">sorted by strength</span>
-          </h2>
-          <div className="glass overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
-                  <th className="px-4 py-3">Type</th>
-                  <th className="px-4 py-3">Price Level</th>
-                  <th className="px-4 py-3">Strength</th>
-                  <th className="px-4 py-3">Method</th>
-                </tr>
-              </thead>
-              <tbody>
-                {sortedLevels.map((level) => (
-                  <tr key={level.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
-                    <td className="px-4 py-3">
-                      <span className={level.type === 'support' ? 'text-emerald-400' : 'text-red-400'}>{level.type}</span>
-                    </td>
-                    <td className="px-4 py-3 text-gray-200 font-mono">{formatPrice(level.price_level)}</td>
-                    <td className="px-4 py-3 text-gray-200">{level.strength}</td>
-                    <td className="px-4 py-3 text-gray-400">{level.detection_method}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
+      {activeTab === 'Indicators' && (
+        <div className="animate-fade-in">
+          <Section title="Technical Indicators">
+            <IndicatorSelector symbol={symbol} />
+          </Section>
+        </div>
+      )}
+
+      {activeTab === 'S/R Levels' && (
+        <div className="animate-fade-in">
+          <Section title="Support & Resistance Levels" hint="sorted by strength">
+            {sortedLevels.length === 0 ? (
+              <Callout variant="empty">No S/R levels detected for this ticker yet.</Callout>
+            ) : (
+              <div className="glass overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b border-white/[0.06] text-left text-xs uppercase tracking-wider text-gray-500">
+                      <th className="px-4 py-3">Type</th>
+                      <th className="px-4 py-3">Price Level</th>
+                      <th className="px-4 py-3">Strength</th>
+                      <th className="px-4 py-3">Method</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {sortedLevels.map((level) => (
+                      <tr key={level.id} className="border-b border-white/[0.04] transition-colors duration-150 hover:bg-white/[0.03]">
+                        <td className="px-4 py-3">
+                          <span className={level.type === 'support' ? 'text-emerald-400' : 'text-red-400'}>{level.type}</span>
+                        </td>
+                        <td className="px-4 py-3 text-gray-200 font-mono">{formatPrice(level.price_level)}</td>
+                        <td className="px-4 py-3 text-gray-200">{level.strength}</td>
+                        <td className="px-4 py-3 text-gray-400">{level.detection_method}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </Section>
+        </div>
       )}
     </div>
   );

frontend/src/pages/WatchlistPage.tsx

@@ -2,6 +2,9 @@ import { useMemo, useState } from 'react';
 import { useWatchlist } from '../hooks/useWatchlist';
 import { WatchlistTable } from '../components/watchlist/WatchlistTable';
 import { AddTickerForm } from '../components/watchlist/AddTickerForm';
+import { Callout } from '../components/ui/Callout';
+import { Select } from '../components/ui/Field';
+import { PageHeader } from '../components/ui/PageHeader';
 import { SkeletonTable } from '../components/ui/Skeleton';
 import type { WatchlistEntry } from '../lib/types';
 
@@ -50,37 +53,27 @@ export default function WatchlistPage() {
 
   return (
     <div className="space-y-6 animate-slide-up">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-gradient">Watchlist</h1>
-          <p className="text-xs text-gray-500 mt-1">Track your favorite tickers</p>
-        </div>
-        <AddTickerForm />
-      </div>
+      <PageHeader title="Watchlist" subtitle="Track your favorite tickers" actions={<AddTickerForm />} />
 
       {isLoading && <SkeletonTable rows={6} cols={8} />}
 
-      {isError && (
-        <div className="glass-sm bg-red-500/10 border-red-500/20 px-4 py-3 text-sm text-red-400">
-          {error?.message || 'Failed to load watchlist'}
-        </div>
-      )}
+      {isError && <Callout variant="error">{error?.message || 'Failed to load watchlist'}</Callout>}
 
       {data && (
         <div className="space-y-3">
           <div className="flex justify-end">
             <label className="flex items-center gap-2 text-xs text-gray-400">
               <span>Sort by</span>
-              <select
+              <Select
                 value={sortMode}
                 onChange={(event) => setSortMode(event.target.value as SortMode)}
-                className="rounded-lg border border-white/10 bg-white/[0.03] px-2 py-1.5 text-xs text-gray-200 outline-none focus:border-blue-500/40"
+                className="!py-1 !text-xs"
               >
                 <option value="score_desc">Score (high → low)</option>
                 <option value="score_asc">Score (low → high)</option>
                 <option value="name_asc">Name (A → Z)</option>
                 <option value="name_desc">Name (Z → A)</option>
-              </select>
+              </Select>
             </label>
           </div>
 

frontend/src/styles/globals.css

@@ -54,48 +54,26 @@
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   }
 
-  /* Gradient text */
+  /* Gradient text — reserved for the brand wordmark only */
   .text-gradient {
-    background: linear-gradient(135deg, #38bdf8, #818cf8, #a78bfa);
+    background: linear-gradient(135deg, #38bdf8, #60a5fa);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }
 
-  /* Gradient buttons */
-  .btn-gradient {
-    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  /* Primary button — single blue accent */
+  .btn-primary {
+    background: rgba(59, 130, 246, 0.85);
     color: white;
-    border: none;
+    border: 1px solid rgba(96, 165, 250, 0.35);
     border-radius: 0.5rem;
     font-weight: 500;
     transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
   }
-  .btn-gradient::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(135deg, #60a5fa, #a78bfa);
-    opacity: 0;
-    transition: opacity 0.2s ease;
-  }
-  .btn-gradient:hover::before {
-    opacity: 1;
-  }
-  .btn-gradient > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  /* Glow accent for active states */
-  .glow-blue {
-    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 60px rgba(59, 130, 246, 0.1);
-  }
-
-  .glow-green {
-    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3), 0 0 60px rgba(16, 185, 129, 0.1);
+  .btn-primary:hover:not(:disabled) {
+    background: rgb(59, 130, 246);
+    box-shadow: 0 0 16px rgba(59, 130, 246, 0.25);
   }
 
   /* Glass input */