Design Philosophy
This System Is
Typography-first: a custom KaiTi (楷体) typeface defines the visual identity.
Chinese-native: CJK-aware spacing, punctuation, and line-breaking via 赫蹏 (heti).
Clean reading: high contrast, generous 1.7 line-height, 864px max-width on content.
Quietly warm: a single brown/copper accent (#a67c52) on white — no loud colors.
Dark mode native: full light/dark scheme using @media (prefers-color-scheme: dark).
Utility-powered: built on Tailwind CSS, extended with custom properties.
This System Is Not
No Latin serif fonts — KaiTi serves as the distinctive voice for both Latin and CJK.
No heavy shadows — shadow-md is the maximum. Cards use borders, not elevation.
No color beyond the warm brown accent + blue links (#1d9bf0).
No animations over 0.2s — snappy transitions only.
No external icon fonts — all icons are inline SVGs.
No pure black text — #262626 is the darkest tone used.
Color Palette
| Token | Light | Dark | Role |
|---|---|---|---|
| --theme-bg | #ffffff | #21262b | Page background |
| --theme-accent | #a67c52 | #e8a15a | Accent, links on hover |
| --theme-text | #262626 | #e7e9ea | Primary text |
| --theme-divider | #e6e6e6 | #555555 | Borders, hr |
| link | #1d9bf0 | #58a6ff | Hyperlinks in prose |
| text-secondary | #6b7280 | #9ca3af | Muted text, captions |
| code-bg | #1f2937 | #161b22 | Code block background |
| code-text | #e5e7eb | #e5e7eb | Code block text |
Typography
封面图拍摄于上一个周末在小河公园拍到的一座有质感的建筑，刚好阳光非常好，绿树搭一起很好看。 这是正文段落的样张，超链接为蓝色，字间距 0.5px，行高 1.75。
这是辅助文字 · 14px · #6b7280 · 用于描述、注释、侧边栏链接。
| Element | Font | Size | Weight | Line-height |
|---|---|---|---|---|
| Body | LXGW WenKai | 16px | 400 | 1.7 |
| Small / Sidebar | LXGW WenKai | 14px | 400 | 1.6 |
| h1 (prose) | LXGW WenKai | 2.25em | 800 | 1.11 |
| h2 (prose) | LXGW WenKai | 1.5em | 700 | 1.33 |
| h3 (prose) | LXGW WenKai | 1.25em | 600 | 1.6 |
| Code | SF Mono / Consolas | 14px | 400 | 1.6 |
核心字体：霞鹜文楷 (LXGW WenKai) — 从 CDN (jsDelivr) 分片加载 WOFF2 Web Font，回退至 STKaiti → KaiTi → system-ui。
字体渲染使用 subpixel-antialiased（非 macOS 默认的 antialiased），在中低分辨率屏幕上文字更清晰锐利。
Spacing
| Token | Value | Equivalent Tailwind Class |
|---|---|---|
| --space-1 | 4px | p-1 / gap-1 |
| --space-2 | 8px | p-2 / gap-2 |
| --space-3 | 12px | — (custom) |
| --space-4 | 16px | p-4 / gap-4 |
| --space-5 | 20px | p-5 / gap-5 |
| --space-6 | 24px | p-6 / gap-6 |
| --space-8 | 32px | p-8 / gap-8 |
| --doc-padding | 32px | px-8 |
| p margin-block | 28px | my-7 |
Layout
| Pattern | Approach | Details |
|---|---|---|
| Page shell | CSS Grid two-column | Sidebar (240px) + Main content. Stacks at 768px. |
| Sidebar | position: sticky | Full-height navigation, dense issue archive (268 links) |
| Content area | max-width: 864px | Centered, 16px mobile padding |
| Navbar | 96px height | Logo, search, navigation groups |
| Prose | max-width: 65ch | Tailwind .prose class with CJK enhancements |
| Card grid | CSS Grid 2-4 cols | Responsive: 2@md, 3@lg, 4@xl |
| Breakpoint | Min-width | Behavior |
|---|---|---|
| sm | 640px | Sidebar collapses, content gets mobile padding |
| md | 768px | Two-column layout, card grids (2 cols) |
| lg | 1080px | Wider content (64rem), card grids (3 cols) |
| xl | 1412px | Max width 80rem, card grids (4 cols) |
Cards & Pills
Pills / Tags:
Dense sidebar nav (simulating the 268-issue archive):
Motion & Transitions
| Element | Property | Duration | Easing |
|---|---|---|---|
| All links | color | 0.2s | ease |
| Sidebar nav links | color, background | 0.2s | ease |
| Pills | border-color, color | 0.2s | ease |
| Tailwind utilities | color, bg, border, shadow, opacity | 150ms | cubic-bezier(.4,0,.2,1) |
| Page scroll | scroll-behavior: smooth | — | smooth |
Rule: Transitions are fast (0.15–0.2s) and limited to color/background/border changes. No opacity fades, no transform animations, no motion for motion's sake.
Dark Mode
This page renders differently depending on your OS setting. Toggle between light and dark mode in your system preferences to see the full palette. Key changes:
| Property | Light | Dark |
|---|---|---|
| Background | #ffffff | #21262b |
| Text | #262626 | #e7e9ea |
| Accent | #a67c52 | #e8a15a (warmer, brighter) |
| Dividers | #e6e6e6 | #555555 |
| Links | #1d9bf0 | #58a6ff |
| Card bg | #f9f9f9 | #2a2f35 |
| Code bg | #1f2937 | #161b22 |
Anti-Patterns
Use When
Chinese-first content websites, personal blogs, weekly newsletters
Projects that want a literary, refined reading experience
Static sites that need light/dark mode without a JS toggle
Content-heavy pages with sidebar navigation and dense archives
Avoid When
Data-dense dashboards or admin panels (wrong font, wrong density)
English-only content (KaiTi Latin glyphs are unconventional for body text)
Projects that can't load external font files (8MB+ total across subsets)
Highly interactive web apps needing rich component libraries
| Avoid | Use Instead |
|---|---|
| Pure black (#000) text | #262626 (light) or #e7e9ea (dark) |
| Bold weight on body text | 400 throughout; headings scale to 800 |
| Heavy box shadows | Subtle Tailwind shadow / shadow-md, or none |
| More than 2 accent colors | Warm brown for hover/accent + blue for links |
| Transitions over 0.2s | 150-200ms max; color-only transitions |
| External icon fonts | Inline SVG or Unicode characters |
| JavaScript-dependent dark mode toggle | @media (prefers-color-scheme: dark) |
| System sans-serif for Chinese body text | KaiTi (楷体) for a literary, refined voice |