Skip to content

feat(web): use primary yellow for active/selected navigation item in app.kilo.ai #4195

Description

@jeanduplessis

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions