Thumbnails
Five styles, one grammar. The grammar is what makes a row of them read as one channel; the style tells you which video it is. The five differ only in backdrop plus one device.
- Title bottom-left · 2–3 lines · ~34 characters max
- Exactly one accent word
- Kicker above it, slate voice, ≤ 3 words
- Channel mark under the title, same size every time
- Subject in the right ~36%, same rectangle
- Everything inside the 5.5% safe inset
.thumb__copy · .thumb__subject · .yt-kicker · .yt-title · .yt-hit · .yt-mark
- Video duration or a timestamp
- Category or tag chips
- View counts, dates, “NEW”
- The channel's full name as text
- A second accent colour
- More than one device (frame or dot, not both)
a second copy of the platform's own UI is what makes a thumbnail look homemade
16:9 still / cut-out
I rebuilt my site from nothing
Swarnıl01 · generic — the default. If a video doesn't obviously belong to another style, it's this one.
One query saved me 6 hours
Swarnıl02 · build / tutorial — blueprint grid + a code strip. For anything where a screen is the subject.
19.0402° E
I moved 4,000 miles to build this
Swarnıl03 · travel — horizon rule, coordinates, amber wash. The only style that spends the craft colour.
“Is Salesforce still worth learning in 2026?”
Swarnıl04 · Q&A — the question is the image. Asker's handle in slate, oversized quote mark, dotted field.
Shipping the theme, on stream
Swarnıl05 · live — scanlines, red vignette, LIVE tag. The only style that fills a block with the accent.
I rebuilt my site from nothing
One query saved me 6 hours
I moved 4,000 miles
“Still worth learning?”
Shipping it on stream
If the point doesn't survive here, the thumbnail is rejected — that's principle 1, and this row is the test.
same markup, 120px container — cqw means the type scales instead of breaking