Frontend architecture

Interface conventions for the Vetrix web client: the design-system tokens every component builds against, and the accessibility contract for user-identity imagery. These pages are the reference to consult before adding or restyling a UI surface.

Pages

• Vetrix UI Style Guide — The design system of record: the vetrix-* Tailwind color tokens (navigation, brand, surface, border, text and semantic status ramps) that replace hardcoded hex values, the type scale and heading/label patterns, the 4px spacing scale, Tailwind's default breakpoints with the mobile-first progressive-disclosure patterns, the AppShell / TopNav / sidebar layout skeleton and its widths, class recipes for buttons, form inputs, cards, tables, badges, modals and empty states, Heroicons sizing rules, the four-step z-index scale, the two sanctioned transitions, and the Server-Component-versus-Client-Component decision rules including serverFetch() and the initialData hand-off into useQuery.
• Avatar alt-text convention — The two-mode rule for avatar images: an avatar rendered next to the user's name is decorative and takes alt="", while a standalone avatar takes alt="{username}"; a parent element that already carries an accessible name keeps the inner image decorative. Covers the standalone prop on the @/components/ui/Avatar primitive, the role="img" + aria-label treatment of the initial-letter fallback disc, how to annotate a hand-rolled <img>, and the regression test that scans the web sources and fails the build on a literal alt string.