精选 · 开放 · 免费
Notreal Tv
一个融合工艺、叙事与科技的独立创意工作室，服务于全球品牌。
AgencyPortfolioTypographyEditorialClean
01
设计气质 DNA
创意独立设计驱动工艺叙事科技
一个高端创意工作室的精选画廊。
02
色彩
#292a2cInk
#f2f2f2BG
rgba(0,0,0,1)Line
极简、高对比度的画布，让作品集图像本身提供色彩。
03
字体
transitional-serif · geometric-sans
- display
80px · 400 - h2
25px · 400 - body
18px · 400
主logo和艺术化点缀使用过渡衬线字体。 · 所有导航、描述和正文使用几何无衬线字体。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
宽敞、通透，作品集项目之间留有较大边距，文本块周围也有充足内边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
极简，偶尔使用2px实线黑色进行微妙的结构划分。
0px 0px 5px 0px rgb(128, 128, 128)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
基于网格的非对称布局，包含大型、突出的媒体块和简洁、左对齐的文字说明。
07
动效与交互
200msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
导航和交互元素上的微妙过渡。 · 作品集项目的悬停效果。
文本链接和作品集卡片上的微妙视觉变化或下划线。 · 直接导航至项目详情。
08
组件
- button 用于导航的简洁文字链接。
- card 全宽或半宽的媒体块，说明文字直接置于下方。
- hero 左侧是大型衬线logo，右侧是描述性文字，下方是大幅特色作品集图片。
09
文案语气与禁用清单
- 语气 专业、精致、富有艺术感。
- 标题风格 简短、具描述性，常采用斜体以示强调。
- 按钮文案 导航栏中极简的文字链接。
- 不要使用圆角——截图显示是锋利的直角边缘。
- 不要使用明亮、饱和的UI颜色——截图显示的是中性、灰白色的背景。
- 不要用无衬线字体做主logo——截图显示是过渡衬线字体。
- 不要让布局显得拥挤——截图显示的是非常干净、通透的网格布局，有大量留白。
- 不要在主要元素上使用投影——截图显示是扁平化的图像，仅在特定元素上有极简、微妙的阴影。
- 不要在正文使用全大写——截图显示的是句子式大小写或标题式大小写。
- 避免: 过于随意或俚语化的语言。
- 避免: 过多使用感叹号。
- 避免: 模糊或笼统的描述。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是NotReal（一个独立创意工作室）的设计DNA。网站采用干净、编辑化的布局，背景为灰白色（#f2f2f2），文字为深炭灰色（#292a2c）。版式对比鲜明，logo和点缀使用精致的过渡衬线字体，导航和描述使用干净的几何无衬线字体。布局基于网格但非对称，给予大型、高质量的作品集图像显著的视觉权重。关键设计约束：不要使用圆角或明亮的UI颜色；美学风格是锐利、扁平且专业的。不要让界面显得杂乱；充足的留白是核心特征。主品牌标识‘NotReal’不要使用无衬线字体；必须保持为衬线字体。
en · zh-CN · zh-TW · ja · ko