精选 · 开放 · 免费

Ably

一个面向开发者的基础设施平台，用于构建弹性、实时应用程序。

01

设计气质 DNA

现代多设备数字体验的高性能引擎室。

02

色彩

高对比度深色模式，搭配一个用于高优先级操作的、充满活力的橙色点缀色。

03

字体

geometric-sans · humanist-sans · monospace

• display56px · 500
• body17px · 500

使用清晰的排版层级，关键信息采用大号粗体显示文本。 · 确保白色/灰色文本与深色背景之间有足够的对比度。

04

间距

基于一致的4px基础单位，在整个布局中提供结构与可预测的间距。

05

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

1px solid rgba(226,232,240,1.0) 用于细微分隔，1px solid rgba(255,255,255,0.25) 用于交互元素。

0px 4px 4px 0px rgba(0,0,0,0.25)

06

布局

结构化的12列网格系统，采用居中容器，为主内容、统计数据与用例卡片设置了明确分区。

07

动效与交互

为交互状态（如悬停、颜色变化与布局移动）提供平滑过渡。

通过颜色变化、透明度调整或细微内边距变化提供视觉反馈。 · 具有标准交互反馈的即时响应，通常将元素过渡到其激活状态。

08

组件

• button 粗体、实色的主要按钮（常为橙色渐变）与轮廓式次要按钮，均具有大号内边距与圆角。
• card 深色主题圆角卡片，用于通过图像与简洁描述展示用例。
• chip 用于UI中状态或分类的小型圆角标签或徽章。
• input 具有清晰边框与特定交互状态的深色主题输入框。
• hero 一个大型、左对齐的主视觉区域，包含引人注目的标题、描述性文本与醒目的行动号召按钮。

09

文案语气与禁用清单

• 语气 自信、权威且面向开发者，强调可靠性与高性能。
• 标题风格 直接、以效益为导向且简洁，常使用有力动词与有冲击力的数字。
• 按钮文案 可操作且清晰，使用诸如“开始”和“跳转到”等动词引导用户。

• 不要使用浅色主题——截图显示深色背景 (#03020D) 与白色文本。
• 不要使用蓝色作为主要点缀色——截图显示用于关键操作的充满活力的橙色 (#FF5416)。
• 不要使用小于4px的圆角——截图显示卡片统一使用8px-12px圆角。
• 不要使用复杂的无衬线字体——截图显示简洁的几何与人文主义无衬线体。
• 不要使用狭小、拥挤的间距——截图显示宽松的24px槽宽与大号内边距。
• 不要使用装饰性衬线字体——截图显示现代、功能性的无衬线排版。
• 避免: 避免使用过于随意或术语过多的语言，以免掩盖其技术价值主张。
• 避免: 避免使用与深色高对比度主题冲突的浅色或柔和色调调色板。
• 避免: 避免杂乱的布局；保持宽松的留白以突出关键信息。
• 避免: 避免复杂或不可预测的动画；保持运动细微且有目的性。
• 避免: 避免使用多个相互竞争的点缀色；坚持使用主要橙色作为焦点。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko