精选 · 开放 · 免费

Directus

一个开源的无头 CMS 和后端即服务，让非技术团队管理内容，同时支持开发者构建。

01

设计气质 DNA

您整个数据库基础设施的万能遥控器。

02

色彩

高对比度单色方案，通过稍浅的灰色实现微妙的层次感。

03

字体

transitional-serif · humanist-sans · geometric-mono

• display56px · 400
• h148px · 400
• body16px · 400

主要标题使用衬线字体，以增添编辑质感。 · 所有 UI 元素及正文使用无衬线字体。 · 代码片段及技术 UI 元素保留使用等宽字体。

04

间距

8px 基线网格在不同大区块间创建一致的垂直韵律。

05

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

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

0 4px 12px rgba(0, 0, 0, 0.3) · 0 8px 24px rgba(0, 0, 0, 0.4)

06

布局

全宽深色画布，搭配置顶导航栏和居中的内容列。

07

动效与交互

交互元素上的微妙颜色过渡。 · 内容显现时的平滑透明度渐变。

按钮与链接通过微妙的透明度或背景亮度变化进行反馈。 · 通过轻微的缩放或颜色偏移提供即时视觉反馈。

08

组件

• button 主按钮为白底黑字，采用大圆角药丸形；次按钮采用透明背景搭配白色文字。
• card 深灰色卡片，带有微妙的 1px 边框和 12-20px 圆角，用于归类功能描述。
• chip 药丸形导航元素，采用透明背景与细边框，高亮显示激活状态。
• input 深灰色输入框，带有细边框，代码输入项采用等宽字体排版。
• hero 经典的左对齐主视觉区，包含大型衬线标题、无衬线副文本、一段代码片段以及双重操作号召按钮。

09

文案语气与禁用清单

• 语气 自信、专业且对开发者友好，避免过度随意。
• 标题风格 直接、有力、聚焦于利益点，常使用衬线字体以体现权威性。
• 按钮文案 清晰且以行动为导向，例如“免费开始”或“查看工作台”。

• 勿使用明亮的霓虹色点缀——截图显示为严格的单色方案。
• 勿使用圆角方形卡片——截图显示的元素圆角从 12px 到药丸形不等。
• 勿使用粗重的无衬线标题——截图显示展示标题使用的是过渡衬线字体。
• 勿使用密集、小文本的布局——截图显示留白充足，字体大而易读。
• 勿使用繁杂的背景或纹理——截图显示为纯色的近黑 #090909 背景。
• 勿使用俏皮、圆润的图标——截图显示为干净、极简的 UI 元素和技术图标。
• 避免: 避免过度营销化或充满流行术语的文案。
• 避免: 避免使用俏皮或天马行空的插图。
• 避免: 避免过于复杂或杂乱的布局。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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