Anton展示标题字
OFL · 持有人 Vernon Adams
印刷批号 / BATCH · ------·------
RISO · 套印故障样本 No.8
SPECIMEN
组件规格速查 · COMPONENT REFERENCE
§01 标题层级
Display 标题
h2 标题 · 22px 粗体
h3 标题 · 18px 粗体
h4 标题 · 等宽 14.5px
§02 段落
标准正文。行高 1.65，字号 14px。朱红高亮强调关键词，等宽底纹标技术术语。
第二段自动间距。每段 margin-bottom: 8px。
§03 引用块
引用块：左边朱红 3px 粗线，paper 背景。适合引文或注记。— 出处
§04 列表
- 无序项 · 圆点
- 虚线分隔
- 最后一项无分隔
- 有序编号
- 等宽数字
- 朱红色
§05 折叠块
点击展开 · 组件说明
使用 <details class="fold">，无需 JS。▶ 图标自动旋转 90°。
§06 表格
| 组件 | CSS 类 | 状态 |
|---|---|---|
| 卡片 | .block | ✓ |
| 墨黑 | .block.dark | ✓ |
| 标签 | .tags span | ✓ |
§07 代码块
<!-- 组件块模板 -->
<div class="block">
<h2>§xx 标题</h2>
<p>正文内容</p>
</div>§08 墨黑反白
◈ 深色底色 · 朱红阴影 · 用于需要压重的视觉点。
§09 标签行
§10 图片占位
插图
图1 · 说明文字
§11 按钮 / 链接
链接卡片 · 悬停变色
墨黑卡片 · 悬停升影
轮廓按钮
实心按钮
§12 分割线
§13 卡片块 .block
纸底卡片 · PAPER
1.5px 墨边 + 4px 墨硬投影。hover 偏移加大并变朱红。
墨黑卡片 · DARK
墨底反转区域，朱红阴影。标题用提亮朱红 #ff7a6e。
.block 纸底 · .block.dark 墨黑 · hover 投影 4px→7px 墨→朱
§14 橡皮章 .stamp
PROOF · 1ST
OK
WIP
SET
VALID
流内徽章，各自微旋转。.stamp 朱红 · .ok 青 · .wip 黄 · .set 大角度旋转
§15 朱红公章 .seal
双环 + 五角星 + 弧形文字 · r=30 弧避内环重叠
§16 铭牌 .plate
7op7op.top
墨底 nameplate，hover 触发 glitch 故障动画
§17 四色错位套色 .k4
7OP
7OP
7OP
7OP
7OP
K + Magenta + Cyan + Yellow 各自偏移 · mix-blend-mode:multiply 模拟四色未准套印
§18 油墨规格色卡 .ink-spec
Cyan#0097C4
Magenta#E23B2E
Yellow#F2C200
Key#16130F
§19 版次行 .edition-line
v1.02026-07初版样张
v1.12026-07骨架提取 · 下拉导航
v2.02026-07以 demo 为基准全站重构
§20 引文 .pull-quote
"7" 是一个错位了的 "t"。那不是故障，那是它的本名。—— 7op 样本簿 · 扉页
§21 双列卡格 .grid2
JetBrains Mono等宽 / 代码
OFL · 持有人 JetBrains
OFL · 持有人 JetBrains
.grid2 两列网格 · .cell 纸底虚线小框，等宽字 · strong 朱红行首 · ≤860px 时收为单列