Designing for the second read
Most interfaces are tuned for the first ten seconds. The ones worth keeping are built for the tenth visit.
Read more →提示
只有第一篇配封面，其余纯文字；侧栏靠计数撑起存在感，而不是靠装饰。
Build a personal blog with a two-column layout.
STYLE
- Very light grey-blue page (#f1f4f9), white cards, 1px hairline borders, 6px radius
- Body text #5b6470 on white, headings #21242a, meta text in a lighter grey
- One accent colour (blue #3273dc) for links, active nav, active page number, buttons
- Flat surfaces, 1-2px shadows only; no gradients except cover art
LAYOUT
- Navbar: rounded square wordmark + site name, menu (Home / Archives / Categories / Tags / About), search and RSS icons on the right
- Body: two columns — main stream at 2fr, sidebar at 1fr
- Main: four post cards stacked, the first with a full-width cover strip
- Main ends with a pager: Previous, page numbers with an ellipsis, Next
- Sidebar: profile widget, then categories, recents, tags
- Footer: copyright on the left, RSS / Email / Back to top on the right
COMPONENTS
- Post card: optional cover, title, meta line (posted date · category · read time), two-line excerpt, "Read more →"
- Profile widget: circular avatar, author name, role and location, short bio, Posts / Categories / Tags counts, Follow button, four social dots
- Categories widget: four rows, each a label with a pill-shaped count
- Recents widget: three rows, each a small thumbnail + date + two-line title
- Tags widget: eight pills on a soft accent background
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui