Summary
The cloud agent UI (KiloClaw) uses subtle yellow accents to reinforce the Kilo brand. This same yellow treatment should be applied to the active/selected navigation item in app.kilo.ai to create a consistent brand experience across both surfaces.
Problem
Currently, the selected/active state of sidebar and navigation menu items in app.kilo.ai uses a neutral surface.selected treatment. This misses an opportunity to reinforce the primary Kilo yellow as the brand's signature accent color — the same subtle yellow tones already used in the cloud agent UI.
Proposed Change
Apply the primary yellow color token (or a suitably subtle yellow-tinted surface.selected variant) to the active/selected navigation menu item in app.kilo.ai, matching the brand accent pattern established in the cloud agent.
Acceptance Criteria
- Active/selected sidebar or nav menu items in app.kilo.ai use a yellow-accented selected state (e.g. a subtle yellow background tint or a yellow left-border indicator) consistent with the primary brand yellow.
- The treatment aligns with how subtle yellows are used in the cloud agent UI.
- The yellow accent is applied only to the active item indicator — it is not used as body text, link text, or decorative border per existing constraints.
- The change is covered by a Storybook story or component test for the updated nav item state.
Summary
The cloud agent UI (KiloClaw) uses subtle yellow accents to reinforce the Kilo brand. This same yellow treatment should be applied to the active/selected navigation item in app.kilo.ai to create a consistent brand experience across both surfaces.
Problem
Currently, the selected/active state of sidebar and navigation menu items in app.kilo.ai uses a neutral
surface.selectedtreatment. This misses an opportunity to reinforce the primary Kilo yellow as the brand's signature accent color — the same subtle yellow tones already used in the cloud agent UI.Proposed Change
Apply the primary yellow color token (or a suitably subtle yellow-tinted
surface.selectedvariant) to the active/selected navigation menu item in app.kilo.ai, matching the brand accent pattern established in the cloud agent.Acceptance Criteria