Skeleton State
Change Log
ChangeBeforeAfterPrinciple
Status visibility Status conveyed by a green SVG icon only — icon meaning requires prior knowledge of GitHub "● Open" pill with text label + colour — status legible without context operating-principles §4 (status must be text, not icon alone)
Branch info Inline in meta row as monospace code — buried after PR number and author Isolated branch row in card header: feat/sidebar → main — reads as a navigation path operating-principles §2 (one focal point per zone — header = status + routing)
Labels Raw hex colours in HTML style attributes — no token system; all labels same visual weight OKLCH semantic colours by label type (bug/feature/review); pill border-only — hierarchy by type operating-principles §5 (colour with purpose); rules/labels.md → semantic label colours
Assignees 20px avatar thumbnails stacked right — identity visible only on hover; no names Avatar (24px) + name inline — identity readable at a glance operating-principles §3 (show the person, not just the icon)
Action affordance No action in list item — must navigate to the PR page to begin review "Review →" button in footer — primary action reachable from the list rules/14-landing-pages.md → CTA formula (specific label, primary visual weight)
Dark mode None — raw hex colours (#24292f, #0969da, #d0d7de) not themeable OKLCH tokens + dark-mode overrides for status badge, labels, and all colours quality-gates Gate 6 (dark mode required)
Token Legend
TokenLightDarkUsed for
--color-bgoklch(96% 0.004 258)oklch(13% 0.010 258)Page background, skeleton shimmer midpoint
--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, header/footer dividers, branch pill border
--color-textoklch(17% 0.012 258)oklch(94% 0.004 258)PR title
--color-text-secondaryoklch(42% 0.012 258)oklch(72% 0.008 258)Assignee names
--color-text-mutedoklch(60% 0.008 258)oklch(55% 0.006 258)PR number, branch text, time, dots
--color-accentoklch(52% 0.20 258)oklch(65% 0.20 258)Toggle active, Review button, focus rings, enhancement label
--color-successoklch(45% 0.15 145)oklch(70% 0.12 145)Open status pill text, CI check text, second assignee avatar
--color-success-bgoklch(56% 0.17 145 / 0.12)oklch(56% 0.17 145 / 0.15)Open status pill background, second assignee avatar background