精选 · 开放 · 免费
Svelte
一个干净的编辑风格开发者文档网站,采用高对比度排版和活泼的 3D 主视觉插图。
devtoolsframework
01
设计气质 DNA
开发者友好易用优雅现代开源
一款精致的开源开发者工具,兼具编辑气质。
02
色彩
#FF3E00Accent
#262626Ink
#808080Ink soft
#FFFFFFBG
#F2F2F2BG soft
#E5E5E5BG quiet
#666666Muted
rgba(235, 235, 235, 1)Line
以干净的白色和灰色为基础,搭配一个鲜明的橙色点缀,形成高对比度的编辑调色板。
03
字体
didone-serif · humanist-sans · monospaced
- display
54px · 400 - headline
22px · 400 - body
16px · 400 - mono
12px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
标准 4px 网格,垂直段落内边距为 100px。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 56px
pill · 999px
1px solid #EBEBEB
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准的居中单栏文档布局。
07
动效与交互
200msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
用于微妙交互状态的滤镜和不透明度过渡。
微妙的不透明度和缩放调整。 · 标准指针状态。
08
组件
- button 基于文本的操作链接,采用大写字母和箭头。
- card 纯色背景容器,带有 2px 实线边框。
- chip 小型大写文字徽章,采用深色背景。
- input 圆角搜索框,并带有键盘快捷键提示。
- hero 大型 3D 插图,搭配超大尺寸的衬线字体标题。
09
文案语气与禁用清单
- 语气 亲切、自信且富有指导性。
- 标题风格 活泼的小写衬线体陈述。
- 按钮文案 直接的大写无衬线指令。
- 不要用无衬线字体做主标题——截图显示的是衬线字体标题。
- 不要用圆角做卡片——截图显示的是锐利的 2px 或 4px 边框。
- 不要使用多种竞争性的强调色——截图仅显示橙色。
- 不要默认使用深色模式——截图显示的是白色(#FFFFFF)背景。
- 不要使用小而紧凑的排版——截图显示的是宽松的 1.5 倍行高。
- 不要使用复杂的盒子阴影——截图显示的是扁平或阴影极简的表面。
- 避免: 避免使用充满行话或具有攻击性的语言
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是 Svelte 的开发者文档网站,融合了干净的编辑美学与活泼、大胆的排版设计。设计采用衬线字体作为展示字体,人文主义无衬线字体作为正文字体,背景是白色(#FFFFFF)与深灰色(#262626)的高对比度配色,并以一个鲜明的橙色(#FF3E00)作为点缀。布局居中且宽敞,容器宽度为 1280px。关键禁忌:绝不要用无衬线字体做主标题,强调色橙色仅用于主要操作,务必保持宽松的垂直间距以维护编辑感。
en · zh-CN · zh-TW · ja · ko