| Change | Before | After | Principle |
|---|---|---|---|
| Install command | No install snippet shown — user must already know the command | Inline code block "$ npm install express" + Copy button — action available in the card | rules/14-landing-pages.md → CTA formula (action affordance at point of decision) |
| Download stats | "33,450,924 weekly downloads" — raw number buried in grey text row | 3-stat grid (downloads / dependents / stars) — values large, labels small, scannable | operating-principles §1 (focal point); rules/11-data-tables.md → key metric first |
| Licence display | Inline grey text "MIT" — same visual weight as version number | Green pill badge — open-source licence instantly recognisable as trust signal | operating-principles §5 (colour with purpose); rules/14-landing-pages.md → trust signals |
| Keywords | Grey-filled square chips — decorative, no hover affordance | Border-only pills in footer; accent colour on hover — secondary info with interaction hint | operating-principles §5 (colour with purpose); quality-gates Gate 4 (hover state) |
| Maintainers | Plain text "dougwilson · wesleytodd · +47" — no visual identity | Avatar (initials) + primary maintainer name + "+47 more" — human face on the package | operating-principles §3 (show the person, not just the name) |
| Dark mode | Hardcoded #fff + #24292e — breaks in dark mode; Before state kept light-only (faithful) | OKLCH tokens throughout After state; success token handles licence badge in both modes | quality-gates Gate 6 (dark mode required) |
| 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, stat cell background |
| --color-border | oklch(90% 0.006 258) | oklch(26% 0.010 258) | Card border, stat grid dividers, install block, keyword pills |
| --color-text | oklch(17% 0.012 258) | oklch(94% 0.004 258) | Package name, stat values, install command |
| --color-text-secondary | oklch(42% 0.012 258) | oklch(72% 0.008 258) | Description, maintainer name |
| --color-text-muted | oklch(60% 0.008 258) | oklch(55% 0.006 258) | Version pill, stat labels, keywords, "+N more", $ prompt |
| --color-accent | oklch(52% 0.20 258) | oklch(65% 0.20 258) | Name hover, copy button, keyword hover, avatar bg, focus rings |
| --color-success | oklch(45% 0.15 145) | oklch(70% 0.12 145) | MIT licence badge text |
| --color-success-bg | oklch(56% 0.17 145 / 0.12) | oklch(56% 0.17 145 / 0.15) | MIT licence badge background |