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

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 */