TrueGrowth/openspec/changes/refactor-truegrowth-ui-system/specs/ui-design-system/spec.md

ADDED Requirements

Requirement: App UI SHALL Use A Local TrueGrowth UI Entry

New customer-facing app UI SHALL import reusable primitives from the local @/ui entry so that controls, overlays, cards, tables, forms, and feedback states share one visual system.

Scenario: New app page needs controls

• WHEN a new app page needs buttons, inputs, dialogs, drawers, tabs, cards, tables, badges, progress, or empty states
• THEN it SHALL use components from @/ui
• AND it SHALL NOT create page-local replacements for those primitives

Scenario: Component needs brand emphasis

• WHEN a component needs a primary action, selected state, or focus ring
• THEN it SHALL use TrueGrowth orange tokens
• AND it SHALL NOT introduce blue primary actions or hard-coded primary colors

Requirement: AI Image Page SHALL Be The Golden UI Reference

The AI image-generation page at /image SHALL be the concrete golden UI reference for TrueGrowth page layout, component density, media/result presentation, hover actions, loading states, failed states, popovers, dialogs, and light/dark styling.

Scenario: Contributor designs or refactors a page

• WHEN a contributor designs or refactors a navigation-entered page, dialog, drawer, or popover
• THEN they SHALL compare the result against the /image golden page standard in docs/TRUEGROWTH_GOLDEN_IMAGE_PAGE_UI.md
• AND they SHALL preserve the same orange accent, quiet surfaces, compact controls, single-surface inputs, and browser-verified polish

Scenario: Contributor changes a generator page

• WHEN a contributor changes a generator page such as AI video, digital human, music, image editing, or batch creation
• THEN the page SHALL use the /image split layout pattern with a full-height left creation panel and right task/result feed
• AND generated media SHALL be grouped by batch, displayed at its real ratio, and expose secondary actions through hover or compact menus

Scenario: Contributor changes a dialog or popover

• WHEN a contributor changes settings, model, parameter, knowledge, picker, or action dialogs
• THEN the surface SHALL use the same radius, light/dark surfaces, orange focus states, and single-layer input treatment as /image
• AND it SHALL NOT introduce stacked white input wrappers or unrelated component-library styling

Requirement: New App UI SHALL Use Lucide Icons

New app UI SHALL use lucide-react for icons so icon size, stroke, and visual weight remain consistent.

Scenario: New action button needs an icon

• WHEN a new action button, nav item, toolbar item, or empty state needs an icon
• THEN it SHALL import an icon from lucide-react
• AND it SHALL NOT import from tdesign-icons-react

Requirement: TDesign SHALL Be Legacy Compatibility Only

TDesign SHALL remain only as a temporary compatibility boundary for old Drawnix/opentu surfaces while visible UI is migrated to the TrueGrowth UI system.

Scenario: New app code is added

• WHEN a new app page or component is added under apps/web/src
• THEN it SHALL NOT import tdesign-react
• AND it SHALL use @/ui primitives instead