精选 · 开放 · 免费
Matteroffact Fr
一个极简的法国创意工作室作品集,完全依赖巨大的排版尺度和鲜明的黑白对比。
StudioEditorialPhotographicBold TypographyClean
01
设计气质 DNA
创意机构极简主义排版驱动艺术性直接
一个剥离一切的画廊,大规模排版是主要展品,交互被简化为必要的盒装触发器。
02
色彩
#000000Ink
#a0a0a0Ink soft
#ffffffBG
#c0c0c0Muted
rgba(0,0,0,1.0)Line
严格单色,纯白背景上使用黑色文字和边框,通过灰度建立视觉层级。
03
字体
grotesque-sans
- display
160px · 400 - h1
36px · 400 - body
22px · 400
所有 UI 和排版元素使用 FreeSans 字体族 · 所有文字字重保持 400 · 正文和副标题的行高紧凑设置为 1.2
04
间距
4px
8px
16px
18px
24px
32px
48px
64px
宽松,基于 4px 网格,盒装元素大量使用 18px 和 45px 的 padding。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
实心 3px 黑色边框,专用于按钮和导航链接等盒装 UI 元素。
06
布局
1920container
12columns
18pxgutter
768 / 1024breakpoints
不对称、边缘对齐的布局,大型文字块推向边界,盒装导航置于角落。
07
动效与交互
200msmicro
250mssmall
1000msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
所有属性过渡 · 透明度渐隐 · 颜色变化
在可点击的盒装元素上触发,可能改变文字颜色或边框颜色。 · 交互元素上为标准指针光标。
08
组件
- button 裸露的矩形框,带有实心 3px 黑色边框和内部 padding,类似基础 HTML 表单元素。
- hero 占据视口主体,以超大号、流畅的排版充当导航元素。
09
文案语气与禁用清单
- 语气 直接、未经修饰,略带对抗性。
- 标题风格 俏皮的大号排版,使用押韵或重复的词汇(Fact, Fake, Tab, Hack)。
- 按钮文案 裸露、功能性强,毫无视觉修饰。
- 不要使用圆角 — 截图显示所有按钮和元素均为尖锐的 0px 矩形角
- 不要应用投影 — 截图显示完全扁平、无边框且无层级的 UI
- 不要使用彩色背景 — 截图显示严格纯 #ffffff 白色背景
- 不要使用具有独特特征的装饰性无衬线字体 — 截图显示统一、中性的 grotesque-sans
- 不要将所有文字居中对齐 — 截图显示极具张力的左对齐和右对齐排版
- 不要使用粗体字重 — 截图显示所有文字严格设置为常规字重 400
- 避免: 渐变
- 避免: 柔和阴影
- 避免: 圆角
- 避免: 明亮的强调色
- 避免: 装饰性图标
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Matter of Fact 是一个极简的法国创意工作室作品集,优先考虑原始排版尺度而非传统 UI 的精致感。设计基于严格的黑白调色板,在 #ffffff 背景上使用 #000000 墨色,并始终使用中性的 FreeSans 字体保持 400 字重。导航和交互元素被简化为醒目的、带 3px 实心黑色边框的盒子,摒弃所有现代装饰。关键禁忌:绝不使用圆角(UI 完全为尖锐边缘),绝不应用阴影或渐变(美学完全扁平),绝不使用粗体字重(所有文字保持常规)。布局依赖巨大、不对称的排版引导用户视线,营造出既原始又高度精心策划的、极具表现力且刻意未加修饰的感觉。
en · zh-CN · zh-TW · ja · ko