Electronic Materials Office
画廊里，一块闪烁的余烬，装饰着木炭。
电子材料办公室就像一个深夜工作室：哑光漆黑的画布，一簇闪烁的橙色余烬，以及一种低语而非宣告的字体。界面将每个屏幕都视为一个昏暗的工作室——键盘的照片是唯一的光源，而用户界面也遵循这一原则。标题采用 200 字重的 GT-Flexa 字体，漂浮在大片的留白之中；正文刻意缩小，力求人性化（《时代》杂志）。色彩运用也十分讲究：文字为纯白色，链接为柔和的紫色 (#9e9eff)，页面上只有一个橙色 (#f45500) 的行动号召按钮，散发着 30 像素的光芒。组件紧密地排列在 20 像素的半径内，边框颜色为 #9d9d9d，几乎难以察觉，系统中唯一的阴影是围绕主要操作按钮的两道彩色光晕。
一个全宽的炭灰色画布，内容居中，宽度约为 1200 像素。主屏幕以一个半径为 20 像素的媒体卡片开始，卡片内包含一个产品视频，占据视口宽度的约 80%。紧接着是一个多行 GT-Flexa 200 标题，标题几乎环绕整个内容宽度。版块布局：首先是一个 Tobias 风格的全大写字母产品描述部分，然后是一个 2x2 网格（桌面端）的产品描述卡片。卡片使用 1 像素的 #9d9d9d 边框，卡片之间留有 24 像素的间距。垂直方向留白充足——各版块之间以 48-128 像素的炭灰色负空间分隔，而非使用分隔线。导航是一个位于顶部的透明面板，包含一组隐藏链接和一个 Ember 按钮。没有侧边栏、超级菜单或二级导航。
这些图片仅用于产品演示——Altar I 键盘的特写微距照片，背景为纯黑色，上方背光使键盘外壳发光，键帽边缘反射光线。图片中没有生活方式元素、人手或环境背景。图像对比度高且色调偏暗；唯一超出单色调的颜色是键盘上的橙色电源开关，与 Ember Orange 的品牌标识相呼应。图片为正方形或 16:9 比例，始终放置在半径为 20 像素的卡片中，并超出卡片边缘（照片周围没有留白，文字位于边缘下方）。图标样式：唯一的图标是徽标前的一个小实心圆圈 (●)——一个直径约 6 像素的橙色圆点。
调色板
品牌
- Ember Orange
#f45500— 主操作按钮是 UI 中唯一的彩色表面，始终伴有 30px 的橙色光晕，使其像灯丝一样发光；主呼叫按钮上的 30px 外发光复制了余烬橙色的六边形符号，但它是以阴影而不是填充的形式存在，使按钮看起来像是从内部发光的。
中性的
- Studio Charcoal
#202020— 画布和纸板表面就像昏暗画廊的地板，永远不会完全是黑色的，这样眼睛就可以停留在柔和的边缘上。 - Bone White
#ffffff— 正文、图像的细边框以及极少出现的反色表面。整个字体层级结构都是独立维护的。 - Ash Gray
#9d9d9d— 配色方案中只有柔和的文字、淡雅的卡片边框和非活动标题使用了中灰色，当白色过于刺眼时才会使用中灰色。 - Mid Felt
#eaeaea— 适用于倒置面板或模态网格的浅色表面涂料——介于米色和深色帆布之间的白色。 - Carbon
#000000— 最引人注目的点缀是图标笔触和对比鲜明的边框，因为炭笔画布太浅，无法很好地保持形状。 - Lavender Link
#9e9eff— 嵌入链接的颜色和附加操作框的轮廓与温暖的橙色形成柔和的冷色调对比，确保操作在炭黑色背景上清晰可辨。
排版
从 16 像素到 86 像素 · 8 个步骤
- GT-Flexa — 替代品： Inter (200/400) or Manrope (200/400) · 轮廓 200, 400 · 标题和装饰元素的主要字体。200 字重适用于所有大于 24 像素的标题——这是一种标志性风格：在 68 像素和 86 像素时，字母仿佛融入背景，而非突兀醒目。400 字重适用于副标题和卡片说明，在这些位置，字母几乎难以辨认。最大字号下行距缩小至 1.0，因此装饰字体如同空气柱般层叠排列。
- Tobias-light — 替代品： Söhne Buch or Inter Tight · 轮廓 400 · 用于章节标题和页脚徽标的辅助字体样式。它的字号比 GT-Flexa 200 低一个级别，以营造色调对比——Tobias 更具建筑感和表现力，而 GT-Flexa 则更偏向于空灵的氛围。负间距的字母设计缩小了 Tobias Light 的宽大比例。
- Times — 替代品： Source Serif 4 or PT Serif · 轮廓 400 · 正文和标题段落刻意采用衬线字体，与几何装饰字体形成对比。衬线字体为产品描述增添了温暖感和编辑权威性，同时又不会超出正文的字号。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 稠密 |
| 基本步骤 | 4-8px |
| 按钮半径 | 20px |
| 卡片半径 | 20px |
| 阴影 | 无边框，取而代之的是阴影 |
| 各部分之间 | 48-128px |
| 页面宽度 | 1200px |
AI 将按照Electronic Materials Office风格构建您的网站并填充内容。
- 通过链接（ Instagram 、 TikTok 、 Facebook ）发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计： React （ Next.js ），开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化，支持搜索结果和神经网络推荐。
相似风格
- OFFFICE : — 一个被单调字体所包围的黑色画廊
- Bibliothèque — 聚光灯下的黑色立方体展厅——巨大黑暗大厅中孤零零的一块发光板
- 21 TSI — 一片深红色的虚空，一个单一的轮廓——一场高级时装大片，用户界面融入了氛围之中。
- Structured — 文艺复兴画廊，画在类似橡皮泥的纸上
- CHAIBOY — 一面黑色的画廊墙上挂着一张背光照片
- Holiday 100 — 午夜时分的礼物画廊——衬线标题如同聚光灯，深色画布如同天鹅绒墙，每张产品图片都像精心挑选的画框一样悬挂着。
- Apple (España) — 在柔和的日光下，博物馆展厅是一个单一、迷人、轻盈的白色空间，每个展品都由一束聚光灯照亮，照射在浅色墙壁上。
- Analogue — 黑色画廊展示柜——商品悬浮在虚空中
- Apple (España) — 黑曜石画廊的展厅是一个昏暗的展厅，一个钛金属物体在漆黑的背景下闪闪发光。
- Studio Oker — 昏暗的画廊里点缀着猩红色的装饰——作品展示室的墙壁是黑色的，白色的字母仿佛漂浮在空中，一声红色的低语划破了寂静。
- 099 SUPPLY — 一面挂满黑白物品的画廊墙
- Retool — 一间温暖的黑曜石工作室——一个摆放精密工具的台面，在余烬的微光下熠熠生辉，万物皆由此诞生。