Modal
昏暗的服务器机房里，一个发光的终端机——唯一的光源是明亮的绿色。
模态框的功能如同昏暗服务器机房中的荧光终端：近乎黑色的画布，浅绿色的字体，以及一个亮眼的青柠绿点缀，作为 LED 状态指示灯。设计语言以开发者为中心——等宽的代码窗口配以交通信号灯点，标志性的绿色等距 3D 图标，以及大量的留白，使得每个部分中都有一个元素可以突出显示。字体方面，标题使用自定义字体（Goga），所有 UI 元素使用可变字体（Inter），两者均采用窄负间距。色彩分布均匀：大部分屏幕为无彩色，亮眼的青柠绿仅出现在关键操作、徽标、3D 插图和重点强调之处。组件采用扁平化无边框设计，通过微妙的绿色边框和背景模糊而非阴影来营造深度感。
该模态框采用全宽深色布局，最大宽度为 1280 像素，以容纳内容。主窗口居中：标题（第一句为亮绿色）、副标题、两个行动号召按钮以及一个作为视觉锚点的 3D 对象——布局与侧边栏无缝衔接。内容部分遵循统一的节奏：眉形标签（大写字母，Moss 70 色）→ Goga 标题 → 低调的正文，然后是带有功能描述（文本 + 代码/视觉卡片）的双栏布局或三栏卡片网格。各部分之间的间距较大——80 像素。页面背景在深白色 (#000000) 和稍浅的背景色 (#181818) 条纹之间交替，页面中间出现一块浅色区域 (#def0dd) 作为视觉缓冲。导航由一个固定的顶部栏组成，背景模糊——没有侧边栏或超级菜单。页脚设计简洁，以深色为主色调，链接列采用柔和的绿色。文本密度适中，每个部分都留有足够的空间，卡片式布局不超过三列。
Modal 的视觉语言分为两种模式：3D 发光产品渲染图和深色代码窗口模型。视觉焦点是一个使用市场营销渐变色（从亮绿色到翠绿色）渲染的 3D 立方体，置于一个放射状渐变光晕中，将空白区域笼罩在绿色光芒中——这是该品牌的标志性视觉风格。工作负载卡片包含等距 3D 图标（线框立方体、实心楼梯、图层），这些图标以同样的亮绿色渲染在深色背景上。代码和基准测试结果以终端窗口卡片的形式呈现，带有交通信号灯点、磷光调色板的等宽语法高亮显示和柔和的绿色边框——它们类似于真实命令行界面的屏幕截图。客户徽标以低饱和度的灰绿色标签显示在一行低对比度的文字中，在不造成视觉冲突的情况下传递信任感。整体密度较低——大多数页面主要包含文本，图像以独立焦点的形式呈现，而不是照片网格。没有照片；整个视觉系统是渲染的、几何的、发光的。
调色板
品牌
- Lime Pulse
#7fee64— 企业标识的主要元素包括标志、主要行动号召 (CTA)、标签填充、激活状态和插图的基本颜色。
中性的
- Phosphor White
#ddffdc— 主要文本、标题颜色、图标轮廓和填充的按钮文本是主要的可读表面。 - Void Black
#000000— 页面画布，最深层的背景层 - Ground Iron
#181818— 主按钮填充、暗区卡片表面、用户界面底面。 - Carbon Veil
#212525— 高架表面，导航背景，比地面略浅。 - Circuit Border
#485346— 轮廓/幽灵动作框，即主要的交互式细线，是一种柔和的绿灰色调。 - Phosphor Blue-Black
#1f2a33— 次要的细标记线，用于分隔深色条纹。
排版
从 12 像素到 64 像素 · 8 个步骤
- Goga — 替代品： Inter Tight or Space Grotesk · 轮廓 400, 500 · 标题和副标题字体 – 用于所有 H1 至 H4 标题和卡片。Goga 是一款自定义几何无衬线字体，具有窄开口和略呈方形的笔画末端。中等字重 (500) 用于突出显示卡片级标题；标准字重 (400) 用于主标题和章节标题。要访问定义 Modal 标识的替代字形，必须启用其“ss01”样式集。负字母间距从 48px 处的 -0.007em 逐渐减小到 21px 处的 -0.017em。
- Inter Variable — 替代品： Inter · 轮廓 400, 500 · 用户界面和正文——导航、按钮、正文、标签、页脚。交互元素和导航默认使用中等字重 (500)；段落使用标准字重 (400)。即使在小字号下，字间距也明显缩小（14px 时缩小 0.026em，16px 时缩小 0.022em），使界面呈现紧凑的视觉效果。对于替代标点符号，应包含“cv11”字符变体。12px 的全大写标签使用 +0.05em 的字间距，以平衡正文的字重。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 20px |
| 按钮半径 | 12px |
| 卡片半径 | 8px |
| 阴影 | 无边框，取而代之的是阴影 |
| 各部分之间 | 80px |
| 页面宽度 | 1280px |
AI 将按照Modal风格构建您的网站并填充内容。
- 通过链接（ Instagram 、 TikTok 、 Facebook ）发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计： React （ Next.js ），开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化，支持搜索结果和神经网络推荐。
相似风格
- Slash — 午夜金库，内有镀金账簿
- AgentQL — 夜幕降临，航站楼上空出现北极光
- GitHub — 带有生物发光控制点的太空指挥面板——一个黑暗、充满神秘感的工作空间，一道绿光指引着前进的方向。
- Doppler — 午夜时分，金库内灯光呈紫色。近乎漆黑的墙面闪烁着淡紫色信号灯和绿色确认灯，每一处表面都弯曲得便于抓握。
- Basedash — 午夜时分，数据终端采用哑光字体。昏暗的观测台上，各种指标发出紫绿色的光芒，衬线字体的标题漂浮在嘈杂的背景之上，白色的药丸状按钮是这间以柔和黑色表面为主的房间里唯一明亮的物体。
- Superwhisper — 午夜的玻璃上，北极光渐渐消融。
- Better Stack — 午夜 SRE 控制台
- Langbase — 午夜北极光控制台
- Astro — 深空任务控制中心，星云发出一道紫色光芒
- Wayfinder — 一个黑色的电影屏幕，上方悬浮着一个几乎听不见的标题，标题下方是一幅动态插图。界面不是控制面板，而是一个亮度滑块。
- HashiCorp — 午夜时分，紫色霓虹灯照亮了控制室，黑暗的技术表面中只有一个发光的六边形立方体作为唯一的颜色参考。
- Umbrel — 夜间服务器机房里有一个舒适的火坑——在黑暗的房间里，一束柔和的火光凸显出真正重要的东西。