精选 · 开放 · 免费
Aikawakenichi
一个以大型圆形肖像元素为核心的极简编辑风格作品集。
EditorialCleanTypographyGalleryPremium
01
设计气质 DNA
极简艺术感肖像圆形衬线驱动
一本画廊展览图录
02
色彩
#000000Ink
#F4EDEDBG
#767676Muted
rgba(0,0,0,1)Line
高对比度的黑与白,搭配温暖、柔和的色调。
03
字体
transitional-serif · grotesque-sans
- display
261px · 400 - body
16px · 400
主要展示文本使用经典的过渡衬线体 · 正文和UI元素使用简洁的新怪诞无衬线体 · 确保主要展示文本严格使用常规字重(400)
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足的留白
05
表面 (圆角 / 阴影 / 边线)
sm · 7px
md · 35px
lg · 9999px
pill · 9999px
1px solid rgb(0, 0, 0)
rgba(0,0,0,0.12) 0px 6px 12px 0px · inset 0px 1px 0px 0px rgba(255,255,255,0.36)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中的圆形构图
07
动效与交互
220msmicro
350mssmall
800msmedium
cubic-bezier(0.306, 0.968, 0.632, 1)easing
平滑的 transform 和 translate 过渡
可能在圆形元素上应用微妙的 transform 或显示效果 · 指针光标指示交互热点
08
组件
- button 极简,可能是药丸形或无边框,并带有指针光标
- card 包含图像或文本的大型圆形元素
- chip 不可见
- input 不可见
- hero 居中的全屏布局,以一个主导性的圆形框架为特色
09
文案语气与禁用清单
- 语气 精致且宁静
- 标题风格 大尺寸、经典的衬线字体,使用小写或首字母大写
- 按钮文案 微妙且融入整体
- 不要使用鲜艳的强调色——截图显示的是严格的单色配色方案,带有柔和的暖色调
- 不要为大型展示文本使用无衬线字体——截图显示标题使用的是过渡衬线体
- 不要使用厚重的投影——截图显示的是微妙、复杂的 inset/outset 阴影
- 不要使用多栏密集布局——截图显示的是高度居中、宽敞的构图
- 不要为展示文本使用粗体字重——截图显示大号排版使用的是常规字重(400)
- 不要所有地方都使用尖锐的圆角——截图显示大量使用了50%(圆形)和9999px(药丸形)的 border-radius
- 避免: 响亮的色彩强调
- 避免: 密集的段落
- 避免: 复杂的网格
- 避免: 厚重的边框
- 避免: 无衬线展示文本
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个极简的编辑风格作品集,高度注重排版和圆形图像。布局高度居中,使用大号过渡衬线体标题和简洁的怪诞无衬线体正文,背景为温暖的米白色(#F4EDED)和纯黑色(#000000)元素。主要特点包括大型圆形肖像框架、微妙的内阴影和平滑的350毫秒过渡。切勿使用鲜艳的强调色,避免使用无衬线展示文本,并确保居中的圆形构图周围有充足的留白,以保持精致的、画廊般的美学风格。
en · zh-CN · zh-TW · ja · ko