精选 · 开放 · 免费
Depot
Depot 加速您构建流水线的每个环节。
devinfra
01
设计气质 DNA
开发者工具性能CI/CD速度基础设施
为现代开发流水线打造的高性能引擎
02
色彩
#71D083Accent
#EEEFF0Ink
#B5B2BCInk soft
#04040BBG
#121113BG soft
#323035BG quiet
#7C7A85Muted
rgba(60, 57, 63, 1.0)Line
深色背景为技术内容营造专注环境，充满活力的绿色点缀突显速度与性能。
03
字体
humanist-sans · monospace
- display
56px · 700 - headline
24px · 500 - body
16px · 400 - small
14px · 400 - micro
12px · 500
展示标题采用负字距，营造紧凑现代感 · 正文保持舒适的行高以确保可读性 · 技术数据和类代码元素使用等宽字体
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基于一致的 4px 基础网格，逻辑化递进间距
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(60, 57, 63, 1.0)
0px 1px 0px 0px rgba(255, 255, 255, 0.06) inset · 0px 10px 15px -3px rgba(0, 0, 0, 0.1) · 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中内容搭配充裕留白，按清晰的垂直区块组织
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素平滑的颜色过渡 · 悬停状态的透明度变化 · 微交互的变换动画
微妙的颜色变化与透明度调整 · 通过颜色过渡提供即时视觉反馈
08
组件
- button 主要按钮为药丸形状绿色背景，次要按钮带有微妙边框
- card 深色卡片带有微妙边框和圆角，常包含性能指标
- chip 小型药丸状标签，用于状态指示器和分类
- input 深色输入框带有微妙边框和圆角
- hero 全宽主视觉区域，包含大标题、描述性文字和醒目的行动号召
09
文案语气与禁用清单
- 语气 直接、自信且技术精确
- 标题风格 简短有力的陈述，强调速度与效率
- 按钮文案 清晰的行动导向标签，附有辅助信息
- 不要使用鲜艳的原色 — 截图显示为深色背景上的柔和绿色点缀
- 不要使用装饰性字体 — 截图显示为简洁的人文无衬线字体
- 不要添加厚重的阴影或渐变 — 截图显示为极简的深度效果
- 不要使用过多动画 — 截图显示为微妙、有目的性的过渡
- 不要过度拥挤布局 — 截图显示为充裕的留白和清晰的层次
- 不要使用复杂的导航模式 — 截图显示为简单、合乎逻辑的菜单结构
- 避免: 未经解释的术语
- 避免: 过于随意的语言
- 避免: 过多的感叹号
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Depot 是一个 CI/CD 加速的开发者工具平台，采用暗色、专注于性能的美学设计。设计使用深炭灰色背景 (#04040B) 搭配充满活力的绿色点缀 (#71D083) 以突显速度与效率。字体方面，展示和正文使用人文无衬线字体，技术数据使用等宽字体。布局简洁居中，留白充裕，按清晰的垂直区块组织。关键交互包括平滑的颜色过渡和微妙的悬停效果。整体语调直接且技术精确，避免术语同时保持自信。关键设计规则：谨慎使用柔和绿色点缀、保持深色色彩一致性、保持字体简洁可读、避免过多动画、保留充裕间距、维持清晰视觉层次。
en · zh-CN · zh-TW · ja · ko