sintbot 1.3.0 → 1.4.1

package/assets/design-styles/acid-pop.md

@@ -0,0 +1,155 @@
+---
+name: 酸性荧光
+description: 灰白底上的荧光二次色与铬金属——挤压变宽字、2px 硬描边、贴纸式拼贴,吵得有纪律
+name_en: "Acid Pop"
+description_en: "Fluorescent secondaries and chrome on off-white: extended type, 2px hard outlines and sticker-style collage. Loud, but disciplined."
+suits: "活动推广 · 品牌门面"
+colors:
+  bg: "#F5F4F2"
+  ink: "#101010"
+  accent: "#C6FF1B"
+  pink: "#F98DFF"
+  cyan: "#99F8FF"
+  butter: "#FFF8A5"
+  chrome: "#C9CDD3"
+  muted: "#5C5A57"
+  line: "#101010"
+fonts:
+  latin: "'Schibsted Grotesk'"
+  cjk: sans
+typography:
+  headline:
+    latin: "'PP Right Grotesk', 'Bricolage Grotesque'"
+    fontSize: "60px"
+    fontWeight: 800
+    lineHeight: 0.95
+    letterSpacing: "-0.04em"
+  body:
+    fontSize: "16px"
+    fontWeight: 400
+    lineHeight: 1.6
+    measure: "60ch"
+  label:
+    latin: "'Space Grotesk', 'DM Mono'"
+    generic: "ui-monospace"
+    fontSize: "12px"
+    fontWeight: 500
+    letterSpacing: "0.1em"
+    textTransform: uppercase
+border:
+  width: "2px"
+  style: solid
+  emphasis: "2px"
+rounded:
+  none: 0px
+  full: 999px
+spacing:
+  unit: "8px"
+  gutter: "24px"
+  margin: "32px"
+  maxWidth: "1200px"
+  columns: 12
+elevation:
+  mode: offset
+  levels: "2"
+imagery:
+  ratio: "1:1"
+  treatment: duotone
+  crop: hard
+icon:
+  style: solid
+  strokeWidth: "2px"
+  linecap: butt
+  corner: sharp
+components:
+  button-primary:
+    backgroundColor: "{colors.accent}"
+    textColor: "{colors.ink}"
+    typography: "{typography.label}"
+    rounded: "{rounded.full}"
+    height: "44px"
+    padding: "20px"
+  button-secondary:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.full}"
+    height: "44px"
+  tag:
+    backgroundColor: "{colors.cyan}"
+    textColor: "{colors.ink}"
+    typography: "{typography.label}"
+    rounded: "{rounded.full}"
+    height: "28px"
+  card:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.none}"
+    padding: "24px"
+---
+
+## Overview
+
+参照物:Glitch&Grit(glitchandgrit.com)、Made With GSAP(madewithgsap.com)、UNITS(units.gr)、Viens-La(viens-la.com)——四个都是活站,底色与荧光色号从它们的 CSS 里实测出来。
+血统在 90 年代末的锐舞传单与唱片视觉(acid / anti-design):荧光二次色、铬金属、被挤扁的字。
+落到界面上一句话:**灰白纸底 + 最多两种荧光 + 全站 2px 纯黑描边**,元素像贴纸一样硬拼在一起。它吵,但吵得有纪律 —— 纪律只有两条:荧光只用两种,圆角只有 0 与 999 两极。
+
+## Colors
+
+- **bg (#F5F4F2)**:灰白,**不是纯白**。⚠ 这是专业与业余的分界:纯白抢走了画面最亮的位置,荧光在它上面只会显脏发灰;底压掉两三度,荧光才浮得起来。
+- **ink (#101010)**:文字、2px 描边、图标三者同一个值,bg 上 17.3:1。
+- **accent (#C6FF1B)**:酸绿,主强调,**黑字在它上面 16.1:1**;**pink (#F98DFF)** / **cyan (#99F8FF)** / **butter (#FFF8A5)** 是另外三支荧光,配黑字分别 9.3 / 15.6 / 17.4。⚠ **没有一支能配白字**(accent 上白字仅 1.2:1,其余同样低于 2:1)—— 荧光是「亮」不是「浅」,反白必挂。
+- **chrome (#C9CDD3)**:铬渐变的中段色,不单独当色块;**muted (#5C5A57)** 是全档唯一的中性灰,只给次级文字;**line (#101010)** 与 ink 同值 —— 这里「线」和「字」本来就是一回事。
+- ⚠ **一屏最多两种荧光**,第三种一定是黑或白。四支全上是彩虹糖,不是酸性。
+
+## Typography
+
+- 标题 PP Right Grotesk / Bricolage Grotesque,800,字距 -0.04em —— 字要挤到几乎咬合;**与正文差 3.75 倍**(60/16),中间字号越少越好,这个风格靠尺度悬殊说话。
+- ⚠ **挤压走可变字的 width 轴**(Bricolage Grotesque 自带 `wdth`,免费可商用),**别用 `transform: scaleX()`** —— 缩放会把竖笔画连着字重一起压细,一眼就是假窄体。
+- 正文 Schibsted Grotesk 400,16px / 1.6 —— 正文是这个风格里唯一老实的地方,别跟着一起玩;小标签 Space Grotesk 或 DM Mono 500 + 0.1em + 全大写,做编号、日期、按钮文字;中文没有真正的等宽族,夹在标签里的汉字兜到系统黑体(苹方 / 微软雅黑,思源黑体在栈尾兜底)。
+
+## Layout
+
+- 12 列网格立着,但内容**故意越栏**:大字出血、贴纸压住栏线 —— 网格是被违反的参照物,不是笼子。元素允许重叠 8-24px,重叠处**不做半透明**,后来的直接盖住,交界留 2px 黑边把两层分开。
+- 疏密两极:一块极空,一块塞满(标签成排、编号密集),均匀铺满是这个风格最没气质的做法。
+- 允许整体轻微倾斜(≤6°),但**一屏只用一个角度**,且它要和某条边有关系,不是随手转的;元素可出血、可歪,**绝不旋转超过 10°**。
+
+## Elevation & Depth
+
+没有柔阴影,一颗 blur 都不许有。深度只有三个来源,而且**互斥**:
+
+1. **2px 纯黑硬描边**(`0 0 0 2px #101010`):贴纸的边界,卡片 / 按钮 / 图片 / 标签共用同一个宽度。
+2. **单色外发光**(`0 0 32px rgba(198,255,27,.5)`):只给悬停 / 激活的**那一个**元素,发光色 = 它自己的荧光色;同屏出现第二处,两处就都不亮了。
+3. **铬金属渐变**(`linear-gradient(160deg,#F2F4F7 0%,#C9CDD3 40%,#8E949C 55%,#EDF0F3 100%)`):55% 那道暗带是「反射的地平线」,少了它只是一块灰渐变。⚠ **一屏只允许一个物件用铬**,两个互相打架,金属感立刻塌成塑料感。
+
+Don't:任何带模糊半径的 `box-shadow`;半透明黑投影;发光与铬同屏。
+
+## Shapes
+
+- 形状语言 = **贴纸 + 胶囊**,两极并置没有中间态 —— **圆角只有两个值**:卡片 / 图片 / 输入框 / 容器恒 `0`,按钮与标签恒 `999`(胶囊)。⚠ 8/12/16 这类中间档一出现,它立刻变成通用模板 —— 这是本风格与「模板长相」最直观的一道分界。
+- **描边恒 2px 纯黑**,不随元素大小变;直角相交,端点 butt,不用虚线,1px 在这里读作「没画完」。允许的形状只有:矩形、胶囊、正圆(徽章)、四角星闪光(≤2 处)、箭头。
+
+## Components
+
+- **按钮**:accent 胶囊 + 2px 黑边 + 全大写标签体黑字,一屏最多两个;次级按钮 bg 底同款黑边,hover 换 pink 或 cyan,**不加阴影**。
+- **标签**:小胶囊,黑边 + 荧光底,成排密集出现是这个风格的典型画面。
+- **卡片 / 输入框**:bg 底 + 2px 黑边 + 直角;卡片里可以压图,但**卡片不套卡片**(两圈黑边立刻脏);输入框聚焦态 = 外发光,这是唯一允许发光的常规控件。
+
+## Do's and Don'ts
+
+- Do:荧光色一屏最多两种,第三种一定是黑白;正文永远落在 bg 上用 ink 字(17.3:1)。
+- Do:挤压走可变字 width 轴不用 `scaleX`(见 Typography);描边一律 2px 纯黑全站统一 —— 粗细统一比粗细讲究更重要。
+- Don't:**紫蓝渐变**(#7C3AED→#2563EB 那一套)。那是 AI 通病的签名,不是酸性;酸性的渐变只有铬。
+- Don't:中间档圆角(8/12/16),一出现就变模板;别给荧光色配柔和阴影(荧光是自发光的,不该有柔影);别拿荧光当文字底(全部低于 2:1,见 Colors)。
+- **与「几何构成」的分界**:包豪斯是三原色 + 平涂 + 正交网格的秩序;酸性是荧光**二次色** + 金属渐变 + 变宽字挤压 + 贴纸拼贴。一个讲秩序,一个讲过载。
+- **与「圆融亲和」的分界**:分在饱和度与硬度 —— 那边低饱和 + 大圆角 + 柔阴影,这边高饱和 + 两极圆角 + 零模糊。
+
+## Composition
+
+- 活动页 / 海报:一个巨大的挤压标题吃掉半屏 + 一块荧光色面 + 一个铬物件 + 一排小标签,就是一屏。
+- 图片做双色(ink + 一种荧光),硬裁成正方,加 2px 黑边;人像可先高反差二值化再上色。留白区里什么都不放 —— 这个风格的呼吸全靠那块空着的灰白,它敢空,荧光才敢响。
+
+## Image Prompt Templates
+
+- base: "acid graphic design poster, off-white grey background (#F5F4F2), exactly two fluorescent colors — acid lime (#C6FF1B) and fluorescent pink (#F98DFF), 2px solid pure black outline on every element, one polished chrome metal object with a sharp specular highlight band, ultra-condensed variable-width sans-serif display type with tight letter spacing, sticker collage layout, flat hard-edge shapes, pill-shaped buttons with square containers, 1990s rave flyer aesthetic"
+- negative: "purple to blue gradient, soft drop shadow, blurry glow everywhere, pastel palette, 12px rounded corners, 3D render, glossy plastic, watercolor, more than two neon colors, white text on neon"
+- 注:荧光数量写死在描述里("exactly two neon colors, everything else black and white");铬写成 "one chrome object",不写死数量模型会满屏铺金属。中文版面补 "clean CJK sans-serif, heavy weight, tight tracking",文案压到几个大词。

package/assets/design-styles/archive-index.md

@@ -0,0 +1,161 @@
+---
+name: 档案索引
+description: 策展目录那种密排列表——纯白纸、纯黑衬线、未经修饰的超链接蓝,容器是表格行不是卡片
+name_en: "Archive Index"
+description_en: "The dense list of a curated catalogue: plain white paper, black serif text and untouched hyperlink blue. Containers are table rows, not cards."
+suits: "内容阅读"
+colors:
+  bg: "#FFFFFF"
+  ink: "#000000"
+  accent: "#0000FE"
+  mark: "#FF4F23"
+  muted: "#7D7D7D"
+  line: "#000000"
+  rule: "#E8E8E8"
+fonts:
+  latin: "'EB Garamond'"
+  cjk: sans
+typography:
+  headline:
+    cjk: serif
+    fontSize: "44px"
+    fontWeight: 400
+    lineHeight: 1.15
+  body:
+    generic: "serif"
+    fontSize: "19px"
+    fontWeight: 400
+    lineHeight: 1.5
+    letterSpacing: "0.005em"
+    measure: "68ch"
+  label:
+    generic: "serif"
+    fontSize: "14px"
+    fontWeight: 400
+    fontStyle: italic
+    letterSpacing: "0.02em"
+border:
+  width: "1px"
+  style: solid
+  emphasis: "1px"
+rounded:
+  none: 0px
+spacing:
+  unit: "8px"
+  maxWidth: "960px"
+elevation:
+  mode: flat
+  levels: "1"
+imagery:
+  ratio: "4:3"
+  treatment: grayscale
+  crop: hard
+icon:
+  style: line
+  strokeWidth: "1px"
+  linecap: butt
+  corner: sharp
+components:
+  button-primary:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.bg}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    height: "36px"
+    padding: "16px"
+  card:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.none}"
+    padding: "0px"
+  input-field:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.none}"
+    height: "34px"
+    padding: "8px"
+  tag:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.mark}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    height: "22px"
+    padding: "4px"
+---
+
+## Overview
+
+参照物(均实测过 CSS):DEPO LUXE `depoluxe.xyz`(EB Garamond 含 italic 通道,`#000` / `#FFF` / `#0000FE` / `#FF4F23`)、Are.na `are.na`、It's Nice That `itsnicethat.com`。
+它模仿的是**纸与早期网页**:纯白、纯黑、未经修饰的超链接蓝,信息以编号列表与表格铺开。主体是**列表、表格、编号、脚注**,大图几乎不用;气质是策展与文献,不是生活方式。
+
+**与「杂志编辑」的分界**:杂志编辑是图文叙事(暖纸、砖红、大图开场、不对称留白);这一套几乎不用大图,靠密排条目取胜。
+**与「瑞士网格」的分界**:衬线不是无衬线、纯白不是暖白、有链接色、密度更高,而且**允许斜体**(瑞士明令禁斜体,这里斜体是元信息的专用体)。
+
+## Colors
+
+- **bg (#FFFFFF)**:**必须纯白**。暖白纸感是杂志的做法,这里要的是纸与屏幕的直白。
+- **ink (#000000)**:**纯黑,不是 `#111`**(21:1)。这一点点极端就是它的态度。
+- **accent (#0000FE)**:未经修饰的超链接蓝(白底 8.64:1)。**加下划线,不改颜色**。
+- **mark (#FF4F23)**:标记橙,给两位数编号、当期标记、少量强调词。⚠ 白底只有 3.28:1 ⇒ **只够大字(≥24px)**,绝不做正文、小字或链接。
+- **muted (#7D7D7D)**:辅助灰 4.12:1,**不达正文 4.5**。只给页脚、版权这类不承载信息的行;要读的元信息用 ink,或把灰压到 `#6B6B6B`(5.33:1)。别把 4.12 当过关。
+- **line (#000000)**:表格线、分区线 —— 与 ink 同色,这个风格里线和字本来就是一回事。
+- **rule (#E8E8E8)**:仅用于超长列表内部的次级分隔,一屏出现不超过一次。
+
+## Typography
+
+- **拉丁三档全是 EB Garamond**,不掺无衬线 —— 单一字族是这个风格的纪律。
+- **中文只有大标题用宋体**(思源宋体优先),正文与标签用黑体。⚠ 这不是妥协:宋体横细竖粗,
+  19px 以下在屏幕上横画会发虚断裂;44px 的标题才有足够像素撑住它的骨架与衬线。拿不到思源宋
+  的机器直接退黑体,**不退中易宋体**。
+- 标题 44px **字重 400,不加粗** —— 大字号本身就是层级,加粗会把文献感做成海报感。
+- 正文 19px、行高 1.5、字距 `0.005em`(衬线小字在屏幕上需要这点松),**行长 68ch,65-75 是命门**:短了变碎片,长了读不动。
+- 元信息用 **italic 小字**(14px),不用全大写也不用等宽 —— 斜体是这套里唯一的第二声部。中文无真斜体,改用小一号 + 收敛的灰,**不做伪斜**。
+
+## Layout
+
+- 主体是**条目列表**:每行 = 编号 + 标题 + 元信息,行高压到 1.35,密;表格撑满栏宽,列之间不留框线,只有横向 1px 黑线分行。
+- 内容最大宽 960px;索引栏与正文栏可以并置(索引窄、正文宽),但**不做卡片网格**。页边距 32px,页脚一条 1px 黑线 + 斜体小字收尾。
+
+## Elevation & Depth
+
+完全没有层(`flat`)。层级只有三个来源,记作**线、字号、编号**:
+
+1. **1px 纯黑线**:分区、分行、页眉页脚。一条线解决一次分区,不用底色也不用留白块 —— 结构的九成在这里。
+2. **字号与斜体**:标题 44 / 正文 19 / 元信息 14 斜体,三档到底,不设第四档。
+3. **编号**:两位数编号(01/02/03)本身就是纵深 —— 它把平铺的列表变成有序档案。
+
+Don't:投影、圆角、hover 放大、卡片浮起。任何「抬起来」的暗示都与纸的物理性质冲突;要强调某一行就加一条线或把编号换成 mark 色,别让它浮起来。
+
+## Shapes
+
+- **圆角恒 0**,包括图片、按钮、输入框、头像;图片硬裁 4:3、灰阶、贴齐栏宽,不加边框不加圆角。
+- 线条 1px 纯黑、平头、**绝不交叉重叠** —— 表格只有横线,竖线能不用就不用;真要用,横竖端点必须精确相接,不出头不缺口。
+- 图标 1px 细线、方头、直角,尺寸与正文 x 高对齐;箭头用 `→` 字符而不是图形。
+
+## Components
+
+- **主按钮**:纯黑实心 + 白字 + 直角,整站最多出现在一处(订阅/提交)。
+- **次按钮**:白底 + 1px 黑边 + 黑字;hover **只加下划线**,不换底色。
+- **卡片**:内边距 0、无底色、无边框 —— **这个风格的容器是表格行,不是卡片**。一组条目 = 若干行 + 行间 1px 黑线,如此而已。
+- **输入框**:底部 1px 黑单边线(不是四边框),背景透明,聚焦时线加粗到 2px。
+- **标签**:mark 色斜体小字,直接坐在白底上,不加边框不加底色。
+
+## Do's and Don'ts
+
+- Do:每个条目带两位数编号(01/02/03)用 `mark` 色,字号够大才用得起这个色。
+- Do:元信息(日期、类别、作者、来源)一律斜体小字,紧跟标题同行或下一行。
+- Do:表格线永远 1px 纯黑且不交叉重叠;留出真正的页边距与页脚 —— 它是一份文档,不是一屏内容。
+- Don't:**卡片化**。把条目装进带边框圆角的卡片里,这个风格就没了。
+- Don't:改链接颜色去「配色」。`#0000FE` 加下划线就是它的性格,**「不设计」本身是一次设计判断**。
+- Don't:投影、圆角、hover 放大、渐变;标题加粗;用全大写做元信息;大图开场与满幅英雄区(那是杂志编辑那一套)。
+
+## Composition
+
+- 首屏 = 一行标题 + 一条黑线 + 直接开始的编号列表,**不做封面**;图片穿插在列表中间,单张、灰阶、不超过栏宽的 2/3,图注用斜体小字紧贴下方。
+- 一页只有一条视觉主轴:自上而下的编号序列,横向不做并列卡片。脚注与来源用更小的斜体排在末尾,与正文之间隔一条 1px 黑线。
+
+## Image Prompt Templates
+
+- base: "archival index page layout, pure white background, pure black EB Garamond serif typography, numbered list entries with two-digit numerals in orange (#FF4F23), unstyled underlined hyperlink blue (#0000FE), italic serif metadata in small size, 1px solid black hairline rules separating rows, dense table-like listing, one small grayscale 4:3 photograph, no cards, no shadows, no rounded corners, flat printed-document feel"
+- negative: "card grid, drop shadow, rounded corners, sans-serif typography, warm paper tone, hero image, gradient, colorful buttons, bold headline, emoji"
+- 注:画面里必须出现**编号列表或表格**(那是它的主体),而不是段落配图;中文版面补 "clean CJK serif typography (Noto Serif SC), regular weight"。

package/assets/design-styles/art-deco.md

@@ -0,0 +1,164 @@
+---
+name: 装饰艺术
+description: 近黑棕底上的金色细双线、阶梯轮廓与日出放射——贵气来自字距与几何,不是金属贴图
+name_en: "Art Deco"
+description_en: "Fine gold double rules, stepped outlines and sunbursts on near-black brown. The luxury comes from letter spacing and geometry, not metallic textures."
+suits: "品牌门面 · 活动推广"
+colors:
+  bg: "#12100E"
+  panel: "#1D1A16"
+  ivory: "#F3EDE1"
+  gold: "#C39E6D"
+  brass: "#8A6A3B"
+  jade: "#0E4C44"
+  line: "#3A3229"
+fonts:
+  latin: "'Jost'"
+  cjk: sans
+typography:
+  headline:
+    latin: "'Neutraface Display', 'Poiret One', 'Limelight'"
+    fontSize: "46px"
+    fontWeight: 400
+    lineHeight: 1.15
+    letterSpacing: "0.14em"
+  body:
+    fontSize: "16px"
+    fontWeight: 400
+    lineHeight: 1.7
+    measure: "60ch"
+    letterSpacing: "0.01em"
+  label:
+    latin: "'Josefin Sans'"
+    fontSize: "12px"
+    fontWeight: 600
+    letterSpacing: "0.20em"
+border:
+  width: "1px"
+  style: double
+  emphasis: "1px"
+rounded:
+  none: 0px
+  circle: 999px
+spacing:
+  unit: "8px"
+  gutter: "32px"
+  margin: "48px"
+  maxWidth: "1200px"
+elevation:
+  mode: flat
+  levels: "0"
+imagery:
+  ratio: "3:4"
+  treatment: duotone
+  crop: hard
+icon:
+  style: solid
+  strokeWidth: "1px"
+  linecap: butt
+  corner: sharp
+components:
+  button-primary:
+    backgroundColor: "{colors.gold}"
+    textColor: "{colors.bg}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    height: "44px"
+    padding: "24px"
+  button-primary-hover:
+    backgroundColor: "{colors.brass}"
+    textColor: "{colors.ivory}"
+  card:
+    backgroundColor: "{colors.panel}"
+    textColor: "{colors.ivory}"
+    rounded: "{rounded.none}"
+    padding: "32px"
+  input-field:
+    backgroundColor: "{colors.panel}"
+    textColor: "{colors.ivory}"
+    rounded: "{rounded.none}"
+    height: "44px"
+  tag:
+    backgroundColor: "{colors.jade}"
+    textColor: "{colors.ivory}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+  badge-circle:
+    backgroundColor: "{colors.gold}"
+    textColor: "{colors.bg}"
+    rounded: "{rounded.circle}"
+    size: "40px"
+---
+
+## Overview
+
+参照物:1925 年巴黎 Exposition Internationale des Arts Décoratifs(这个展名就是 Art Deco 的出处);**A.M. Cassandre** 的邮轮海报 *Normandie*(1935)与 *Nord Express*(1927),及他与 Deberny & Peignot 合作的 Bifur(1929)/ Acier Noir(1935)/ Peignot(1937);Chrysler Building(William Van Alen,1930);当代样本 **LAFC 品牌识别**(2016,Matthew Wolff + Tue Nguyen:Neutraface + 黑 + California Gold #C39E6D)。气质是「机器时代的贵气」:几何、对称、向上、金属而不炫目。
+
+## Colors
+
+- **bg (#12100E)**:近黑棕(noir),**不是纯黑**——纯黑配金会立刻变成廉价颁奖礼请柬。
+- **panel (#1D1A16)**:抬高一档的面板底。深色的层次靠这一档明度差,不靠投影。
+- **ivory (#F3EDE1)**:标题与正文色,与 bg 16.3:1。别用纯白。
+- **gold (#C39E6D)**:主强调。与 bg **7.6:1**,做正文强调、按钮底、细线都安全;面积 **≤10%**——金是线和字,不是面。
+- **brass (#8A6A3B)**:黄铜暗调,与 bg 3.8:1,只够大字与次级信息,不排正文。
+- **jade (#0E4C44)**:第二色块。与 bg 只有 1.9:1(几乎融进底色),所以它**只能做大色块**,上面压 ivory 字 8.4:1。
+- **line (#3A3229)**:结构线与分栏线;它与金色装饰双线是两套东西,不混用。
+
+## Typography
+
+- **标题**:Neutraface Display(House Industries,Christian Schwartz 2002,据建筑师 Richard Neutra 的招牌字重绘)——⚠ **需商业授权**。免费回退 Poiret One / Limelight,但**两者都只有 400 一个字重**:标题的分量因此必须靠**字号与字距**,**绝不要用 `font-weight` 让浏览器合成假粗**(合成粗体会把 Deco 的细笔画糊成一团,一眼露怯)。
+- **正文交给 Jost**(Futura 精神的当代重制,x-height 更高、小字更耐读)。Futura 本尊 x-height 太小,16px 正文读起来累。
+- **label**:Josefin Sans 600、字距 0.20em、全大写。**贵气来自字距不来自字重**——标题全大写 + `letter-spacing ≥ 0.12em` 是这个风格的硬约定。
+
+## Layout
+
+- 8px 基准、12 栏;**纵向 section 间距取横向的两倍**(64 / 96px)——Deco 的「向上」感来自纵向拉伸,横向反而要收紧。
+- **严格对称是允许的**,主标题居中也是允许的(这是它与瑞士网格、编辑风最大的不同)。
+- 两个签名母题(1925 年博览会上同时确立在纺织、珠宝、建筑三处):① **阶梯 / ziggurat 轮廓**——标题栏或卡片顶部做 2-3 级台阶收边,每级等高;② **扇形 / 日出放射线**——作章节分隔或页脚,射线取奇数、角度等分。另在页眉页脚各留一条金色细双线,把版心「装裱」起来。
+
+## Elevation & Depth
+
+`elevation.mode: flat`——没有投影。深度全部来自**线与轮廓**:
+
+1. **金色细双线 rule**:`1px + 3px 间隙 + 1px`,是这个风格的签名。它同时承担分隔、装饰,以及「这一块比那一块重要」的层级表达。
+2. **阶梯形色块收边**:panel 底的卡片顶部做 2-3 级台阶,台阶本身就读成厚度。
+3. **bg / panel 两级底色**:面板浮起靠这一档明度差。
+
+Don't:模糊阴影、外发光、金属渐变——**单色平涂 + 1px 细线比任何渐变都贵**,这条是本风格最重要的一句话。
+
+## Shapes
+
+- **圆角恒 0**,唯一例外是**正圆**(`rounded.circle`):徽章、序号牌、放射线的圆心。
+- **边框 1px 双线**(`border.style: double`),金色;结构性的框改用 line 色单线。
+- 允许的形状:矩形、正圆、等腰三角(作射线与山形)、阶梯折线。**不用椭圆、不用波浪、不用切角。**
+- 图标:实心、平头、直角转角,用圆 + 三角 + 矩形拼出来,不用线性描边图标。图片双色化(duotone:bg × gold 或 bg × ivory),硬裁 3:4,四边可加一条金色单线。
+
+## Components
+
+- **按钮**:gold 实底 + bg 字 + label 排版(全大写 0.20em),直角、44px 高;hover 落到 brass 底 + ivory 字,**不位移不加圆角**。
+- **卡片**:panel 底 + 金色双线上下封边,顶部可做阶梯收边。
+- **标签**:jade 实底 + ivory 字,小而扁,一屏 ≤3 个。**徽章**是正圆 40px、gold 底、bg 字——全站唯一的圆形。
+- **输入框**:panel 底、底部一条金线;聚焦时那条线加粗到 2px,不发光。
+
+## Do's and Don'ts
+
+- Do:标题全大写 + `letter-spacing ≥ 0.12em`。
+- Do:金色面积 ≤10%,并优先做线与字(#C39E6D on #12100E = 7.6:1,做正文强调安全)。
+- Do:严格对称;主标题居中是允许的。
+- Do:**分层策略**——参照 *BioShock*(2007)的做法:装饰性 deco 字只用在 logo 与世界内的海报上,**HUD、菜单、字幕全部换成安静易读的字**。这是 Art Deco 数字化的正解,也是它不显廉价的关键。
+- Don't:金属渐变、金箔贴图、高光扫过的假金属——单色平涂永远更贵。
+- Don't:正文用装饰性 deco 字(Poiret One / Limelight 排段落等于让人放弃阅读)。
+- Don't:圆角、柔和阴影、「卡片浮起来」的暗示。
+- Don't:用 `font-weight: 700` 给只有 400 字重的显示字合成假粗。
+- Don't:把它做成「赌场 / 颁奖礼 / 婚礼请柬」——那三样的共同点都是纯黑底 + 渐变金。
+
+## Composition
+
+- 海报式:上下各一条金色双线装裱 → 居中的阶梯形标题栏 → 一张 duotone 竖图 → 页脚放射扇形。
+- 版面纵向拉长,元素之间宁可空 96px 也不要挤,左右反而收紧到 48px;一屏的金色元素要数得出来——一条双线、一个按钮、一个徽章,到此为止。
+
+## Image Prompt Templates
+
+- base: "art deco poster, 1925 Paris exposition style, deep near-black brown background (#12100E), flat matte gold linework (#C39E6D), stepped ziggurat framing, sunburst radiating lines, strict bilateral symmetry, geometric machine-age forms, ocean-liner poster composition in the manner of A.M. Cassandre, duotone illustration, 3:4 vertical, crisp 1px rules, no gradients"
+- negative: "metallic gradient, gold foil texture, specular highlight, glossy 3d render, rounded corners, soft shadow, casino signage, wedding invitation flourish, neon glow, cluttered ornament"
+- 注:模型一听 "gold" 就会给金属渐变和高光——negative 里必须点名 "metallic gradient" 与 "gold foil",base 里强调 "flat matte gold linework";另外别让模型写文字,Deco 标题的字距与阶梯造型它做不准,文字一律后期排。

package/assets/design-styles/cinematic-noir.md

@@ -0,0 +1,178 @@
+---
+name: 暗场影像
+description: 碳黑底上的满幅影像与巨字——胶片颗粒、四角暗角、骨白文字,像放映厅而不是控制台
+name_en: "Cinematic Noir"
+description_en: "Full-bleed imagery and huge type on carbon black, with film grain, corner vignettes and bone-white text. A screening room, not a dashboard."
+suits: "品牌门面 · 生图插画"
+colors:
+  bg: "#08090A"
+  surface: "#131417"
+  ink: "#EDE9E1"
+  sand: "#E6D5BB"
+  muted: "#8B8A86"
+  accent: "#FF4D00"
+  line: "#23252A"
+fonts:
+  latin: "'Familjen Grotesk'"
+  cjk: sans
+typography:
+  headline:
+    latin: "'PP Neue Montreal', 'Familjen Grotesk'"
+    fontSize: "88px"
+    fontWeight: 500
+    lineHeight: 0.95
+    letterSpacing: "-0.03em"
+  body:
+    fontSize: "17px"
+    fontWeight: 400
+    lineHeight: 1.55
+    measure: "60ch"
+  label:
+    latin: "'Martian Mono', 'Geist Mono'"
+    generic: "ui-monospace, monospace"
+    fontSize: "12px"
+    fontWeight: 400
+    letterSpacing: "0.12em"
+    textTransform: uppercase
+border:
+  width: "0px"
+  style: solid
+  emphasis: "1px"
+rounded:
+  none: 0px
+spacing:
+  unit: "8px"
+  gutter: "24px"
+  maxWidth: "1440px"
+elevation:
+  mode: flat
+  levels: "1"
+imagery:
+  ratio: "16:9"
+  treatment: grayscale
+  crop: full-bleed
+icon:
+  style: line
+  strokeWidth: "1px"
+  linecap: butt
+  corner: sharp
+components:
+  button-primary:
+    backgroundColor: "{colors.accent}"
+    textColor: "{colors.bg}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    height: "48px"
+    padding: "24px"
+  button-secondary:
+    backgroundColor: "{colors.bg}"
+    textColor: "{colors.sand}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    height: "48px"
+    padding: "24px"
+  card:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.none}"
+    padding: "32px"
+  input-field:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.ink}"
+    rounded: "{rounded.none}"
+    height: "48px"
+    padding: "16px"
+  tag:
+    backgroundColor: "{colors.surface}"
+    textColor: "{colors.muted}"
+    typography: "{typography.label}"
+    rounded: "{rounded.none}"
+    height: "26px"
+    padding: "10px"
+---
+
+## Overview
+
+参照物(均实测过 CSS):TRIONN `trionn.com`(Awwwards SOTD,底色 `#040508`、文字 `#D8D8D8`,Familjen Grotesk 配 Martian Mono)、Obys 的 Experiment Space `experiment.obys.agency`、RISK `risk.film`(骨色 `#E6D5BB` 就是它的主文字色)、Monolog `bymonolog.com`。
+
+这是**放映厅的暗**,不是软件的深色模式:满幅影像铺满屏,巨大的标题压在图上,小字是等宽全大写的场记标签,画面有颗粒、四角有暗角。气质是「胶片」—— 克制、有重量、不发光;所有戏都在图与字号的落差里。
+
+**它和「科技深色」是两件事,别混** —— 一个给人操作,一个给人看:
+- **科技深色 = 产品控制台**:石墨蓝底 `#0B0E14`、数据青标活数据、6/10px 圆角、有完整组件体系、画面是图表与密排卡片。
+- **暗场影像 = 品牌影像面**:纯碳黑 `#08090A`、骨白与灼橙、圆角恒 0、几乎没有组件(只有图、字、线)、画面是满幅图 + 巨字 + 颗粒。
+
+## Colors
+
+- **bg (#08090A)**:碳黑。不用纯黑 `#000` —— 差这一点点,颗粒与暗角才有地方落。
+- **surface (#131417)**:比底色只亮一档。它是唯一的「面」,靠明度差从底上浮起来。
+- **ink (#EDE9E1)**:**暖白,不是纯白**。纯白 `#FFF` 在碳黑上 19.9:1,刺眼且发蓝;暖白 16.5:1,够用而且有胶片的奶感。**这条最容易被改错。**
+- **sand (#E6D5BB)**:骨色(13.9:1),用于标题、引言、需要一点温度的大字。它与 ink 二选一定调:整站要么暖白主骨色点,要么反过来,**别两种主文字色并行**。
+- **muted (#8B8A86)**:场记标签、图注、时间码(5.8:1)。
+- **accent (#FF4D00)**:灼橙。**一屏一处**,通常只是一个词、一条线或一个小方块;黑字压橙 6.0:1,是它唯一能安全承载文字的用法。
+- **line (#23252A)**:分区细线。深色画面的秩序靠线,不靠色块。
+
+## Typography
+
+- 标题 PP Neue Montreal / Familjen Grotesk,**字重 500 就够**,字距 `-0.03em`。大字靠大取胜不靠粗,800 字重在这里会显得吵。
+- 正文 Familjen Grotesk 400,行长 60ch 以内;中文系统黑体(苹方 / 微软雅黑),字重同样压在 400-500。
+- 小标签走等宽(Martian Mono / Geist Mono)+ 全大写 + `0.12em`,像镜头边上的元数据 —— 占比很小但不能没有;夹在标签里的汉字兜到系统黑体,与正文同一套。
+- **字号跨度必须 ≥10 倍**:12px 标签 ↔ 140px 标题同屏出现,中间几乎不放东西。跨度不够,整套就塌回普通深色网页。
+
+## Layout
+
+- 满幅优先:图片贴四边出血,内容压在图上;左右边距 40px 只对文字块生效。
+- 12 列网格**只用来对齐文字**,图片不受网格约束。
+- 大量垂直留白:标题上下各留屏高的 15-20%,让巨字有呼吸。一屏一个信息单元 —— 这是滚动叙事的版式,不是信息聚合页。
+
+## Elevation & Depth
+
+底色是平的(`flat`,零投影),纵深靠**画面本身**造,三个来源:
+
+1. **胶片颗粒**:整幅覆一层 `<feTurbulence baseFrequency="0.9">` 噪声,`opacity: .06; mix-blend-mode: overlay`。它让纯色区不再死板,是「胶片感」的九成。
+2. **四角暗角**:`radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45))` 压在图片与整屏上 —— 视线被收进画面中央,这是镜头的物理属性。
+3. **明度分层**:bg `#08090A` 与 surface `#131417` 只差一档。面浮起来靠这一档,不靠边框也不靠阴影。
+
+Don't:**任何 `box-shadow`**。碳黑上的柔阴影只会糊成一团脏,毫无立体感 —— 浅底那套抬升手法在这里全部失效。
+
+## Shapes
+
+形状语言 = **矩形与线**,没有第三种。
+
+- **圆角恒 0**,包括图片、按钮、输入框、标签、头像。出现圆角这个风格就变成通用深色 App。
+- 线 1px `line` 色、平头相交、不用虚线;线的作用是分区,不是装饰。
+- 图标细线 1px、方头、直角,尺寸小(16-20px),永远不填色。
+- 允许的图形:矩形、细线、`+` 十字标记(角标/裁切标记)、时间码方块。**不用圆形**,除非画的是真实的镜头或唱片。
+
+## Components
+
+这个风格几乎没有组件体系 —— 下面四个是「不得不有」时的写法,能不用就不用。
+
+- **主按钮**:灼橙实色 + 黑字 + 直角,一屏最多一个。
+- **次按钮**:透明底 + 骨色字 + 1px `line` 边;hover **只换文字色**,不加背景。
+- **卡片**:surface 底、直角、32px 内边距、无边框无投影;卡片里不放第二张卡片。
+- **输入框**:surface 底 + 底部 1px `line` 单边线(不是四边框),聚焦态底线换 accent,**不加发光**。
+- **标签**:等宽小字 + surface 底,成排横列,像胶片边上的编号条。
+
+## Do's and Don'ts
+
+- Do:图先行 —— 先定一张能撑满屏的图再排字。这个风格没有好图就不成立。
+- Do:颗粒与暗角**全站统一一套参数**,只调一次,别一页一个强度。
+- Do:accent 保持稀缺;想加第二处橙色时,先删掉一处。
+- Don't:发光、霓虹、辉光描边 —— 那是赛博朋克,不是影像。
+- Don't:纯白 `#FFF` 正文(见 Colors)。
+- Don't:任何 `box-shadow`、任何圆角、任何渐变按钮。
+- Don't:彩色照片直接上版;先转灰阶或压成低饱和暖调,否则配色纪律立刻散架。
+- Don't:把它当控制台用 —— 要密排数据与组件时改用「科技深色」。
+
+## Composition
+
+- 满幅图 + 压图巨标题 + 一行等宽小字,三层结束,一屏就这么多。
+- 标题可以压在图片较暗的区域,但**必须先压一层暗角或 40% 黑蒙版**再放字。
+- 图片处理成灰阶或单一暖调,硬裁、贴边出血,不加边框不加圆角。
+- 序列感来自节奏:满幅图 → 大留白文字页 → 满幅图,交替推进。
+
+## Image Prompt Templates
+
+- base: "cinematic dark editorial layout, full-bleed desaturated film still, deep carbon black background (#08090A), warm bone-white oversized headline typography (#EDE9E1), tiny uppercase monospaced caption with wide letter spacing, one burnt orange accent detail (#FF4D00), heavy film grain overlay, strong vignette at corners, sharp 90-degree corners, no glow, flat and matte, 35mm photographic mood"
+- negative: "neon glow, cyberpunk purple pink, rounded corners, drop shadow, pure white text, glossy 3D render, lens flare, dashboard widgets, colorful saturated photo, gradient background"
+- 注:先写**镜头与光**(侧逆光/夜景街灯/雾)再写内容;文字宁少勿多,一两个大词就够。中文版面补 "clean CJK sans-serif typography, light weight"。