Skeleton State
Change Log
ChangeBeforeAfterPrinciple
Layout HTML <table> with colspan rows; no semantic structure Flexbox <article>, semantic <h2> for title operating-principles §1 (semantic structure first)
Typography Times New Roman 10pt on #f6f6ef; rank, title, meta at same visual weight System sans-serif; title at --text-lg (19px) bold, meta at --text-sm (13px) muted operating-principles §3 (legibility scale)
Vote widget Single grey ▲ triangle; score buried in 7pt meta text row below title [▲ score ▼] contained group, left-aligned, 44px touch targets each operating-principles §7 (Fitts — primary action large); quality-gates Gate 4 (all interactive states: idle/hover/focus)
Domain display Plain "(github.com)" in parentheses, 8pt grey — source unclear until you read it Domain pill above title — source credibility established before reading operating-principles §2 (one focal point per zone)
Colour system Raw hex (#f6f6ef, #ff6600, #828282) — not themeable OKLCH custom properties; dark mode via @media (prefers-color-scheme: dark) operating-principles §5 (colour system with purpose); quality-gates Gate 6 (dark mode)
Share action No share affordance Share button in meta row, min-height 44px, focus ring rules/14-landing-pages.md → action affordance in every card
Token Legend
TokenLightDarkUsed for
--color-bgoklch(96% 0.004 258)oklch(13% 0.010 258)Page background
--color-surfaceoklch(100% 0 0)oklch(17% 0.010 258)Card background
--color-borderoklch(90% 0.006 258)oklch(26% 0.010 258)Card border, vote widget border, dividers
--color-textoklch(17% 0.012 258)oklch(94% 0.004 258)Title text
--color-text-secondaryoklch(42% 0.012 258)oklch(72% 0.008 258)Score, author name
--color-text-mutedoklch(60% 0.008 258)oklch(55% 0.006 258)Vote arrows, time, separator dots, header
--color-accentoklch(52% 0.20 258)oklch(65% 0.20 258)Toggle active, comment link, focus rings