July 2026 Design Audit

Design Audit · July 2026

Executive Light
— The Spoils.ai Design System

This document defines the canonical design language for spoils.ai. The product is already visually consistent — this codifies the rules so the implementation matches the intent. Use this as the reference for all future UI work.

01 — Current State

Codebase Problems

The product looks consistent, but the code is not. These colors appear in the right places visually — they just aren't connected to a token system, making future updates brittle.

7,151
Hardcoded hex values
0
Design tokens in use
47
Unique font sizes
23
Arbitrary radius values
⚠️
These colors are correct — the problem is how they're referenced. Every hex below exists in the right place visually, but is written as a raw hardcoded value in thousands of places rather than a named token. One brand update requires a global find-replace across 7,000+ occurrences with no safety net.
#71717A
2,108 occurrences
→ token: ink-2
#A1A1AA
1,453 occurrences
→ token: label
#1A73E8
987 occurrences
→ token: ocean
#E4E4E7
876 occurrences
→ token: line
#DC2626
543 occurrences
→ token: negative
#F2F3F5
498 occurrences
→ token: surface
#0A0A0A
412 occurrences
→ token: ink
#E8F0FE
274 occurrences
→ token: ocean-tint

02 — Proposed System

Design Token Palette

The canonical color system. Every color in the product maps to exactly one named token. Token names are the source of truth — hex values can be updated centrally.

Neutrals & Surfaces

ink
text-foreground
#0A0A0A
ink-2
text-muted-foreground
#71717A
label
text-label
#A1A1AA
line
border
#E4E4E7
surface
bg-muted
#F2F3F5
card
bg-card
#FFFFFF

Ocean — Primary Accent (Positive)

ocean
text-primary
#1A73E8
ocean-deep
text-primary-hover
#1557B0
ocean-tint
bg-primary-muted
#E8F0FE

Negative — Warning / Decline

negative
text-destructive
#DC2626
negative-tint
bg-destructive-muted
#FEF2F2
📌 Positive = Ocean Blue, Not Green
Spoils.ai uses Ocean Blue (#1A73E8) for positive/growth signals, not the conventional green. This is intentional and distinguishes the brand. Never use green for "up" metrics.

03 — Typography

Type Ladder

Inter across 7 defined steps. All sizes defined in px, tracked in a token map. Use only these sizes — never arbitrary intermediate values.

Micro Label 9–10px / 600 / 0.08em
TOTAL REVENUE · MICRO LABEL
Caption 11px / 400 / normal
Supplementary metadata and timestamps
Body Small 12px / 400 / normal
Secondary body copy, descriptions, helper text
Body 13–14px / 400–500 / normal
Primary interface text, table cells, paragraph content
Label Strong 14–15px / 600 / normal
Card titles, section headings, emphasis labels
Heading 18–22px / 700 / normal
Page headings and section titles
Display / KPI 28–32px / 700 / tabular
$174.4K
Rule: All numeric columns use font-variant-numeric: tabular-nums to prevent layout jitter. Micro-labels are always uppercase + tracked.

04 — Components

Component Library

Canonical implementations of the core UI patterns. Every component below is built using tokens, not hardcoded values.

KPI Stat Block

Total Revenue
$174.4K
↑ +12.3% vs last week

Signal Pills

Hold Pull Back Scale
Hold = neutral zinc · Pull Back = negative red · Scale = ocean blue (not green)

Card Component

North America — Q3 Performance
Revenue up 12.3% week-over-week, driven by repeat buyer cohort. Fulfillment rate holding at 97.4%.
View full report →

Data Table

Product Revenue Units Δ WoW
Premium Bundle $48,320 1,204 +8.4%
Starter Kit $31,180 3,891 +2.1%
Legacy SKU $12,460 622 −5.7%

05 — Code Patterns

Anti-patterns vs Correct

Common mistakes found in the current codebase, and the correct token-based approach.

❌ Before
text-[#71717a]
Hardcoded hex in Tailwind class. Scattered in 2,108 places. One color update requires a global find-replace with no type safety.
✅ After
text-muted-foreground
Semantic token name. Update the alias in tailwind.config.ts and all 2,108 instances update automatically.
❌ Before
text-[10px] uppercase tracking-[0.08em] font-semibold text-[#a1a1aa]
Inline arbitrary values. 47 different font sizes exist in the codebase. No shared abstraction for the micro-label pattern.
✅ After
<p className="micro-label">
A single reusable component or utility class. Micro-label style is defined once, used everywhere, changed in one place.
❌ Before
text-green-600
Renders as:
+12.3%
Green implies "safe" / conventional positive. Spoils.ai uses ocean blue for growth signals — green is off-brand and visually inconsistent.
✅ After
text-primary (ocean #1A73E8)
Renders as:
+12.3%
Ocean blue is the brand's positive signal. Consistent with signal pills, delta values, and link colors across the product.

06 — Responsive System

Desktop vs Mobile

Executive Light adapts across three breakpoints. Below are the rules and live demos of the same components at desktop and mobile widths.

📱 Mobile
< 640px
  • Single column layout
  • KPI value: 22px (↓ from 32px)
  • Card padding: 14px (↓ from 20px)
  • Tables → stacked rows
  • Touch targets ≥ 44px
  • No horizontal scroll
📋 Tablet
640px – 1024px
  • 2-column grid max
  • KPI value: 26px
  • Card padding: 16px
  • Tables: horizontal scroll
  • Nav: collapsed sidebar
  • Charts: simplified labels
🖥 Desktop
> 1024px
  • 3–4 column KPI grid
  • KPI value: 32px
  • Card padding: 20px
  • Full data tables
  • Expanded sidebar nav
  • Hover states active

Live Viewport Comparison — Same Component, Two Widths

Desktop 1200px
Total Revenue
$174.4K
↑ +12.3%
Orders
5,716
↑ +4.1%
Avg Order
$30.51
↓ −2.8%
Product Revenue Δ WoW
Premium Bundle $48,320 +8.4%
Starter Kit $31,180 +2.1%
Legacy SKU $12,460 −5.7%
Mobile 375px
Total Revenue
$174.4K
↑ +12.3%
Orders
5,716
↑ +4.1%
Avg Order
$30.51
↓ −2.8%
Products
Premium Bundle
1,204 units
$48,320
+8.4%
Starter Kit
3,891 units
$31,180
+2.1%
Legacy SKU
622 units
$12,460
−5.7%

⚠️ Current Mobile Anti-patterns

📏
Fixed-width containers break on small screens Several dashboard panels use fixed pixel widths (e.g. width: 760px) that overflow on mobile without a max-width: 100%; overflow-x: auto wrapper.
🖱
Touch targets below 44px Action buttons in the data table rows are 28–32px tall. On mobile, this fails WCAG 2.5.5 and creates frustrating tap precision requirements. Minimum: 44×44px touch target.
📊
Tables render without horizontal scroll wrapper Multi-column tables are not wrapped in overflow-x: auto containers, causing horizontal page scroll rather than table-scoped scroll — a common source of broken mobile layouts.
🔤
Type sizes don't step down at mobile KPI display values (32px) and heading sizes are not responsive — they remain desktop-scale on small screens, crowding the layout. Use clamp(22px, 5vw, 32px) or explicit breakpoint overrides.