Subframe
一幅绘制在温暖羊皮纸上的图形画作。这种高档纸张上的每一笔都由石墨或橡皮擦构成，绝不使用颜料——通过线条粗细和稀疏的衬线来营造深度感。
Subframe 是一个单色设计师的工作空间：温暖柔和的画布，石墨黑的墨水，以及完全摒弃的色彩点缀。整个界面仿佛由纸张、铅笔和阴影构成，仅以一个醒目的字体点缀：精致的衬线字体（Instrument Serif）与简洁的无衬线字体（Inter）形成对比，赋予标题以编辑般的庄重感。界面表面平坦且带有边框，而非凸起；深度感并非通过阴影实现，而是通过 #e5e7eb 的细线分隔符和深色控件上的内嵌高光来营造。布局密度充足：宽阔的垂直节奏（各部分之间 48-64 像素的间距）、居中的全宽布局以及文本周围大量的留白。唯一的色彩是近白与近黑之间的对比，使得深色按钮成为每个页面上最引人注目的元素，而灰色调的合作伙伴品牌标识条带则是唯一的装饰性视觉元素。
页面采用居中全宽布局（1200像素），垂直方向的视觉节奏感强。主要元素是一个居中的单块：顶部是一个深色分段式控件，下方是一个醒目的“Inter”标题，一个单行副标题，以及两个相邻的按钮（填充+半透明）——没有侧边图片，布局简洁。主要元素下方是一条居中的灰度logo条纹。后续的每个部分都遵循相同的模式：左对齐的标题和副标题块，然后是一个全宽的产品展示框，各部分之间留有48-64像素的间距。导航极简：顶部栏包含居中的链接和右对齐的操作按钮，没有侧边栏，也没有大型菜单。页面从上到下阅读起来就像一系列居中的语句，每个语句都拥有充足的空间——这种布局更像是编辑作品集，而不是一个内容繁杂的产品页面。
视觉设计简约实用。系统采用两种视觉模式：(1) 以 24 像素半径的边框展示产品截图和 UI 模型图——这些截图和模型图展示了实际的界面组件（表格、按钮、表单），并以相同的单色渲染，使截图与页面无缝衔接；(2) 一条由灰度合作伙伴徽标组成的单条带作为品牌标识，采用扁平化渲染，不包含任何颜色或容器。系统中没有生活方式照片、抽象渐变或 3D 渲染图。唯一的插图元素是一个深色的产品“图块”，位于暖灰色背景的中心，并带有品牌图标——它被视为产品演示，而非装饰。所有图像均采用文本布局，视觉重心由文本承担。
调色板
中性的
- Page Canvas
#fafafa— 页面背景、画布上的明信片、深色表面上的浅色文字——整个单色系统以温暖的白色为底色。 - Hairline Border
#e5e7eb— 分隔线、卡片边框、图像框、图标轮廓——系统中常用的轮廓类型定义了空间结构。 - Card Surface
#ededed— 卡片的凸起背景，即额外的表面——位于画布上方一级，形成无阴影的组合。 - Divider Mid
#dadada— 中间色调分隔符和各部分之间的过渡 - Graphite
#242424— 浅色表面上的主按钮采用高对比度中性填充。 - Ink Black
#171717— 正文、标题、图标轮廓——比石墨色更酷炫一些，用于排版而不是表面。
排版
从 12 像素到 128 像素 · 7 步
- Inter — 替代品： Inter (Google Fonts) · 轮廓 500, 600, 700 · 一套无衬线字体系统界面——包括导航、正文、按钮、副标题和章节标题。字重：正文和控件为 500，副标题和导航强调色为 600，章节标题为 700。较大的负间距压缩了各种尺寸的几何图形，使界面呈现出简洁的技术感。
- Instrument Serif — 替代品： Playfair Display · 轮廓 400 · 一款专为标题和编辑内容设计的衬线字体。其 400 字重和 -0.025em 的字母间距营造出优雅的斜体效果，与 Inter 的工业几何风格形成对比——一种标志性技巧：在无衬线页面中使用单个衬线单词或短语，起到视觉标点的作用，而不是作为标题样式。
- Fragment Mono — 替代品： JetBrains Mono · 轮廓 400 · 用于内联代码元素、标签和技术标注的等宽字体。这种字体使用频率不高，通常出现在函数列表和内联注释中，用于指示“这是机器输出”。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 8px |
| 按钮半径 | 16px |
| 卡片半径 | 24px |
| 阴影 | 无边框，取而代之的是阴影 |
| 各部分之间 | 64px |
| 页面宽度 | 1200px |
AI 将按照Subframe风格构建您的网站并填充内容。
- 通过链接（ Instagram 、 TikTok 、 Facebook ）发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计： React （ Next.js ），开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化，支持搜索结果和神经网络推荐。
相似风格
- monopo saigon — 在编辑的沉默背后，涌动着液态的、虹彩般的光芒——一个漂浮在熔岩之上的单色编辑画廊
- Hyer Aviation — 驾驶舱内，暮色笼罩着羊皮纸。淡淡的晨曦与机身大小的衬线字体标志交相辉映，一抹温暖的陶土色打破了单色调的沉闷。
- OFF+BRAND. — 温暖羊皮纸上的虹彩球体
- Seed — 实验室玻璃下的活体生物
- Eindhoven Design District — 白纸上的粗野主义编辑风格是一份市政设计宣言，采用大号字体，极少使用摄影作品，并体现出绝对的克制。
- Miranda — 经典宽版字体搭配浅米色背景——数字时代的报纸社论
- Monocle — 一份采用米色纸张印刷的高品质宽幅报纸。精心编撰的社论，每一篇专栏文章都恰如其分，页面上只使用一种有意义的颜色。
- Agencja brandingowa — 以白色为主色调，黑色字体排版的编辑图库
- Websmith Studio — 晨光洒在米色纸上
- Aspelin Reitan — 烛光下的建筑档案 - 页面看起来像是一组建筑空间的合集，钉在温暖的奶油色墙上，每张图片上方都有一行白色文字，横跨整个页面宽度。
- Public — 一篇以冷峻大理石为背景的单色社论——几乎是一幅单色画布，采用 300 磅衬线字体，并以单一的紫色点缀，完成了所有的色彩工作。
- Motto — 纸上的文字巨擘——一个自信的声音在雪白的纸上宣告着自身。