design-guide

Maintain UI design consistency by applying a centralized design system that defines semantic CSS-variable tokens, typography scales, and standardized component hierarchy rules for React. This ensures every new component matches established visual patterns and interaction behaviors without inventing one-off styles.

Standardize status badges and priority levels by implementing semantic status rendering rules and entity-row composition patterns. This approach ensures consistent visual representation of priority-driven lists and panels across the entire application interface.

Yes, you can compose existing shadcn/ui primitives, but you should keep the base shadcn/ui components untouched. The guide establishes clear rules for when to create composites versus composing existing primitives to prevent component fragmentation.

Apply design tokens and Tailwind tokens by using CSS-variable token usage conventions for spacing, radius, and shadows. This enforces design system alignment and ensures new UI matches the application's look and behavior.

Your layout feels inconsistent if it ignores the app's established three-zone layout rules and component tier conventions. Apply the standardized layout patterns to ensure features feel native to the control plane interface.

Yes, you need Radix, CVA, and classname utility conventions to build consistent TypeScript UI components. The design system requires adherence to these specific utility conventions to maintain proper component composition and styling standards.