OpenDesign·你的设计资产库

网页参考

Railway

一款用于自信、从容地部署云基础设施的暗色主题开发者工具。

Developer ToolsDarkInfra
Railway 网站截图

01

设计气质 DNA

开发者基础设施云端部署现代

现代喷气式客机冷静、暗色的驾驶舱

02

色彩

#6b1dbdAccent
#f7f7f8Ink
#6b7280Ink soft
#0b0b0fBG
#13111cBG soft
#33323eBG quiet
#a1a0abMuted
rgba(255, 255, 255, 0.086)Line

深邃的墨色背景营造出宁静的画布，让生动的数据可视化和微妙的紫色强调色成为视觉焦点。

03

字体

humanist-serif · geometric-sans · monospace

  • display56px · 400
  • h240px · 400
  • body16px · 400
  • caption14px · 400

展示标题使用人文主义衬线字体，传达优雅与宁静 · 正文和UI元素使用几何无衬线字体，确保清晰度 · 展示标题保持慷慨的负字距调整

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

以4px为基础单位，采用标准的1.5倍比例放大，营造慷慨的留白空间

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 9999px

1px solid rgba(255, 255, 255, 0.086)

0px 0px 0px 1px rgba(255, 255, 255, 0.1) inset · 0px 0px 0px 1.5px rgba(255, 255, 255, 0.2) inset · 0px 100px 191px rgba(62, 45, 45, 0.24)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的单栏主视觉区，流入用于数据可视化和功能块的12列网格。

07

动效与交互

150msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

UI状态变化时微妙的淡入和变换过渡 · 悬停状态的平滑透明度过渡

交互元素上的微妙颜色变化，过渡时间为0.15s ease-in-out。 · 即时视觉反馈，通常通过颜色变暗或轻微缩放调整实现。

08

组件

  • button 主按钮为纯紫色（#6b1dbd），白色文字，圆角（4px）。次要按钮为透明背景，带有微妙的白色边框。
  • card 深色面板，带有非常细微的1px边框，无阴影，使用#13111c背景色。
  • chip 用于分类标签，表现为带微妙边框的小型圆角矩形药丸。
  • input 深色背景字段，带有1px边框，维持整体暗色模式美学。
  • hero 全宽深色区域，特色是大型衬线标题、无衬线副标题，以及两个居中的主操作按钮，背景为微妙、深色的氛围背景。

09

文案语气与禁用清单

  • 语气 冷静、自信且权威
  • 标题风格 使用优雅的衬线字体排印，传达平和与可靠感
  • 按钮文案 清晰直接，使用高对比度的纯色按钮
  • 不要使用明亮、饱和的霓虹背景——截图显示为深邃的墨色（#0b0b0f）背景。
  • 不要在标题中使用俏皮、圆润的无衬线字体——截图显示的是优雅的人文主义衬线字体。
  • 不要使用白色作为主要背景色——截图显示的是暗色模式界面。
  • 不要在卡片上使用厚重的投影——截图显示的是带有微妙1px边框的平面卡片。
  • 不要使用过多的主色——截图使用了一个克制的调色板，以深灰和单一的紫色强调为主。
  • 不要使用杂乱、密集的网格——截图显示了慷慨的留白和章节之间清晰的分离。
  • 避免: 夸张词汇
  • 避免: 过多的感叹号
  • 避免: 杂乱的布局

10

包内真实截图

Railway — 桌面首屏（hero）
桌面首屏（hero）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Railway — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

这是一款用于云部署的暗色主题SaaS开发者工具。设计优先考虑使用深邃的墨色背景（#0b0b0f, #13111c）和单一的高饱和度紫色（#6b1dbd）来营造平静、精致的美学。字体排印方面，展示标题使用人文主义衬线字体（IBM Plex Serif），正文使用几何无衬线字体（Inter）。关键设计规则：切勿使用明亮的白色背景；保持衬线标题慷慨的负字距调整；保持卡片表面平坦，使用微妙的1px边框而非厚重的阴影。布局居中且宽敞，采用严格的4px间距网格。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。