精选 · 开放 · 免费
Sreda V A C
一份时效性在线杂志,通过文章、艺术和播客提供对文化与当代性的策展视角。
EditorialCurationExperimentalTypographyGallery
01
设计气质 DNA
文化微妙瞬时多媒体策展
为数字时代策划的展览目录。
02
色彩
#000000Ink
#FFFFFFBG
#999999Muted
rgba(0,0,0,1)Line
严格的单色基底搭配锐利的图形线条;图像提供唯一的色彩。
03
字体
geometric-sans
- display
80px · 400 - h2
48px · 400 - body
16px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足的留白,结构元素之间保持清晰分隔。
05
表面 (圆角 / 阴影 / 边线)
sm · 10px
md · 10px
lg · 10px
pill · 999px
用于线条和分隔符的 1px 黑色细边框,具有结构性。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
使用实线和点线连接元素的自由流动图解式布局。
07
动效与交互
200msmicro
300mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素的 hover transition
可点击元素的颜色和透明度变化。 · 标准导航触发。
08
组件
- button 带箭头的文本链接,用作导航。
- card 无;内容以图解中相互连接的节点形式呈现。
- chip 语言切换(Ru / En),以斜杠分隔。
- input 无可见元素。
- hero 大号排版、图解线条与特色插图的混合。
09
文案语气与禁用清单
- 语气 清晰、具有文化感、略显正式。
- 标题风格 大号、加粗且具有图解感。
- 按钮文案 描述性且具方向性,常伴有箭头。
- 不要为容器使用彩色背景——截图显示主要背景为纯白色(#FFFFFF)。
- 不要使用阴影或景深效果——截图显示完全平面的表面。
- 不要为标题使用衬线字体——截图显示“Sreda”一词使用的是几何无衬线字体。
- 不要使用传统的基于卡片的布局——截图显示元素以图解风格通过线条连接。
- 不要使用彩色强调按钮——截图显示主要 CTA 为带箭头的纯文本链接。
- 不要使用复杂的图片画廊——截图显示为单个、大尺寸、全宽的说明性艺术作品。
- 避免: 通用营销语言
- 避免: 杂乱的界面
- 避免: 过于活泼或花哨的 UI 元素
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Sreda 是一份具有极简、图解式和编辑设计风格的文化在线杂志。布局很大程度上依赖于黑白(#000000 和 #FFFFFF)的鲜明单色调色板,并使用柔和的灰色(#999999)作为次级元素。排版采用几何无衬线字体类别用于展示和正文文本,渲染尺寸较大(最高 80px)且行高紧凑。布局特点在于使用实线和点线连接文本与图像,营造出“图 1”般的图解感。关键禁忌:不要为部分引入彩色背景填充;保持纯白画布。不要使用传统的 UI 组件,如带阴影的卡片或圆角按钮;改用文本链接和线条。不要为标题使用衬线排版;设计严格限于无衬线字体。
en · zh-CN · zh-TW · ja · ko