-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
293 lines (253 loc) · 68.3 KB
/
Copy pathindex.html
File metadata and controls
293 lines (253 loc) · 68.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Punk 图文转换 Skill · 设计系统预览</title>
<style>
@font-face{font-family:PunkSans;src:url("../SourceHanSansCN-VF.otf");font-display:block}@font-face{font-family:PunkSerif;src:url("../SourceHanSerifCN-VF.otf");font-display:block}@font-face{font-family:PunkArchivo;src:url("../Archivo-VF.ttf");font-display:block}@font-face{font-family:PunkMono;src:url("../JetBrainsMono-VF.ttf");font-display:block}
:root{--sans:PunkSans,"PingFang SC",sans-serif;--serif:PunkSerif,"Songti SC",serif;--archivo:PunkArchivo,Arial,sans-serif;--mono:PunkMono,monospace;--ink:#151515;--paper:#f6f4ef;--line:#c9c7c1;--quiet:#66645f}
*{box-sizing:border-box}html{background:#deddd9;color:var(--ink);font-family:var(--sans)}body{margin:0;padding:48px}.masthead{max-width:1440px;margin:0 auto 42px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;border-bottom:2px solid;padding-bottom:24px}.masthead p{font:650 15px/1.2 var(--mono);letter-spacing:.1em;margin:0 0 12px}.masthead h1{font-size:48px;line-height:1;margin:0;letter-spacing:-.045em}.masthead nav{display:flex;gap:18px;font:600 13px/1 var(--mono)}.masthead a{color:inherit;text-decoration:none;border-bottom:1px solid}.page{display:none;max-width:1440px;margin:auto}.page.active{display:block}.section-head{display:grid;grid-template-columns:1fr minmax(280px,460px);gap:32px;align-items:end;margin-bottom:28px}.section-head h2{font-size:34px;line-height:1.1;margin:0;letter-spacing:-.035em}.section-head p{margin:0;color:var(--quiet);line-height:1.55}.grid{display:grid;gap:26px 22px}.composition-grid{grid-template-columns:repeat(4,1fr)}.palette-grid{grid-template-columns:repeat(4,1fr)}.type-grid{grid-template-columns:repeat(3,1fr)}.hierarchy-grid{grid-template-columns:repeat(3,1fr);margin-top:42px}.composition-item,.palette-item,.type-item,.hierarchy-item{min-width:0}.composition-paper,.palette-paper{position:relative;aspect-ratio:3/4;overflow:hidden;box-shadow:0 2px 12px #00000014}.composition-paper{background:#fff;border:1px solid #aaa}.zone{position:absolute;overflow:hidden}.metadata{display:flex;justify-content:space-between;border-bottom:1px solid;font:600 1.55cqw/1.2 var(--mono);letter-spacing:.07em;white-space:nowrap}.title-zone{display:flex;align-items:flex-start;font-size:8.5cqw;font-weight:820;line-height:1.03;letter-spacing:-.055em;z-index:2}.title-zone.vertical{writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;font-size:7.2cqw}.title-zone.diagonal{transform:rotate(-8deg);transform-origin:center;font-size:8cqw}.image-zone{display:grid;place-items:center;background:#ddd;border:1px solid #8a8a8a;color:#555;font:550 1.45cqw/1 var(--mono)}.image-zone:before,.image-zone:after{content:"";position:absolute;width:140%;height:1px;background:#aaa}.image-zone:before{transform:rotate(35deg)}.image-zone:after{transform:rotate(-35deg)}.image-zone span{background:#ddd;padding:6px;z-index:1}.data-zone{border-top:1px solid;padding-top:1cqw;font:620 1.7cqw/1.25 var(--mono);z-index:3}.item-label{display:flex;justify-content:space-between;gap:12px;margin-top:10px;align-items:baseline}.item-label b{font-size:15px}.item-label span{font:500 10px/1.3 var(--mono);color:var(--quiet);text-align:right}.composition-item>p{font-size:11px;line-height:1.45;color:var(--quiet);margin:5px 0 0}.palette-paper{background:var(--bg);color:var(--text);padding:8%;border:1px solid color-mix(in srgb,var(--text) 22%,transparent)}.palette-meta{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:3%;font:600 1.55cqw/1.2 var(--mono);letter-spacing:.08em}.palette-paper h3{position:absolute;left:8%;right:8%;top:19%;margin:0;font-size:8.8cqw;line-height:1.01;letter-spacing:-.055em}.palette-paper h3 span{position:relative;z-index:1}.palette-paper h3 span:after{content:"";position:absolute;z-index:-1;left:-2%;right:-3%;height:.23em;bottom:.06em;background:var(--accent);transform:rotate(-1deg)}.palette-mark{position:absolute;right:8%;top:56%;width:30%;aspect-ratio:1;border:2.2cqw solid var(--accent);border-radius:50%}.palette-mark:after{content:"";position:absolute;left:-55%;top:48%;width:150%;border-top:.5cqw solid var(--accent)}.palette-paper p{position:absolute;left:8%;bottom:13%;font-size:2.55cqw;line-height:1.5;color:var(--muted)}.palette-paper p b{color:var(--text)}.inner-strip{position:absolute;left:8%;right:8%;bottom:6%;height:1.8%;display:flex}.inner-strip i:nth-child(1){flex:4;background:var(--bg)}.inner-strip i:nth-child(2){flex:2;background:var(--text)}.inner-strip i:nth-child(3){flex:1;background:var(--accent)}.palette-item code{display:block;margin-top:5px;color:var(--quiet);font:500 10px/1.3 var(--mono)}.type-item,.hierarchy-item{background:#fff;border:1px solid #aaa;padding:28px;min-height:520px}.type-meta{display:flex;justify-content:space-between;border-bottom:1px solid;padding-bottom:12px;font:600 11px/1 var(--mono);letter-spacing:.06em}.type-item h3{font-family:var(--display);font-size:64px;font-weight:var(--weight);letter-spacing:var(--tracking);line-height:var(--leading);margin:60px 0 38px}.type-item h3 em{font-family:var(--serif);font-style:normal;font-weight:520}.type-item h4{font-family:var(--latin);font-size:28px;line-height:.95;letter-spacing:-.04em;margin:0 0 32px}.type-item p{font-size:14px;line-height:1.6;color:var(--quiet);margin:0}.hierarchy-item{min-height:390px}.hierarchy-item h3{font-size:28px;margin:34px 0}.role-bars>div{display:grid;grid-template-columns:86px 1fr 74px;gap:10px;align-items:center;margin:16px 0;font:500 10px/1 var(--mono)}.role-bars i{display:block;height:12px;background:#1c1c1c}.role-bars b{text-align:right;font-weight:500}.body-atlas{background:#d7d7d7;padding:24px}.body-atlas img{display:block;width:100%;height:auto}.footer{max-width:1440px;margin:54px auto 0;border-top:1px solid;padding-top:16px;font:500 11px/1.4 var(--mono);color:var(--quiet)}
.composition-paper,.palette-paper{container-type:inline-size}.title-zone.vertical{display:block;font-size:9.2cqw;line-height:1;letter-spacing:-.02em}.title-zone.vertical-huge{font-size:11cqw}.curve-title{overflow:visible}.curve-title text{font-family:var(--sans);font-size:82px;font-weight:820;letter-spacing:-4px;fill:#151515}.palette-meta{font-size:3.2cqw}.palette-paper h3{font-size:10.5cqw}.palette-paper p{font-size:4.2cqw}
.composition-paper{container-type:inline-size}.align-center .title-zone,.align-center .detail-zone,.align-center .author-zone{text-align:center;justify-content:center}.align-right .title-zone{text-align:right;justify-content:flex-end}.title-zone{font-size:9.6cqw;line-height:1.02;align-content:flex-start}.title-zone.huge,.title-zone.huge-stack,.split-top,.split-bottom{font-size:12cqw;line-height:.92}.title-zone.diagonal{transform:rotate(-7deg);font-size:10cqw}.title-zone.micro-title{font-size:5.8cqw;line-height:1;align-items:center;justify-content:center;text-align:center}.title-zone.vertical{font-size:10cqw;line-height:1;white-space:nowrap}.title-zone.vertical-huge{font-size:13cqw}.detail-zone{font-size:2.7cqw;line-height:1.42;font-weight:500;display:flex;align-items:flex-start}.author-zone{border-top:1px solid;padding-top:.8cqw;font:620 1.65cqw/1.2 var(--mono)}.echo-zone{font-size:10cqw;font-weight:780;line-height:1;color:#d7d7d7;white-space:nowrap}.watermark-zone{display:grid;place-items:center;font:700 3.5cqw/1 var(--mono);letter-spacing:.16em;color:#bdbdbd}.palette-table{width:100%;border-collapse:collapse;background:#fff;border-top:2px solid #111}.palette-table th,.palette-table td{border-bottom:1px solid #b8b8b8;padding:14px 16px;text-align:left;vertical-align:middle}.palette-table thead th{font:650 12px/1.2 var(--mono);letter-spacing:.06em}.palette-table tbody th{width:72px;font:700 14px/1 var(--mono)}.palette-table td:nth-child(2){width:300px}.palette-table td b{display:block;font-size:16px}.palette-table td small{display:block;margin-top:4px;color:var(--quiet);font:500 10px/1.2 var(--mono)}.palette-table td:not(:nth-child(2)){white-space:nowrap}.swatch{display:inline-block;width:34px;height:34px;background:var(--swatch);border:1px solid #999;vertical-align:middle;margin-right:9px}.palette-table code{font:500 10px/1 var(--mono)}.image-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.image-style-item{background:#fff;border:1px solid #aaa;padding:22px;display:grid;grid-template-columns:140px 1fr;gap:22px;min-height:220px}.style-sign{position:relative;border:1px solid #aaa;background:#f5f5f2;overflow:hidden}.style-sign i{position:absolute;display:block;border:2px solid #111}.style-sign i:nth-child(1){width:70px;height:70px;border-radius:50%;left:22px;top:22px}.style-sign i:nth-child(2){width:78px;height:18px;left:42px;top:100px;background:#111}.style-sign i:nth-child(3){width:34px;height:34px;right:12px;bottom:18px;transform:rotate(30deg)}.style-I01 i:nth-child(1){border-radius:0;background:#ddd}.style-I02 i:nth-child(1){border-radius:48% 52% 44% 56%;transform:rotate(-8deg)}.style-I03 i:nth-child(2){height:2px;background:#111;transform:rotate(-18deg)}.style-I04 i:nth-child(1){background:#111}.style-I05{filter:contrast(.92)}.style-I05:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#0002 .6px,transparent .7px);background-size:5px 5px}.style-I06 i:nth-child(1),.style-I06 i:nth-child(2),.style-I06 i:nth-child(3){display:none}.style-I06:after{content:"AaA 字";white-space:pre;position:absolute;left:16px;bottom:16px;font:800 50px/.85 var(--sans)}.image-style-item>div:last-child>span{font:650 11px/1 var(--mono)}.image-style-item h3{font-size:21px;line-height:1.2;margin:18px 0 10px}.image-style-item p{font-size:13px;line-height:1.55;color:var(--quiet);margin:0}.font-section-title{margin:44px 0 18px;font:650 15px/1 var(--mono);letter-spacing:.08em}.font-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.font-item,.emphasis-item{background:#fff;border:1px solid #aaa;padding:24px;min-height:250px}.font-item h3{font-family:var(--sample-font);font-weight:var(--sample-weight);font-size:46px;line-height:1.08;letter-spacing:-.035em;margin:44px 0}.font-item>div:last-child>b,.emphasis-item>b{font-size:17px}.font-item p,.emphasis-item p{font-size:13px;line-height:1.5;color:var(--quiet);margin:7px 0 0}.emphasis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.emphasis-item h3{font-size:54px;line-height:1.02;letter-spacing:-.045em;margin:42px 0;display:flex;flex-wrap:wrap;align-content:flex-start}.emphasis-item h3 span{position:relative;z-index:1}.accent-word{color:#d45132}.underline-word:after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:.02em;height:.10em;background:#d45132}.marker-word:after{content:"";position:absolute;z-index:-1;left:-.05em;right:-.05em;bottom:.08em;height:.38em;background:#d45132;opacity:.7;transform:rotate(-1.2deg)}
body{padding:34px}.masthead{margin-bottom:28px;padding-bottom:18px}.section-head{margin-bottom:20px}.grid{gap:18px}.footer{margin-top:28px}.image-style-grid{gap:14px}.image-style-item{padding:16px;grid-template-columns:108px 1fr;gap:16px;min-height:174px}.image-style-item h3{margin:12px 0 7px;font-size:19px}.image-style-item p{font-size:12px;line-height:1.4}.font-section-title{margin:26px 0 11px}.font-grid,.emphasis-grid{gap:12px}.font-item,.emphasis-item{padding:18px;min-height:192px}.font-item h3{font-size:42px;margin:26px 0}.emphasis-item h3{font-size:48px;margin:26px 0}.font-item p,.emphasis-item p{font-size:12px;line-height:1.38}.palette-table th,.palette-table td{padding:10px 14px}.swatch{width:30px;height:30px}
.system-summary{max-width:1440px;margin:0 auto 24px;padding:0 0 16px;border-bottom:1px solid;display:flex;gap:22px;flex-wrap:wrap;font:600 12px/1.3 var(--mono)}
.masthead{margin-bottom:22px}.masthead nav{flex-wrap:wrap;justify-content:flex-end}.page,.page.active{display:block;max-width:1440px;margin:0 auto;padding:30px 0 34px;border-top:1px solid #aaa;scroll-margin-top:18px}.page:first-child{border-top:0;padding-top:0}.body-atlas{padding:12px}.font-grid{gap:14px}.font-item{min-height:228px}.font-item h3{font-family:var(--sample-font);font-weight:var(--sample-weight);font-size:46px;line-height:1.06;letter-spacing:-.035em;margin:28px 0 10px}.font-item h4{font-family:var(--sample-font);font-weight:400;font-size:20px;line-height:1.2;margin:0 0 24px;color:#4d4d4d}.footer{margin-top:16px}
.english-library-item{min-height:258px}.font-glyph{height:142px;margin:18px 0 14px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid #dedbd4}.font-glyph img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}.english-library-item small{display:inline-block;margin-left:10px;color:var(--quiet);font:550 10px/1.2 var(--mono)}
.image-style-grid{grid-template-columns:repeat(2,1fr);gap:14px}.image-style-item{padding:14px;grid-template-columns:minmax(220px,44%) 1fr;gap:16px;min-height:224px}.style-preview{position:relative;margin:0;aspect-ratio:10/7;border:1px solid #aaa;background:#f5f5f2;overflow:hidden}.style-preview img{display:block;width:100%;height:100%;object-fit:cover}.image-style-item>div:last-child>span{font:650 10px/1.25 var(--mono);letter-spacing:.02em}.image-style-item h3{margin:12px 0 9px;font-size:20px}.image-style-item p{font-size:12px;line-height:1.42;margin:0 0 8px}.image-style-item p b{color:var(--ink)}
@media(max-width:900px){body{padding:24px}.composition-grid,.palette-grid,.type-grid,.hierarchy-grid{grid-template-columns:repeat(2,1fr)}.section-head,.masthead{grid-template-columns:1fr}.masthead nav{flex-wrap:wrap;justify-content:flex-start}.font-grid,.emphasis-grid,.image-style-grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<header class="masthead"><div><p>DESIGN SYSTEM / PUNK TEXT–IMAGE CONVERTER</p><h1>Punk 图文转换 Skill</h1></div><nav><a href="#compositions">封面版式 20</a><a href="#palettes">配色 25</a><a href="#images">图片风格 6</a><a href="#typography">中文 12 · 英文库 40</a><a href="#body">正文版式 20</a></nav></header>
<div class="system-summary"><span>完整系统连续展示</span><span>20 封面版式</span><span>25 配色</span><span>6 图片风格</span><span>12 中文字体</span><span>40 英文字体原库</span><span>4 标题强调</span><span>20 正文版式</span></div>
<main>
<section class="page" id="compositions" data-page="compositions"><div class="section-head"><h2>01 / 封面版式</h2><p>20 种竖屏知识卡片封面骨架。黑白定位图用于判断文字方向、图片位置、标题层级、作者署名与留白关系。</p></div><div class="grid composition-grid">
<article class="composition-item">
<div class="composition-paper align-center">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 01</span><span>3:4</span></div>
<div class="zone image-zone" style="left:25.1852%;top:49.4444%;width:49.6296%;height:30.5556%"><span>IMAGE</span></div>
<div class="zone title-zone horizontal " style="left:14.0741%;top:12.2222%;width:71.8519%;height:21.1111%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:21.4815%;top:36.6667%;width:57.0370%;height:8.3333%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:14.0741%;top:91.6667%;width:71.8519%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>01 / 居中标题·单图落点</b><span>核心 · 横排</span></div>
<p>标题居中；图片是第二视觉层</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 02</span><span>3:4</span></div>
<div class="zone image-zone" style="left:65.9259%;top:32.7778%;width:27.4074%;height:36.1111%"><span>IMAGE</span></div>
<div class="zone title-zone horizontal " style="left:6.6667%;top:12.2222%;width:57.0370%;height:23.8889%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:39.4444%;width:57.0370%;height:9.4444%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>02 / 左侧标题·右侧物件</b><span>核心 · 横排</span></div>
<p>标题与单一物件左右配重</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 03</span><span>3:4</span></div>
<div class="zone image-zone" style="left:6.6667%;top:38.3333%;width:86.6667%;height:34.4444%"><span>IMAGE</span></div>
<div class="zone title-zone horizontal " style="left:6.6667%;top:11.1111%;width:64.4444%;height:22.2222%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:76.6667%;width:86.6667%;height:8.3333%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>03 / 顶部标题·中部横图</b><span>核心 · 横排</span></div>
<p>标题先开题，再进入横向主图</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 06</span><span>3:4</span></div>
<div class="zone image-zone" style="left:29.6296%;top:13.3333%;width:63.7037%;height:36.1111%"><span>IMAGE</span></div>
<div class="zone title-zone vertical " style="left:6.6667%;top:13.3333%;width:16.2963%;height:50.0000%">长文变成知识卡片</div>
<div class="zone detail-zone" style="left:29.6296%;top:53.8889%;width:63.7037%;height:11.1111%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>06 / 竖排边栏·右侧横图</b><span>核心 · 竖排</span></div>
<p>竖题贴左边；说明保持横排</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 15</span><span>3:4</span></div>
<div class="zone image-zone" style="left:39.2593%;top:16.1111%;width:54.0741%;height:33.3333%"><span>IMAGE</span></div>
<div class="zone title-zone vertical vertical-huge" style="left:6.6667%;top:13.3333%;width:25.9259%;height:58.3333%">长文变成知识卡片</div>
<div class="zone detail-zone" style="left:39.2593%;top:54.4444%;width:54.0741%;height:9.4444%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>15 / 超大竖题·右侧小图</b><span>核心 · 超大竖排</span></div>
<p>竖题占满竖行；图片退为物件</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 16</span><span>3:4</span></div>
<div class="zone image-zone" style="left:52.5926%;top:12.2222%;width:40.7407%;height:50.0000%"><span>IMAGE</span></div>
<div class="zone title-zone horizontal " style="left:6.6667%;top:12.2222%;width:42.2222%;height:27.7778%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:43.8889%;width:42.2222%;height:10.5556%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>16 / 左文右图·四六分栏</b><span>核心 · 横排</span></div>
<p>文字与图片成为并行两列</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 17</span><span>3:4</span></div>
<div class="zone image-zone" style="left:6.6667%;top:11.1111%;width:86.6667%;height:36.1111%"><span>IMAGE</span></div>
<div class="zone title-zone huge " style="left:6.6667%;top:51.6667%;width:86.6667%;height:21.1111%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:76.1111%;width:86.6667%;height:8.3333%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>17 / 上图·下部超大标题</b><span>核心 · 超大横排</span></div>
<p>图片先出现；巨型标题收束</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 18</span><span>3:4</span></div>
<div class="zone image-zone" style="left:14.0741%;top:30.0000%;width:71.8519%;height:34.4444%"><span>IMAGE</span></div>
<div class="zone title-zone split-top" style="left:6.6667%;top:11.1111%;width:86.6667%;height:12.7778%">长文变成</div><div class="zone title-zone split-bottom" style="left:6.6667%;top:70.5556%;width:86.6667%;height:12.7778%">知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:85.0000%;width:55.5556%;height:3.3333%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>18 / 上下超大字·中间图</b><span>核心 · 上下超大字</span></div>
<p>两组大字包住中间主图</p>
</article>
<article class="composition-item">
<div class="composition-paper align-center">
<div class="zone metadata" style="left:14.0741%;top:5.0000%;width:71.8519%;height:2.2222%"><span>KNOWLEDGE / 35</span><span>3:4</span></div>
<div class="zone title-zone horizontal " style="left:14.0741%;top:19.4444%;width:71.8519%;height:27.7778%">长文变成<br>知识卡片</div>
<div class="zone watermark-zone" style="left:28.8889%;top:66.6667%;width:42.2222%;height:10.5556%">KNOWLEDGE</div>
<div class="zone detail-zone" style="left:21.4815%;top:52.7778%;width:57.0370%;height:8.3333%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:14.0741%;top:91.6667%;width:71.8519%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>35 / 全中轴纯文字</b><span>核心 · 横排</span></div>
<p>标题、副标题、作者全部居中</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 36</span><span>3:4</span></div>
<div class="zone title-zone huge-stack " style="left:6.6667%;top:13.3333%;width:79.2593%;height:45.0000%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:63.3333%;width:71.8519%;height:10.5556%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>36 / 超大字堆叠·纯文字</b><span>核心 · 超大字堆叠</span></div>
<p>放大文字本身，不使用大色块</p>
</article>
<article class="composition-item">
<div class="composition-paper align-center">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 33</span><span>3:4</span></div>
<div class="zone image-zone" style="left:21.4815%;top:35.0000%;width:57.0370%;height:36.1111%"><span>IMAGE</span></div>
<div class="zone title-zone horizontal " style="left:6.6667%;top:11.1111%;width:86.6667%;height:19.4444%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:14.0741%;top:76.1111%;width:71.8519%;height:8.3333%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:14.0741%;top:91.6667%;width:71.8519%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>33 / 原封面居中登记</b><span>补充 · 横排</span></div>
<p>标题、原封面、副标题上下登记</p>
</article>
<article class="composition-item">
<div class="composition-paper align-right">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 34</span><span>3:4</span></div>
<div class="zone image-zone" style="left:6.6667%;top:37.7778%;width:86.6667%;height:43.8889%"><span>IMAGE</span></div>
<div class="zone title-zone horizontal " style="left:51.1111%;top:11.1111%;width:42.2222%;height:21.1111%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:17.7778%;width:34.8148%;height:10.0000%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>34 / 右上标题·左侧说明·下图</b><span>补充 · 横排</span></div>
<p>右上标题与左侧说明反向配重</p>
</article>
<article class="composition-item">
<div class="composition-paper align-center">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 37</span><span>3:4</span></div>
<div class="zone image-zone" style="left:36.2963%;top:11.1111%;width:27.4074%;height:20.5556%"><span>IMAGE</span></div>
<div class="zone title-zone horizontal " style="left:10.3704%;top:37.2222%;width:79.2593%;height:21.1111%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:21.4815%;top:62.7778%;width:57.0370%;height:8.3333%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:14.0741%;top:91.6667%;width:71.8519%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>37 / 中央小图·中轴标题</b><span>补充 · 横排</span></div>
<p>小图像标点一样悬在标题之前</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:8.8889%;top:5.0000%;width:82.2222%;height:2.2222%"><span>KNOWLEDGE / 41</span><span>3:4</span></div>
<div class="zone image-zone" style="left:8.8889%;top:11.1111%;width:82.2222%;height:33.3333%"><span>IMAGE</span></div>
<div class="zone title-zone huge " style="left:6.6667%;top:58.8889%;width:86.6667%;height:25.0000%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:8.8889%;top:47.7778%;width:82.2222%;height:5.5556%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>41 / 上框图·底部巨型字标</b><span>补充 · 超大横排</span></div>
<p>上部完整框图；底部巨型短标题</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 42</span><span>3:4</span></div>
<div class="zone image-zone" style="left:6.6667%;top:35.5556%;width:86.6667%;height:47.2222%"><span>IMAGE</span></div>
<div class="zone title-zone horizontal " style="left:6.6667%;top:11.1111%;width:86.6667%;height:19.4444%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:85.0000%;width:86.6667%;height:3.8889%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>42 / 顶部标题·大幅近景</b><span>补充 · 横排</span></div>
<p>标题先定主题；下部近景占主体</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 11</span><span>3:4</span></div>
<div class="zone image-zone" style="left:36.2963%;top:40.5556%;width:57.0370%;height:27.7778%"><span>IMAGE</span></div>
<div class="zone title-zone diagonal " style="left:9.6296%;top:14.4444%;width:76.2963%;height:16.6667%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:72.7778%;width:49.6296%;height:8.3333%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>11 / 短语斜排·下部主图</b><span>条件 · 斜排</span></div>
<p>只允许极短展示词斜排</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 38</span><span>3:4</span></div>
<div class="zone image-zone" style="left:6.6667%;top:11.1111%;width:86.6667%;height:22.2222%"><span>IMAGE 1</span></div><div class="zone image-zone" style="left:51.1111%;top:36.1111%;width:34.8148%;height:25.0000%"><span>IMAGE 2</span></div>
<div class="zone title-zone horizontal " style="left:6.6667%;top:37.7778%;width:40.0000%;height:21.1111%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:63.3333%;width:40.0000%;height:10.0000%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>38 / 双图·横竖对照标题</b><span>条件 · 横排</span></div>
<p>标题位于两张证据图之间</p>
</article>
<article class="composition-item">
<div class="composition-paper align-left">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 39</span><span>3:4</span></div>
<div class="zone image-zone" style="left:6.6667%;top:11.1111%;width:49.6296%;height:20.8333%"><span>IMAGE 1</span></div><div class="zone image-zone" style="left:60.0000%;top:11.1111%;width:33.3333%;height:20.8333%"><span>IMAGE 2</span></div><div class="zone image-zone" style="left:6.6667%;top:34.7222%;width:86.6667%;height:22.2222%"><span>IMAGE 3</span></div>
<div class="zone title-zone horizontal " style="left:51.1111%;top:61.6667%;width:42.2222%;height:18.3333%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:6.6667%;top:61.6667%;width:37.0370%;height:10.0000%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>39 / 三图·底部左右文字</b><span>条件 · 横排</span></div>
<p>三张图叙事；底部文字左右收束</p>
</article>
<article class="composition-item">
<div class="composition-paper align-center">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 40</span><span>3:4</span></div>
<div class="zone echo-zone" style="left:6.6667%;top:10.0000%;width:86.6667%;height:10.0000%">知识卡片</div>
<div class="zone image-zone" style="left:6.6667%;top:50.5556%;width:86.6667%;height:34.7222%"><span>IMAGE</span></div>
<div class="zone title-zone horizontal " style="left:14.0741%;top:22.7778%;width:71.8519%;height:15.5556%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:21.4815%;top:41.1111%;width:57.0370%;height:6.1111%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>40 / 淡回声·中标题·下部摄影</b><span>条件 · 横排</span></div>
<p>回声字、标题、图片依次建立节奏</p>
</article>
<article class="composition-item">
<div class="composition-paper align-center">
<div class="zone metadata" style="left:6.6667%;top:5.0000%;width:86.6667%;height:2.2222%"><span>KNOWLEDGE / 43</span><span>3:4</span></div>
<div class="zone image-zone" style="left:28.8889%;top:36.1111%;width:42.2222%;height:24.4444%"><span>IMAGE</span></div>
<div class="zone title-zone micro micro-title" style="left:28.8889%;top:17.2222%;width:42.2222%;height:7.7778%">长文变成<br>知识卡片</div>
<div class="zone detail-zone" style="left:28.8889%;top:26.1111%;width:42.2222%;height:6.6667%">把长文整理成适合阅读的知识卡片</div>
<div class="zone author-zone" style="left:6.6667%;top:91.6667%;width:86.6667%;height:2.2222%">作者：XXX</div>
</div>
<div class="item-label"><b>43 / 微型标题·中央标志物</b><span>条件 · 微型标题</span></div>
<p>仅适合极短标题；说明居中放标题下</p>
</article></div></section>
<section class="page" id="palettes" data-page="palettes"><div class="section-head"><h2>02 / 配色清单</h2><p>每套配色分别定义封面背景、文字、点缀与正文背景角色。封面保持克制，正文按同一颜色体系延续。</p></div><table class="palette-table"><thead><tr><th>编号</th><th>名称 / 模式</th><th>封面底色</th><th>文字色</th><th>点缀色</th><th>正文底色</th></tr></thead><tbody><tr><th>P01</th><td><b>编辑米白＋碳黑</b><small>duotone · light</small></td><td><span class="swatch" style="--swatch:#F1EDE3"></span><code>#F1EDE3</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#F1EDE3"></span><code>#F1EDE3</code></td></tr><tr><th>P02</th><td><b>血红＋暖白</b><small>duotone · dark</small></td><td><span class="swatch" style="--swatch:#8A211B"></span><code>#8A211B</code></td><td><span class="swatch" style="--swatch:#F7F3EA"></span><code>#F7F3EA</code></td><td><span class="swatch" style="--swatch:#F7F3EA"></span><code>#F7F3EA</code></td><td><span class="swatch" style="--swatch:#E9DDD3"></span><code>#E9DDD3</code></td></tr><tr><th>P03</th><td><b>克莱因蓝＋暖白</b><small>duotone · dark</small></td><td><span class="swatch" style="--swatch:#002FA7"></span><code>#002FA7</code></td><td><span class="swatch" style="--swatch:#F7F3EA"></span><code>#F7F3EA</code></td><td><span class="swatch" style="--swatch:#F7F3EA"></span><code>#F7F3EA</code></td><td><span class="swatch" style="--swatch:#DEDEDE"></span><code>#DEDEDE</code></td></tr><tr><th>P05</th><td><b>深森林绿＋米白</b><small>duotone · dark</small></td><td><span class="swatch" style="--swatch:#185B43"></span><code>#185B43</code></td><td><span class="swatch" style="--swatch:#F1EDE3"></span><code>#F1EDE3</code></td><td><span class="swatch" style="--swatch:#F1EDE3"></span><code>#F1EDE3</code></td><td><span class="swatch" style="--swatch:#E0E1D6"></span><code>#E0E1D6</code></td></tr><tr><th>P06</th><td><b>杏仁纸＋咖啡棕</b><small>duotone · light</small></td><td><span class="swatch" style="--swatch:#F8E6D2"></span><code>#F8E6D2</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#704D3B"></span><code>#704D3B</code></td><td><span class="swatch" style="--swatch:#F8E6D2"></span><code>#F8E6D2</code></td></tr><tr><th>P07</th><td><b>鼠尾草灰＋胭脂红</b><small>duotone · light</small></td><td><span class="swatch" style="--swatch:#B6BEB1"></span><code>#B6BEB1</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#91222C"></span><code>#91222C</code></td><td><span class="swatch" style="--swatch:#B6BEB1"></span><code>#B6BEB1</code></td></tr><tr><th>P08</th><td><b>咖啡棕＋鼠尾草灰</b><small>duotone · dark</small></td><td><span class="swatch" style="--swatch:#704D3B"></span><code>#704D3B</code></td><td><span class="swatch" style="--swatch:#F7F3EA"></span><code>#F7F3EA</code></td><td><span class="swatch" style="--swatch:#B6BEB1"></span><code>#B6BEB1</code></td><td><span class="swatch" style="--swatch:#E7E0D6"></span><code>#E7E0D6</code></td></tr><tr><th>P09</th><td><b>胭脂红＋杏仁纸</b><small>duotone · dark</small></td><td><span class="swatch" style="--swatch:#91222C"></span><code>#91222C</code></td><td><span class="swatch" style="--swatch:#F8E6D2"></span><code>#F8E6D2</code></td><td><span class="swatch" style="--swatch:#F8E6D2"></span><code>#F8E6D2</code></td><td><span class="swatch" style="--swatch:#E9DDD4"></span><code>#E9DDD4</code></td></tr><tr><th>P10</th><td><b>暖石灰＋铁锈红</b><small>duotone · light</small></td><td><span class="swatch" style="--swatch:#D7CFC4"></span><code>#D7CFC4</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#7D2027"></span><code>#7D2027</code></td><td><span class="swatch" style="--swatch:#D7CFC4"></span><code>#D7CFC4</code></td></tr><tr><th>P11</th><td><b>灰褐＋深酒红</b><small>duotone · light</small></td><td><span class="swatch" style="--swatch:#A2937E"></span><code>#A2937E</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#381818"></span><code>#381818</code></td><td><span class="swatch" style="--swatch:#A2937E"></span><code>#A2937E</code></td></tr><tr><th>P13</th><td><b>象牙白＋墨黑</b><small>duotone · light</small></td><td><span class="swatch" style="--swatch:#FFFEF2"></span><code>#FFFEF2</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#FFFEF2"></span><code>#FFFEF2</code></td></tr><tr><th>P14</th><td><b>琥珀橙＋森林灰绿</b><small>duotone · light</small></td><td><span class="swatch" style="--swatch:#F39A41"></span><code>#F39A41</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#3B5943"></span><code>#3B5943</code></td><td><span class="swatch" style="--swatch:#F39A41"></span><code>#F39A41</code></td></tr><tr><th>P15</th><td><b>羊皮纸＋灰鼠尾草</b><small>duotone · light</small></td><td><span class="swatch" style="--swatch:#EDDDC5"></span><code>#EDDDC5</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#58705A"></span><code>#58705A</code></td><td><span class="swatch" style="--swatch:#EDDDC5"></span><code>#EDDDC5</code></td></tr><tr><th>P16</th><td><b>酒红＋陈金</b><small>duotone · dark</small></td><td><span class="swatch" style="--swatch:#7D2027"></span><code>#7D2027</code></td><td><span class="swatch" style="--swatch:#F7F3EA"></span><code>#F7F3EA</code></td><td><span class="swatch" style="--swatch:#CE9042"></span><code>#CE9042</code></td><td><span class="swatch" style="--swatch:#E8DDD4"></span><code>#E8DDD4</code></td></tr><tr><th>P17</th><td><b>牛仔蓝＋勃艮第红</b><small>duotone · dark</small></td><td><span class="swatch" style="--swatch:#315B73"></span><code>#315B73</code></td><td><span class="swatch" style="--swatch:#F8F6F2"></span><code>#F8F6F2</code></td><td><span class="swatch" style="--swatch:#6F263D"></span><code>#6F263D</code></td><td><span class="swatch" style="--swatch:#E1E4DF"></span><code>#E1E4DF</code></td></tr><tr><th>P19</th><td><b>血红＋暖白＋信号黄</b><small>tritone · dark</small></td><td><span class="swatch" style="--swatch:#8A211B"></span><code>#8A211B</code></td><td><span class="swatch" style="--swatch:#F7F3EA"></span><code>#F7F3EA</code></td><td><span class="swatch" style="--swatch:#F2C84B"></span><code>#F2C84B</code></td><td><span class="swatch" style="--swatch:#E9DDD3"></span><code>#E9DDD3</code></td></tr><tr><th>P20</th><td><b>编辑紫＋米白＋琥珀黄</b><small>tritone · dark</small></td><td><span class="swatch" style="--swatch:#504267"></span><code>#504267</code></td><td><span class="swatch" style="--swatch:#F1EDE3"></span><code>#F1EDE3</code></td><td><span class="swatch" style="--swatch:#D9B45B"></span><code>#D9B45B</code></td><td><span class="swatch" style="--swatch:#E4DFD9"></span><code>#E4DFD9</code></td></tr><tr><th>P21</th><td><b>宜家蓝＋纯白＋信号黄</b><small>tritone · dark</small></td><td><span class="swatch" style="--swatch:#0058A3"></span><code>#0058A3</code></td><td><span class="swatch" style="--swatch:#FFFFFF"></span><code>#FFFFFF</code></td><td><span class="swatch" style="--swatch:#F2C84B"></span><code>#F2C84B</code></td><td><span class="swatch" style="--swatch:#DEE1DE"></span><code>#DEE1DE</code></td></tr><tr><th>P22</th><td><b>克莱因蓝＋暖白＋朱橙</b><small>tritone · dark</small></td><td><span class="swatch" style="--swatch:#002FA7"></span><code>#002FA7</code></td><td><span class="swatch" style="--swatch:#F7F3EA"></span><code>#F7F3EA</code></td><td><span class="swatch" style="--swatch:#E7542D"></span><code>#E7542D</code></td><td><span class="swatch" style="--swatch:#DEDEDE"></span><code>#DEDEDE</code></td></tr><tr><th>P23</th><td><b>编辑米白＋碳黑＋国际蓝</b><small>tritone · light</small></td><td><span class="swatch" style="--swatch:#F1EDE3"></span><code>#F1EDE3</code></td><td><span class="swatch" style="--swatch:#211E1D"></span><code>#211E1D</code></td><td><span class="swatch" style="--swatch:#2146C7"></span><code>#2146C7</code></td><td><span class="swatch" style="--swatch:#F1EDE3"></span><code>#F1EDE3</code></td></tr><tr><th>P25</th><td><b>荧光绿＋碳黑＋珍珠白</b><small>tritone · light</small></td><td><span class="swatch" style="--swatch:#F8F6F2"></span><code>#F8F6F2</code></td><td><span class="swatch" style="--swatch:#111111"></span><code>#111111</code></td><td><span class="swatch" style="--swatch:#C7FF2F"></span><code>#C7FF2F</code></td><td><span class="swatch" style="--swatch:#F8F6F2"></span><code>#F8F6F2</code></td></tr><tr><th>P26</th><td><b>夜幕蓝＋珍珠白＋日光黄</b><small>tritone · dark</small></td><td><span class="swatch" style="--swatch:#162A46"></span><code>#162A46</code></td><td><span class="swatch" style="--swatch:#F8F6F2"></span><code>#F8F6F2</code></td><td><span class="swatch" style="--swatch:#ECCA3E"></span><code>#ECCA3E</code></td><td><span class="swatch" style="--swatch:#DFDFDC"></span><code>#DFDFDC</code></td></tr><tr><th>P27</th><td><b>夜紫＋金沙＋琥珀</b><small>tritone · dark</small></td><td><span class="swatch" style="--swatch:#2D1C42"></span><code>#2D1C42</code></td><td><span class="swatch" style="--swatch:#F8F6F2"></span><code>#F8F6F2</code></td><td><span class="swatch" style="--swatch:#C88B00"></span><code>#C88B00</code></td><td><span class="swatch" style="--swatch:#E1DCDA"></span><code>#E1DCDA</code></td></tr><tr><th>P28</th><td><b>牛仔蓝＋暖杏纸＋陶橙</b><small>tritone · dark</small></td><td><span class="swatch" style="--swatch:#315B73"></span><code>#315B73</code></td><td><span class="swatch" style="--swatch:#FAE3B1"></span><code>#FAE3B1</code></td><td><span class="swatch" style="--swatch:#CF5527"></span><code>#CF5527</code></td><td><span class="swatch" style="--swatch:#E1E4DF"></span><code>#E1E4DF</code></td></tr><tr><th>P29</th><td><b>勃艮第红＋暖杏纸＋陶橙</b><small>tritone · dark</small></td><td><span class="swatch" style="--swatch:#6F263D"></span><code>#6F263D</code></td><td><span class="swatch" style="--swatch:#FAE3B1"></span><code>#FAE3B1</code></td><td><span class="swatch" style="--swatch:#CF5527"></span><code>#CF5527</code></td><td><span class="swatch" style="--swatch:#E7DCDA"></span><code>#E7DCDA</code></td></tr></tbody></table></section>
<section class="page" id="images" data-page="images"><div class="section-head"><h2>03 / 插图与图片风格</h2><p>六种已确认视觉来源的原创样张。它们定义图像语言，不是固定构图；实际主体仍根据文章主题生成，并始终保持一个主体、一个视觉中心、一次点缀色与无遮挡。</p></div><div class="image-style-grid"><article class="image-style-item"><figure class="style-preview"><img src="../image-style-library/01-source-cover-adapted.svg" alt="Markdown 自带封面适配原创样张"></figure><div><span>I01 / source-cover-adapted</span><h3>Markdown 自带封面适配</h3><p><b>适用：</b>Markdown 含明确封面且用户确认纳入五案</p><p>保留原图核心主体与辨识信息，去除、弱化或融合原底色，使其适配已选封面配色；不使用 HTML 重画。</p></div></article><article class="image-style-item"><figure class="style-preview"><img src="../image-style-library/02-anthropic-editorial.svg" alt="Anthropic 风格插画原创样张"></figure><div><span>I02 / anthropic-editorial-illustration</span><h3>Anthropic 风格插画</h3><p><b>适用：</b>教程、AI、工具、工作流与抽象概念</p><p>克制手绘线条、简化符号、略带人手痕迹；一个核心主体、一个视觉中心，拒绝图标墙。</p></div></article><article class="image-style-item"><figure class="style-preview"><img src="../image-style-library/03-swiss-line-shape.svg" alt="瑞士国际主义图形原创样张"></figure><div><span>I03 / swiss-line-shape-system</span><h3>瑞士国际主义图形</h3><p><b>适用：</b>方法、结构、比较、数据关系与技术主题</p><p>使用网格、线条、色块和几何形状解释信息关系；形状必须有语义，不作为无意义装饰。</p></div></article><article class="image-style-item"><figure class="style-preview"><img src="../image-style-library/04-flat-editorial.svg" alt="扁平编辑插画原创样张"></figure><div><span>I04 / flat-editorial-illustration</span><h3>扁平编辑插画</h3><p><b>适用：</b>步骤、服务场景、人物行动与生活方式教程</p><p>简化轮廓、平面色块与清楚姿态；不用 3D，不做复杂机械细节，不堆功能按钮。</p></div></article><article class="image-style-item"><figure class="style-preview"><img src="../image-style-library/05-mid-century-editorial.svg" alt="中期现代主义复古编辑插画原创样张"></figure><div><span>I05 / mid-century-modern-editorial</span><h3>中期现代主义复古编辑插画</h3><p><b>适用：</b>文化、设计、人物观点、品牌史与具有叙事感的主题</p><p>复古书封、杂志封面、黑色电影和几何平面设计语言；几何化轮廓、剪影明暗、单一色彩重点与克制油墨颗粒。</p></div></article><article class="image-style-item"><figure class="style-preview"><img src="../image-style-library/06-typography-only.svg" alt="纯文字排版原创样张"></figure><div><span>I06 / typography-only</span><h3>纯文字排版</h3><p><b>适用：</b>标题本身足够强、没有必要增加图片</p><p>以超大字、竖排、短语斜排或中轴层级作为主视觉；不是空白占位，也不以大色块替代大字。</p></div></article></div></section>
<section class="page" id="typography" data-page="typography"><div class="section-head"><h2>04 / 字体库与标题强调</h2><p>中文字体用于实际排版；英文部分完整恢复 Punk 原先提供的 40 种字体图鉴，以原始字形样张展示差异。01–16 为编辑衬线，17–32 为现代主义无衬线，33–40 为英文手写。</p></div><h3 class="font-section-title">中文字体 12 / CHINESE</h3><div class="font-grid"><article class="font-item" style="--sample-font:'PingFang SC';--sample-weight:500"><div class="type-meta"><span>C01</span><span>本机字体</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>苹方 SC</b><p>苹果系统无衬线；轻净、均衡，适合说明与正文</p></div></article><article class="font-item" style="--sample-font:'Hiragino Sans GB';--sample-weight:500"><div class="type-meta"><span>C02</span><span>本机字体</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>冬青黑体简体</b><p>骨架开阔、转角利落，适合科技和编辑型标题</p></div></article><article class="font-item" style="--sample-font:'PunkSans';--sample-weight:760"><div class="type-meta"><span>C03</span><span>Skill 内嵌</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>思源黑体</b><p>主标题基准；字面稳定、字重范围完整</p></div></article><article class="font-item" style="--sample-font:'PunkSerif';--sample-weight:560"><div class="type-meta"><span>C04</span><span>Skill 内嵌</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>思源宋体</b><p>现代宋体；适合知识、文化与杂志式转折</p></div></article><article class="font-item" style="--sample-font:'Songti SC';--sample-weight:560"><div class="type-meta"><span>C05</span><span>本机字体</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>宋体 SC</b><p>传统书刊气质，横细竖粗，适合编辑内容</p></div></article><article class="font-item" style="--sample-font:'Heiti SC';--sample-weight:400"><div class="type-meta"><span>C06</span><span>本机字体</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>黑体简 Light</b><p>较窄的经典黑体，适合大字号克制标题</p></div></article><article class="font-item" style="--sample-font:'Lantinghei SC';--sample-weight:520"><div class="type-meta"><span>C07</span><span>本机字体</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>兰亭黑 SC</b><p>人文无衬线，字面舒展，适合教程与长读</p></div></article><article class="font-item" style="--sample-font:'Yuanti SC';--sample-weight:520"><div class="type-meta"><span>C08</span><span>本机字体</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>圆体 SC</b><p>柔和圆润，适合生活方式与轻知识主题</p></div></article><article class="font-item" style="--sample-font:'Kaiti SC';--sample-weight:520"><div class="type-meta"><span>C09</span><span>本机字体</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>楷体 SC</b><p>手写书卷感，只作短标题或一次编辑转折</p></div></article><article class="font-item" style="--sample-font:'STFangsong';--sample-weight:520"><div class="type-meta"><span>C10</span><span>本机字体</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>华文仿宋</b><p>细长、文献感明显，适合引言与文化主题</p></div></article><article class="font-item" style="--sample-font:'FZQingKeBenYueSongS-R-GB';--sample-weight:500"><div class="type-meta"><span>C11</span><span>用户已安装</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>方正清刻本悦宋</b><p>雕版书刊气质，适合复古编辑封面</p></div></article><article class="font-item" style="--sample-font:'YouYuan';--sample-weight:500"><div class="type-meta"><span>C12</span><span>用户已安装</span></div><h3>长文变成知识卡片</h3><h4>清晰阅读，从容表达</h4><div><b>幼圆</b><p>圆角和低压迫感，仅用于轻松、入门主题</p></div></article></div><h3 class="font-section-title">英文原库 40 / PUNK FONT FIELD NOTES</h3><div class="font-grid"><article class="font-item english-library-item"><div class="type-meta"><span>F01</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/01.png" alt="Didot 字形样张"></div><div><b>Didot</b><small>高反差衬线</small><p>适合：时装、奢侈品、人物封面、极简杂志</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F02</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/02.png" alt="Bodoni 字形样张"></div><div><b>Bodoni</b><small>现代高反差衬线</small><p>适合：时尚、香水、艺术展、奢侈品牌</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F03</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/03.png" alt="PP Editorial New 字形样张"></div><div><b>PP Editorial New</b><small>窄体编辑衬线</small><p>适合：独立杂志、艺术书、生活方式封面</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F04</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/04.png" alt="Tiempos 字形样张"></div><div><b>Tiempos</b><small>编辑衬线</small><p>适合：文化、人物专访、商业长文、报刊视觉</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F05</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/05.png" alt="Canela 字形样张"></div><div><b>Canela</b><small>展示衬线</small><p>适合：生活方式、美妆、女性主题、艺术封面</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F06</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/06.png" alt="Ogg 字形样张"></div><div><b>Ogg</b><small>书法式展示衬线 · 艺术曲线体</small><p>适合：先锋时尚、艺术展、实验杂志</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F07</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/07.png" alt="GT Super 字形样张"></div><div><b>GT Super</b><small>表现型衬线</small><p>适合：复古杂志、音乐、文化、人物故事</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F08</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/08.png" alt="Cormorant Garamond 字形样张"></div><div><b>Cormorant Garamond</b><small>古典衬线</small><p>适合：文学、诗歌、文化、艺术书</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F09</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/09.png" alt="Instrument Serif 字形样张"></div><div><b>Instrument Serif</b><small>现代展示衬线</small><p>适合：设计、摄影、建筑、艺术海报</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F10</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/10.png" alt="Fraunces 字形样张"></div><div><b>Fraunces</b><small>柔性衬线</small><p>适合：咖啡、生活方式、复古品牌、音乐</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F11</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/11.png" alt="Caslon 字形样张"></div><div><b>Caslon</b><small>老式衬线</small><p>适合：文化、历史、书籍、严肃长文</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F12</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/12.png" alt="Garamond 字形样张"></div><div><b>Garamond</b><small>人文衬线</small><p>适合：书籍、文化、历史、知识型内容</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F13</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/13.png" alt="Playfair Display 字形样张"></div><div><b>Playfair Display</b><small>高反差展示衬线</small><p>适合：时尚、情绪、人像、封面</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F14</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/14.png" alt="Lyon Display 字形样张"></div><div><b>Lyon Display</b><small>高端展示衬线</small><p>适合：人物专访、文化杂志、精品出版物</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F15</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/15.png" alt="Abril Display 字形样张"></div><div><b>Abril Display</b><small>展示衬线</small><p>适合：大标题、文化海报、视觉封面</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F16</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/16.png" alt="Recoleta 字形样张"></div><div><b>Recoleta</b><small>圆润衬线</small><p>适合：生活方式、食品、音乐、品牌故事</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F17</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/17.png" alt="Helvetica Neue 字形样张"></div><div><b>Helvetica Neue</b><small>新无衬线</small><p>适合：极简海报、科技、品牌、信息设计</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F18</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/18.png" alt="Neue Haas Grotesk 字形样张"></div><div><b>Neue Haas Grotesk</b><small>新怪诞无衬线</small><p>适合：设计杂志、品牌、建筑、艺术</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F19</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/19.png" alt="Futura 字形样张"></div><div><b>Futura</b><small>几何无衬线 · 包豪斯几何体</small><p>适合：现代主义、建筑、科技、电影海报</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F20</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/20.png" alt="Avenir 字形样张"></div><div><b>Avenir</b><small>几何人文无衬线</small><p>适合：生活方式、产品、品牌、科技</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F21</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/21.png" alt="Graphik 字形样张"></div><div><b>Graphik</b><small>中性无衬线</small><p>适合：媒体、科技、品牌、现代杂志</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F22</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/22.png" alt="Circular 字形样张"></div><div><b>Circular</b><small>几何无衬线</small><p>适合：互联网品牌、生活方式、产品</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F23</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/23.png" alt="GT America 字形样张"></div><div><b>GT America</b><small>怪诞无衬线</small><p>适合：商业、人物、文化、新闻型海报</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F24</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/24.png" alt="Founders Grotesk 字形样张"></div><div><b>Founders Grotesk</b><small>窄怪诞无衬线</small><p>适合：潮流、艺术、摄影、独立杂志</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F25</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/25.png" alt="Neue Montreal 字形样张"></div><div><b>Neue Montreal</b><small>现代怪诞无衬线</small><p>适合：设计工作室、建筑、艺术、品牌</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F26</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/26.png" alt="Suisse International 字形样张"></div><div><b>Suisse International</b><small>瑞士怪诞无衬线</small><p>适合：品牌系统、科技、商业、极简设计</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F27</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/27.png" alt="Univers 字形样张"></div><div><b>Univers</b><small>中性无衬线</small><p>适合：信息设计、科技、建筑、企业视觉</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F28</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/28.png" alt="Akzidenz Grotesk 字形样张"></div><div><b>Akzidenz Grotesk</b><small>经典怪诞无衬线</small><p>适合：现代主义、艺术展、独立海报</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F29</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/29.png" alt="DIN Condensed 字形样张"></div><div><b>DIN Condensed</b><small>工业窄体</small><p>适合：运动、汽车、户外、机能海报</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F30</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/30.png" alt="Bebas Neue 字形样张"></div><div><b>Bebas Neue</b><small>窄体无衬线</small><p>适合：电影、运动、活动、强标题封面</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F31</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/31.png" alt="Franklin Gothic Condensed 字形样张"></div><div><b>Franklin Gothic Condensed</b><small>窄怪诞无衬线</small><p>适合：新闻、体育、复古美国、编辑标题</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F32</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/32.png" alt="ITC Avant Garde Gothic 字形样张"></div><div><b>ITC Avant Garde Gothic</b><small>几何无衬线</small><p>适合：音乐、时尚、复古未来、实验排版</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F33</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/33.png" alt="Biro Script 字形样张"></div><div><b>Biro Script</b><small>真实手写</small><p>适合：笔记、签名、生活方式、旅行</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F34</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/34.png" alt="Sacramento 字形样张"></div><div><b>Sacramento</b><small>单线手写</small><p>适合：咖啡、旅行、音乐、女性生活方式</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F35</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/35.png" alt="Caveat 字形样张"></div><div><b>Caveat</b><small>自然手写</small><p>适合：批注、旅行、生活记录、创意海报</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F36</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/36.png" alt="Allura 字形样张"></div><div><b>Allura</b><small>书法手写</small><p>适合：时尚、珠宝、精致点缀</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F37</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/37.png" alt="Permanent Marker 字形样张"></div><div><b>Permanent Marker</b><small>马克笔手写</small><p>适合：PUNK、运动、街头、音乐、冲击型标题</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F38</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/38.png" alt="Rock Salt 字形样张"></div><div><b>Rock Salt</b><small>手绘字</small><p>适合：户外、滑板、音乐、手作、实验海报</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F39</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/39.png" alt="SignPainter 字形样张"></div><div><b>SignPainter</b><small>笔刷手写</small><p>适合：复古广告、咖啡、汽车、音乐</p></div></article><article class="font-item english-library-item"><div class="type-meta"><span>F40</span><span>PUNK FONT FIELD NOTES</span></div><div class="font-glyph"><img src="../font-library/glyphs/40.png" alt="Mrs Saint Delafield 字形样张"></div><div><b>Mrs Saint Delafield</b><small>签名字体</small><p>适合：时尚、人物、摄影、生活方式</p></div></article></div><h3 class="font-section-title">标题强调 4 / FOUR MODES</h3><div class="emphasis-grid"><article class="emphasis-item"><div class="type-meta"><span>A01</span><span>ACCENT</span></div><h3><span>长文变成</span><span>知识卡片</span></h3><b>默认层级</b><p>不加装饰，以字号、粗细和留白建立层级。</p></article><article class="emphasis-item"><div class="type-meta"><span>A02</span><span>ACCENT</span></div><h3><span>长文变成</span><span class="accent-word">知识</span><span>卡片</span></h3><b>重点字点缀色</b><p>只对完整关键词使用配色中的点缀色。</p></article><article class="emphasis-item"><div class="type-meta"><span>A03</span><span>ACCENT</span></div><h3><span>长文变成</span><span class="underline-word">知识</span><span>卡片</span></h3><b>短下划线</b><p>线位于字形下方，不压字、不贯穿整句。</p></article><article class="emphasis-item"><div class="type-meta"><span>A04</span><span>ACCENT</span></div><h3><span>长文变成</span><span class="marker-word">知识卡片</span></h3><b>荧光笔高亮</b><p>使用当前配色的点缀色做手划荧光笔底纹。</p></article></div></section>
<section class="page" id="body" data-page="body"><div class="section-head"><h2>05 / 正文版式系统</h2><p>20 种与配色无关的信息骨架。版式按文章结构选择，再继承封面的颜色角色、字体关系与图形语言。</p></div><div class="body-atlas"><img src="../body-layout-atlas/overview.png" alt="20 种正文版式总览"></div></section>
</main>
<footer class="footer">PUNK / ORIGINAL DESIGN SYSTEM · 20 COVER LAYOUTS · 25 PALETTES · 6 IMAGE MODES · 12 CHINESE FONTS · 40 ENGLISH FONT DIRECTIONS · 4 EMPHASIS MODES · 20 BODY LAYOUTS</footer>
<script>document.fonts.ready.then(()=>document.documentElement.classList.add('fonts-ready'));</script>
</body></html>