精选 · 开放 · 免费
Baseten
一个面向开发者的首要基础设施平台,用于部署和扩展AI模型,并具备干净、权威的排版。
aiinfra
01
设计气质 DNA
推理开发者云运行时规模
云原生模型推理的技术蓝图
02
色彩
#19E76EAccent
#000000Ink
#FFFFFFBG
#F5F8F4BG quiet
#B3B3B3Muted
rgba(0,0,0,0.05)Line
高对比度单色基底,搭配单一鲜亮的绿色作为高饱和度点缀色。
03
字体
grotesque-sans · ui-sans-serif · monospace
- display
64px · 400 - body
16px · 400 - mono
14px · 400
标题使用紧凑的负字距以增强冲击力 · 按钮与导航栏采用等宽大写字母以体现技术感 · 正文保持高度可读性,使用标准行高
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
以4px为基础单位,padding与间距使用一致的倍数
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
使用rgba(0,0,0,0.05)的1px细微边框作为分隔线,以及虚线作为结构网格线。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
严格的12栏网格,部分区域使用可见虚线以强调底层结构。
07
动效与交互
75msmicro
236mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的平滑颜色与背景过渡 · 内容加载的淡入过渡
通过快速缓动实现细微的颜色或背景变化。 · 即时视觉反馈。
08
组件
- button 等宽大写文本,药丸形或直角边框,高对比度黑色或白色填充。
- card 极简或不可见,依赖底层网格线构建结构。
- chip 药丸形点缀容器,内含等宽文本。
- input 标准表单字段,带有细微边框。
- hero 分栏布局,左侧为粗体大字排版,右侧为技术图示。
09
文案语气与禁用清单
- 语气 权威、技术、直接。
- 标题风格 加粗的陈述性语句,字距紧凑。
- 按钮文案 行动导向,大写等宽按钮,配有清晰的方向箭头。
- 勿使用装饰性衬线字体 — 截图显示的是干净的无衬线标题和等宽标签。
- 勿使用圆润、柔和的UI模式 — 截图显示的是直角边缘、药丸形按钮和几何图表。
- 勿使用厚重的投影 — 截图显示的是完全扁平、无边框或仅有细微边框的表面。
- 勿使用多彩的彩虹调色板 — 截图显示的是严格的黑/白/绿配色方案。
- 勿对UI元素使用随意的句首大写 — 截图显示按钮和标签均为大写等宽字体。
- 勿隐藏网格结构 — 截图使用可见虚线以强调技术布局。
- 避免: 戏谑的语言
- 避免: 过多的感叹号
- 避免: 模糊的营销话术
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(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
Baseten是一个用于AI模型推理的开发者基础设施平台,其特点是干净、技术化的美学,强调精确性与可扩展性。视觉系统采用高对比度的黑白调色板,并以单一鲜亮的绿色(#19E76E)作为高亮点缀。排版上,标题使用粗体无衬线字体以增强冲击力,技术标签与按钮则采用等宽字体。布局采用严格的12栏网格,常通过可见的虚线显露以强化工程导向的定位。关键注意事项包括:避免使用装饰性衬线字体、柔和的圆角UI模式、厚重的阴影或戏谑的语言,因为该设计优先考虑专业、蓝图般的清晰度而非亲和力。
en · zh-CN · zh-TW · ja · ko