"
},
{
"slug": "monumental-type",
@@ -33,7 +33,7 @@
"check": "裁切只作用于装饰字；H1 与正文不裁切；英文与主题有语义关联；字号层级至少 3:1。",
"css": ".sheet.monumental-type .panel-a{left:0;bottom:0;width:100%;height:40%;background:var(--deep)}.sheet.monumental-type .display{position:absolute;left:-4%;top:26%;font:bold 24em/.8 Georgia,serif;letter-spacing:-.08em}.sheet.monumental-type .title{left:7%;top:10%;font-size:6em}.sheet.monumental-type .copy{left:7%;bottom:10%;width:60%;color:var(--paper)}",
"markup": "\nFORM
\n形式与留白
\n让一个词成为画面的重心。\nDESIGN STUDIES / 2026
",
- "shapes": "FORM"
+ "shapes": "FORM"
},
{
"slug": "orbital-rings",
@@ -45,7 +45,7 @@
"check": "窄屏仍为正圆；环线不穿过文字；不要把装饰环误称数据刻度；有动画时尊重减少动态偏好。",
"css": ".sheet.orbital-rings .orbit{position:absolute;left:14%;top:16%;width:72%;aspect-ratio:1;border-radius:50%;background:var(--deep);box-shadow:0 0 0 1.2em var(--paper),0 0 0 1.3em var(--muted),0 0 0 2.5em var(--paper),0 0 0 2.6em var(--muted),0 0 0 3.8em var(--paper),0 0 0 3.9em var(--muted)}.sheet.orbital-rings .title{left:7%;bottom:15%;font-size:6.5em}.sheet.orbital-rings .copy{left:7%;bottom:6%;width:80%}",
"markup": "\n周而复始
\n时间的形状 / ANNUAL REVIEW / 2026
",
- "shapes": ""
+ "shapes": ""
},
{
"slug": "organic-ellipse",
@@ -57,7 +57,7 @@
"check": "椭圆与标题无交叠；出血边缘不生成横向滚动；曲线的视觉重量在右侧；正文底部安全距至少 64px。",
"css": ".sheet.organic-ellipse .oval{position:absolute;left:24%;top:27%;width:102%;height:62%;border-radius:50%;transform:rotate(-12deg);background:var(--deep)}.sheet.organic-ellipse .title{left:7%;top:10%;font-size:6.5em}.sheet.organic-ellipse .copy{left:7%;bottom:7%;width:40%}",
"markup": "\n缓慢生长
\n一条曲线，\n一处停顿。
",
- "shapes": ""
+ "shapes": ""
},
{
"slug": "modular-grid",
@@ -69,7 +69,7 @@
"check": "顺序与 DOM 阅读顺序一致；每项标题不超过 8 字；格间距一致；内容超出六项时分页，不能挤小文字。",
"css": ".sheet.modular-grid .grid{position:absolute;left:7%;right:7%;top:28%;bottom:13%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2em}.sheet.modular-grid .cell{padding:2em;background:var(--muted);font-size:2.6em}.sheet.modular-grid .cell:first-child{background:var(--deep);color:var(--paper)}.sheet.modular-grid .title{left:7%;top:10%;font-size:6.5em}.sheet.modular-grid .copy{left:7%;bottom:5%;width:86%}",
"markup": "视觉档案
\n01 / 观察
02 / 结构
03 / 材料
04 / 字体
05 / 色彩
06 / 留白
INDEX / SIX DESIGN STUDIES
",
- "shapes": ""
+ "shapes": ""
},
{
"slug": "editorial-serif",
@@ -93,7 +93,7 @@
"check": "标题不能被色带边界切成难读的两段；带内文字保持足够对比；色带只负责分区，不伪装成按钮。",
"css": ".sheet.horizontal-band .band{position:absolute;left:0;top:34%;width:100%;height:33%;background:var(--deep)}.sheet.horizontal-band .title{left:7%;top:12%;font-size:7em}.sheet.horizontal-band .sub{position:absolute;left:7%;top:43%;font-size:5.5em;color:var(--paper);line-height:1.1}.sheet.horizontal-band .copy{left:7%;bottom:12%;width:65%}",
"markup": "\n留白练习
\nCHAPTER
ZERO
\n以一道横向色带，\n建立章节之间的停顿。
",
- "shapes": "CHAPTER ZERO"
+ "shapes": "CHAPTER ZERO"
},
{
"slug": "diagonal-cards",
@@ -105,7 +105,7 @@
"check": "倾斜不超过 6 度；角点留在安全区；不要给正文整体旋转；阴影只用一层低透明度。",
"css": ".sheet.diagonal-cards .back{left:14%;top:27%;width:66%;height:49%;transform:rotate(-5deg);background:#dce0da}.sheet.diagonal-cards .front{left:20%;top:29%;width:66%;height:49%;transform:rotate(3deg);background:var(--deep);box-shadow:0 .6em 1.2em #24323015}.sheet.diagonal-cards .title{left:7%;top:8%;font-size:6.5em}.sheet.diagonal-cards .copy{left:7%;bottom:8%;width:80%}",
"markup": "\n\n纸上的实验
\n材料笔记 / 两张卡片的轻微偏移
",
- "shapes": ""
+ "shapes": ""
},
{
"slug": "annotation-lines",
@@ -129,7 +129,7 @@
"check": "两个区域的关系能一句话说清；深区小字对比足够；边界没有压住文字；阅读顺序先上后下。",
"css": ".sheet.split-contrast .dark{position:absolute;left:0;top:48%;width:100%;height:52%;background:var(--deep)}.sheet.split-contrast .title{left:7%;top:12%;font-size:7.5em}.sheet.split-contrast .answer{position:absolute;left:7%;top:59%;font-size:7.5em;line-height:1.1;color:var(--paper);margin:0}.sheet.split-contrast .copy{left:7%;bottom:10%;width:80%;color:var(--paper)}",
"markup": "\n看见留白
\n读懂秩序
\n从空间到关系 / TWO PERSPECTIVES
",
- "shapes": "读懂秩序"
+ "shapes": "读懂秩序"
},
{
"slug": "type-frame",