精选 · 开放 · 免费
Thebrowser Company
一款为开发者工具打造、兼具文学感性的精致编辑驱动型展示方案。
EditorialDeveloper ToolsTypographyCalmRefined
01
设计气质 DNA
编辑感手工艺感文学性高端克制
复古文学公报与现代软件工艺的融合
02
色彩
#000000Ink
rgba(0,0,0,0.85)Ink soft
#EDEEE7BG
#A0A0A0Muted
rgba(0,0,0,0.15)Line
严格限定双色调板，依靠暖色调的近白色与深黑色实现最大化的编辑对比度
03
字体
transitional-serif · geometric-mono
- display
36px · 400 - caption
14px · 400 - micro
10px · 400
所有正文与标题使用过渡衬线字体 · 所有界面标签、导航及微文案使用几何等宽字体 · 对等宽标签应用大写及充足的字间距
04
间距
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
75px
96px
居中垂直韵律，搭配充足的留白以强调编辑所需的呼吸空间
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid rgba(0,0,0,0.15)
06
布局
1280container
1columns
24pxgutter
768 / 1024breakpoints
单一居中栏布局，具有极致的垂直内边距及居中元素
07
动效与交互
200msmicro
250mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的平滑颜色与填充过渡
交互元素上的微妙颜色偏移或填充变化 · 即时状态变更
08
组件
- button 简洁的文字型按钮，无背景，依靠hover过渡
- card 不显示
- chip 不显示
- input 不显示
- hero 居中、对称的构图，包含一个字体标志和双行衬线标题
09
文案语气与禁用清单
- 语气 手工艺感、安静且自信
- 标题风格 诗意、衬线字体，以轻微斜体强调
- 按钮文案 克制的、等宽字体、大写标签
- 勿使用明亮、饱和的背景色——截图显示的是温暖、柔和的近白色（#EDEEE7）
- 勿使用厚重的投影或3D效果——截图显示的是完全扁平、无边框的界面
- 勿对标题使用无衬线字体——截图显示的是斜体过渡衬线标题
- 勿将所有正文居中对齐——截图显示的是居中布局，但暗示长篇内容应为左对齐流式排版
- 勿在主容器上使用圆角——截图显示整体为锐利、几何感的边缘
- 勿使用激进的行动号召按钮——截图显示的是克制的、等宽字体文本链接
- 避免: 鲜艳的颜色
- 避免: 标题中激进的大小写
- 避免: 密集的信息块
- 避免: 厚重的图形叠加层
- 避免: 杂乱的导航
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
此设计旨在为开发者工具提供高端、手工艺感的展示，优先考虑精致的编辑美学，而非典型的SaaS惯例。调色板严格限定为双色调，依靠温暖的近白色背景（#EDEEE7）与深黑色文本（rgba(0,0,0,0.85））创造高对比度且低干扰的效果。字体排印采用过渡衬线字体用于展示与正文，搭配几何等宽字体用于界面标签与导航。布局高度对称且居中，运用充足的留白和微文案。关键约束包括：切勿使用饱和或主色调如蓝色，不要应用投影或厚重的圆角，并避免对任何标题使用无衬线字体。在所有文案和交互中保持安静、文学性的语调。
en · zh-CN · zh-TW · ja · ko