精选 · 开放 · 免费
Drizzle ORM
专为 TypeScript 和 JavaScript 打造的现代高性能 ORM。
devtoolsorm
01
设计气质 DNA
ORMTypeScriptJavaScript数据库开发者
如同为开发者提供的高效、快捷的数据管理工具箱。
02
色彩
#222222Ink
#444444Ink soft
#FFFFFFBG
#FAFAFABG soft
#F1F2F3BG quiet
#71687BMuted
rgba(33, 39, 46, 0.12)Line
在干净的白色背景上运用高对比度，并搭配微妙的灰色结构元素。
03
字体
sans-serif · monospace
- display
48px · 700 - h2
32px · 600 - body
16px · 400 - small
12px · 400
采用系统无衬线字体栈作为主要字体。 · 使用等宽字体用于代码片段和技术标签。 · 手写体仅选择性地用于趣味性注释。
04
间距
4px
8px
12px
16px
20px
24px
32px
40px
64px
基于统一的 4px 网格系统，版块间采用充裕的内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 8px
lg · 20px
pill · 999px
1px solid rgb(229, 231, 235)
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px · rgba(0, 0, 0, 0.075) 0px 2px 4px 0px · rgb(255, 255, 255) 0px 0px 1px 1px inset
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
居中内容容器，支持响应式堆叠布局。
07
动效与交互
200msmicro
300mssmall
800msmedium
ease-in-outeasing
悬停时的平滑颜色过渡 · 透明度淡入效果
微妙的背景颜色变化或颜色过渡。 · 无剧烈变化，保持标准指针光标。
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
这是一个面向开发者的 ORM 工具 SaaS 网站，采用干净、极简的设计风格，以白色背景为主。主要颜色包括深炭灰色文本 (#222222) 和浅灰色边框 (#E5E7EB)。排版上，正文使用标准无衬线字体栈，代码使用等宽字体栈。设计依赖充足的留白和微妙的边框，而非厚重的阴影。关键禁忌：避免使用深色模式，避免添加渐变背景，避免使用装饰性字体。布局居中且响应式，重点关注清晰的层次结构和可读性。
en · zh-CN · zh-TW · ja · ko