UI Design System & Guidelines

Part 1 — Foundations

1. Introduction

介绍

Purpose · 目的

统一术语 — 让设计、开发、产品说同一种语言
规范化视觉 — 字号、间距、颜色统一
移动优先 — 先设计手机，再扩展到桌面
可维护 — 用 CSS 变量，方便迭代
可扩展 — 便于将来接入 CMS 与多分类内容

Reference Standards · 参考标准

Apple Human Interface Guidelines (HIG)
Google Material Design 3
W3C WCAG 2.2
Bootstrap 5 / Tailwind CSS

Scope · 适用范围

This document applies to the current website (Home Page + Content Pages + existing styles). Future product plans are out of scope.

本规范适用于当前网站（主页 + 内容页 + 现有样式）。未来的产品计划不在本规范范围内。

2. Design Principles

设计原则

Five core principles · 五大核心原则：

Principle	中文	Description · 说明
Mobile-First	移动优先	从最小屏幕开始设计
Consistency	一致性	相同元素、相同样式
Accessibility	无障碍	对比度达标，可缩放
Clarity	清晰	层级分明，重点突出
Scalability	可扩展	用变量，不写死

3. Terminology

术语对照

Page-Level · 页面级

Term (EN)	中文	说明
Page	页面	完整网页
Header	顶部区	顶部固定区
Logo	品牌图形	品牌图标 / 文字
Site Name	品牌名	品牌文字
Primary Nav	主导航	顶部菜单
Nav Item	导航项	单个菜单项
Hamburger Menu	汉堡菜单	移动端按钮
Main Content	主体内容	页面主内容区
Section	区块	逻辑分区
Section Title	区块标题	主标题
Section Subtitle	区块副标题	副标题
Card	卡片	独立单元
Card Title	卡片标题	卡片主标题
Body Text	正文	描述文字
Badge	徽章	状态标签
Footer	页脚	页面底部
Hero	首屏	页面顶部最重要区域
CTA	行动号召	引导用户操作的区块 / 按钮
Above the Fold	首屏内	无需滚动就能看到的部分
Landing Page	落地页	用户进入的页面
Modal	弹窗	覆盖层

Interactive Components · 交互组件

Term (EN)	中文	说明
Button	按钮	操作按钮
Primary Button	主按钮	主要操作
Secondary Button	次按钮	次要操作
Outline Button	描边按钮	辅助操作
Form	表单	输入表单
Form Group	表单组	Label + Input
Label	标签	输入标签
Input	输入框	单行输入
Textarea	多行输入	长文本
Select	下拉框	选择器
Placeholder	占位提示	输入提示
Form Note	表单提示	反馈信息
Toast	提示条	短暂弹出的提示
Tooltip	气泡提示	鼠标悬停显示的小提示
Accordion	手风琴	折叠面板
Tab	标签页	切换内容
Carousel	轮播	循环展示
Pagination	分页	分页导航

Layout Units · 布局单位

Term (EN)	中文	说明
Container	容器	内容最大宽度
Grid	网格	布局网格
Row	行	水平排列
Column	列	垂直排列
Gap	间距	元素间隙
Padding	内边距	内部间距
Margin	外边距	外部间距
Breakpoint	断点	响应式临界值

Navigation · 导航

Term (EN)	中文	说明
Breadcrumb	面包屑	层级导航（如 Home > Reports > 文章）
Sidebar	侧边栏	侧边内容区

States · 状态

Term (EN)	中文	说明
Empty State	空状态	没内容时显示
Skeleton	骨架屏	加载占位
Loading	加载中	加载状态

Part 2 — Visual System

4. Typography System

字号系统

Base: html { font-size: 100% } (default 16px)

Token Definitions

Token	rem	px (Desktop)	Usage · 用途
`--font-hero`	3.75rem	60px	Hero Name
`--font-h1`	2.625rem	42px	Page / Section Title
`--font-h2`	2rem	32px	—
`--font-h3`	1.625rem	26px	Card Title / Logo
`--font-h4`	1.5rem	24px	Subtitle / Nav
`--font-body`	1.375rem	22px	Body Text
`--font-small`	1.125rem	18px	Small Note
`--font-label`	1rem	16px	Label

Responsive Scaling · 缩放

/* Desktop: 100% (default) */ html { font-size: 100%; } /* Tablet ≤ 900px */ @media (max-width: 900px) { html { font-size: 90%; } } /* Mobile ≤ 640px */ @media (max-width: 640px) { html { font-size: 85%; } }

Effect · 效果：

Token	Desktop	Tablet (90%)	Mobile (85%)
Hero	60px	54px	51px
H1	42px	37.8px	35.7px
H3	26px	23.4px	22.1px
Body	22px	19.8px	18.7px

Font Weight

Name	Value	Usage
Regular	`400`	正文
Semibold	`600`	强调
Bold	`700`	标题

Line Height

Usage	Value
Heading	`1.25`
Body	`1.6`

5. Spacing System

间距系统

Base: 4px grid

Token	Value	Usage
`--space-1`	4px	最小
`--space-2`	8px	紧密
`--space-3`	12px	小
`--space-4`	16px	常规
`--space-5`	24px	中等
`--space-6`	32px	大
`--space-7`	48px	更大
`--space-8`	64px	很大
`--space-9`	80px	最大

Applications · 应用场景

Scene	Token	Value
Section padding	`--space-9`	80px 0
Card padding	`--space-6 / --space-5`	32px 24px
Button padding	`--space-4 / --space-6`	16px 32px
Form group gap	`--space-4`	16px
Text gap	`--space-3`	12px

6. Color System

色彩系统

Site Theme (Dark) · 站点主题

--bg

#0c148b

--bg-alt / --card

#0a1069

--text

#ffffff

--muted

#c3ceff

--accent

#66d9ff

--accent-hover

#8ae6ff

--border

#3d4fd8

--yellow

#ffd83d

Document Theme (Light) · 文档主题

Used on content pages (articles, docs) for readability. 用于内容页（文章、文档），确保可读性。

--doc-bg

#ffffff

--doc-text

#1a1a2e

--doc-muted

#4b5568

--doc-accent

#2563eb

--doc-accent-soft

#dbeafe

--doc-card

#f9fafb

--doc-border

#e5e7eb

Status Colors · 状态色

--success

#10b981

--warn

#ef4444

--gold

#f59e0b

Contrast (WCAG AA)

Combination	Ratio	Level
--text on --bg	15.2:1	✅ AAA
--muted on --bg	8.4:1	✅ AAA
--accent on --bg	9.6:1	✅ AAA
--yellow on --bg	12.1:1	✅ AAA

7. Radius & Shadow

圆角与阴影

Radius

Token	Value	Usage
`--radius-sm`	6px	小元素 / 输入框
`--radius-btn`	8px	按钮专用
`--radius`	12px	卡片、弹窗
`--radius-lg`	20px	徽章
`--radius-full`	9999px	圆形

Shadow

Token	Value	Usage
`--shadow-sm`	`0 2px 8px rgba(0,0,0,0.2)`	轻微
`--shadow`	`0 8px 24px rgba(0,0,0,0.4)`	卡片悬停
`--shadow-lg`	`0 20px 60px rgba(0,0,0,0.6)`	弹窗

Part 3 — Components

8. Layout Structure

布局结构

Page Hierarchy · 页面层级

┌─────────────────────────────────┐ │ Header │ ├─────────────────────────────────┤ │ │ │ Main Content │ │ │ │ ┌───────────────────────┐ │ │ │ Section │ │ │ │ ┌───────────┐ │ │ │ │ │ Card │ │ │ │ │ └───────────┘ │ │ │ └───────────────────────┘ │ │ │ ├─────────────────────────────────┤ │ Footer │ └─────────────────────────────────┘

Container Width

Type	Value
Regular container	`max-width: 1320px`
Narrow container	`max-width: 860px`
Inner padding	`padding: 0 24px`

9. Header

顶部

Structure (Desktop)

┌─────────────────────────────────────────┐ │ [Logo] [Clock] [Nav Items...] [☰] │ └─────────────────────────────────────────┘

Dimensions

Element	Value
Header height (desktop)	`76px`
Header height (mobile ≤640)	`64px`
Logo font-size	`26px` (`--font-h3`)
Nav font-size	`24px` (`--font-h4`)
Nav gap	`24px`
Header button height	`--header-btn-height: 43px`

Mobile (≤900px)

隐藏 Clock
显示 Hamburger Menu
Nav 折叠

Mobile Header Height

@media (max-width: 640px) { :root { --header-height: 64px; } }

10. Section

区块

Structure

Section Title Section Subtitle [Card] [Card] [Card]

Dimensions

Element	Value
Section padding	`80px 0` (`--space-9`)
Section Title	`42px` (`--font-h1`)
Section Subtitle	`24px` (`--font-h4`)
Title–Subtitle gap	`12px`
Subtitle–Card gap	`48px` (`--space-7`)

Note · 注意

Section 副标题末尾不加句号。Section subtitles do NOT end with a period.

11. Card

卡片

Structure

┌───────────────────────────┐ │ [Icon] │ │ Card Title │ │ Sub-label: Body Text │ └───────────────────────────┘

Dimensions

Element	Value
Card padding	`32px 24px` (`--space-6 --space-5`)
Card radius	`12px` (`--radius`)
Card Title	`26px` (`--font-h3`)
Body Text	`22px` (`--font-body`)
Card gap	`24px` (`--space-5`)

States

State	Effect
Default	边框 `--border`
Hover	边框 `--accent` + 阴影

12. Button

按钮

Types

Type	Background	Text	Usage
Primary	--accent	深蓝	主要操作
Secondary	白色	深蓝	次要操作
Outline	透明	白色	辅助操作

Dimensions

Element	Value
Padding	`16px 32px` (`--space-4 --space-6`)
Font size	`22px` (`--font-body`)
Radius	`8px` (`--radius-btn`)

States

State	Effect
Default	正常
Hover	亮度变化
Disabled	透明度 0.5

13. Form

表单

Structure

Label [Input field] Label [Textarea] [Button] [Button]

Dimensions

Element	Value
Label font	`22px` (`--font-body`)
Label gap	`8px` (`--space-2`)
Input padding	`12px 16px` (`--space-3 --space-4`)
Input font	`22px` (`--font-body`)
Input radius	`6px` (`--radius-sm`)
Form Group gap	`16px` (`--space-4`)

States

State	Effect
Default	白色背景
Focus	红色边框 3px

14. Modal

弹窗

Structure

▒▒▒▒▒ Overlay ▒▒▒▒▒ ┌─────────────────────┐ │ Modal Header [X] │ ├─────────────────────┤ │ Countdown │ │ Modal Body │ │ ... │ ├─────────────────────┤ │ Modal Footer │ └─────────────────────┘

Dimensions

Element	Value
Overlay	`100vw × 100vh`
Overlay BG	`rgba(0,0,0,0.7)`
Modal max-width	`640px`
Modal padding	`36px 32px`
Modal radius	`12px`
Modal shadow	`--shadow-lg`

15. Footer

页脚

Structure

Footer Trust Label Client List ───────────────────── [Col 1] [Col 2] [Col 3] [Col 4] ───────────────────── Copyright (centered)

Dimensions

Element	Value
Footer padding	`64px 0 24px` (`--space-8 0 --space-5`)
Trust label	`22px`
Column title	`24px`
Link font	`22px`
Copyright	`22px`，居中

Changed in v1.1

移除了页脚时钟。版权信息改为居中显示，字号统一为 22px。

Part 3.5 — Content Pages

16. Content Page Structure

内容页结构

All content (articles, milestones, projects, courses) follows a unified directory and URL structure. 所有内容（文章、里程碑、项目、课程）遵循统一的目录与 URL 结构。

Directory Structure · 目录结构

{category}/ └── YYMMDDNN-slug/ ├── index.php ← 正文 ├── meta.php ← 元数据 └── assets/ └── index.php ← 安全跳转

Directory Naming · 目录命名

Part	Length	Meaning	Example
`YY`	2	年后两位	26
`MM`	2	月	09
`DD`	2	日	13
`NN`	2	当天序号（00–99）	00
`-`	1	分隔符	-
`slug`	—	题目（中英文均可，无特殊字符）	Professional-Website-Design

Examples · 示例：

26091300-Professional-Website-Design 26091301-专业网站首页设计 26091400-Second-Milestone

Parsing Rule · 解析规则

前 6 位是日期 YYMMDD，紧接 2 位是当天序号。二者不可混淆。

URL Structure · URL 结构

https://www.shanggao.net/{category}/{YYMMDDNN-slug}/ Example: https://www.shanggao.net/milestones/26091300-Professional-Website-Design/

Reserved Categories · 预留分类

Category	用途
`milestones`	里程碑与进度记录
`blog`	技术文章、随笔
`projects`	项目 / 产品
`courses`	课程
`services`	咨询服务

17. Content Page Header

内容页头部

Content pages use a 3-column header. Height matches the main site header. 内容页采用三栏头部，高度与主站一致。

Structure — Desktop

┌──────────────────────────────────────────────┐ │ [Logo] [Category Name] [Back] │ └──────────────────────────────────────────────┘

Structure — Mobile (≤640px)

┌──────────────────────────────┐ │ [Logo] [📋] [←] │ └──────────────────────────────┘

Elements

Position	Desktop	Mobile
Left	Logo → 主页 (`../../index.php`)	Logo → 主页
Center	分类名 → 分类列表 (`../index.php`)	隐藏
Right	Back → 主页	`📋` → 列表 + `←` → 主页

Why a 📋 icon on mobile?

手机隐藏中间分类名后，会失去"回列表"入口。📋 图标补回这个入口，← 仍然回主页。

Dimensions

Element	Value
Header height (desktop)	`76px`
Header height (mobile ≤640px)	`64px`
Logo font-size	`26px`
Center title font-size	`26px`（跟 Logo 一致）
Back button height	`--header-btn-height: 43px`

Filter Button (List Page)

List page header has an additional search box (desktop) / search icon (mobile). 列表页头部另有搜索框（桌面）/ 搜索图标（手机）。

18. Content Listing Page

列表页

The listing page ({category}/index.php) scans all posts in a category and displays them as cards. 列表页（{category}/index.php）扫描分类下所有文章，以卡片形式展示。

Structure

┌─────────────────────────────────────────────────┐ │ Professional Website Design 1 Shang Gao · │ │ 2026-09-13 │ │ Completed the design and implementation... │ │ [web] [design] [php] [css] │ └─────────────────────────────────────────────────┘

Card Layout

第 1 行：标题（左）+ 作者 · 日期（右）
第 2 行：summary
第 3 行：tags

Mobile (≤640px)

标题 + 作者同一行
日期在作者下方，靠右
· 分隔符隐藏
summary、tags 正常

Content Sources

Posts are loaded via the shared load_posts() function from includes/functions.php. 文章通过 load_posts() 统一加载。

$items = load_posts('milestones', null, dirname(__DIR__));

Sorting · 排序

By date (YYMMDD) + index (NN), descending — newest first. 按 date + index 倒序，最新在前。

Home Page Block

The home page shows the latest 5 posts per category, with a "Coming soon ..." placeholder if fewer than 5. 主页每个分类区块显示最新 5 条；不足 5 条时补一条 Coming soon ...（无链接）。

19. Content Detail Page

正文页

Structure

┌──────────────────────────────────────────┐ │ [PDF / Print] [★ ★ ★ ★ ★] │ ← Actions ├──────────────────────────────────────────┤ │ Professional Website Design 1 │ │ 专业网站首页设计 │ │ Shang Gao · 2026-09-13 │ ├──────────────────────────────────────────┤ │ ┌────────────────┬────────────────┐ │ │ │ What Was Built │ What Was Learned│ │ │ │ │ │ │ │ │ ... │ ... │ │ │ └────────────────┴────────────────┘ │ │ │ │ [Comparison Table] │ │ │ │ [Next Steps Cards] │ └──────────────────────────────────────────┘

Actions Bar

Position	Element	Behavior
Left	PDF / Print button	有 PDF → 下载；无 PDF 且允许打印 → `window.print()`；禁止打印 → 禁用
Right	5-star rating	现在占位；将来接后端

Document Header

Title（40px，英文）
Subtitle（24px，中文）
Author + Date（居中，胶囊背景）

Two-Column Grid

桌面双列（.gs-grid-2），手机单列。

20. Print & PDF

打印与 PDF

Strategy · 策略

Pregenerate PDF：作者本地生成 PDF，放到 assets/，用户点按钮下载（推荐）
Fallback：无 PDF 时，桌面用 window.print()
Mobile：Android / iOS 上 window.print() 兼容性差，推荐预生成 PDF

Print Layout · 打印版式

双列（grid-template-columns: 1fr 1fr）
页眉：每页顶部（Logo + URL + 版权声明）
页脚：底部（版权声明）
表格尽量不拆，卡片允许拆

Page Header & Footer

Print header and footer are rendered via a <table> wrapper with <thead> / <tfoot>, so they repeat on every page and cannot be disabled by the user. 通过 <table> + <thead> / <tfoot> 实现，**每页重复**，**用户关不掉**。

Header Content · 页眉内容

Print CSS Rules

Selector	Rule	Reason
`.gs-doc-header`	`page-break-after: avoid`	标题后不要立刻分页
`.gs-col`	`page-break-inside: auto`	允许拆，否则卡片整体推到下一页
`.gs-step-card`	`page-break-inside: auto`	同上
`.gs-compare`	`page-break-inside: avoid`	表格尽量不拆
`.gs-grid-2`	`page-break-inside: auto`	允许跨页

关键：卡片允许拆分

.gs-col / .gs-step-card 必须是 page-break-inside: auto，否则第 1 页会只剩标题。

禁止打印 · Print Disabled

当 allow_print = false 时，打印结果整页空白：

@media print { body * { display: none !important; } body::after { content: "This content is for online viewing only."; display: block; padding: 80mm 20mm; } }

Part 3.6 — Data & Meta

21. Meta Reference

meta 字段

Every post directory contains a base meta file (meta.php) and optionally one or more language files (meta-{lang}.php). The base file holds language-independent data; language files hold language-specific text. 每篇文章目录下有一个基础 meta 文件（meta.php），以及可选的语言文件（meta-{lang}.php）。基础文件放语言无关数据，语言文件放语言相关文本。

Both files return an array. The base meta is loaded first, then the language file is merged on top. 两个文件都返回数组。先加载基础 meta，再合并语言文件。

Base Meta · `meta.php`

Language-independent data. All fields below live in the base file. 语言无关数据。以下字段全部放在基础文件中。

Field	Type	Description
`index`	string	当天序号 NN（`00`–`99`）
`author`	string	作者名
`version`	string	语义化版本号，如 `1.0.0`
`created`	string	创建时间，12 位 `YYMMDDhhmmss`
`updated`	string	更新时间，12 位 `YYMMDDhhmmss`
`tags`	array	标签数组，如 `['php', 'css']`
`visibility`	string	`public` / `members` / `private` / `draft`
`allow_print`	bool	是否允许打印，默认 `true`
`allow_pdf`	bool	是否允许下载 PDF，默认 `true`
`pdf`	string	PDF 文件路径（可选，默认空字符串）

Removed · category

文章 meta 中不再包含 category 字段。分类由文章所在目录自动推断（{category}/YYMMDDNN-slug/ 的 {category} 部分）。这是冗余字段，无需在每篇文章中重复声明。

Language Meta · `meta-{lang}.php`

Language-specific text. Merged on top of the base meta at load time. 语言相关文本。加载时合并到基础 meta 之上。

Field	Type	Description
`title`	string	标题
`subtitle`	string	副标题
`summary`	string	摘要（用于列表卡片与 `<meta name="description">`）

Why split?

基础字段（作者、日期、可见性）与语言无关；title / subtitle / summary 需要按语言提供。目前只提供 meta-en.php；meta-zh.php 将在后续添加。

Example · `meta.php`

<?php if (!defined('ALLOW_META_LOAD')) { http_response_code(404); exit; } return [ 'index' => '00', 'author' => 'Shang Gao', 'version' => '1.0.0', 'created' => '260913000000', 'updated' => '260917235959', 'tags' => ['web', 'design', 'php', 'css'], 'visibility' => 'public', 'allow_print' => true, 'allow_pdf' => true, 'pdf' => '', ];

Example · `meta-en.php`

<?php if (!defined('ALLOW_META_TRANS_LOAD')) { http_response_code(404); exit; } return [ 'title' => 'Professional Website Design 1', 'subtitle' => 'Professional Website Homepage', 'summary' => 'Completed the design and implementation of the professional website homepage.', ];

Protected files

Both files check a load constant before returning data. meta.php uses ALLOW_META_LOAD; meta-{lang}.php uses ALLOW_META_TRANS_LOAD. Direct URL access returns 404.

22. Visibility & Permissions

可见性与权限

Visibility Levels

Value	列表页 / 主页	正文页
`public`	显示	所有人可访问
`members`	显示（将来按登录状态）	登录会员可访问
`private`	不显示	404（不暴露存在）
`draft`	不显示	404

PDF / Print Permissions

allow_pdf	allow_print	行为
`true`	（忽略）	显示 PDF 下载（如果 `pdf` 文件存在）
`false`	`true`	显示 `window.print()` 按钮
`false`	`false`	按钮禁用 + 打印时整页空白

Critical Rule · 关键规则

权限检查必须在服务端（PHP）进行，不能只靠前端隐藏。private 文章即使被猜到 URL 也必须返回 404。

Part 3.7 — Security

23. Security Guidelines

安全规范

Core Rule · 核心规则

前端隐藏 ≠ 后端保护

任何权限限制必须在服务端检查。前端隐藏只是"不显示"，不是"禁止访问"。

Implementation · 实施

列表页 / 主页：过滤显示（跳过 private）
正文页：独立再做一次检查（404）
错误响应：用 404 Not Found（不用 403，避免暴露存在）

Error Responses

场景	响应
权限不足	`404`（不暴露）
配置缺失	`500`
方法不允许（表单）	`405`

Future · 未来

用户系统：注册、登录、会话
会员检查：登录状态 + 会员等级
私有 assets：图片、PDF 访问控制
水印 PDF：给会员 PDF 加"会员 ID 水印"（追踪泄露来源）
审计日志：谁访问了什么
Rate limiting：防垃圾邮件 / DoS

24. File Protection

文件保护

敏感文件通过"加载常量"保护：只有被可信脚本 require 时才能执行。直接访问 → 404。

Protected Files

File	Constant
`config.php`	`ALLOW_CONFIG_LOAD`
`meta.php`	`ALLOW_META_LOAD`
`includes/functions.php`	`ALLOW_FUNCTIONS_LOAD`
`includes/site.php`	`ALLOW_SITE_LOAD`

Pattern

被保护文件的开头：

<?php if (!defined('ALLOW_CONFIG_LOAD')) { http_response_code(404); exit; } return [ ... ];

调用方：

define('ALLOW_CONFIG_LOAD', true); $config = require __DIR__ . '/config.php';

assets/ Protection

assets/index.php 做跳转，防止目录浏览：

<?php header('Location: ../index.php'); exit;

Note

assets/index.php 只防止"目录浏览"，不防止"直接访问具体文件"（如 assets/cover.jpg）。敏感资源的保护需要在服务器层或将来 CMS 中处理。

Part 4 — Responsive

25. Breakpoints

断点

Name	Range	Device
Mobile	≤ 640px	手机
Tablet	641–900px	平板
Desktop	≥ 901px	电脑

Media Queries

/* Tablet + Mobile */ @media (max-width: 900px) { ... } /* Mobile only */ @media (max-width: 640px) { ... }

Three breakpoints

使用三个命名断点：Mobile / Tablet / Desktop。Desktop 用默认样式（无媒体查询）。

26. Mobile-First Strategy

移动优先

Flow · 流程

先设计 320px —— 最小手机
扩展到 640px —— 大手机
扩展到 900px —— 平板
扩展到 1320px —— 桌面

Key Techniques · 关键技巧

用 rem —— 基于 html 基准字号
移动端缩放 —— 平板 90%，手机 85%
单列优先 —— 手机单列，桌面多列
触摸友好 —— 按钮高度 ≥ 43px
Header 高度 —— 桌面 76px，手机 64px

Why 85% on mobile?

手机屏幕窄，字号需按比例缩小，但 80% 偏小、90% 偏大，85% 是经验最优值。

Part 5 — Reference

27. CSS Class Mapping

CSS 类映射

Home Page

Term	CSS Class
Header	`.site-header`
Logo	`.logo`
Primary Nav	`.site-nav`
Nav Item	`.site-nav a`
Hero Name	`.hero-name`
Section	`.section`
Section Title	`.section-title`
Section Subtitle	`.section-sub`
Card	`.card`
Primary Button	`.btn-primary`
Secondary Button	`.btn-secondary`
Outline Button	`.btn-outline`
Badge	`.badge`
Post List	`.post-list`
Post Item	`.post-item`
Post Title	`.post-title`
Post Meta	`.post-meta`
Post Author	`.post-author`
Post Date	`.post-date`
Footer	`.site-footer`
Copyright	`.footer-copyright`

Content Pages

Term	CSS Class
Content Header	`.gs-header`
Content Nav Wrap	`.gs-nav-wrap`
Content Logo	`.gs-logo`
Header Title	`.gs-header-h1`
Back Button	`.gs-back`
List Icon (mobile)	`.gs-list-btn`
Search Box	`.gs-search`
Document	`.gs-doc`
Document Header	`.gs-doc-header`
Category Tag	`.gs-category`
Author	`.gs-author`
Two-Column Grid	`.gs-grid-2`
Column	`.gs-col`
List Card (listing)	`.gs-card`
Rating Stars	`.gs-stars`

28. Framework Comparison

框架对照

Our Term	Material	Apple HIG	Bootstrap
Page	Screen	Screen	Page
Header	App Bar	Nav Bar	Navbar
Primary Nav	Navigation Bar	Tab Bar	Nav
Card	Card	Cell	Card
Button	Button	Button	Button
Modal	Dialog	Modal	Modal
Form	Form	Form	Form
Input	Text Field	Text Field	Form Control
Badge	Chip	Badge	Badge

29. Changelog

更新记录

Version	Date	Changes
1.0	2026-09-13	初始版本
1.1	2026-09-17	视觉系统：手机字号 80% → 85%； Header：手机高度 64px、按钮高度 43px； Spacing：Card padding 补左右 24px、Button padding 补左右 32px； Form：label gap 8px、input padding 12px 16px、radius 6px、group gap 16px； Footer：去时钟、padding 64px 0 24px、版权 22px 居中；新增：文档主题色 `--doc-*`；`--radius-btn`；新增：Part 3.5 内容页规范；新增：Part 3.6 Data & Meta；新增：Part 3.7 Security；新增：打印 / PDF 规范。

— End of Document · 文档结束 —