#1
Raycast AI
Your personal AI assistant built directly into your workflow
Raycast AI
Your personal AI assistant built directly into your workflow
💬 89 comments
Featured
Skeleton State
Change Log
| Change | Before | After | Principle |
|---|---|---|---|
| Upvote button | Plain border box, PH-orange arrow, no hover state — hard to Fitts-target, no affordance cue | 52×52px contained button with accent fill tint + border; hover intensifies — primary action prominent | operating-principles §7 (Fitts — primary action large); quality-gates Gate 4 (idle/hover/focus states) |
| Product name hierarchy | Name as block link at 16px — competes visually with tagline below it | h2 at --text-lg (19px) bold + tagline at --text-sm muted — one clear scan path | operating-principles §1 (focal point — name is the primary); operating-principles §3 (legibility scale) |
| Rank indicator | No rank shown — listing position implicit from page order only | #1 muted label left of thumbnail — rank immediately scannable on any viewport | operating-principles §2 (context that changes a decision); rules/11-data-tables.md → rank column first |
| Topics | Grey filled pills — no hover, decorative weight equal to comments count | Border-only pills in footer; accent hover — clear secondary zone, interaction hint | operating-principles §5 (colour with purpose); quality-gates Gate 4 (hover state) |
| Meta row | Comments count and Featured badge in right column — disconnected from content | Footer row: topics left, meta (comments · by · badge) right — one coherent secondary band | operating-principles §2 (one focal point per zone — footer = all meta) |
| Dark mode | Hardcoded #fff + #292929 + #ff6154 — breaks in dark mode; Before kept light-only (faithful) | OKLCH tokens throughout; upvote uses relative color syntax from --color-accent | quality-gates Gate 6 (dark mode required) |
Token Legend
| Token | Light | Dark | Used for |
|---|---|---|---|
| --color-bg | oklch(96% 0.004 258) | oklch(13% 0.010 258) | Page background, skeleton shimmer midpoint |
| --color-surface | oklch(100% 0 0) | oklch(17% 0.010 258) | Card background |
| --color-border | oklch(90% 0.006 258) | oklch(26% 0.010 258) | Card border, topic pills, thumbnail border |
| --color-text | oklch(17% 0.012 258) | oklch(94% 0.004 258) | Product name |
| --color-text-secondary | oklch(42% 0.012 258) | oklch(72% 0.008 258) | Tagline |
| --color-text-muted | oklch(60% 0.008 258) | oklch(55% 0.006 258) | Rank number, topic pill text, meta row (comments, by) |
| --color-accent | oklch(52% 0.20 258) | oklch(65% 0.20 258) | Upvote button (fill/border/text), name hover, topic hover, focus rings |