diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/_fp_portal_tokens.scss b/fusion_plating/fusion_plating_portal/static/src/scss/_fp_portal_tokens.scss
new file mode 100644
index 00000000..af08de1b
--- /dev/null
+++ b/fusion_plating/fusion_plating_portal/static/src/scss/_fp_portal_tokens.scss
@@ -0,0 +1,87 @@
+// ============================================================================
+// Fusion Plating — Customer Portal · Design Tokens
+// Brand palette pulled from enplating.com live CSS (2026-05-17).
+// Loaded first in web.assets_frontend so every later SCSS file sees these.
+// Per Odoo 19 SCSS rules (CLAUDE.md rule 8/9): no @import; tokens are SCSS
+// variables that downstream files reference directly, NOT CSS custom props.
+// ============================================================================
+
+// Brand palette
+$fp-teal-light:    #2eaf93;
+$fp-teal:          #1a6b59;
+$fp-teal-dark:     #0e3d2f;
+$fp-teal-deep:     #0a3528;
+$fp-mint:          #cbf3e6;
+$fp-mint-pastel:   #f0fdf9;
+$fp-aqua:          #9ae5d4;
+
+// Surfaces
+$fp-page-bg:       #f8fafb;
+$fp-section-bg:    #f3f7f6;
+$fp-card-bg:       #ffffff;
+$fp-card-border:   #e5e7eb;
+$fp-card-border-dark: #d1d5db;
+
+// Text
+$fp-text:          #111827;
+$fp-text-body:     #374151;
+$fp-muted:         #6b7280;
+$fp-muted-light:   #9ca3af;
+$fp-disabled:      #d1d5db;
+
+// Status (functional, NOT brand)
+$fp-amber:         #f59e0b;
+$fp-amber-bg:      #fef3c7;
+$fp-amber-text:    #92400e;
+$fp-success:       #22c55e;
+$fp-success-text:  #15803d;
+$fp-success-bg:    #f0fdf4;
+$fp-danger:        #ef4444;
+$fp-danger-dark:   #b91c1c;
+$fp-danger-bg:     #fef2f2;
+
+// Gradients
+$fp-gradient-primary:   linear-gradient(135deg, $fp-teal-light 0%, $fp-teal 100%);
+$fp-gradient-danger:    linear-gradient(135deg, $fp-danger 0%, $fp-danger-dark 100%);
+$fp-gradient-mint:      linear-gradient(135deg, $fp-mint-pastel 0%, $fp-mint 100%);
+$fp-gradient-icon:      linear-gradient(135deg, $fp-mint 0%, $fp-aqua 100%);
+$fp-gradient-secondary: linear-gradient(180deg, #fff 0%, $fp-section-bg 100%);
+$fp-gradient-tab:       linear-gradient(180deg, $fp-section-bg 0%, $fp-mint 100%);
+
+// Shadows
+$fp-shadow-card:        0 1px 2px rgba(0, 0, 0, .03);
+$fp-shadow-card-hover:  0 1px 3px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
+$fp-shadow-button:      0 1px 3px rgba(26, 107, 89, .25), 0 4px 12px rgba(26, 107, 89, .18);
+$fp-shadow-button-hover:0 2px 4px rgba(26, 107, 89, .30), 0 6px 16px rgba(26, 107, 89, .22);
+$fp-shadow-danger:      0 1px 3px rgba(185, 28, 28, .25), 0 4px 12px rgba(185, 28, 28, .15);
+$fp-glow-ring-teal:     0 0 0 4px rgba(46, 175, 147, .20);
+$fp-glow-ring-amber:    0 0 0 4px rgba(245, 158, 11, .20);
+
+// Geometry
+$fp-radius-pill:    9999px;
+$fp-radius-card:    14px;
+$fp-radius-button:  9px;
+$fp-radius-chip:    8px;
+$fp-radius-icon:    7px;
+$fp-radius-tile:    11px;
+
+// Spacing scale (rem)
+$fp-space-1: .25rem;
+$fp-space-2: .5rem;
+$fp-space-3: .7rem;
+$fp-space-4: 1rem;
+$fp-space-5: 1.25rem;
+$fp-space-6: 1.5rem;
+
+// Typography
+$fp-font:       'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+$fp-font-mono:  ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
+
+// Dark-mode placeholder — DEFERRED per spec.
+// When implementing, branch on $o-webclient-color-scheme per CLAUDE.md rule 9.
+// Example pattern (do NOT enable now):
+//   @if $o-webclient-color-scheme == dark {
+//     $fp-page-bg: #0e1f1b !global;
+//     $fp-card-bg: #1a2b27 !global;
+//     // ...
+//   }