Initial TrueGrowth source import

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

@@ -0,0 +1,59 @@
+## 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