design-guide

Maintain consistent UI typography and status badges by enforcing an exact typography scale and unified status/priority conventions using StatusBadge, StatusIcon, and PriorityIcon patterns. This prevents visual drift by standardizing component composition without one-off styling.

Standardize design tokens for light and dark mode using Tailwind CSS v4 by applying semantic CSS variable tokens in OKLCH format. This approach standardizes colors, radius, shadows, and data viz tokens to ensure consistent styling across both theme modes.

Yes, React 19 with TypeScript is required, alongside Tailwind CSS v4 and shadcn/ui Radix patterns. These provide the foundational environment needed to apply semantic CSS variable tokens and standardize component conventions correctly.

The best way to compose layouts like entity rows, property rows, metric cards, and log viewers without one-off styling is to follow established component composition conventions. These rules guide how to create or extend components while matching control-plane patterns.

Update the design-guide showcase page whenever you create new React components, modify existing UI, add pages, or design interactions that must match control-plane conventions. This ensures the showcase accurately reflects the current component patterns and tokens.