精选 · 开放 · 免费

Svelte

一个干净的编辑风格开发者文档网站，采用高对比度排版和活泼的 3D 主视觉插图。

01

设计气质 DNA

一款精致的开源开发者工具，兼具编辑气质。

02

色彩

以干净的白色和灰色为基础，搭配一个鲜明的橙色点缀，形成高对比度的编辑调色板。

03

字体

didone-serif · humanist-sans · monospaced

• display54px · 400
• headline22px · 400
• body16px · 400
• mono12px · 400

04

间距

标准 4px 网格，垂直段落内边距为 100px。

05

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

1px solid #EBEBEB

06

布局

标准的居中单栏文档布局。

07

动效与交互

用于微妙交互状态的滤镜和不透明度过渡。

微妙的不透明度和缩放调整。 · 标准指针状态。

08

组件

• button 基于文本的操作链接，采用大写字母和箭头。
• card 纯色背景容器，带有 2px 实线边框。
• chip 小型大写文字徽章，采用深色背景。
• input 圆角搜索框，并带有键盘快捷键提示。
• hero 大型 3D 插图，搭配超大尺寸的衬线字体标题。

09

文案语气与禁用清单

• 语气 亲切、自信且富有指导性。
• 标题风格 活泼的小写衬线体陈述。
• 按钮文案 直接的大写无衬线指令。

• 不要用无衬线字体做主标题——截图显示的是衬线字体标题。
• 不要用圆角做卡片——截图显示的是锐利的 2px 或 4px 边框。
• 不要使用多种竞争性的强调色——截图仅显示橙色。
• 不要默认使用深色模式——截图显示的是白色（#FFFFFF）背景。
• 不要使用小而紧凑的排版——截图显示的是宽松的 1.5 倍行高。
• 不要使用复杂的盒子阴影——截图显示的是扁平或阴影极简的表面。
• 避免: 避免使用充满行话或具有攻击性的语言

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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