trellis-visual-guidance

To maintain consistent UI styling, apply existing design system color tokens through Tailwind utility classes rather than custom CSS, ensuring brand harmony across frontend components, canvas views, badges, and sidebars.

For dimensions, use green Tailwind styling like bg-green-100 and text-green-700 with the lucide:list icon. For facts, apply blue styling such as bg-blue-100 and text-blue-700 using the lucide:bar-chart-3 icon.

Multi-color and rainbow gradients are discouraged in design system UI components. You should prefer solid colors or subtle single-color gradients to maintain visual consistency and brand harmony across all interface elements.

You should avoid introducing new color tokens unless explicitly required by an existing design system. Reuse the established brand palette to ensure color, typography, and component consistency across all frontend work.

The best way to ensure visual consistency is to apply unified color tokens, icon styles, and Tailwind utility classes across all visual elements including canvas, sidebars, badges, and lists within your design system workflow.

Preferring Tailwind utility classes over custom CSS for UI styling ensures that components adhere to standardized design tokens, preventing visual drift and maintaining brand harmony throughout the development workflow.