精选 · 开放 · 免费
Cydstumpel Nl
面向创意开发者与演讲者的、大胆而富有表现力的作品集网站。
PortfolioBold TypographyExpressiveDeveloperEditorial
01
设计气质 DNA
创意开发者会议演讲者无障碍设计动态设计屡获殊荣
一个充满趣味与魄力的创意开发者作品集展示。
02
色彩
#D9533FAccent
#111111Ink
#FFF5EEBG
rgba(17,17,17,1.0)Line
温暖米白色背景搭配大胆黑色与高饱和度红色点缀色，并辅以内容卡片的次要调色板。
03
字体
grotesque-sans · transitional-serif
- display
80px · 400 - heading
40px · 700 - body
16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于4px的一致节奏，卡片布局采用宽松间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 28px
pill · 120px
卡片采用醒目的2px实线边框，使用点缀色红、蓝及黑色。
None: None · None: None
06
布局
1280container
3columns
24pxgutter
768 / 1024breakpoints
非对称的编辑式布局，包含大面积重叠走马灯与三列卡片网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 1, 0.5, 1)easing
hover与focus状态下的流畅过渡 · 交互元素上的border-radius形态变换 · 微妙的opacity淡入淡出
微妙的状态变化，可能涉及颜色或边框过渡。 · 按钮与链接的激活状态。
08
组件
- button 大胆的全大写文本按钮，常具独特border-radius与hover效果。
- card 具厚实彩色边框、折叠角细节及药丸形标签的卡片。
- chip 用于CSS、JS、ANIMATION等标签的圆角小药丸。
- input 在提供的截图中未清晰可见。
- hero 大型水平滚动走马灯，含重叠文本与中央插图。
09
文案语气与禁用清单
- 语气 自信、趣味且专业。
- 标题风格 大胆全大写，极富表现力，使用condensed无衬线与斜体衬线字体。
- 按钮文案 直接、全大写且导向行动，常置于带边框的容器内。
- 勿使用扁平企业风布局——截图展示的是具有重叠编辑风格与大型走马灯的表现力布局。
- 勿使用冷色调色板——截图展示的是带有大胆红色点缀的温暖米白色背景。
- 勿使用标准系统字体——截图展示的是粗体condensed无衬线与优雅过渡衬线字体的组合。
- 勿使用1px细边框——截图展示的是卡片与容器上醒目的2px实线边框。
- 勿对所有元素使用微妙、柔和的颜色——截图使用高饱和度红色作为主导点缀色。
- 勿使用纯网格化、对称的布局——截图展示的是元素重叠、非对称的排列方式。
- 避免: 被动语言
- 避免: 泛泛的企业术语
- 避免: 过于正式的语调
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个面向创意开发者与会议演讲者的、大胆而富有表现力的作品集网站。其特点是温暖的米白色背景（#FFF5EE）搭配主导性高饱和度红色点缀（#D9533F）与墨黑色（#111111）。排版结合了用于展示文本的粗体condensed无衬线字体与用于正文及斜体点缀的过渡衬线字体。布局为非对称编辑式，以大型水平滚动走马灯为亮点。关键禁忌：避免扁平企业布局，避免冷色调色板，避免使用细微边框。网站在其卡片组件上使用醒目的2px实线边框，这些卡片还带有折叠角细节。
en · zh-CN · zh-TW · ja · ko