Focus & Selection Visual Experiments — Bristlenose

# Focus & Selection Visual Experiments

Exploring interactive state styling for Bristlenose keyboard navigation

## Page Background Tint

A subtle tint allows focused/selected elements to "lift" with white backgrounds.

## A. No Tint (Current)

--page-bg: #ffffff

[02:34]

"I found the onboarding really confusing at first."

— p1 confusion
[05:12]

"Once I got it, it was actually pretty intuitive."

— p1 satisfaction

## B. Very Subtle

--page-bg: #fafafa

[02:34]

"I found the onboarding really confusing at first."

— p1 confusion
[05:12]

"Once I got it, it was actually pretty intuitive."

— p1 satisfaction

## C. Slightly Visible

--page-bg: #f7f7f8

[02:34]

"I found the onboarding really confusing at first."

— p1 confusion
[05:12]

"Once I got it, it was actually pretty intuitive."

— p1 satisfaction

## D. Noticeable (Notion-like)

--page-bg: #f3f4f6

[02:34]

"I found the onboarding really confusing at first."

— p1 confusion
[05:12]

"Once I got it, it was actually pretty intuitive."

— p1 satisfaction

## Focus Ring Styles

The focus ring indicates keyboard position (cursor). Should be distinct but not heavy.

## A. Blue Ring (Google style)

2px solid accent, 2px offset

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

"Once I got it, it was actually intuitive."

— p1

## B. Grey Ring

2px solid grey, 2px offset

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

"Once I got it, it was actually intuitive."

— p1

## C. Thin Dark Ring

1.5px solid dark grey, 1px offset

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

"Once I got it, it was actually intuitive."

— p1

## D. Shadow Lift (no ring)

White bg + shadow elevation

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

"Once I got it, it was actually intuitive."

— p1

## E. Blue Ring + White Lift

Ring + white bg + subtle shadow

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

"Once I got it, it was actually intuitive."

— p1

## Selection Styles (for future multi-select)

Selection indicates items in the operand set for bulk actions. Distinct from focus.

## A. Light Blue Fill (Google)

--selection-bg: #e8f0fe

Normal

[02:34]

"I found the onboarding confusing."

Selected

[05:12]

"Once I got it, it was intuitive."

Focused + Selected

[08:45]

"I'd recommend this to my team."

## B. Very Light Blue

--selection-bg: #f0f7ff

Normal

[02:34]

"I found the onboarding confusing."

Selected

[05:12]

"Once I got it, it was intuitive."

Focused + Selected

[08:45]

"I'd recommend this to my team."

## C. Light Grey

--selection-bg: #f3f4f6

Normal

[02:34]

"I found the onboarding confusing."

Selected

[05:12]

"Once I got it, it was intuitive."

Focused + Selected

[08:45]

"I'd recommend this to my team."

## D. Blue Left Bar (Notion-like)

3px left border accent

Normal

[02:34]

"I found the onboarding confusing."

Selected

[05:12]

"Once I got it, it was intuitive."

Focused + Selected

[08:45]

"I'd recommend this to my team."

## Combined Scenarios

Realistic quote lists showing how states work together with starred quotes.

## Google Style

Blue ring focus + blue selection + visible tint

[02:34]

"I found the onboarding really confusing at first."

— p1 confusion
[05:12]

"Once I got it, it was actually pretty intuitive."

— p1 satisfaction
[08:45]

"I'd definitely recommend this to my team."

— p1 confidence
[12:03]

"The pricing page was a bit confusing though."

— p1 doubt

## Shadow Lift

Shadow focus + grey selection + strong tint

[02:34]

"I found the onboarding really confusing at first."

— p1 confusion
[05:12]

"Once I got it, it was actually pretty intuitive."

— p1 satisfaction
[08:45]

"I'd definitely recommend this to my team."

— p1 confidence
[12:03]

"The pricing page was a bit confusing though."

— p1 doubt

## Minimal + Left Bar

Thin ring focus + left bar selection + subtle tint

[02:34]

"I found the onboarding really confusing at first."

— p1 confusion
[05:12]

"Once I got it, it was actually pretty intuitive."

— p1 satisfaction
[08:45]

"I'd definitely recommend this to my team."

— p1 confidence
[12:03]

"The pricing page was a bit confusing though."

— p1 doubt

## Dropdown Menus

Tag suggestions, view switcher, and other dropdowns need consistent keyboard highlight styles.

## A. Blue Highlight

Keyboard nav uses selection colour

All quotes
Starred quotes
Participant data

### Tag Suggestions

usability
user-feedback
ux-issue

## B. Grey Highlight

More subtle keyboard highlight

All quotes
Starred quotes
Participant data

### Tag Suggestions

usability
user-feedback
ux-issue

## C. Very Light Blue

Gentler blue tint

All quotes
Starred quotes
Participant data

### Tag Suggestions

usability
user-feedback
ux-issue

## Token Summary

Proposed additions to `tokens.css` for interactive states.

    /* Interactive state tokens — add to tokens.css */

    /* Page background tint (enables lift effect) */
    --bn-colour-surface-page:     light-dark(#f7f7f8, #141414);
    --bn-colour-surface-card:     light-dark(#f9fafb, #1a1a1a);   /* current quote bg */
    --bn-colour-surface-elevated: light-dark(#ffffff, #242424);   /* focused/lifted */

    /* Hover (very subtle) */
    --bn-colour-hover-bg:         light-dark(#f5f5f5, #1f1f1f);

    /* Focus ring (keyboard cursor indicator) */
    --bn-colour-focus-ring:       var(--bn-colour-accent);        /* or grey variant */
    --bn-focus-ring-width:        2px;
    --bn-focus-ring-offset:       2px;

    /* Selection (multi-select operand set) */
    --bn-colour-selection-bg:     light-dark(#e8f0fe, #1a365d);   /* Google blue */
    /* OR */
    --bn-colour-selection-bg:     light-dark(#f3f4f6, #262626);   /* neutral grey */

    /* Keyboard highlight in dropdowns */
    --bn-colour-highlight-bg:     var(--bn-colour-selection-bg);  /* reuse selection */