设计系统：构建统一的视觉语言
这是一个用于演示 PostEntry 组件的示例文章描述。设计系统不仅规范了 UI 元素，更重要的是传达了品牌的核心价值与设计哲学。
博客2.0
1 分钟
这个网站来来回回的改，终于改成了现在的这一版本，简简单单的风格。
设计系统
🎨
Design System
A minimalist visual language for storytelling.
Colors
Primary
--color-primary 页面背景 / 反转文本
Secondary
--color-secondary 主要文本 / 反转背景
Accent
--color-accent 品牌强调色 / 链接互动
Text Secondary
--color-text-secondary 次要信息 / 说明文本
Border
--color-border 边框 / 分割线
Background Card
--color-bg-card 卡片背景 / 模块区块
Typography
Serif (Headings & Body)
Noto Serif SC
永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭。
The quick brown fox jumps over the lazy dog.
Sans (UI & Meta)
System UI / Inter
用于界面元素、标签、导航和元数据展示。
123,456,789.00 (Tabular Nums)
4xl
36px
The quick brown fox rendering in 4xl
Page Title
3xl
32px
The quick brown fox rendering in 3xl
Section Header
2xl
28px
The quick brown fox rendering in 2xl
Article H1
xl
24px
The quick brown fox rendering in xl
Article H2 / Post Title
lg
20px
The quick brown fox rendering in lg
Article H3 / Subheader
md
18px
The quick brown fox rendering in md
Lead Paragraph
base
16px
The quick brown fox rendering in base
Body Copy
sm
14px
The quick brown fox rendering in sm
Meta Info / UI Label
UI Components
Post List Item
Interactive Elements
Tags & Badges
# Life # Technology # Reading New
Prose Context
Typography in Article Context
The purpose of a design system is not just consistency, but cadence. Good typography creates a rhythm that guides the reader through the narrative.
Section Header (H2)
This is a standard paragraph showing how the body text flows. It should have a comfortable
line-height (usually 1.6 to 1.8) and a readable max-width. We use var(--reading-width) to constrain line length.
Design is intelligence made visible.
— Alina Wheeler
Subsection (H3)
Lists are crucial for breaking down information:
- Clarity: Easy to scan.
- Hierarchy: Visual indentation.
- Simplicity: Reduced cognitive load.