847
| 1. | ▲ | Show HN: I built a tool that turns any terminal command into a web UI (github.com) |
| 847 points by devmaker42 3 hours ago | hide | 213 comments | ||
Skeleton State
Change Log
| Change | Before | After | Principle |
|---|---|---|---|
| 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
| Token | Light | Dark | Used for |
|---|---|---|---|
| --color-bg | oklch(96% 0.004 258) | oklch(13% 0.010 258) | Page background |
| --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, vote widget border, dividers |
| --color-text | oklch(17% 0.012 258) | oklch(94% 0.004 258) | Title text |
| --color-text-secondary | oklch(42% 0.012 258) | oklch(72% 0.008 258) | Score, author name |
| --color-text-muted | oklch(60% 0.008 258) | oklch(55% 0.006 258) | Vote arrows, time, separator dots, header |
| --color-accent | oklch(52% 0.20 258) | oklch(65% 0.20 258) | Toggle active, comment link, focus rings |