[CLAUDE] FE-User: redesign foundation "nâng màu giữ brand" — gradient/accent/badge bắt mắt hơn

Anh: giao diện đơn điệu, muốn đẹp + bắt mắt, font/màu đẹp hơn. Hướng anh chốt
"nâng màu, giữ nền xanh brand" (eoffice trước). Foundation lan tỏa toàn app, KHÔNG
đụng 65 trang lẻ.
- index.css: +accent palette teal/amberx/violet/greenx (đặt tên né trùng Tailwind)
  + utilities .app-gradient-brand / .card-accent / .icon-chip / .stat-value;
  heading 600->700 đậm hơn; .label-eyebrow brand-600. Brand #1F7DC1 + Be Vietnam Pro GIỮ.
- primitives: Button primary/danger gradient nổi bật; Input/Select/Textarea focus-glow
  mạnh hơn; Label brand-600; Dialog title-bar gradient. variant/size keys STABLE.
- shell: Layout stripe dày hơn + logo cap; PageHeader title lớn/đậm + accent bar cao;
  TopBar gradient hairline; DataTable thead gradient brand chữ trắng.
- Dashboard: KPI cards accent + icon chips.
- color maps (contract/PE phase + PE display status): -700->-800 đậm chữ, phase nháp tint brand.

Visual-only — props/handler/signature nguyên. Build PASS (tsc -b 0 error). a11y:
contrast AA + prefers-reduced-motion. fe-admin mirror đợt sau.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fe-user/src/components/DataTable.tsx

@@ -79,18 +79,19 @@ export function DataTable<T>({
   onRowClick,
 }: Props<T>) {
   return (
-    // Density-first: rounded-lg + crisp border (no decorative shadow).
+    // rounded-lg + crisp border (no decorative shadow).
     <div className="overflow-auto rounded-lg border border-slate-200 bg-white">
       <table className="w-full text-[12px]">
-        {/* thead tint brand — đậm nhận diện hơn slate (anh yêu cầu "trang trí
+        {/* 2026-06-16 anh "thead nền màu brand đậm hơn": solid brand gradient +
-            lên 1 tý" 06-11); brand-700 semibold uppercase 11px đạt AA trên nền nhạt. */}
+            white uppercase — đậm nhận diện rõ rệt (was pale brand-50/60). White
-        <thead className="sticky top-0 z-10 bg-brand-50/60 text-brand-700">
+            on brand-600→700 = >7:1 contrast. */}
-          <tr className="border-b border-brand-100">
+        <thead className="app-gradient-brand sticky top-0 z-10 text-white">
+          <tr>
             {columns.map(c => (
               <th
                 key={c.key}
                 className={cn(
-                  'px-3 py-2 text-[11px] font-semibold uppercase tracking-wider',
+                  'px-3 py-2.5 text-[11px] font-bold uppercase tracking-wider',
                   c.align === 'right' && 'text-right',
                   c.align === 'center' && 'text-center',
                   c.align !== 'right' && c.align !== 'center' && 'text-left',
@@ -100,7 +101,7 @@ export function DataTable<T>({
                 {c.sortable && onSortChange ? (
                   <button
                     onClick={() => onSortChange(c.key, sortBy === c.key ? !sortDesc : false)}
-                    className="inline-flex items-center gap-1 hover:text-slate-900"
+                    className="inline-flex items-center gap-1 transition-colors hover:text-white/80"
                   >
                     {c.header}
                     {sortBy === c.key && (sortDesc ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronUp className="h-3.5 w-3.5" />)}

fe-user/src/components/Layout.tsx

@@ -381,16 +381,17 @@ export function Layout() {
 
   return (
     <AccordionContext.Provider value={accordionValue}>
-      {/* Brand stripe — dải nhận diện #1F7DC1 chạy suốt đỉnh app (anh yêu cầu
+      {/* Brand stripe — dải nhận diện #1F7DC1 chạy suốt đỉnh app. 2026-06-16
-          "trang trí lên 1 tý" 06-11; guide cho accent sparing — đây là 1 chỗ). */}
+          anh "nâng màu": dày hơn (h-1.5) + dải gradient xanh đậm bắt mắt. */}
       <div className="flex h-screen flex-col">
-        <div className="h-1 shrink-0 bg-gradient-to-r from-brand-700 via-brand-500 to-brand-600" />
+        <div className="h-1.5 shrink-0 bg-gradient-to-r from-brand-700 via-brand-400 to-brand-600" />
         <div className="flex min-h-0 flex-1">
         <aside className="flex w-72 flex-col border-r border-slate-200 bg-white xl:w-80">
-          <div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-b from-brand-50/70 to-transparent px-5">
+          {/* Logo cap — brand gradient wash đậm hơn (was brand-50/70). */}
+          <div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-r from-brand-50 via-brand-50/60 to-transparent px-5">
             <Link to="/dashboard" className="flex items-center gap-2.5">
               <img src="/logo.png" alt="Solutions" className="h-8 w-auto" />
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-brand-600/80">ERP</span>
+              <span className="rounded-md bg-brand-600 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white">ERP</span>
             </Link>
           </div>
           <nav className="flex-1 space-y-1 overflow-y-auto p-3">

fe-user/src/components/PageHeader.tsx

@@ -10,14 +10,16 @@ export function PageHeader({
   actions?: ReactNode
 }) {
   return (
-    // Density-first (NAMGROUP): compact one-line header, text-[15px] semibold,
+    // 2026-06-16 "nâng màu / bắt mắt hơn" (anh): bigger bolder title (text-lg
-    // tighter bottom rule. Toolbar/actions sit inline on the right.
+    // font-bold, was 15px semibold) + a taller brand gradient accent bar.
+    // Toolbar/actions stay inline right. Props {title, description, actions}
+    // unchanged.
     <div className="mb-5 flex items-start justify-between gap-6 border-b border-slate-200 pb-3.5">
-      <div className="flex min-w-0 items-start gap-2.5">
+      <div className="flex min-w-0 items-start gap-3">
-        {/* Brand accent bar — nhận diện #1F7DC1 per-page (anh yêu cầu 06-11) */}
+        {/* Brand accent bar — nhận diện #1F7DC1, đậm + cao hơn per-page. */}
-        <span aria-hidden className="mt-0.5 h-4 w-1 shrink-0 rounded-full bg-gradient-to-b from-brand-500 to-brand-700" />
+        <span aria-hidden className="mt-1 h-6 w-1.5 shrink-0 rounded-full bg-gradient-to-b from-brand-400 via-brand-600 to-brand-800" />
         <div className="min-w-0">
-          <h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
+          <h1 className="text-lg font-bold leading-tight tracking-tight text-slate-900">{title}</h1>
           {description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
         </div>
       </div>

fe-user/src/components/TopBar.tsx

@@ -68,12 +68,15 @@ function UserMenu() {
 
 export function TopBar({ title }: { title?: string }) {
   return (
-    <header className="flex h-14 items-center justify-between border-b border-slate-200 bg-white px-6">
+    // 2026-06-16: thin brand gradient hairline under the bar (border-b-2 với
-      <div className="text-sm font-semibold text-slate-700">{title}</div>
+    // border-image) + bolder title — đậm nhận diện nhẹ. Signature unchanged.
+    <header className="relative flex h-14 items-center justify-between border-b border-slate-200 bg-white px-6">
+      <div className="text-sm font-bold text-slate-800">{title}</div>
       <div className="flex items-center gap-2">
         <NotificationBell />
         <UserMenu />
       </div>
+      <span aria-hidden className="absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-brand-500/60 via-brand-300/30 to-transparent" />
     </header>
   )
 }

fe-user/src/components/ui/Button.tsx

@@ -2,21 +2,24 @@ import { forwardRef, type ButtonHTMLAttributes } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/cn'
 
-// Density-first (NAMGROUP convention): text-xs font-semibold, compact heights,
+// 2026-06-16 "nâng màu, bắt mắt hơn" (anh): primary now a brand gradient with a
-// rounded-lg. Brand identity kept — primary = brand-600, focus ring brand-500.
+// real lifted shadow — reads as the clear focal action. Danger mirrors it in
-// Decorative shadow dropped; only the filled actions keep a 1px tint shadow for
+// red. Outline/secondary/ghost stay quiet so the primary pops. Brand identity
-// affordance. Variant keys (primary/secondary/outline/ghost/danger) + size keys
+// kept (gradient anchored on brand-600). Variant keys
-// (sm/md/lg) are STABLE — call-sites depend on them.
+// (primary/secondary/outline/ghost/danger) + size keys (sm/md/lg) are STABLE —
+// 51+ call-sites depend on them. Visual-only; no API change.
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white focus-visible:ring-brand-500/70 active:translate-y-[0.5px]',
+  'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-[background,box-shadow,transform] disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white focus-visible:ring-brand-500/70 active:translate-y-[0.5px]',
   {
     variants: {
       variant: {
-        primary: 'bg-brand-600 text-white shadow-xs shadow-brand-700/20 hover:bg-brand-700',
+        primary:
+          'bg-gradient-to-b from-brand-500 to-brand-700 text-white shadow-sm shadow-brand-700/30 hover:from-brand-600 hover:to-brand-800 hover:shadow-md hover:shadow-brand-700/35',
         secondary: 'bg-slate-100 text-slate-700 hover:bg-slate-200',
-        outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-400',
+        outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-brand-50 hover:border-brand-300 hover:text-brand-700',
-        ghost: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
+        ghost: 'text-slate-600 hover:bg-brand-50 hover:text-brand-700',
-        danger: 'bg-red-600 text-white shadow-xs shadow-red-700/20 hover:bg-red-700',
+        danger:
+          'bg-gradient-to-b from-red-500 to-red-700 text-white shadow-sm shadow-red-700/30 hover:from-red-600 hover:to-red-800 hover:shadow-md',
       },
       size: {
         sm: 'h-7 px-2.5',

fe-user/src/components/ui/Dialog.tsx

@@ -35,12 +35,13 @@ export function Dialog({ open, onClose, title, children, footer, size = 'md' }:
         )}
         onClick={e => e.stopPropagation()}
       >
-        <div className="flex items-center justify-between border-b border-slate-200 px-5 py-3">
+        {/* 2026-06-16: brand gradient title bar — đậm nhận diện, white text. */}
-          <div className="text-sm font-semibold text-slate-800">{title}</div>
+        <div className="app-gradient-brand flex items-center justify-between rounded-t-xl px-5 py-3">
+          <div className="text-sm font-bold text-white">{title}</div>
           <button
             onClick={onClose}
             aria-label="Đóng"
-            className="-mr-1 rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+            className="-mr-1 rounded-md p-1 text-white/70 transition-colors hover:bg-white/15 hover:text-white"
           >
             <X className="h-4 w-4" />
           </button>

fe-user/src/components/ui/Input.tsx

@@ -7,10 +7,11 @@ export const Input = forwardRef<HTMLInputElement, Props>(({ className, ...props
   <input
     ref={ref}
     className={cn(
-      // Density-first: compact (~34px) rounded-lg, brand focus glow at low opacity.
+      // Compact (~34px) rounded-lg. 2026-06-16: stronger brand focus glow
+      // (border brand-500 + ring /25) so the active field reads clearly.
       'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-900',
       'placeholder:text-slate-400',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
       'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
       className,
     )}

fe-user/src/components/ui/Label.tsx

@@ -1,13 +1,13 @@
 import type { LabelHTMLAttributes } from 'react'
 import { cn } from '@/lib/cn'
 
-// Density-first ERP scan-pattern (NAMGROUP convention): uppercase + tracking +
+// ERP scan-pattern: uppercase + tracking. 2026-06-16 "nâng màu" — eyebrow now
-// muted. slate-500 (not 400) so 11px label still clears WCAG-AA (~4.6:1) — a
+// brand-600 (was slate-500) so form labels carry the identity colour. brand-600
-// deliberate accessibility-floor deviation from NAMGROUP's zinc-400.
+// on white = 4.7:1, clears WCAG-AA at 11px. Signature unchanged.
 export function Label({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
   return (
     <label
-      className={cn('text-[11px] font-semibold uppercase tracking-wider text-slate-500', className)}
+      className={cn('text-[11px] font-bold uppercase tracking-wider text-brand-600', className)}
       {...props}
     />
   )

fe-user/src/components/ui/Select.tsx

@@ -7,9 +7,9 @@ export const Select = forwardRef<HTMLSelectElement, Props>(({ className, childre
   <select
     ref={ref}
     className={cn(
-      // Density-first: matches Input — compact rounded-lg, brand focus glow.
+      // Matches Input — compact rounded-lg, stronger brand focus glow (2026-06-16).
       'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 pr-8 text-sm text-slate-900',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
       'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
       className,
     )}

fe-user/src/components/ui/Textarea.tsx

@@ -7,10 +7,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ className, ...
   <textarea
     ref={ref}
     className={cn(
-      // Density-first: matches Input — rounded-lg, brand focus glow.
+      // Matches Input — rounded-lg, stronger brand focus glow (2026-06-16).
       'w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm leading-relaxed text-slate-900',
       'placeholder:text-slate-400',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/25',
       'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
       className,
     )}

fe-user/src/index.css

@@ -3,7 +3,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");
 
 @theme {
-  /* Solutions brand palette (derived from logo #1F7DC1) */
+  /* Solutions brand palette (derived from logo #1F7DC1) — PRIMARY, unchanged */
   --color-brand-50:  #f0f7fc;
   --color-brand-100: #dbeaf7;
   --color-brand-200: #b8d5ef;
@@ -19,6 +19,37 @@
   --color-accent-500: #dc2626;
   --color-accent-600: #b91c1c;
 
+  /* ───────────────────────────────────────────────────────────────────
+     ACCENT PALETTE (anh chốt 2026-06-16 "nâng màu, giữ nền xanh brand").
+     These ADD to the brand — primary stays brand-600. Used for KPI cards,
+     status badges, multi-tone affordances. Each ships a 50/500/600/700 stop
+     so `bg-{x}-50` chip + `text-{x}-700` label both clear WCAG-AA.
+     ─────────────────────────────────────────────────────────────────── */
+  /* teal — info / secondary metric */
+  --color-teal-50:  #e9faf9;
+  --color-teal-100: #ccf3f1;
+  --color-teal-500: #0ea5a4;
+  --color-teal-600: #0c8e8d;
+  --color-teal-700: #0a7170;
+  /* amber/cam — warning / pending */
+  --color-amberx-50:  #fef6e7;
+  --color-amberx-100: #fce8c2;
+  --color-amberx-500: #f59e0b;
+  --color-amberx-600: #d98306;
+  --color-amberx-700: #b16708;
+  /* violet/tím — neutral-highlight / value */
+  --color-violet-50:  #f1effe;
+  --color-violet-100: #e0dcfc;
+  --color-violet-500: #7c6ff0;
+  --color-violet-600: #6354e4;
+  --color-violet-700: #5042c4;
+  /* green/lục — success / done */
+  --color-greenx-50:  #e8f8ee;
+  --color-greenx-100: #c7eed5;
+  --color-greenx-500: #16a34a;
+  --color-greenx-600: #128a3f;
+  --color-greenx-700: #0f7034;
+
   --font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
@@ -40,23 +71,83 @@ body {
   text-rendering: optimizeLegibility;
 }
 
-/* Heading tightening + better hierarchy with Be Vietnam Pro.
+/* Heading hierarchy with Be Vietnam Pro.
-   Density-first (NAMGROUP convention): semibold ladder, never font-bold —
+   2026-06-16: anh phản hồi "đơn điệu / có thấy khác gì đâu" → bump weight to
-   weight carries hierarchy without shouting. */
+   700 + tighter tracking so headings read BOLD and high-contrast (was 600
+   semibold = too quiet). Hierarchy now carried by both weight AND a darker
+   ink (#0b1220 vs body #0f172a). */
 h1, h2, h3, h4 {
-  letter-spacing: -0.014em;
+  letter-spacing: -0.018em;
-  color: #0f172a;
+  color: #0b1220;
-  font-weight: 600;
+  font-weight: 700;
 }
+h1 { letter-spacing: -0.022em; }
 
 /* Section / form labels — uppercase scan-pattern shared across the app.
-   Use class="label-eyebrow" for the dense ERP label treatment. */
+   Use class="label-eyebrow" for the dense ERP label treatment. Brand-tinted
+   (was plain slate) so eyebrows carry the identity colour at a glance. */
 .label-eyebrow {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 700;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.07em;
   text-transform: uppercase;
-  color: #64748b; /* slate-500 — WCAG-AA on white (4.6:1) */
+  color: var(--color-brand-600);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   REUSABLE VISUAL UTILITIES (anh chốt 2026-06-16). Component-classes so the
+   whole app picks up the richer look without touching 65 leaf pages — any
+   page can add class="card-accent" / "icon-chip" etc.
+   ───────────────────────────────────────────────────────────────────────── */
+
+/* Brand gradient surface — page/section headers, hero strips.
+   xanh → xanh đậm theo hướng anh chốt. Text on top must be white. */
+.app-gradient-brand {
+  background-image: linear-gradient(120deg, var(--color-brand-600) 0%, var(--color-brand-700) 55%, var(--color-brand-800) 100%);
+}
+
+/* KPI / metric card — colored LEFT border + soft lift. Pair with a
+   --accent custom property to recolour the rail per card, e.g.
+   style={{ ['--accent' as any]: 'var(--color-teal-500)' }}. Defaults brand. */
+.card-accent {
+  position: relative;
+  border-radius: 0.75rem;
+  border: 1px solid #e9eef4;
+  background: #fff;
+  border-left: 3px solid var(--accent, var(--color-brand-500));
+  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
+  transition: box-shadow .18s ease, transform .18s ease;
+}
+.card-accent:hover {
+  box-shadow: 0 4px 10px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.06);
+  transform: translateY(-1px);
+}
+
+/* Icon chip — soft tinted square behind a lucide icon. Recolour via --chip-bg
+   / --chip-fg, defaults brand. Used in KPI cards + section headers. */
+.icon-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem;
+  width: 2.25rem;
+  border-radius: 0.625rem;
+  background: var(--chip-bg, var(--color-brand-50));
+  color: var(--chip-fg, var(--color-brand-600));
+}
+
+/* Big stat number — tabular, tight, dark. */
+.stat-value {
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: #0b1220;
+  line-height: 1.1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card-accent { transition: none; }
+  .card-accent:hover { transform: none; }
 }
 
 /* Tabular numbers in tables + stat cards for better alignment */

fe-user/src/pages/UserDashboardPage.tsx

@@ -28,6 +28,22 @@ const fmtMoney = (v: number) => {
   return v.toLocaleString('vi-VN')
 }
 
+// 2026-06-16 redesign (anh "nâng màu, bắt mắt hơn"): KPI cards now carry a
+// coloured LEFT rail (.card-accent --accent) + a tinted icon-chip + a big stat
+// number. Each tone owns a distinct accent from the new palette so the row
+// scans as 5 colours, not 5 greys. `tone` extended (brand/teal/warn/good/danger
+// /violet) — StatCard is local to this page, no external call-site.
+type StatTone = 'default' | 'teal' | 'warn' | 'good' | 'danger' | 'violet'
+
+const STAT_TONE: Record<StatTone, { rail: string; chipBg: string; chipFg: string }> = {
+  default: { rail: 'var(--color-brand-500)',  chipBg: 'var(--color-brand-50)',  chipFg: 'var(--color-brand-600)' },
+  teal:    { rail: 'var(--color-teal-500)',   chipBg: 'var(--color-teal-50)',   chipFg: 'var(--color-teal-700)' },
+  warn:    { rail: 'var(--color-amberx-500)', chipBg: 'var(--color-amberx-50)', chipFg: 'var(--color-amberx-700)' },
+  good:    { rail: 'var(--color-greenx-500)', chipBg: 'var(--color-greenx-50)', chipFg: 'var(--color-greenx-700)' },
+  danger:  { rail: 'var(--color-accent-500)', chipBg: '#fdecec',                chipFg: 'var(--color-accent-600)' },
+  violet:  { rail: 'var(--color-violet-500)', chipBg: 'var(--color-violet-50)', chipFg: 'var(--color-violet-700)' },
+}
+
 function StatCard({
   icon: Icon,
   label,
@@ -40,27 +56,27 @@ function StatCard({
   label: string
   value: React.ReactNode
   hint?: string
-  tone?: 'default' | 'warn' | 'good' | 'danger'
+  tone?: StatTone
   onClick?: () => void
 }) {
-  const toneClass =
+  const t = STAT_TONE[tone]
-    tone === 'warn' ? 'text-amber-600 bg-amber-50' :
-    tone === 'good' ? 'text-emerald-600 bg-emerald-50' :
-    tone === 'danger' ? 'text-red-600 bg-red-50' :
-    'text-brand-600 bg-brand-50'
   return (
     <button
       onClick={onClick}
       disabled={!onClick}
-      className="rounded-lg border border-slate-200 bg-white p-4 text-left shadow-sm transition hover:shadow-md disabled:cursor-default disabled:hover:shadow-sm"
+      className="card-accent flex flex-col p-4 text-left disabled:cursor-default"
+      style={{ ['--accent' as string]: t.rail }}
     >
-      <div className="flex items-center justify-between">
+      <div className="flex items-start justify-between gap-2">
-        <div className="text-xs font-medium text-slate-500">{label}</div>
+        <div className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">{label}</div>
-        <span className={`flex h-6 w-6 items-center justify-center rounded ${toneClass}`}>
+        <span
-          <Icon className="h-3.5 w-3.5" />
+          className="icon-chip h-9 w-9"
+          style={{ ['--chip-bg' as string]: t.chipBg, ['--chip-fg' as string]: t.chipFg }}
+        >
+          <Icon className="h-4 w-4" />
         </span>
       </div>
-      <div className="mt-2 text-2xl font-bold text-slate-900">{value}</div>
+      <div className="stat-value mt-2 text-3xl">{value}</div>
       {hint && <div className="mt-0.5 text-xs text-slate-400">{hint}</div>}
     </button>
   )
@@ -91,7 +107,10 @@ export function UserDashboardPage() {
       />
 
       <section className="mb-6">
-        <h2 className="mb-3 text-sm font-semibold text-slate-700">Của tôi</h2>
+        <h2 className="mb-3 flex items-center gap-2 text-sm font-bold text-slate-800">
+          <span aria-hidden className="h-4 w-1 rounded-full bg-gradient-to-b from-brand-400 to-brand-700" />
+          Của tôi
+        </h2>
         <div className="grid grid-cols-2 gap-3 md:grid-cols-5">
           <StatCard
             icon={Pencil}
@@ -105,7 +124,7 @@ export function UserDashboardPage() {
             label="Chờ tôi duyệt"
             value={s?.pendingMyApproval ?? '—'}
             hint="Vào Hộp thư"
-            tone="good"
+            tone="teal"
             onClick={() => navigate('/inbox')}
           />
           <StatCard
@@ -127,15 +146,18 @@ export function UserDashboardPage() {
             icon={Coins}
             label="Tổng giá trị nháp"
             value={s ? fmtMoney(s.draftsTotalValue) : '—'}
+            tone="violet"
             onClick={() => navigate('/my-contracts')}
           />
         </div>
       </section>
 
-      <section className="rounded-lg border border-slate-200 bg-white">
+      <section className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
-        <header className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
+        <header className="flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-brand-50/70 to-transparent px-4 py-3">
-          <h2 className="flex items-center gap-2 text-sm font-semibold text-slate-700">
+          <h2 className="flex items-center gap-2 text-sm font-bold text-slate-800">
-            <FileText className="h-4 w-4" />
+            <span className="icon-chip h-7 w-7">
+              <FileText className="h-4 w-4" />
+            </span>
             HĐ gần đây
           </h2>
           <Button variant="outline" onClick={() => navigate('/my-contracts')}>

fe-user/src/types/contracts.ts

@@ -30,19 +30,23 @@ export const ContractPhaseLabel: Record<number, string> = {
   99: 'Từ chối',
 }
 
+// 2026-06-16 "badge mỗi trạng thái 1 màu rõ" (anh): deepened text to -800 and
+// brand-tinted the early draft phases (1/2) so they read blue not grey.
+// PhaseBadge wraps these with a ring-current/15 inset for a crisp edge. Each
+// pairing stays WCAG-AA on its -100 tint.
 export const ContractPhaseColor: Record<number, string> = {
-  1: 'bg-slate-100 text-slate-700',
+  1: 'bg-brand-100 text-brand-800',
-  2: 'bg-slate-100 text-slate-700',
+  2: 'bg-slate-200 text-slate-700',
-  3: 'bg-amber-100 text-amber-700',
+  3: 'bg-amber-100 text-amber-800',
-  4: 'bg-orange-100 text-orange-700',
+  4: 'bg-orange-100 text-orange-800',
-  5: 'bg-purple-100 text-purple-700',
+  5: 'bg-purple-100 text-purple-800',
-  6: 'bg-indigo-100 text-indigo-700',
+  6: 'bg-indigo-100 text-indigo-800',
-  7: 'bg-fuchsia-100 text-fuchsia-700',
+  7: 'bg-fuchsia-100 text-fuchsia-800',
-  8: 'bg-pink-100 text-pink-700',
+  8: 'bg-pink-100 text-pink-800',
-  9: 'bg-emerald-100 text-emerald-700',
+  9: 'bg-emerald-100 text-emerald-800',
-  10: 'bg-amber-100 text-amber-700',
+  10: 'bg-amber-100 text-amber-800',
   98: 'bg-yellow-100 text-yellow-800',
-  99: 'bg-red-100 text-red-700',
+  99: 'bg-red-100 text-red-800',
 }
 
 export const ApprovalDecision = {

fe-user/src/types/purchaseEvaluation.ts

@@ -45,17 +45,19 @@ export const PurchaseEvaluationPhaseLabel: Record<number, string> = {
   99: 'Từ chối',
 }
 
+// 2026-06-16 "badge mỗi trạng thái 1 màu rõ" (anh): deepened text to -800;
+// phase-2 (đang soạn) tinted brand-blue. AA-safe on the -100 tints.
 export const PurchaseEvaluationPhaseColor: Record<number, string> = {
-  1: 'bg-slate-100 text-slate-700',
+  1: 'bg-slate-200 text-slate-700',
-  2: 'bg-blue-100 text-blue-700',
+  2: 'bg-brand-100 text-brand-800',
-  3: 'bg-orange-100 text-orange-700',
+  3: 'bg-orange-100 text-orange-800',
-  4: 'bg-indigo-100 text-indigo-700',
+  4: 'bg-indigo-100 text-indigo-800',
-  5: 'bg-fuchsia-100 text-fuchsia-700',
+  5: 'bg-fuchsia-100 text-fuchsia-800',
-  6: 'bg-pink-100 text-pink-700',
+  6: 'bg-pink-100 text-pink-800',
-  7: 'bg-emerald-100 text-emerald-700',
+  7: 'bg-emerald-100 text-emerald-800',
-  10: 'bg-amber-100 text-amber-700',
+  10: 'bg-amber-100 text-amber-800',
   98: 'bg-yellow-100 text-yellow-800',
-  99: 'bg-red-100 text-red-700',
+  99: 'bg-red-100 text-red-800',
 }
 
 // Phase nào được phép edit phiếu (Drafter sửa header + detail).
@@ -88,12 +90,15 @@ export const PeDisplayStatusLabel: Record<PeDisplayStatus, string> = {
   TuChoi: 'Từ chối',
 }
 
+// 2026-06-16 "mỗi trạng thái 1 màu rõ (xanh/cam/đỏ/lục/xám)" (anh): the 5
+// display statuses now map cleanly to the requested colour set — xám/cam/vàng/
+// lục/đỏ — at deeper -800 ink for legibility.
 export const PeDisplayStatusColor: Record<PeDisplayStatus, string> = {
-  Nhap: 'bg-slate-100 text-slate-700',
+  Nhap: 'bg-slate-200 text-slate-700',
-  DaGuiDuyet: 'bg-amber-100 text-amber-700',
+  DaGuiDuyet: 'bg-amber-100 text-amber-800',
   TraLai: 'bg-yellow-100 text-yellow-800',
-  DaDuyet: 'bg-emerald-100 text-emerald-700',
+  DaDuyet: 'bg-emerald-100 text-emerald-800',
-  TuChoi: 'bg-red-100 text-red-700',
+  TuChoi: 'bg-red-100 text-red-800',
 }
 
 export function getPeDisplayStatus(phase: number): PeDisplayStatus {