精选 · 开放 · 免费
IDEO
以大胆而克制的自信，展现以人为本未来的优质设计咨询。
studioproduct
01
设计气质 DNA
设计创新以人为本创意工作室战略
一个既具实验性又结构严谨的高端创意机构作品集。
02
色彩
#D9FF00Accent
#333333Ink
#FFFFFFInk soft
#151F27BG
#F7FAFCBG soft
#2B2E35BG quiet
#7B92A5Muted
rgba(123,146,165,0.2)Line
高对比度深色模式，搭配单一、鲜明的 chartreuse 绿强调色以实现最大视觉冲击。
03
字体
didone-serif · humanist-sans
- display
56px · 400 - heading
40px · 400 - body
18px · 400
使用锐利、优雅的 Didone 衬线体作为主要展示文字，以建立高端质感。 · 搭配简洁的人文主义无衬线体，用于所有辅助 UI 文字和正文内容。 · 在大型展示文字上保持紧凑的负字距，以营造密集、有意的效果。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于 8px 基础网格，搭配充足的 24px 和 32px padding 以创造呼吸空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
极少使用 1px 实线边框，主要用于结构性分隔。
0px 1px 0px 0px rgb(21, 31, 39) 用于微妙的边框效果
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
宽幅全出血摄影主视觉，后接约束在 1280px 居中容器内的内容。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
交互元素（如按钮和 hover 状态）采用平滑的 0.3 秒过渡。 · 基于 Transform 的动画，用于滚动或交互时的细微位置变化。
交互元素上采用细微的背景色或文字颜色变化。 · 即时视觉反馈，配合 0.1 秒的 background-color 过渡。
08
组件
- button 高对比度 chartreuse 绿 CTA 按钮配黑色文字；次要按钮为深色带细微边框。
- card 干净、无边框卡片，采用大幅摄影与叠加排版。
- chip 极简的基于文本的导航标签，无厚重容器。
- input 标准表单输入框，带细微边框与与主题匹配的深色背景。
- hero 全出血摄影主视觉，配以大胆的排版叠加和几何线框图形。
09
文案语气与禁用清单
- 语气 权威、富有远见且深度以人为本。
- 标题风格 大胆、富有感染力且简洁的陈述，挑战传统思维。
- 按钮文案 直接且引人入胜（例如“打个招呼”），强调连接。
- 不要使用多个相互竞争的强调色——截图显示在深色背景上使用单一、主导的 chartreuse 绿强调色。
- 不要使用过于圆润或气泡状的形状——截图显示锐利的几何线条和精确的线框叠加。
- 不要用密集的文本块使布局显得拥挤——截图显示充足的留白和大幅摄影分隔。
- 不要使用俏皮或漫画风格的字体——截图显示精致的 Didone 衬线体与简洁的无衬线体搭配。
- 不要使用明亮、多彩的渐变——截图显示纯色深色背景与扁平、高对比度的强调色。
- 不要用厚重的 UI 覆盖层遮挡主要信息——截图显示关键信息清晰、专注的呈现方式。
- 避免: 充斥术语的企业化语言
- 避免: 激进的销售语言
- 避免: 过于随意或戏谑的俚语
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个优质设计工作室网站，其特点是精致的深色模式美学，搭配单一、鲜明的 chartreuse 绿强调色（#D9FF00）。布局中，标题使用锐利的 Didone 衬线体，正文使用简洁的人文主义无衬线体，背景为深海军蓝色（#151F27）。关键元素包括全出血摄影、几何线框叠加以及充足的留白，强调富有远见、以人为本的方法。关键设计约束：不要引入多种强调色；保持严格的双字体层级；保留大尺寸、通透的布局，避免用不必要的 UI 元素或厚重边框使其显得拥挤。整体感觉应是高端、结构化且有意实验的。
en · zh-CN · zh-TW · ja · ko