sintbot 1.0.15 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.en.json +118 -0
- package/CHANGELOG.json +118 -0
- package/README.md +20 -156
- package/README.zh-CN.md +20 -164
- package/THIRD-PARTY-NOTICES.md +394 -0
- package/bin/sintbot-v2.js +363 -0
- package/docs/AI-ASSISTED-INSTALL.md +19 -0
- package/docs/install.md +93 -0
- package/docs/zh-CN/AI-ASSISTED-INSTALL.md +19 -0
- package/docs/zh-CN/install.md +93 -0
- package/install.sh +84 -0
- package/package.json +74 -34
- package/src/agent/claudecode.js +149 -108
- package/src/agent/codexapp.js +458 -0
- package/src/agent/codexcode.js +210 -107
- package/src/agent/errtag.js +34 -0
- package/src/agent/privatecore.js +790 -0
- package/src/agent/privatecore.wasm +0 -0
- package/src/agent/runner.js +10 -8
- package/src/agent/winexec.js +35 -5
- package/src/c2install.js +117 -0
- package/src/config.js +2 -1
- package/src/core/c2cardeffectbridge.js +51 -0
- package/src/core/c2cardterminalpath.js +216 -0
- package/src/core/c2durableingress.js +148 -0
- package/src/core/c2durablejournal.js +1560 -0
- package/src/core/c2durableruntime.js +2361 -0
- package/src/core/c2eventidentity.js +90 -0
- package/src/core/c2globalfault.js +401 -0
- package/src/core/c2localeffectexecutor.js +193 -0
- package/src/core/c2payloadhandles.js +333 -0
- package/src/core/c2persistrelation.js +179 -0
- package/src/core/c2persiststate.js +342 -0
- package/src/core/c2platformrecoverysender.js +76 -0
- package/src/core/c2recoverygate.js +385 -0
- package/src/core/c2runnerinput.js +63 -0
- package/src/core/c2servicestartgate.js +103 -0
- package/src/core/c2sessionbridge.js +72 -0
- package/src/core/c2sourcequarantine.js +30 -0
- package/src/core/c2startuprecovery.js +105 -0
- package/src/core/c2successorbridge.js +151 -0
- package/src/core/c2terminaleffectbridge.js +154 -0
- package/src/core/c2terminalprune.js +108 -0
- package/src/core/c2turnprojection.js +177 -0
- package/src/core/enginecheckpoint.js +211 -0
- package/src/core/engineeffectcursor.js +394 -0
- package/src/core/enginestepcoordinator.js +183 -0
- package/src/core/store.js +52 -8
- package/src/core/v2engine.js +1469 -0
- package/src/platform/feishu.js +324 -67
- package/src/plugins.js +1 -9
- package/assets/design-styles/acid-pop.md +0 -155
- package/assets/design-styles/archive-index.md +0 -161
- package/assets/design-styles/art-deco.md +0 -164
- package/assets/design-styles/cinematic-noir.md +0 -178
- package/assets/design-styles/editorial.md +0 -121
- package/assets/design-styles/extra/README.md +0 -23
- package/assets/design-styles/extra/constructivism.md +0 -146
- package/assets/design-styles/extra/neo-brutalism.md +0 -175
- package/assets/design-styles/extra/new-wave.md +0 -166
- package/assets/design-styles/extra/nordic-material.md +0 -162
- package/assets/design-styles/extra/paris-couture.md +0 -162
- package/assets/design-styles/extra/tropical-modern.md +0 -168
- package/assets/design-styles/extra/ulm-functional.md +0 -182
- package/assets/design-styles/extra/wa-shikimen.md +0 -160
- package/assets/design-styles/extra/y2k-chrome.md +0 -172
- package/assets/design-styles/geometric-pop.md +0 -122
- package/assets/design-styles/hand-drawn.md +0 -117
- package/assets/design-styles/islamic-geometry.md +0 -155
- package/assets/design-styles/liquid-glass.md +0 -183
- package/assets/design-styles/neo-chinese.md +0 -136
- package/assets/design-styles/precision-mono.md +0 -156
- package/assets/design-styles/quiet-luxury.md +0 -163
- package/assets/design-styles/riso-print.md +0 -116
- package/assets/design-styles/soft-friendly.md +0 -174
- package/assets/design-styles/swiss-grid.md +0 -156
- package/assets/design-styles/tech-dark.md +0 -182
- package/assets/favicon.svg +0 -6
- package/assets/logo.svg +0 -24
- package/bin/sbot.js +0 -4711
- package/docs/slack-app-manifest.yaml +0 -104
- package/sbot.config.example.json +0 -235
- package/src/agent/askonce.js +0 -76
- package/src/agent/claudemodels.js +0 -60
- package/src/agent/claudestatus.js +0 -74
- package/src/agent/claudeusage.js +0 -200
- package/src/agent/codexstatus.js +0 -181
- package/src/agent/imagen.js +0 -458
- package/src/agent/quotaerr.js +0 -44
- package/src/agent/transienterr.js +0 -32
- package/src/cdp.js +0 -254
- package/src/clilang.js +0 -31
- package/src/core/cron.js +0 -182
- package/src/core/cronfire.js +0 -120
- package/src/core/cronrun.js +0 -116
- package/src/core/engine.js +0 -2762
- package/src/core/interfaces.js +0 -114
- package/src/core/issues.js +0 -185
- package/src/core/ledger.js +0 -30
- package/src/core/opsalert.js +0 -214
- package/src/core/pending.js +0 -123
- package/src/core/proxy.js +0 -424
- package/src/core/quotaalert.js +0 -79
- package/src/core/quotaerr.js +0 -55
- package/src/core/scheduler.js +0 -59
- package/src/design.js +0 -5161
- package/src/gitrepo.js +0 -150
- package/src/health.js +0 -353
- package/src/installdeps.js +0 -72
- package/src/leftover.js +0 -174
- package/src/platform/boardnotice.js +0 -77
- package/src/platform/boardops.js +0 -36
- package/src/platform/boardwatch.js +0 -447
- package/src/platform/cli.js +0 -45
- package/src/platform/slack.js +0 -1289
- package/src/platform/takeovercard.js +0 -37
- package/src/platform/wecom.js +0 -938
- package/src/platform/wecomcli.js +0 -128
- package/src/platform/wecomgate.js +0 -108
- package/src/platform/wecomname.js +0 -43
- package/src/platform/wecompoll.js +0 -241
- package/src/preview.js +0 -581
- package/src/projectmemory.js +0 -175
- package/src/service.js +0 -317
- package/src/ui/auth.js +0 -31
- package/src/ui/browser.html +0 -392
- package/src/ui/browserroutes.js +0 -234
- package/src/ui/console.html +0 -5494
- package/src/ui/dashboard.js +0 -168
- package/src/ui/feishulogin.js +0 -136
- package/src/ui/server.js +0 -2314
- package/src/ui/sessions.js +0 -78
- package/src/ui/takeover.js +0 -108
- package/src/updater.js +0 -243
- package/src/upgrade.js +0 -35
- package/src/usage.js +0 -144
|
@@ -1,166 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: 新浪潮
|
|
3
|
-
description: 精确计算过的失序——阶梯式错位、极端字距并置、洋红与青的套印重影,瑞士网格的叛逆版
|
|
4
|
-
suits: "活动推广 · 内容阅读"
|
|
5
|
-
colors:
|
|
6
|
-
ground: "#E9E6DF"
|
|
7
|
-
ink: "#141414"
|
|
8
|
-
accent: "#E6007E"
|
|
9
|
-
cyan: "#00AEEF"
|
|
10
|
-
silver: "#B9BCC0"
|
|
11
|
-
muted: "#57544E"
|
|
12
|
-
line: "#141414"
|
|
13
|
-
fonts:
|
|
14
|
-
latin: "'IBM Plex Sans'"
|
|
15
|
-
cjk: sans
|
|
16
|
-
typography:
|
|
17
|
-
headline:
|
|
18
|
-
latin: "'Archivo', 'Univers', 'Helvetica Neue'"
|
|
19
|
-
fontSize: "54px"
|
|
20
|
-
fontWeight: 700
|
|
21
|
-
lineHeight: 1.0
|
|
22
|
-
letterSpacing: "-0.03em"
|
|
23
|
-
body:
|
|
24
|
-
fontSize: "16px"
|
|
25
|
-
fontWeight: 400
|
|
26
|
-
lineHeight: 1.6
|
|
27
|
-
measure: "60ch"
|
|
28
|
-
label:
|
|
29
|
-
latin: "'IBM Plex Mono', 'Noto Sans Mono CJK SC'"
|
|
30
|
-
fontSize: "11px"
|
|
31
|
-
fontWeight: 500
|
|
32
|
-
letterSpacing: "0.24em"
|
|
33
|
-
border:
|
|
34
|
-
width: "1px"
|
|
35
|
-
style: solid
|
|
36
|
-
emphasis: "1px"
|
|
37
|
-
rounded:
|
|
38
|
-
none: 0px
|
|
39
|
-
spacing:
|
|
40
|
-
unit: "4px"
|
|
41
|
-
gutter: "16px"
|
|
42
|
-
margin: "32px"
|
|
43
|
-
maxWidth: "1100px"
|
|
44
|
-
columns: 12
|
|
45
|
-
elevation:
|
|
46
|
-
mode: flat
|
|
47
|
-
levels: "0"
|
|
48
|
-
imagery:
|
|
49
|
-
ratio: "3:2"
|
|
50
|
-
treatment: halftone
|
|
51
|
-
crop: hard
|
|
52
|
-
icon:
|
|
53
|
-
style: line
|
|
54
|
-
strokeWidth: "1px"
|
|
55
|
-
linecap: butt
|
|
56
|
-
corner: sharp
|
|
57
|
-
components:
|
|
58
|
-
button-primary:
|
|
59
|
-
backgroundColor: "{colors.ink}"
|
|
60
|
-
textColor: "{colors.ground}"
|
|
61
|
-
typography: "{typography.label}"
|
|
62
|
-
rounded: "{rounded.none}"
|
|
63
|
-
height: "40px"
|
|
64
|
-
padding: "20px"
|
|
65
|
-
tag:
|
|
66
|
-
backgroundColor: "{colors.ground}"
|
|
67
|
-
textColor: "{colors.ink}"
|
|
68
|
-
typography: "{typography.label}"
|
|
69
|
-
rounded: "{rounded.none}"
|
|
70
|
-
height: "24px"
|
|
71
|
-
card:
|
|
72
|
-
backgroundColor: "{colors.ground}"
|
|
73
|
-
textColor: "{colors.ink}"
|
|
74
|
-
rounded: "{rounded.none}"
|
|
75
|
-
padding: "24px"
|
|
76
|
-
---
|
|
77
|
-
|
|
78
|
-
## Overview
|
|
79
|
-
|
|
80
|
-
参照物:**Wolfgang Weingart** 1972-73 年在巴塞尔设计学院为《Typografische Monatsblätter》做的 **15 张封面**(银墨、阶梯式挖空、字距与倾斜实验)。当时它被视为对瑞士现代主义原则的公然冒犯,因而得名 **Swiss Punk**;他的美国学生 **April Greiman** 与 Dan Friedman 把它带回美国,定名 New Wave。
|
|
81
|
-
Greiman 1986 年为 Walker Art Center 做的《Design Quarterly》133 期《Does It Make Sense?》—— 把 32 页刊物改成 2×6 英尺的双面折页,用 Macintosh 加 MacDraw 完成,被视为第一件全数字印刷设计,现藏 MoMA。同期的 **Emigre** 杂志(Rudy VanderLans + Zuzana Licko,1984-2005 共 69 期,MoMA 藏;出品 Matrix 1986、Template Gothic 1990)把这套语言变成了一代人的字体与版式底本。
|
|
82
|
-
一句话:**它是精确计算过的失序** —— 网格还在,只是被故意撬开了两处。
|
|
83
|
-
|
|
84
|
-
## Colors
|
|
85
|
-
|
|
86
|
-
- **ground (#E9E6DF)**:纸灰底。这个风格从印刷来,底色必须有纸的温度;**ink (#141414)** 是文字与线,14.8:1,正文永远是它。
|
|
87
|
-
- **accent (#E6007E)**:洋红。**实测 ground 上 3.64:1 ⇒ 仅限 ≥24px 大字**,做色块、标题、重影层。
|
|
88
|
-
- **cyan (#00AEEF)**:⚠ **装饰专用**。ground 上只有 **2.05:1** —— **绝不做文字色**,只能做色块、网点、线。这条不是建议,是硬规矩。
|
|
89
|
-
- **silver (#B9BCC0)**:银墨的替身,做底层的大面积浅色块与网点(Weingart 的 TM 封面正是银墨印的)。
|
|
90
|
-
- **muted (#57544E)** 次级文字 / 图注(6.2:1);**line (#141414)** 发丝线与规矩线,1px。
|
|
91
|
-
- 洋红 × 青重叠处会压出深紫蓝 —— 那是**套印**的结果,允许;但**不许直接画一条紫蓝渐变**。
|
|
92
|
-
|
|
93
|
-
## Typography
|
|
94
|
-
|
|
95
|
-
- 标题 Archivo / Univers 700,-0.03em,行高 1.0 —— 紧、方、冷,底子仍是瑞士的。
|
|
96
|
-
- 正文 IBM Plex Sans 400,16px / 1.6,**永远左对齐**;小标签 IBM Plex Mono 500 + **0.24em** 字距、全大写,做编号、栏目名、日期。
|
|
97
|
-
- **签名细节 ②:字距的极端并置** —— 同一版面里既有 -0.03em 的紧排大标题,又有 0.24em 的稀排小标签。中间值越少,张力越强。
|
|
98
|
-
- 允许单个词被拉开字距顶满一行,允许某个词换成洋红,但**同一段文字里不换两次**。
|
|
99
|
-
|
|
100
|
-
## Layout
|
|
101
|
-
|
|
102
|
-
- 12 列网格立着,栏线是**看得见的参与者**:可以直接把 1px 线画出来,让读者看到规矩的存在。
|
|
103
|
-
- **spacing.unit = 4px**(不是 8px)。这个风格的精度在小刻度上:1-2px 的错位是可见的手法,8px 栅格太粗,错位会变成"排错了"。
|
|
104
|
-
- **签名细节 ①:阶梯式错位** —— 多行标题按行逐级横移一个**固定量**(如每行 +24px),形成楼梯。移动量全站复用同一个数,不能这行 17px 下行 23px。
|
|
105
|
-
- 破格只发生在指定位置:一处越栏、一处极端字距,其余严格守网格;倾斜用 ≤10° 的整数角度,一版最多一处。
|
|
106
|
-
|
|
107
|
-
## Elevation & Depth
|
|
108
|
-
|
|
109
|
-
`flat` —— 没有投影,也没有 z 轴。深度来自印刷的三种手段:
|
|
110
|
-
|
|
111
|
-
1. **半透明色层**:洋红 / 青的色块以 `mix-blend-mode: multiply` 叠在图与字上,重叠区自动变深。
|
|
112
|
-
2. **半调网点层**:大面积浅色块换成网点(40-60%),它比实色轻,能压在文字下而不吃掉文字。
|
|
113
|
-
3. **文字 / 图片的"重影"**:同一元素错位 4-8px 复制一层,用另一色(洋红或青),模拟套印没对准。⚠ 错位量取 **4 / 8** 两个固定值,不随手拖。
|
|
114
|
-
|
|
115
|
-
**签名细节 ③** 就落在 2 与 3 上:洋红与青分离产生的套印重影 + 网点层,是这套语言最快的辨认点。
|
|
116
|
-
Don't:`box-shadow`、渐变、玻璃模糊 —— 任何"浮起来"的东西都不属于这里。
|
|
117
|
-
|
|
118
|
-
## Shapes
|
|
119
|
-
|
|
120
|
-
- 圆角全 0;描边 1px,端点 butt,直角相交;图标是**线性**的,不是实心。
|
|
121
|
-
- 词汇:细线、矩形色块、网点面、被切断的圆、箭头、坐标刻度式的短线组。
|
|
122
|
-
- 图片 3:2 硬裁 + 半调网点处理;允许把图切成两三条横带错位重排。
|
|
123
|
-
- 允许元素部分出血、部分被裁掉一个角 —— 但**只能一处**。
|
|
124
|
-
|
|
125
|
-
## Components
|
|
126
|
-
|
|
127
|
-
- **主按钮**:ink 底 + ground 字 + 直角 + 等宽稀排标签体;hover 换洋红底。
|
|
128
|
-
- **标签**:ground 底 + 1px ink 边,极稀字距的编号与栏目名,成排出现像目录。
|
|
129
|
-
- **卡片**:ground 底 + 1px 线框,**允许内容越出框边 4-8px**(这是这个风格的"破格点"之一)。
|
|
130
|
-
- **输入框**:直角 + 只画下边线(像稿纸);聚焦态 = 底线换洋红并加粗到 2px。
|
|
131
|
-
|
|
132
|
-
## Do's and Don'ts
|
|
133
|
-
|
|
134
|
-
- Do:一版只挑 **1-2 个破格点**(一处越栏 + 一处极端字距),其余严格守网格 —— **失序是调味,不是主食**。
|
|
135
|
-
- Do:错位量取固定值(4 / 8 / 24px),全站复用同一组数;角度也只用一个值。
|
|
136
|
-
- Do:正文永远回到左对齐、≥16px、行高 1.6 —— **Weingart 从没牺牲过正文可读性**。
|
|
137
|
-
- Do:cyan 只做色块 / 网点 / 线,洋红只做 ≥24px 大字与块面(对比度实测见 Colors)。
|
|
138
|
-
- Don't:随机旋转、随机位置、随机字号 —— 这是 AI 最容易犯的错,见下节。
|
|
139
|
-
- Don't:把整段正文做成实验对象(倾斜、字距拉开、彩色底)。
|
|
140
|
-
- Don't:紫蓝渐变。紫只能是洋红叠青**压**出来的,不能是拉出来的。
|
|
141
|
-
- Don't:投影、圆角、玻璃感。
|
|
142
|
-
|
|
143
|
-
## 怎么做才不像"随机乱排"
|
|
144
|
-
|
|
145
|
-
这个风格最容易被做坏,且做坏的方式只有一种:**用随机冒充实验**。
|
|
146
|
-
Weingart 的每一张封面都能画出网格与位移量 —— 他是在**已知规矩**的前提下精确地破一处;新手与模型做出来的是每个元素都歪一点、每处字距都不同,看着像文件损坏。四条硬约束:
|
|
147
|
-
|
|
148
|
-
1. **先把规矩版排出来**(严格网格、统一字距),再挑 1-2 处破格,破格点要能说出理由。
|
|
149
|
-
2. **所有位移量来自同一组数**(4 / 8 / 24px),所有角度来自同一个值。数值一多就是随机。
|
|
150
|
-
3. **正文不参与实验**:实验只发生在标题、图注、装饰层、色块。
|
|
151
|
-
4. **每处失序都留下"原本该在哪"的证据** —— 越栏的元素旁边保留那条栏线,重影下面保留没错位的那一层。看得见参照,失序才读作故意。
|
|
152
|
-
|
|
153
|
-
**与「复古印刷」(Riso)分界**(不点破就会被做成一个样):两者都有"套印错位",但 **Riso 的错位是工艺限制**(两色油墨、纸感、网点),核心在**油墨**;**新浪潮的错位是故意失控**,核心在**排版结构被拆解**。判据:把颜色全换成黑白 —— Riso 会失去大半魅力,新浪潮不会,因为它的手法在版式里。**与「瑞士网格」**:同一个爹,瑞士是守规矩的那个,新浪潮是知道规矩之后故意破一处的那个;破格超过两处,它就既不是瑞士也不是新浪潮,只是乱。
|
|
154
|
-
⚠ 如实标注:纯正的**产品级**当代实例很少,这套语言主要活在设计工作室官网、音乐 / 文化活动页与出版物里 —— 拿它做后台系统或电商详情页会翻车,选它之前先确认场合。
|
|
155
|
-
|
|
156
|
-
## Composition
|
|
157
|
-
|
|
158
|
-
- 活动页:一个阶梯错位的大标题 + 一张网点化的 3:2 图 + 一条看得见的栏线 + 一组稀排等宽小字。
|
|
159
|
-
- 内容阅读:严格的双栏正文,实验全部让给标题区、图注与页边的装饰层。
|
|
160
|
-
- 版面允许留一大块空 —— 破格之所以读得出来,是因为周围足够安静。
|
|
161
|
-
|
|
162
|
-
## Image Prompt Templates
|
|
163
|
-
|
|
164
|
-
- base: "Swiss punk new wave graphic design, Weingart and April Greiman influenced, warm grey paper background (#E9E6DF), black text with magenta (#E6007E) and cyan (#00AEEF) overprint offset by a few pixels, halftone dot layers, stepped staircase offset headline lines, extreme letter-spacing contrast between tight display type and very wide tracked mono labels, visible 12-column grid lines, one element breaking the grid, flat print aesthetic, 1980s Basel typography experiment"
|
|
165
|
-
- negative: "random rotation, chaotic scattered elements, drop shadow, gradient, purple blue gradient, rounded corners, 3D, glossy, centered symmetric layout, tilted body text, grunge texture"
|
|
166
|
-
- 注:必须写 "everything on a strict grid except one deliberate break",否则模型会理解成"乱排";位移量写死("consistent 8px offset");紫色只能通过 "magenta over cyan overprint" 出现。中文版面补 "clean CJK sans-serif, left aligned body text"。
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: 北欧物性
|
|
3
|
-
description: 未漂白亚麻底、炭褐字、黄铜一点——不用纯白纯黑不用硬光,最贵的是一张有材质的照片
|
|
4
|
-
suits: "内容阅读 · 品牌门面"
|
|
5
|
-
colors:
|
|
6
|
-
paper: "#F0EBE3"
|
|
7
|
-
ink: "#2A2724"
|
|
8
|
-
muted: "#9A968D"
|
|
9
|
-
line: "#DDD6CB"
|
|
10
|
-
accent: "#A88C4A"
|
|
11
|
-
oak: "#C6A780"
|
|
12
|
-
pine: "#2E4438"
|
|
13
|
-
fonts:
|
|
14
|
-
latin: "'Adobe Caslon Pro', 'EB Garamond'"
|
|
15
|
-
cjk: serif
|
|
16
|
-
typography:
|
|
17
|
-
headline:
|
|
18
|
-
fontSize: "40px"
|
|
19
|
-
fontWeight: 400
|
|
20
|
-
lineHeight: 1.25
|
|
21
|
-
letterSpacing: "0.02em"
|
|
22
|
-
body:
|
|
23
|
-
fontSize: "17px"
|
|
24
|
-
fontWeight: 400
|
|
25
|
-
lineHeight: 1.75
|
|
26
|
-
measure: "62ch"
|
|
27
|
-
label:
|
|
28
|
-
latin: "'Founders Grotesk', 'Neue Haas Grotesk'"
|
|
29
|
-
cjk: sans
|
|
30
|
-
fontSize: "11px"
|
|
31
|
-
fontWeight: 500
|
|
32
|
-
letterSpacing: "0.24em"
|
|
33
|
-
border:
|
|
34
|
-
width: "1px"
|
|
35
|
-
style: solid
|
|
36
|
-
emphasis: "1px"
|
|
37
|
-
rounded:
|
|
38
|
-
sm: 2px
|
|
39
|
-
spacing:
|
|
40
|
-
unit: "8px"
|
|
41
|
-
gutter: "32px"
|
|
42
|
-
margin: "48px"
|
|
43
|
-
maxWidth: "1160px"
|
|
44
|
-
elevation:
|
|
45
|
-
mode: shadow
|
|
46
|
-
levels: "1"
|
|
47
|
-
imagery:
|
|
48
|
-
ratio: "4:5"
|
|
49
|
-
treatment: none
|
|
50
|
-
crop: hard
|
|
51
|
-
icon:
|
|
52
|
-
style: line
|
|
53
|
-
strokeWidth: "1.25px"
|
|
54
|
-
linecap: round
|
|
55
|
-
corner: round
|
|
56
|
-
components:
|
|
57
|
-
button-primary:
|
|
58
|
-
backgroundColor: "{colors.ink}"
|
|
59
|
-
textColor: "{colors.paper}"
|
|
60
|
-
typography: "{typography.label}"
|
|
61
|
-
rounded: "{rounded.sm}"
|
|
62
|
-
height: "44px"
|
|
63
|
-
padding: "20px"
|
|
64
|
-
button-primary-hover:
|
|
65
|
-
backgroundColor: "{colors.pine}"
|
|
66
|
-
card:
|
|
67
|
-
backgroundColor: "{colors.paper}"
|
|
68
|
-
textColor: "{colors.ink}"
|
|
69
|
-
rounded: "{rounded.sm}"
|
|
70
|
-
padding: "32px"
|
|
71
|
-
input-field:
|
|
72
|
-
backgroundColor: "{colors.paper}"
|
|
73
|
-
textColor: "{colors.ink}"
|
|
74
|
-
rounded: "{rounded.sm}"
|
|
75
|
-
height: "44px"
|
|
76
|
-
tag:
|
|
77
|
-
backgroundColor: "{colors.paper}"
|
|
78
|
-
textColor: "{colors.ink}"
|
|
79
|
-
typography: "{typography.label}"
|
|
80
|
-
rounded: "{rounded.sm}"
|
|
81
|
-
panel-pine:
|
|
82
|
-
backgroundColor: "{colors.pine}"
|
|
83
|
-
textColor: "{colors.paper}"
|
|
84
|
-
rounded: "{rounded.sm}"
|
|
85
|
-
padding: "48px"
|
|
86
|
-
---
|
|
87
|
-
|
|
88
|
-
## Overview
|
|
89
|
-
|
|
90
|
-
参照物:**Poul Henningsen** 与 Louis Poulsen 的 PH 系列灯具;**Kinfolk**(2011 创刊于波特兰,2015 总部迁哥本哈根;《The Kinfolk Table》正文用 Adobe Caslon,2021 十周年改版由 Schick Toikka 定制了一套字体家族,简报要求是「三角楔形衬线」)。
|
|
91
|
-
这个风格的底色不是「性冷淡」,是**物性**:亚麻、橡木、羊毛、黄铜,以及不刺眼的光。版面里最贵的东西应该是一张有材质的照片,不是任何图形。
|
|
92
|
-
|
|
93
|
-
⚠ 如实标注:Kinfolk 那套定制字体的**具体名称在公开报道里没有给出**,本档 fontFamily 是可得的近似替代——Caslon 那一位可换任何 flared / wedge serif(楔形衬线),骨相对了就行。
|
|
94
|
-
|
|
95
|
-
## Colors
|
|
96
|
-
|
|
97
|
-
- **paper (#F0EBE3)**:未漂白亚麻。**不用 #FFFFFF**——纯白在屏幕上就是眩光。
|
|
98
|
-
- **ink (#2A2724)**:炭褐,**不用纯黑**。与 paper 12.5:1,足够锐利又不刺。
|
|
99
|
-
- **muted (#9A968D)**:与 paper 只有 2.5:1,**它不是文字色**,是线与面的色(表格底纹、失效态、图注下的细线)。真要排图注,用 **ink 70% 不透明(≈5.1:1)**,别用 muted。
|
|
100
|
-
- **line (#DDD6CB)**:1px 分隔线与描边。
|
|
101
|
-
- **accent (#A88C4A)**:黄铜。与 paper 2.7:1,**不作文字色**,只做一条线、一个小图标、一枚圆点。
|
|
102
|
-
- **oak (#C6A780)**:橡木。大面积衬底或图片旁的色块。
|
|
103
|
-
- **pine (#2E4438)**:松绿。整块底色用,上面压 paper 字 8.9:1。
|
|
104
|
-
|
|
105
|
-
**可验证的指标(全写成数,不写形容词)**:① 留白 **≥50%**(按整屏面积算,图片不计入留白);② 正文栏宽 **≤62 字符**、行高 **1.7-1.8**;③ 全色板 HSL 饱和度 **≤35%**,例外只有两个材质色——accent 黄铜 38.8%、oak 橡木 38.0%,上限 45%(pine 松绿实测只有 19.3%,不需要例外);④ **不出现 `#FFFFFF` 与 `#000000`**,一次都不要。
|
|
106
|
-
|
|
107
|
-
## Typography
|
|
108
|
-
|
|
109
|
-
- 标题与正文**同一族衬线**(Adobe Caslon / EB Garamond,中文思源宋体),字重都是 400。层级只靠字号(40 / 17)与留白拉开,不靠字重也不靠颜色。
|
|
110
|
-
- 正文 17px、行高 1.75、栏宽 62ch——这三个数最容易被偷懒省掉,也最影响观感。中文标题字距取 0.02-0.05em;段落首行不缩进、段间空一行(西式),更贴近参照物。
|
|
111
|
-
- **label 是唯一的无衬线**:Founders Grotesk 500、11px、字距 0.24em、全大写。它只出现在栏头、日期、页码上,数量极少,正因为少才成为对比。
|
|
112
|
-
|
|
113
|
-
## Layout
|
|
114
|
-
|
|
115
|
-
- 8px 基准、12 栏,版心 1160px。**偏置构图是签名**:照片放右上、文字块落左下,两者不对齐、不居中——Kinfolk 极少居中。
|
|
116
|
-
- 做法是**「先排满再一层层删」,不是「从空白开始加」**:从满版开始删,留下的东西才有理由;从空白开始加,加出来的永远是居中三段式。
|
|
117
|
-
- 图片硬裁 4:5,四边留白不等宽(上窄下宽),图注紧贴图片下沿。
|
|
118
|
-
|
|
119
|
-
## Elevation & Depth
|
|
120
|
-
|
|
121
|
-
`elevation.mode: shadow`,但**没有硬投影**——只有一片极大模糊、极低透明度的漫射影:`box-shadow: 0 12px 32px rgba(42, 39, 36, .06)`。它的作用不是「浮起来」,是让卡片边缘不至于和底色焊死。**只有一档,没有 level 2。**
|
|
122
|
-
|
|
123
|
-
这条阴影是**无眩光原则**在深度上的落点:光被三层灯罩挡过,落到桌面时已经没有边界,所以影子也不该有边界。配套的另外两种深度手段:① **paper 与 oak / pine 的色块分层**(换材质,不换高度);② **1px line 描边**——大多数时候一条线就够了,阴影是备选不是默认。
|
|
124
|
-
|
|
125
|
-
Don't:硬边投影、多层阴影、任何 blur < 8px 的阴影、任何「按下去」的位移。
|
|
126
|
-
|
|
127
|
-
## Shapes
|
|
128
|
-
|
|
129
|
-
- 圆角只有 **2px**(`rounded.sm`)——不是直角,也远不到「圆润」;它读起来像纸被裁过的边。
|
|
130
|
-
- 边框 1px、line 色;卡片优先用边框,阴影是次选。
|
|
131
|
-
- 图标线性、**1.25px、圆头端点、圆角转角**——这是全档唯一「柔」的地方,呼应无眩光。
|
|
132
|
-
- 允许的形状只有矩形、极小圆角矩形、正圆(仅图标点);不用斜切、不用多边形装饰。
|
|
133
|
-
|
|
134
|
-
## Components
|
|
135
|
-
|
|
136
|
-
- **按钮**:ink 实底 + paper 字 + label 排版,2px 圆角、44px 高;hover 落到 pine。一屏最多一个实心按钮,其余都是带下划线的文字链。
|
|
137
|
-
- **卡片**:paper 底 + 1px line 边 + 2px 圆角 + 32px 内边距;要浮起时才加那条漫射影。
|
|
138
|
-
- **标签**:paper 底 + 1px line 边 + ink 字,极扁极小。
|
|
139
|
-
- **整块 pine 面板**:章节分隔用,内部只放 paper 色标题与一行正文。
|
|
140
|
-
- **输入框**:paper 底 + 1px line 边;聚焦时边框换 accent 黄铜,**不加外发光**。
|
|
141
|
-
|
|
142
|
-
## Do's and Don'ts
|
|
143
|
-
|
|
144
|
-
- Do:**无眩光原则**——Poul Henningsen 1925 年基于 lituus 螺线做的三层灯罩系统,目标是「从任何角度都看不到灯泡」(1958 年定型为 PH 5)。落到界面上是硬规则:不用纯白底、不用纯黑字、不用硬边高光,任何「发光」的东西都要有一层遮挡。
|
|
145
|
-
- Do:**物性优先于图形**——版面里最贵的应该是一张有材质的照片(橡木纹、羊毛织物、黄铜边),图形装饰接近于零;找不到好照片时宁可留空。
|
|
146
|
-
- Do:把上面四条数值指标当验收项逐条量。
|
|
147
|
-
- Don't:做成「白墙 + 一根绿植 + 莫兰迪灰」的样板间——**北欧的底色是未漂白的亚麻与木,不是灰**,灰调是这套风格最常见的误读。
|
|
148
|
-
- Don't:纯白底 + 纯黑字 + 硬投影(直接违反无眩光原则,三条全犯)。
|
|
149
|
-
- Don't:驯鹿、雪花、北欧针织提花、维京符文——那是圣诞包装纸不是北欧设计。
|
|
150
|
-
- Don't:高饱和色、荧光色、彩色渐变。
|
|
151
|
-
- Don't:居中对称的三段式版面;那会把「偏置构图」这个签名整条抹掉。
|
|
152
|
-
|
|
153
|
-
## Composition
|
|
154
|
-
|
|
155
|
-
- 一屏 = 一张 4:5 材质照(右上)+ 一个衬线标题与两行正文(左下)+ 一行 0.24em 小标签。
|
|
156
|
-
- 图与字**不重叠**;它们靠对角线的张力发生关系,不靠压叠。页脚只有一条 1px line 与一行 label。
|
|
157
|
-
|
|
158
|
-
## Image Prompt Templates
|
|
159
|
-
|
|
160
|
-
- base: "scandinavian interior still life, unbleached linen and oiled oak surfaces, soft diffused north-facing daylight with no visible light source and no specular highlight, warm off-white ground (#F0EBE3), charcoal-brown accents (#2A2724), a single brass detail (#A88C4A), low saturation, matte wool and ceramic textures, 4:5 vertical crop, generous empty space, quiet and material"
|
|
161
|
-
- negative: "pure white background, pure black, hard shadow, specular highlight, glossy surface, morandi grey palette, reindeer, snowflake, nordic knit pattern, plastic, neon, high saturation, centered symmetrical composition"
|
|
162
|
-
- 注:关键词是 **"diffused" 与 "no visible light source"**——这两个词直接对应无眩光原则,漏掉它们模型会给硬光和高光点,整张图立刻不是这个风格;另外把材质名(亚麻 / 上油橡木 / 羊毛 / 未上釉陶 / 黄铜)写全,材质就是这个风格本身。
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: 巴黎高定
|
|
3
|
-
description: 象牙卡纸配 Didone 巨标题、爱马仕橙只占一条边——高级来自明度悬崖,不是灰调调和
|
|
4
|
-
suits: "品牌门面 · 内容阅读"
|
|
5
|
-
colors:
|
|
6
|
-
paper: "#F2EDE4"
|
|
7
|
-
ink: "#100D0B"
|
|
8
|
-
accent: "#F37021"
|
|
9
|
-
muted: "#8C8279"
|
|
10
|
-
line: "#DCD5C9"
|
|
11
|
-
bordeaux: "#6E1B24"
|
|
12
|
-
fonts:
|
|
13
|
-
latin: "'Antique Olive', 'Neue Haas Grotesk Text', 'Helvetica Neue'"
|
|
14
|
-
cjk: sans
|
|
15
|
-
typography:
|
|
16
|
-
headline:
|
|
17
|
-
latin: "'Didot', 'Didot LT Std', 'Bodoni 72', 'Playfair Display'"
|
|
18
|
-
cjk: serif
|
|
19
|
-
fontSize: "64px"
|
|
20
|
-
fontWeight: 400
|
|
21
|
-
lineHeight: 1.08
|
|
22
|
-
letterSpacing: "0.04em"
|
|
23
|
-
body:
|
|
24
|
-
fontSize: "16px"
|
|
25
|
-
fontWeight: 400
|
|
26
|
-
lineHeight: 1.7
|
|
27
|
-
measure: "58ch"
|
|
28
|
-
label:
|
|
29
|
-
fontSize: "11px"
|
|
30
|
-
fontWeight: 500
|
|
31
|
-
letterSpacing: "0.22em"
|
|
32
|
-
border:
|
|
33
|
-
width: "0px"
|
|
34
|
-
style: solid
|
|
35
|
-
emphasis: "1px"
|
|
36
|
-
rounded:
|
|
37
|
-
none: 0px
|
|
38
|
-
spacing:
|
|
39
|
-
unit: "8px"
|
|
40
|
-
gutter: "24px"
|
|
41
|
-
margin: "48px"
|
|
42
|
-
maxWidth: "1200px"
|
|
43
|
-
elevation:
|
|
44
|
-
mode: flat
|
|
45
|
-
levels: "0"
|
|
46
|
-
imagery:
|
|
47
|
-
ratio: "4:5"
|
|
48
|
-
treatment: none
|
|
49
|
-
crop: full-bleed
|
|
50
|
-
icon:
|
|
51
|
-
style: line
|
|
52
|
-
strokeWidth: "1px"
|
|
53
|
-
linecap: butt
|
|
54
|
-
corner: sharp
|
|
55
|
-
components:
|
|
56
|
-
button-primary:
|
|
57
|
-
backgroundColor: "{colors.ink}"
|
|
58
|
-
textColor: "{colors.paper}"
|
|
59
|
-
typography: "{typography.label}"
|
|
60
|
-
rounded: "{rounded.none}"
|
|
61
|
-
height: "44px"
|
|
62
|
-
padding: "24px"
|
|
63
|
-
button-primary-hover:
|
|
64
|
-
backgroundColor: "{colors.bordeaux}"
|
|
65
|
-
card:
|
|
66
|
-
backgroundColor: "{colors.paper}"
|
|
67
|
-
textColor: "{colors.ink}"
|
|
68
|
-
rounded: "{rounded.none}"
|
|
69
|
-
padding: "32px"
|
|
70
|
-
panel-bordeaux:
|
|
71
|
-
backgroundColor: "{colors.bordeaux}"
|
|
72
|
-
textColor: "{colors.paper}"
|
|
73
|
-
rounded: "{rounded.none}"
|
|
74
|
-
padding: "48px"
|
|
75
|
-
input-field:
|
|
76
|
-
backgroundColor: "{colors.paper}"
|
|
77
|
-
textColor: "{colors.ink}"
|
|
78
|
-
rounded: "{rounded.none}"
|
|
79
|
-
height: "44px"
|
|
80
|
-
tag:
|
|
81
|
-
backgroundColor: "{colors.accent}"
|
|
82
|
-
textColor: "{colors.ink}"
|
|
83
|
-
typography: "{typography.label}"
|
|
84
|
-
rounded: "{rounded.none}"
|
|
85
|
-
---
|
|
86
|
-
|
|
87
|
-
## Overview
|
|
88
|
-
|
|
89
|
-
参照物:Vogue 刊头(为 Condé Nast 定制的 Linotype Didot,属 Didone 分类,源头是 18 世纪末巴黎的 Firmin Didot)、爱马仕的橙盒与内页、法国时装屋的 lookbook。
|
|
90
|
-
版面只有三样东西:一张出血到边的图、一个横竖笔画极端反差的巨标题、一行拉开到 0.22em 的小标签。气质是「冷、准、贵」——**法式的高级不是灰调调和,是极端反差**,这一点几乎所有仿品都做反了。
|
|
91
|
-
|
|
92
|
-
## Colors
|
|
93
|
-
|
|
94
|
-
- **paper (#F2EDE4)**:象牙卡纸,带一点未漂白的暖。
|
|
95
|
-
- **ink (#100D0B)**:**近黑,必须是真黑不是灰黑**。与 paper 约 17:1——这道明度悬崖是高级感的第一来源;调成 #333 那种「柔和黑」,整个风格立刻塌成普通商务模板。
|
|
96
|
-
- **accent (#F37021)**:爱马仕橙,面积 **<1%**,只出现在一条边框、一个页码、一个标签底、一根引线上。⚠ 橙上放白字只有 2.5:1 必挂;**橙底黑字 6.6:1** 才是对的,这正是「橙盒黑印」的由来。
|
|
97
|
-
- **muted (#8C8279)**:暖灰,与 paper 3.2:1,只够图注与日期;正文一律 ink。
|
|
98
|
-
- **line (#DCD5C9)**:1px 分栏线与表格线。
|
|
99
|
-
- **bordeaux (#6E1B24)**:**仅用于整块底色**(一屏一块封顶),上面压 paper 字 9.8:1;不做文字色、不做小色块、不做边框。
|
|
100
|
-
|
|
101
|
-
⚠ 如实标注:爱马仕从未发布过官方 Pantone 值,网上并行流传 `#F37021` 与 `#FD5E0F` 两个数,本档取前者。它的来源是二战期间纸板短缺、供应商只剩橙色盒子的偶然——**它天生是包装的颜色**,用在边框、标签、页码、一条线上最对,铺满就错。
|
|
102
|
-
|
|
103
|
-
## Typography
|
|
104
|
-
|
|
105
|
-
- **标题走 Didone**(Didot / Bodoni 72,中文思源宋体),400 字重、字距 0.04em。两条硬指标:① **横竖笔画对比 ≥1:8**;② **只在 ≥40px 出现**——Didone 的 hairline 字号一小就在屏幕上消失,这是**物理约束不是审美偏好**,14px 的 Didot 通篇发虚,读者只会觉得「这站没做完」。
|
|
106
|
-
- **正文交给 Antique Olive**(Roger Excoffon,1962-66)。用它排正文是这套风格里最「法」的一步棋——它是法国人对 Helvetica 的正面回应,重心偏上、字腔饱满,与 Didot 并置时不争。
|
|
107
|
-
- **label 字距 0.22em** 全大写,是这个风格的签名;中文用同等字距代偿。
|
|
108
|
-
- 层级只有三档:巨标题 64px / 正文 16px / 标签 11px。**不存在 24px、32px 这种中间档。**
|
|
109
|
-
- 参照人物:**Roger Excoffon**(1910-1983),马赛 Fonderie Olive 艺术总监,作品含 Mistral(1953)、Antique Olive(1962-66),另做过法国航空与 1968 格勒诺布尔冬奥的视觉。
|
|
110
|
-
|
|
111
|
-
## Layout
|
|
112
|
-
|
|
113
|
-
- 8px 基准网格、12 栏;版心 1200px,外边距 48px 起。
|
|
114
|
-
- 图**出血到版面边缘**,标题**压在图上**——这是与静奢的分界(静奢的字与图互不重叠)。
|
|
115
|
-
- 文字压图时只压在图的低反差区,且**不加半透明遮罩**;找不到低反差区就换图,不要盖布。
|
|
116
|
-
- 分栏线 1px、line 色;页码、栏头、日期贴在版心外沿。
|
|
117
|
-
|
|
118
|
-
## Elevation & Depth
|
|
119
|
-
|
|
120
|
-
`elevation.mode: flat`——没有阴影,也没有「卡片」这一层。景深由两件事制造:
|
|
121
|
-
|
|
122
|
-
1. **图片出血压满 + 文字压在图片上**:图是最底层的「地」,字是浮在地上的一层,两层就够,不需要第三层。
|
|
123
|
-
2. **明度悬崖**:paper 与 ink 约 17:1、整块 bordeaux 与 paper 约 9.8:1——前后关系靠明度跳档读出来,不靠模糊和投影。
|
|
124
|
-
|
|
125
|
-
Don't:投影、渐变遮罩、毛玻璃、把橙色做成发光;任何「浮起」的暗示都会把卡纸变成塑料。
|
|
126
|
-
|
|
127
|
-
## Shapes
|
|
128
|
-
|
|
129
|
-
- **圆角恒 0**,包含图片、标签、输入框、头像。
|
|
130
|
-
- 边框默认 0;需要框时只用 1px 橙线或 1px line 色,**四边等宽**,不用双线、不用粗细混排。
|
|
131
|
-
- 允许的形状只有矩形与直线;不用圆点装饰、不用切角,箭头写成「→」字符而不是画一个图形。
|
|
132
|
-
- 图标 1px 线性、平头、直角,与 label 同高。
|
|
133
|
-
|
|
134
|
-
## Components
|
|
135
|
-
|
|
136
|
-
- **按钮**:ink 实底 + paper 字 + label 排版(全大写 0.22em),直角、44px 高;hover 换 bordeaux 底,**不位移、不变圆角**。一屏最多一个。
|
|
137
|
-
- **标签**:橙底黑字,小而扁,像贴在包装上的那一枚;一屏 ≤2 个。
|
|
138
|
-
- **整块 bordeaux 面板**:切分章节用,内部只放 paper 色标题与一行正文。
|
|
139
|
-
- **输入框**:底部 1px line,聚焦换 ink;无底色、无圆角、无外发光。
|
|
140
|
-
|
|
141
|
-
## Do's and Don'ts
|
|
142
|
-
|
|
143
|
-
- Do:强调色面积 <1%,并且只出现在「包装」位置(边、角、标签、页码)。
|
|
144
|
-
- Do:标题 ≥40px;小于这个尺寸就换成正文字族,别缩 Didot。
|
|
145
|
-
- Do:一屏一个视觉入口,图与字比例悬殊到不需要犹豫看哪个。
|
|
146
|
-
- Don't:**莫兰迪色**——Giorgio Morandi 是意大利画家,「莫兰迪 = 法式高级」是中文营销号的错配;这套风格的底色逻辑是**高反差**,和莫兰迪的低反差灰调正好相反。
|
|
147
|
-
- Don't:Didone 排正文,或用在 ≤14px 的小字上(hairline 在屏幕上直接消失,通篇发虚)。
|
|
148
|
-
- Don't:埃菲尔铁塔、法棍、蓝白条纹衫、手写体的 Bonjour——那是旅游纪念品不是法式。
|
|
149
|
-
- Don't:橙色铺满、做渐变、做发光,或者拿橙色当正文色。
|
|
150
|
-
- Don't:把 ink 调成灰黑「让它柔和一点」——那一步就是掉价的全部原因。
|
|
151
|
-
|
|
152
|
-
## Composition
|
|
153
|
-
|
|
154
|
-
- 封面:一张 4:5 出血图 + 压在下三分之一的巨标题 + 版心外沿一行 0.22em 小标签。
|
|
155
|
-
- 内页:左图右字或整版通栏;正文 58 字符栏宽,行距 1.7。
|
|
156
|
-
- 橙色出现的地方是**页码旁那条 1px 短线**,不是标题。
|
|
157
|
-
|
|
158
|
-
## Image Prompt Templates
|
|
159
|
-
|
|
160
|
-
- base: "parisian couture editorial photograph, ivory card-stock paper tone (#F2EDE4), single model or single object, hard directional studio light with deep true-black shadows (#100D0B), extreme tonal contrast, no mid-grey haze, 4:5 vertical full-bleed crop, matte silk and wool textures, one small orange packaging detail (#F37021), high-fashion magazine cover framing"
|
|
161
|
-
- negative: "muted morandi palette, low contrast grey tones, soft hazy lighting, eiffel tower, baguette, striped shirt, handwritten script, gradient, glow, rounded corners, drop shadow, cluttered props"
|
|
162
|
-
- 注:最容易翻车的一步是模型自动把「法式」理解成低反差灰调——prompt 里必须明写 "extreme tonal contrast" 与 "true black shadows",并在 negative 里点名 morandi;文字宁可后期排,别让模型生成 Didone 标题(它画不出正确的 hairline)。
|
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: 热带现代
|
|
3
|
-
description: 巴西现代主义——混凝土白底、高对比黑白照片、一点纯红,曲线大到跨过整个版面;反民俗符号
|
|
4
|
-
suits: "活动推广 · 品牌门面"
|
|
5
|
-
colors:
|
|
6
|
-
paper: "#EDEAE3"
|
|
7
|
-
ink: "#14110F"
|
|
8
|
-
accent: "#D8202A"
|
|
9
|
-
cobalto: "#2C5F9E"
|
|
10
|
-
verde: "#1F7A4C"
|
|
11
|
-
muted: "#6E6A63"
|
|
12
|
-
line: "#CFC9BE"
|
|
13
|
-
fonts:
|
|
14
|
-
latin: "'Archivo', 'Helvetica Neue'"
|
|
15
|
-
cjk: sans
|
|
16
|
-
typography:
|
|
17
|
-
headline:
|
|
18
|
-
latin: "'Archivo Black', 'Archivo', 'Helvetica Neue'"
|
|
19
|
-
fontSize: "46px"
|
|
20
|
-
fontWeight: 700
|
|
21
|
-
lineHeight: 1.02
|
|
22
|
-
letterSpacing: "-0.02em"
|
|
23
|
-
body:
|
|
24
|
-
fontSize: "16px"
|
|
25
|
-
fontWeight: 400
|
|
26
|
-
lineHeight: 1.6
|
|
27
|
-
measure: "62ch"
|
|
28
|
-
label:
|
|
29
|
-
latin: "'Archivo Narrow', 'Archivo'"
|
|
30
|
-
fontSize: "12px"
|
|
31
|
-
fontWeight: 600
|
|
32
|
-
letterSpacing: "0.14em"
|
|
33
|
-
border:
|
|
34
|
-
width: "0px"
|
|
35
|
-
style: none
|
|
36
|
-
emphasis: "0px"
|
|
37
|
-
rounded:
|
|
38
|
-
none: 0px
|
|
39
|
-
circle: 999px
|
|
40
|
-
spacing:
|
|
41
|
-
unit: "8px"
|
|
42
|
-
gutter: "24px"
|
|
43
|
-
margin: "32px"
|
|
44
|
-
maxWidth: "1200px"
|
|
45
|
-
columns: 12
|
|
46
|
-
elevation:
|
|
47
|
-
mode: flat
|
|
48
|
-
levels: "0"
|
|
49
|
-
imagery:
|
|
50
|
-
ratio: "1:1"
|
|
51
|
-
treatment: grayscale
|
|
52
|
-
crop: hard
|
|
53
|
-
icon:
|
|
54
|
-
style: solid
|
|
55
|
-
strokeWidth: "2px"
|
|
56
|
-
linecap: butt
|
|
57
|
-
corner: sharp
|
|
58
|
-
components:
|
|
59
|
-
button-primary:
|
|
60
|
-
backgroundColor: "{colors.ink}"
|
|
61
|
-
textColor: "{colors.paper}"
|
|
62
|
-
typography: "{typography.label}"
|
|
63
|
-
rounded: "{rounded.none}"
|
|
64
|
-
height: "48px"
|
|
65
|
-
padding: "24px"
|
|
66
|
-
dot-mark:
|
|
67
|
-
backgroundColor: "{colors.accent}"
|
|
68
|
-
rounded: "{rounded.circle}"
|
|
69
|
-
size: "24px"
|
|
70
|
-
card:
|
|
71
|
-
backgroundColor: "{colors.paper}"
|
|
72
|
-
textColor: "{colors.ink}"
|
|
73
|
-
rounded: "{rounded.none}"
|
|
74
|
-
padding: "24px"
|
|
75
|
-
tag:
|
|
76
|
-
backgroundColor: "{colors.cobalto}"
|
|
77
|
-
textColor: "{colors.paper}"
|
|
78
|
-
typography: "{typography.label}"
|
|
79
|
-
rounded: "{rounded.none}"
|
|
80
|
-
padding: "8px"
|
|
81
|
-
---
|
|
82
|
-
|
|
83
|
-
## Overview
|
|
84
|
-
|
|
85
|
-
参照物:César Villela 为 Elenco 唱片做的封面系统(1960 年代里约,摄影 Francisco Pereira);**Athos Bulcão**(1918-2008)与 Niemeyer 长期合作的巴西利亚模块化釉砖壁面;Roberto Burle Marx 的 Avenida Atlântica 人行道(1969-72)。
|
|
86
|
-
Niemeyer 说过:「我不被直角吸引……我被自由流动的、性感的曲线吸引——我在祖国的群山里、河流的蜿蜒里、海浪里、爱人的身体上找到的那种曲线。」
|
|
87
|
-
但要注意这句话的**上下文是混凝土**:巴西现代主义是**反民俗符号**的,它的语言是混凝土、模数与几何,不是羽毛与国旗色。手法一句话概括:**恒定的几何标记 + 可变的照片**。
|
|
88
|
-
|
|
89
|
-
## Colors
|
|
90
|
-
|
|
91
|
-
- **paper (#EDEAE3,concreto)**:混凝土白,微灰微暖,全部底色,不用纯白。
|
|
92
|
-
- **ink (#14110F)**:近黑,文字与色块主色。配 paper 15.7:1。
|
|
93
|
-
- **accent (#D8202A,vermelho)**:红圆点专用。⚠ 配 paper 4.2:1、配 ink 3.7:1 ⇒ **只放 ≥24px 的字,正文级小字一律不放**;它本来就不是按钮底,是**标记**。
|
|
94
|
-
- **cobalto (#2C5F9E)**:Athos Bulcão 釉砖的钴蓝。配 paper 白字 5.4:1,可承载文字。
|
|
95
|
-
- **verde (#1F7A4C)**:釉绿,后期加入的第三色。配 paper 4.4:1 ⇒ ≥18px。
|
|
96
|
-
- **muted (#6E6A63)**:次级文字,配 paper 4.48:1(擦边)⇒ 最小 15px。
|
|
97
|
-
- **line (#CFC9BE)**:极少用的分隔线——这套风格基本不画线,靠色块自己的边。
|
|
98
|
-
- **纪律:黑白之外的纯色一屏不超过 2 个。** 红几乎总在场,那就只剩一个名额给蓝或绿。
|
|
99
|
-
|
|
100
|
-
## Typography
|
|
101
|
-
|
|
102
|
-
- 标题 **Archivo Black**(Héctor Gatti,Omnibus-Type,布宜诺斯艾利斯 2012,开源)700 + 字距 -0.02em + 行距 1.02——标题要挤成一个实心块,与照片的色块对话。
|
|
103
|
-
- 正文 Archivo 常规;小标签走 Archivo Narrow 600 + 0.14em,**窄体是这套的签名**。
|
|
104
|
-
- 标题正文反差 46/16 ≈ 2.9 倍,中间号只在长文里出现;中文用思源黑体补位,标题字重拉到 700 才压得住。
|
|
105
|
-
|
|
106
|
-
## Layout
|
|
107
|
-
|
|
108
|
-
- **系统性优先于单页好看**:同一个几何标记必须出现在**每一页的同一位置**(左上角、页脚右侧,选定就不动)。整套物料的识别力全从这一条来。
|
|
109
|
-
- 12 列网格;照片占整栏或整版,色块压住照片一角(压 1/6 到 1/4)。
|
|
110
|
-
- 大曲线可以出血、可以横跨全版,**曲线半径 ≥ 版面宽度的 1/3**——小于这个数它就退化成"亲和风圆角"。
|
|
111
|
-
- 留白集中在一侧,不四周均匀分布。
|
|
112
|
-
|
|
113
|
-
## Elevation & Depth
|
|
114
|
-
|
|
115
|
-
**零阴影**。层次靠**高对比黑白照片 + 纯色块叠压**:
|
|
116
|
-
|
|
117
|
-
1. 底:混凝土白。
|
|
118
|
-
2. 黑白照片(反差拉到近乎二值,中灰尽量少),硬裁,不加框不加圆角。
|
|
119
|
-
3. 纯色块压在照片上,**实色不透明**,直接吃掉照片的一角。
|
|
120
|
-
4. 红圆点压在最上层,永远完整、永远不被裁。
|
|
121
|
-
|
|
122
|
-
没有投影、没有毛玻璃、没有渐变。深度是**遮挡**,和印刷一样。
|
|
123
|
-
|
|
124
|
-
## Shapes
|
|
125
|
-
|
|
126
|
-
- **矩形 + 正圆 + 超大曲线**,三样,没有第四样。
|
|
127
|
-
- 圆角:`none 0px` 用于一切矩形;`circle 999px` **只用于圆点与图标按钮,绝不用于卡片**。
|
|
128
|
-
- 曲线只有一种画法:大到跨过版面的自由曲线(见 Layout 的 1/3 判据),两端出血或与直边相切,中间不做小转折。
|
|
129
|
-
- 图标走实心(solid)、2px 笔画、平头端点、直角。
|
|
130
|
-
|
|
131
|
-
## Components
|
|
132
|
-
|
|
133
|
-
- **按钮**:近黑实底 + 混凝土白字,直角,48px 高;次级按钮 = 白底黑字,同尺寸。
|
|
134
|
-
- **红圆点**:24px 正圆,纯标记元件,**不放字、不可点击**;一屏出现 1 个或 4 个。
|
|
135
|
-
- **卡片**:混凝土白底,直角,无边无影,靠间距分区。**标签**:钴蓝实底 + 白字,小而横排。
|
|
136
|
-
|
|
137
|
-
## Do's and Don'ts
|
|
138
|
-
|
|
139
|
-
- Do:**四个红圆点**——Villela 给 Elenco 定的系统是白底 + 四个红圆 + 高对比黑白人像。**一个不变的几何标记加一张会变的照片,就撑起了整个厂牌的识别。** 这是可以直接搬进界面的系统方法,不是装饰:把"标记"做成固定组件,照片当内容槽位。
|
|
140
|
-
- Do:**黑白 + 一点红 + 大尺度自由曲线**是有出处的组合——Burle Marx 1969-72 年重做 Copacabana 大道人行道,保留海边原有的葡萄牙碎石黑白波浪并强化其曲线,在对侧与中央岛用同样的黑白石**加入红石**,拼成四公里长的抽象马赛克。
|
|
141
|
-
- Do:照片先转黑白再进版面,反差拉满。
|
|
142
|
-
- Don't:桑巴羽毛、狂欢节面具、国旗黄绿蓝直接上版。**巴西现代主义恰恰是反民俗符号的**——这是本档最大的误用风险。
|
|
143
|
-
- Don't:满屏彩色渐变。"热带"不是彩虹,是黑白打底加一到两个纯色。
|
|
144
|
-
- Don't:**把曲线做成小圆角**。曲线要大到跨过整个版面;小圆角会把它变成"圆融亲和",两个风格的气质因此完全颠倒。
|
|
145
|
-
- Don't:拿 Niemeyer 的建筑照片当背景贴图——用它的**几何**,不用它的**照片**。
|
|
146
|
-
- Don't:投影、渐变、玻璃质感、彩色照片。
|
|
147
|
-
|
|
148
|
-
## 与「构成主义」的分界
|
|
149
|
-
|
|
150
|
-
⚠ 这两档的色板几乎撞车(构成主义 paper #F0EBE1 / ink #111111 / red #D6202A / muted **同为 #6E6A63**),`suits` 也完全相同,所以**必须靠构图区分**,不能靠颜色:
|
|
151
|
-
- **轴**:构成主义是一条**斜轴**(对角动势,元素沿斜线装配);这一套是**正交 + 一条大曲线**,曲线是唯一的非直线。
|
|
152
|
-
- **照片**:构成主义把照片剪碎做**蒙太奇**;这一套的照片**保持完整**,只被色块压掉一角。
|
|
153
|
-
- **字**:构成主义 Druk Condensed Super 900 / 72px 超窄超粗;这一套 Archivo Black 700 / 46px 正常字宽,标题是实心块不是巨型标语。
|
|
154
|
-
- **系统**:构成主义每版重新构成,没有恒定标记;这一套的核心恰恰是**恒定几何标记(四红圆点)在每页同一位置**。
|
|
155
|
-
- **第二色**:构成主义只有红与套印暗红;这一套允许一个钴蓝或釉绿(来自釉砖传统)。
|
|
156
|
-
|
|
157
|
-
## Composition
|
|
158
|
-
|
|
159
|
-
- 一版一照片:高对比黑白人像/场景占主体,一块纯色压角,红圆点在固定位置。
|
|
160
|
-
- 标题实心块贴着照片边缘排、齐左;正文另起一块白区。
|
|
161
|
-
- 曲线若出现,它就是版面的骨架——照片与文字沿曲线两侧分布,不再另加分割。
|
|
162
|
-
- 一版内红只出现一处(可以是四个圆点组成的一处)。
|
|
163
|
-
|
|
164
|
-
## Image Prompt Templates
|
|
165
|
-
|
|
166
|
-
- base: "Brazilian modernist graphic design, high contrast black and white photograph, flat solid color blocks overlapping the photo, four small red dots as a fixed geometric mark, concrete-white ground (#EDEAE3), pure vermilion red (#D8202A), one cobalt blue (#2C5F9E), heavy grotesque display type set tight, one huge sweeping curve spanning the entire layout, modular glazed tile wall logic, 1960s Rio record sleeve, flat printing, hard edges, no gradient, no shadow"
|
|
167
|
-
- negative: "carnival feathers, samba costume, brazilian flag green and yellow, tropical leaves, palm tree clip art, toucan, rainbow gradient, small rounded corners, soft shadow, glassmorphism, 3D render, glossy, beach stock photo, colorful photography"
|
|
168
|
-
- 注:模型一听 "tropical" 就会加棕榈叶和彩虹渐变,提示词必须同时写 "modernist, concrete, no tropical foliage";照片元素明写 "black and white only";曲线明写 "one single large curve, radius larger than one third of the canvas width",否则它会给一堆小圆角。
|