Focus & Selection v2 — Bristlenose

# Focus & Selection v2

Refined based on feedback: shadow lift focus, very light blue selection, no rounded corners, white page

## Focus: Shadow Lift Variants

Shadow lift is classy. Testing subtle variations — pure shadow vs adding a barely-there ring.

### F1. Pure Shadow

`shadow: 0 2px 8px rgba(0,0,0,0.10), inset ring rgba(0,0,0,0.04)`

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

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

— p1

### F2. Shadow + Whisper Ring

`shadow + 1px solid rgba(0,0,0,0.06)`

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

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

— p1

### F3. Shadow + Subtle Ring

`shadow + 1px solid rgba(0,0,0,0.10)`

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

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

— p1

### F4. Shadow + Light Grey Ring

`shadow + 1px solid #e0e0e0`

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

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

— p1

### F5. Stronger Shadow

`0 3px 12px rgba(0,0,0,0.12) + inset ring`

Normal

[02:34]

"I found the onboarding really confusing."

— p1

Focused

[05:12]

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

— p1

### F6. Unfocused Cards Tinted

`Unfocused: #fafafa bg, Focused: #fff + shadow`

Normal (tinted)

[02:34]

"I found the onboarding really confusing."

— p1

Focused (white)

[05:12]

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

— p1

## Selection: Light Blue Variants

Very light blue for selection (not Google-strong). Testing subtle variations.

### S1. 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."

### S2. Lighter Blue

`--selection-bg: #f5f9ff`

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."

### S3. Barely-There Blue

`--selection-bg: #f8fbff`

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."

### S4. Warm-ish Blue

`--selection-bg: #f2f6fc`

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."

### S5. Blue Left Bar

`3px accent bar + subtle bg #fafbfc`

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."

### S6. Left Bar + Light Blue

`3px accent bar + light blue #f5f9ff`

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: Realistic Quote Lists

Full scenarios with starred, selected, and focused quotes together.

### Recommended: Shadow + Subtle Ring + Light Blue

F3 focus (shadow + rgba 0.10 ring) + S1 selection (#f0f7ff)

[02:34]

"I found the onboarding really confusing at first. The buttons weren't where I expected."

— p1 confusion
[05:12]

"Once I figured it out, it was actually pretty intuitive. I like how everything flows."

— p1 satisfaction
[08:45]

"I'd definitely recommend this to my team. We've been looking for something like this."

— p1 confidence
[12:03]

"The pricing page was a bit confusing though. I wasn't sure which tier we needed."

— p1 doubt

### Alternative: Pure Shadow + Lighter Blue

F1 focus (pure shadow, no ring) + S2 selection (#f5f9ff)

[02:34]

"I found the onboarding really confusing at first. The buttons weren't where I expected."

— p1 confusion
[05:12]

"Once I figured it out, it was actually pretty intuitive. I like how everything flows."

— p1 satisfaction
[08:45]

"I'd definitely recommend this to my team. We've been looking for something like this."

— p1 confidence
[12:03]

"The pricing page was a bit confusing though. I wasn't sure which tier we needed."

— p1 doubt

### Alternative: Shadow + Left Bar

F3 focus (shadow + subtle ring) + S5 selection (left bar + #fafbfc)

[02:34]

"I found the onboarding really confusing at first. The buttons weren't where I expected."

— p1 confusion
[05:12]

"Once I figured it out, it was actually pretty intuitive. I like how everything flows."

— p1 satisfaction
[08:45]

"I'd definitely recommend this to my team. We've been looking for something like this."

— p1 confidence
[12:03]

"The pricing page was a bit confusing though. I wasn't sure which tier we needed."

— p1 doubt

### Experiment: Tinted Cards + Whisper Blue

F6 focus (unfocused cards #fafafa, focused #fff) + S3 selection (#f8fbff)

[02:34]

"I found the onboarding really confusing at first. The buttons weren't where I expected."

— p1 confusion
[05:12]

"Once I figured it out, it was actually pretty intuitive. I like how everything flows."

— p1 satisfaction
[08:45]

"I'd definitely recommend this to my team. We've been looking for something like this."

— p1 confidence
[12:03]

"The pricing page was a bit confusing though. I wasn't sure which tier we needed."

— p1 doubt

## Dropdowns: Keyboard Highlight

Tag suggestions and view switcher use selection colour for keyboard navigation highlight.

View Switcher (S1: #f0f7ff)

All quotes
Starred quotes
Participant data
S2: #f5f9ff
All quotes
Starred quotes
Participant data
S3: #f8fbff
All quotes
Starred quotes
Participant data