hart-agency-design

To align front-end UI with a canonical design system, enforce token-only color usage via globals.css, reuse component primitives, apply 4px spacing and radius scales, and detect conflicts between prototype and design sources. A plan-first workflow proposes fixes before implementation.

Reviewing UI for design system compliance involves checking token alignment against a live token source of truth, flagging conflicts across mental model and prototype sources, and proposing exact token-based fixes to maintain consistency with globals.css rules.

Token-first conflict detection flags inconsistencies between the design system, mental model, and prototype sources before extending it. It clarifies whether you are adding a token, primitive, or pattern, ensuring the output stays consistent with globals.css and existing design-system rules.

Yes, this UI review and component building approach supports both Hart Web Platforms and the Brand Ambassador Mobile App. It handles screens, pages, components, and layouts driven by prototype and mental-model context across both surfaces.

Running a guided intake before building UI components defines the project scope and target surface. It enforces a plan-before-build workflow that proposes structural changes and token-based fixes, preventing design system drift during rapid UI development.

Yes, applying 4px spacing and radius scales is required for design system token alignment. Enforcing these specific scales alongside token-only color usage from globals.css ensures that built components and layouts match the canonical design system.