gt-agent-company/openspec/changes/update-agent-index-layout-and-theme-tokens/specs/design-theme-tokens/spec.md

ADDED Requirements

Requirement: Project Brand Tokens SHALL Be Defined In One Theme Source

The project SHALL define its core layout brand palette in src/static/styles/theme.scss as the single source of truth. The core brand palette MUST be:

• Primary: #2F7D32
• Secondary: #1F2937
• Tertiary: #F4FBF5

Compatibility aliases and helper tokens MAY exist, but they MUST be declared from the same theme source and MUST NOT introduce unrelated page-local brand colors.

Scenario: Shared brand emphasis resolves from one source

• GIVEN a page or component uses shared brand emphasis such as text-brand, bg-brand, border-brand, UnoCSS theme colors, or uView primary-theme values
• WHEN the app renders those styles
• THEN they resolve from the palette defined in src/static/styles/theme.scss
• AND they do not define a separate hard-coded primary hex outside that theme source

Scenario: A core brand value changes

• GIVEN a developer updates one of the core brand values in src/static/styles/theme.scss
• WHEN the project rebuilds
• THEN shared brand utilities and theme consumers reflect the updated value without needing page-level color edits

Requirement: Layout-Level Brand Usage SHALL Consume Shared Tokens

Agent-facing pages and shared components SHALL use shared theme tokens for layout-level accents instead of page-local hard-coded brand hex values. Semantic success, warning, and error colors MAY remain for exceptional states, destructive actions, or state badges, but SHALL NOT be used as the default decorative palette for normal dashboard and card layouts.

Scenario: Agent-facing layout colors are reviewed

• GIVEN an agent-facing page or shared component is reviewed for colors
• WHEN it renders navigation states, buttons, highlight cards, decorative surfaces, and metric blocks
• THEN those layout accents use the primary, secondary, tertiary, or neutral theme tokens
• AND normal layout decoration does not depend on page-local blue, orange, purple, cyan, or red accent values

Scenario: Shared theme consumers remain aligned

• GIVEN src/uni.scss and uno.config.ts provide theme mappings for components and utilities
• WHEN they expose primary colors to downstream styles
• THEN they reference the shared theme source rather than maintaining independent brand values