精选 · 开放 · 免费
Reboot Studio
专注于为软件初创公司构建营销网站的高端设计机构作品集。
AgencyPremiumBold TypographyCleanProductivity
01
设计气质 DNA
聚焦初创极简大胆设计机构高端
为软件创始人打造的高端定制工作室。
02
色彩
#232323Ink
rgba(35, 35, 35, 0.4)Ink soft
#ffffffBG
#f5f5f5BG soft
#c8c8c8Muted
rgba(0, 0, 0, 0.1)Line
严格单色调色板,搭配强烈的排版对比。
03
字体
humanist-sans
- display
40px · 500 - body
16px · 500 - caption
14px · 500
使用 Inter 或类似的人文无衬线字体 · 为大型展示字号应用紧凑的负字间距 · 主要文本元素保持严格的 500 字重
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充裕的垂直间距,配合大块内边距(观察到128px的顶部内边距)。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 16px
lg · 16px
pill · 9999px
1px实线边框,使用 rgba(0, 0, 0, 0.1) 或 rgb(229, 231, 235)。
0px 1px 1px -0.5px rgba(0,0,0,0.06) · 0px 10px 15px -3px rgba(0,0,0,0.1) · 0px 0px 0px 1px rgba(0,0,0,0.05)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的内容块设定最大宽度,周围环绕着大量留白。
07
动效与交互
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
文本块的平滑淡入与过渡 · 交互元素上的细微缩放或颜色变化
交互元素上的细微透明度或颜色变化。 · 立即的视觉响应配合平滑过渡。
08
组件
- button 胶囊形按钮,采用深色背景(#232323)或透明背景加细微边框。
- card 在提供的视图中未突出展示。
- chip 小型胶囊形标签(例如 'Hiring · Web Designer'),带1px边框和圆角。
- input 在提供的视图中未突出展示。
- hero 大型排版布局,混合使用深色与柔和灰色文本,居中置于白色背景上。
09
文案语气与禁用清单
- 语气 自信、专业且直接。
- 标题风格 直接且陈述性的标题。
- 按钮文案 简洁且以行动为导向(例如 '查看作品')。
- 不要使用多种强调色——截图显示的是严格的黑、白、灰色板。
- 不要使用装饰性衬线字体——截图显示的是人文无衬线字体的一致使用。
- 不要创建拥挤的布局——截图显示的是宽敞的留白和居中的内容列。
- 不要使用厚重的背景纹理——截图显示的是平坦的纯色白色背景。
- 不要对所有元素使用复杂的投影——截图显示的是最小化、细微的阴影。
- 不要在正文使用全大写——截图显示的是标准的句首大写和小写。
- 避免: 过于复杂的术语
- 避免: 激进的销售语言
- 避免: 不必要的装饰性元素
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端设计机构作品集,专注于为软件初创公司构建营销网站的业务。设计基因由严格单色调色板(白色、黑色和灰色)、使用人文无衬线字体的大胆粗体排版,以及优先考虑充足留白和居中内容的布局所定义。关键十六进制颜色包括白色(#ffffff)、近黑色(#232323)和浅灰色(#f5f5f5)。关键禁忌:避免使用装饰字体,不要用不必要的元素使布局杂乱,切勿使用会破坏专业、克制美学的亮色强调色。整体基调是自信而内敛的。
en · zh-CN · zh-TW · ja · ko