@claude — Remediate the visual inconsistency across ALL shipped FuzeFront UI so prod is consistent (fonts, type scale, spacing, alignment, layouts). Six UI epics each styled their own way and shipped messy. frontend-engineer owns this (sole design-system owner). Design-system-first. Land via PR.
Scope — make every screen conform to the "fuse seam" design system
Audit + fix the shell + all feature UIs: dashboard/menu/topbar/side-panel, billing/payments (plan cards, invoices, payments), security/org (permissions, members, invite, API keys), app menu / federated, chat. For each:
- Typography: one font family + the DS type scale (sizes/weights/line-heights) — no ad-hoc font-size/weight. Headings/body/labels use the DS text components/tokens.
- Spacing & alignment: all margins/padding/gaps on the DS spacing scale; consistent vertical rhythm; aligned form fields, buttons, cards, tables.
- Layout: use the DS layout primitives (page/section/card/stack/grid) — no magic widths or one-off fl/grid; consistent page headers, content max-width, and card styling across features.
- Components: replace ad-hoc/duplicated elements with the DS primitives (Button, Card, Tabs, Input, Select, Table, PricingCard, Skeleton, etc.); if a needed primitive is missing, ADD it to
@fuzefront/design-system (don't one-off).
- Remove inline
style={{…}} literals + raw hex/px; use tokens.
- Resolve the ~182 conformance findings the gate flagged + the 16 extraction candidates.
Constraints
- Design-system-first: extend the base
@fuzefront/design-system; no raw hex/spacing/type in feature code.
- Must pass the now-ENFORCING
gate-ds-conformance + the new visual gate (see the sibling DS-gate issue).
- a11y preserved; RTL tests updated. Don't change behavior — visual/structure consistency only.
STATE
done = features functionally shipped but visually inconsistent; remaining = unify type/spacing/alignment/layout to the DS across all screens, extract missing primitives, clear conformance findings. decisions = design-system-first, fuse-seam tokens are the single source.
End with DONE: <PR link> + before/after notes per screen. @izzywdev BLOCKED: <q> + STATE if blocked.
@claude — Remediate the visual inconsistency across ALL shipped FuzeFront UI so prod is consistent (fonts, type scale, spacing, alignment, layouts). Six UI epics each styled their own way and shipped messy. frontend-engineer owns this (sole design-system owner). Design-system-first. Land via PR.
Scope — make every screen conform to the "fuse seam" design system
Audit + fix the shell + all feature UIs: dashboard/menu/topbar/side-panel, billing/payments (plan cards, invoices, payments), security/org (permissions, members, invite, API keys), app menu / federated, chat. For each:
@fuzefront/design-system(don't one-off).style={{…}}literals + raw hex/px; use tokens.Constraints
@fuzefront/design-system; no raw hex/spacing/type in feature code.gate-ds-conformance+ the new visual gate (see the sibling DS-gate issue).STATE
done = features functionally shipped but visually inconsistent; remaining = unify type/spacing/alignment/layout to the DS across all screens, extract missing primitives, clear conformance findings. decisions = design-system-first, fuse-seam tokens are the single source.
End with
DONE: <PR link>+ before/after notes per screen.@izzywdev BLOCKED: <q>+ STATE if blocked.