精选 · 开放 · 免费
Simonrogers Info
具有动态文字布局的实验性排版作品集
PortfolioTypographyEditorialCleanExperimental
01
设计气质 DNA
排版编辑设计实验性个人
一个探索布局与文字排列的排版作品集
02
色彩
#3366FFInk
#FFFFFFBG
rgba(51,102,255,1)Line
白色背景上的单色蓝，搭配实验性文字排列
03
字体
transitional-serif
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
通过旋转和重叠文字元素创造的动态间距
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
无可见边框
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
实验性居中布局，文字以不同角度旋转
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
文字旋转动画 · 光标指针交互
颜色过渡，持续时间 1s · 交互元素上显示指针光标
08
组件
- button 无可见按钮
- card 无可见卡片
- chip 无可见标签
- input 无可见输入框
- hero 旋转文字排版首屏
09
文案语气与禁用清单
- 语气 实验性与艺术性
- 标题风格 旋转、重叠的衬线排版
- 按钮文案 无可见号召性用语
- 不要使用标准网格布局——截图显示的是旋转、重叠的文字
- 不要使用多种颜色——截图显示的是单色蓝色调
- 不要使用无衬线字体——截图显示的是过渡衬线字体
- 不要创建清晰的视觉层次——截图显示的是实验性文字排列
- 不要添加装饰元素——截图显示的是极简的、仅含文字的设计
- 不要使用常规间距——截图显示的是动态的、重叠的布局
- 避免: 标准网格布局
- 避免: 传统排版
- 避免: 多种颜色
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为 Simon Rogers 设计的实验性排版作品集网站。设计采用单色蓝 (#3366FF) 置于白色 (#FFFFFF) 的配色方案，搭配过渡衬线字体 (Wazlon, Caslon Ionic)。布局特点是以不同角度旋转文字，营造出实验性、艺术感的关键特征包括：居中构图、重叠的文字元素、hover 时 1s 的颜色过渡，以及交互元素上的指针光标。关键注意事项：不要使用标准网格布局，不要使用多种颜色，不要使用无衬线字体，不要创建清晰的视觉层次，不要添加装饰元素，不要使用常规间距。该网站体现了对作品集展示的实验性、编辑式设计方法。
en · zh-CN · zh-TW · ja · ko