Column
黎明时分，一本深蓝色的账簿在凉爽的晨曦中若隐若现。
Column 页面采用深邃而庄重的海军蓝，搭配近乎白色背景：页面首先给人以稳健的银行产品界面之感，其次才是开发者的乐园。品牌色并非单一颜色，而是两种协调搭配的颜色——海军蓝 #111a4a 用于严肃的结构，薄荷绿 #44b48b 用于数据和代码——此外，还特别添加了一个暖橙色 (#ec652b)，用于 Brex 卡等高亮度强调区域。字体方面，主要采用 SuisseIntl，这是一款几何无衬线字体，涵盖从 300（链接）到 600（标题）的全字重范围，赋予系统一种大多数金融科技公司所缺乏的精致编辑风格。卡片悬浮在大面积的白色表面上，并带有微妙的层次感阴影；大多数界面元素都采用扁平化设计，只有在需要营造实体感的地方（例如交易组件、产品模型）才会呈现深度。代码和财务数据以单色海沫绿呈现——这在视觉上传递出一个信息：这是一家由工程师为工程师打造的银行。
页面采用全宽居中布局，两侧留有宽阔的边距（桌面端为 64–15 厘米）。主屏幕采用分屏布局：标题和行动号召左对齐，间距 25 厘米；浮动交易组件位于右侧，间距 55 厘米，背景为半色调地图。主屏幕下方，各部分交替使用白色（4 厘米）和浅色画布（5 厘米），垂直间距为 6 厘米。内容按照单一的六列网格排列：文本块占据四列（7 厘米），图片/产品卡片占据五至六列，并与网格略有偏移。功能描述部分采用两列布局：左侧为文本，右侧为产品。信任统计部分采用四列网格，横跨页面全宽。客户徽标位于居中的单行，间距为 48 像素。页脚采用紧凑的两列布局。导航栏是一个固定在主屏幕顶部的透明栏，高度为 62 像素，背景为模糊效果，滚动时逐渐变为白色。没有侧边栏或大型菜单——下拉菜单是简单的箭头式菜单。
视觉风格简约实用——Column 完全不使用素材图片。其视觉语言基于三个方面：(1) SVG 数据插图，特别是点状半色调世界地图，采用从靛蓝到橙色再到青绿色的渐变渲染，在主元素后方营造出全球视野的氛围；(2) 产品卡片布局——以白色卡片形式呈现的浮动组件，用于显示账户余额、转账详情和 JSON 代码片段，并带有醒目的阴影效果；(3) 图表可视化——在信任/统计部分使用带有细连接线的青绿色蜡烛图或柱状图。半色调地图是其标志性视觉元素——其渐变从 #d65620（橙色）过渡到紫色、蓝色、天蓝色、青绿色和黄色，形成一个光谱，将整个品牌色调统一在一个装饰表面上。图标采用 #232730 或 #a9acb6 变体，轮廓粗细统一为 1.5-2 像素，并填充以区分激活状态。没有生活方式照片，也没有抽象的 3D 渲染图——这种克制是有意为之，目的是将注意力集中在产品和数据上。
调色板
品牌
- Indigo Navy
#111a4a— 主品牌色用于填充的行动号召、激活的导航状态、页眉和徽标。深紫蓝色赋予网站一种沉稳而丰富的黑色调；与白色文字搭配，打造出网站上最醒目的按钮。 - Seafoam 600
#44b48b— 代码和数据颜色是代码片段中 JSON 键、标识符和财务值的品牌颜色。它也用于图表和增长可视化中的数据点。 - Seafoam 700
#167e6c— 数据上下文中的轮廓线、图表线和图标强调部分采用更深的海沫绿色。这使得海沫绿色的色阶在较深的背景衬托下更加醒目。 - Seafoam 400
#94efb7— 高亮显示的代码片段包含字符串值、URL 和 API 端点。最浅的海沫绿显示为带有绿色色调的等宽字体。 - Deep Sea
#023247— 图表的装饰轮廓和强调色是 SVG 插图和数据可视化中常用的浓郁绿松石色，以及海沫色标。
中性的
- Midnight Ink
#011821— 深色背景搭配高亮文字——产品卡片背景，高对比度主文字。颜色接近灰色，略带冷调蓝绿色；当需要反转某个部分的颜色时，可用作深色模式的底色。 - Slate Ink
#3b3e47— 次要标题和正文的颜色比午夜墨水略微偏暖一些，因为在浅色画布上使用纯黑色会显得过于刺眼。 - Steel
#7c7f88— 正文和链接文本主要采用柔和的颜色（正文中使用了 245 次）。这种中性的灰蓝色给人以平静的感觉，绝不会显得黯淡无光。 - Fog
#a9acb6— 图标轮廓、三级边框和占位符文本。采用中灰色，既能与文本区分开来，又不会喧宾夺主。 - Mist
#cbcccf— 正文（签名、免责声明和小字部分）在白色背景上清晰可辨，但视觉上不太显眼。 - Silver Lining
#e3e4e8— 卡片边框、输入框边框、分隔线。这种结构感强、色调柔和的颜色用于需要分隔两个表面但又不想产生阴影的地方。
排版
从 10 像素到 60 像素 · 10 步
- SuisseIntl — 替代品： Inter · 轮廓 300, 400, 500, 600 · 主字体——用于所有标题、正文、按钮、导航、链接和卡片文本。独特的几何无衬线字体赋予 Column 鲜明的编辑风格，使其与其他仅使用 Inter-only 字体的金融科技公司区别开来。标题的字重为 600（52-60 像素），副标题为 500，正文为 400，低强度链接为 300。
- SuisseIntlMono — 替代品： JetBrains Mono · 轮廓 400 · 这是一款类似于 SuisseIntl 的等宽字体，用于技术标签、API 标识符和 UI 元素中的嵌入式数据。它与 SuisseIntl 保持相同的比例，因此等宽文本和等宽文本在混合上下文中都能正确对齐。
- SFMono — 替代品： Fira Code · 轮廓 400 · 代码片段显示——显示在 JSON 示例和 API 文档块中。使用海沫绿来区分代码和 UI 文本。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 8px |
| 按钮半径 | 8px |
| 卡片半径 | 8px |
| 阴影 | 无边框，取而代之的是阴影 |
| 各部分之间 | 72px |
| 页面宽度 | 1200px |
AI 将按照Column风格构建您的网站并填充内容。
- 通过链接（ Instagram 、 TikTok 、 Facebook ）发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计： React （ Next.js ），开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化，支持搜索结果和神经网络推荐。
相似风格
- dope.security — 午夜时分，紫色信标闪耀在航站楼上
- Leonardo — 一个颠倒的编辑画廊。一座黑墙博物馆，紫色标题作为墙面装置，人工智能生成的肖像密集地悬挂在下方。
- VEED — 白色画廊墙面，配有霓虹绿灯按钮
- Craft Docs — 一款用于剪贴簿的数字拼贴画。其设计宛如一本精心制作、触感丰富的剪贴簿，将结构化的数字笔记与柔和自然的纹理巧妙融合。
- Letter — 一个私人画廊，展出从库房中取出的闪闪发光的文物。一个黑色墙壁的展览空间，衬线字体的标题漂浮在画廊有色墙壁上的镀铬雕塑上方。
- Railway — 宇宙午夜特快列车。一段平静而惊险的旅程，穿越黑暗、星光璀璨的太空，由清晰的信号指引。
- Garden Eight — 一篇印在米色纸上的鸿篇巨制。215像素的衬线字体标题孤零零地矗立在温暖的羊皮纸上，周围环绕着漂浮的雕塑造型和令人联想起海风的留白——这页面与其说是仪表盘，不如说更像是一本艺术专著的封面。
- Steep — 对暖纸上的衬线字体进行分析
- ElevenLabs — 一组以温暖奶油色调为主、标题简洁的摄影作品。一本包豪斯风格的笔记本——蛋壳色纸张，黑色墨水，仅以一抹紫色和橙色点缀，用于产品展示。
- Awesomic — 编辑用的锌网布，上面点缀着橙色的标点符号，让人联想起五彩纸屑。
- Monad — 关于温暖羊皮纸的编辑技术期刊
- AI for Business — 以暖灰色调为主的粗野主义风格编辑展示厅