AIMEAT — Style Decision Testbed

Theme:

Each row shows the canonical theme.css primitive on the left, then every real clone that currently exists. They use the actual stylesheets, so what you see is exactly how each looks in the app. For every clone, pick what to do in its dropdown. Toggle light/dark to judge both. Your choices appear in the copyable box at the bottom — paste it back to me and I'll implement it.

Decision options: Use canonical as-is = the clone is a redundant duplicate, delete it; its variants already exist in canonical (e.g. a clone's "Secondary" is canonical .btn-outline) · Add / merge into canonical = this look — or a variant canonical doesn't have — is worth keeping, so I fold it into theme.css for every view, then delete the clone · Leave separate = no change · Delete (dead) = unused, safe to remove. Nothing is ever lost: "delete clone" only removes a duplicate whose look already lives in canonical — if a clone has something canonical lacks, pick Add / merge into canonical. The "maps to" line under each clone shows exactly which canonical class each variant becomes. Admin (.adm-*) stays its own design system, consolidated separately.

Buttons

Canonical primary is a pink-ish gradient (#E8564A→#FF6B6B) with a resting "heart" shadow and var(--radius-sm). The profile override re-skins ~150 buttons app-wide (darker/flatter, 6px radius, no resting shadow). Marketplace/hobbies/classic/dev each reinvent the set.

Canonical · theme.css .btn-*reference

Full canonical set: btn-primary · btn-outline (secondary) · btn-danger/btn-danger-solid · btn-ghost · btn-success · btn-info · btn-sm

Profile · .pf .btn-primary~150 sites

darker gradient (→#D4493F) · 6px radius · no resting heart-shadow · 8×16 padding · .85rem

maps to: every variant already exists in canonical (Primary→btn-primary, Outline→btn-outline, Danger→btn-danger-solid, Ghost→btn-ghost, Success→btn-success, Small→btn-sm). Only the look differs.

Profile pkg-card · button.primary/.danger4 sites

flat-accent mini pills · bare class names (collision-prone) · danger uses hardcoded rgba(239,68,68) (won't theme-flip)

maps to: Install→btn-primary btn-sm · Remove→btn-danger-solid btn-sm (same as how the knowledge tab already migrated)

Marketplace · .mk-btn*~7 sites

gradient 2nd stop #E8564A (not #FF6B6B) · 10px radius · no resting shadow · opacity-fade hover

maps to: Primary→btn-primary · Secondary→btn-outline · Small→btn-sm

Hobbies · .hb-btn*~10 sites

near-twin of mk-btn · danger hardcodes #ef4444/rgba(239,68,68) (won't theme-flip)

maps to: Primary→btn-primary · Secondary→btn-outline · Danger→btn-danger · Small→btn-sm

Classic · .cl-*-btn~4 sites

heavier 700/.92rem · 10px radius · has a .loading spinner state · register hardcodes #22c55e/#16a34a

maps to: Save→btn-primary · Register→btn-success · Copy→btn-primary. ⚠ the .loading spinner state has NO canonical equivalent → pick "Add / merge into canonical" to keep it.

Dev portal · .dv-*-btn2 sites
(.dv-copy-btn is absolute-positioned; uses the --love gradient palette deliberately)

uses the separate --love1/2/3 brand palette · .copied state hardcodes #22c55e (won't theme-flip)

maps to: Upload→btn-primary · Copy→btn-ghost/CopyButton. The --love palette is a deliberate dev-portal identity — "Leave separate" is reasonable here.

Knowledge · .kpkg-btn*DEAD · 0 sites

orphaned — nothing renders these (knowledge tab already uses canonical btn-outline/btn-danger-solid). Safe to delete.

maps to: Primary→btn-outline, Danger→btn-danger-solid (already what the knowledge tab uses). But if you like this flat-indigo look, "Add to canonical" keeps it.

Inputs & form fields

Canonical .input-field is 11×14 padding, 1.5px border, .94rem, var(--radius-sm), with a 3px accent focus ring. Profile/marketplace/hobbies each redefine size/border/focus. Labels diverge too (canonical is UPPERCASE 600; clones are sentence-case 500).

Canonical · .input-field + .form-labelreference
Profile · .pf .input-field66 sites

10×14 padding · 10px radius · .85rem · var(--bg-surface) bg · focus ring hardcoded rgba(232,86,74,.1) (won't theme-flip)

Marketplace · .mk-form-*~15 sites

1px border · 10px radius · hardcoded system-ui font (not var(--font)) · NO focus ring · sentence-case label

Hobbies · .hb-form-*~14 sites
helper hint text

token-driven (theme-flips) · 1px border · NO focus ring · sentence-case label · has a hint class

Profile email · .pf-inputORPHAN · no rule

latent bug: email-tab emits class="pf-input" but NO such rule exists → renders unstyled. Fix → input-field.

Admin · .adm-inputadmin — separate

8×12 · 6px radius · indigo focus ring rgba(99,102,241,.15) (different hue, won't theme-flip). Stays admin; consolidate within admin only.

Stat cards (metric tiles)

Canonical .stat-card = centered, neutral bold value over an UPPERCASE muted label. 9 live clones diverge on size, value color (several tint the number with the accent), label casing, and even value/label order (admin + portal render label-first).

Canonical · .stat-cardreference
1,284
Members

value-first · 1.35rem/800 neutral · .66rem UPPERCASE label · var(--radius-sm)

Marketplace · .mk-stat-*2 sites
1,284
Members

value tinted var(--accent) · 1.5rem/700 · 10px radius · sentence-case label · label fallback #6b6b8a

the accent-tinted value is a variant canonical lacks → "Add / merge into canonical" would add an optional .stat-card-value.accent tone everyone could use.

Hobbies · .hb-stat-*3 sites
1,284
Members

near-twin of mk-stat · accent-tinted value · token-driven (theme-flips)

Dev portal · .dv-stat4 sites
1,284
Members

value var(--love1) brand accent · 1.5rem/700 · flex sizing · 12px radius

Profile node-stats · .stat-value/.stat-label~6 sites
1,284
Members

reuses .stat-card box but reinvents children · value color via INLINE style (theme-bypass)

Profile wallet · .wl-stat4 sites
1,284
Earned

monospace value (numeric alignment) · success/danger tints · label fallback #6B7280

monospace value + success/danger tints are variants canonical lacks → "Add / merge into canonical" would add .stat-card-value.mono / .success / .danger modifiers.

Agent detail · .pf-agd-stat-card~10 sites
1,284
Tasks

two aliased prefixes (.agd-/.pf-agd-) · 1.5rem/600 · light-only fallbacks #FFFFFF/#E5E7EB/#1A1A2E

Portal user-world · .user-stat1 site
Members
1,284

LABEL-FIRST order · closest to canonical tokens · 1.05rem/700 smaller value

Admin StatsGrid · .adm-card/.adm-statadmin — separate

Members

1,284
last 24h

LABEL-FIRST · rich 8-tone color system · the de-facto shared component (~20 tabs). Stays admin; consolidate within admin.

Admin AgentIntegration · .adm-agi-stat-*admin — separate
1,284
Completed

a SECOND admin stat tile (didn't reuse StatsGrid) — fold into the one admin stat component during admin consolidation

Profile hero · .stat-card .num/.labelDEAD · 0 sites
1,284
Hearts

orphaned hero-strip CSS (heart/blue/purple/mint) — all hardcoded hex, nothing renders it. Safe to delete.