Refined based on feedback: shadow lift focus, very light blue selection, no rounded corners, white page
Shadow lift is classy. Testing subtle variations — pure shadow vs adding a barely-there ring.
shadow: 0 2px 8px rgba(0,0,0,0.10), inset ring rgba(0,0,0,0.04)
Normal
"I found the onboarding really confusing."
Focused
"Once I got it, it was actually intuitive."
shadow + 1px solid rgba(0,0,0,0.06)
Normal
"I found the onboarding really confusing."
Focused
"Once I got it, it was actually intuitive."
shadow + 1px solid rgba(0,0,0,0.10)
Normal
"I found the onboarding really confusing."
Focused
"Once I got it, it was actually intuitive."
shadow + 1px solid #e0e0e0
Normal
"I found the onboarding really confusing."
Focused
"Once I got it, it was actually intuitive."
0 3px 12px rgba(0,0,0,0.12) + inset ring
Normal
"I found the onboarding really confusing."
Focused
"Once I got it, it was actually intuitive."
Unfocused: #fafafa bg, Focused: #fff + shadow
Normal (tinted)
"I found the onboarding really confusing."
Focused (white)
"Once I got it, it was actually intuitive."
Very light blue for selection (not Google-strong). Testing subtle variations.
--selection-bg: #f0f7ff
Normal
"I found the onboarding confusing."
Selected
"Once I got it, it was intuitive."
Focused + Selected
"I'd recommend this to my team."
--selection-bg: #f5f9ff
Normal
"I found the onboarding confusing."
Selected
"Once I got it, it was intuitive."
Focused + Selected
"I'd recommend this to my team."
--selection-bg: #f8fbff
Normal
"I found the onboarding confusing."
Selected
"Once I got it, it was intuitive."
Focused + Selected
"I'd recommend this to my team."
--selection-bg: #f2f6fc
Normal
"I found the onboarding confusing."
Selected
"Once I got it, it was intuitive."
Focused + Selected
"I'd recommend this to my team."
Full scenarios with starred, selected, and focused quotes together.
F3 focus (shadow + rgba 0.10 ring) + S1 selection (#f0f7ff)
"I found the onboarding really confusing at first. The buttons weren't where I expected."
"Once I figured it out, it was actually pretty intuitive. I like how everything flows."
"I'd definitely recommend this to my team. We've been looking for something like this."
"The pricing page was a bit confusing though. I wasn't sure which tier we needed."
F1 focus (pure shadow, no ring) + S2 selection (#f5f9ff)
"I found the onboarding really confusing at first. The buttons weren't where I expected."
"Once I figured it out, it was actually pretty intuitive. I like how everything flows."
"I'd definitely recommend this to my team. We've been looking for something like this."
"The pricing page was a bit confusing though. I wasn't sure which tier we needed."
F6 focus (unfocused cards #fafafa, focused #fff) + S3 selection (#f8fbff)
"I found the onboarding really confusing at first. The buttons weren't where I expected."
"Once I figured it out, it was actually pretty intuitive. I like how everything flows."
"I'd definitely recommend this to my team. We've been looking for something like this."
"The pricing page was a bit confusing though. I wasn't sure which tier we needed."
Tag suggestions and view switcher use selection colour for keyboard navigation highlight.
View Switcher (S1: #f0f7ff)