精选 · 开放 · 免费
Kaleidografik
一个为独立创意工作室打造的极简、内容优先的作品集网站。
AgencyPortfolioBold TypographyEditorialStudio
01
设计气质 DNA
创意机构数字工作室视觉设计作品集独立
一块空白画布，让大胆的客户作品自我表达
02
色彩
#000000Ink
#ECEAE5BG
rgba(0,0,0,1.0)Line
采用温暖米白色背景的严格单色画布，完全依赖客户作品提供色彩。
03
字体
humanist-sans · monospace
- display
120px · 400 - h1
32px · 400 - body
16px · 400
所有排版均使用 Suisse Intl Regular 字体，字重为 400 · 导航链接使用 16px 正文字号，活动状态带下划线 · 巨型背景水印文字使用超大尺寸的展示字体
04
间距
4px
8px
16px
20px
24px
48px
75px
采用大量留白，容器内具有 20px 水平内边距和 75px 底部内边距
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 8px
lg · 0px
pill · 0px
容器无可见边框，活动导航项使用 1px 实线黑色下划线
项目卡片使用 0 4px 20px rgba(0,0,0,0.1) 阴影
06
布局
1400container
12columns
24pxgutter
768 / 1024breakpoints
采用类似瀑布流的网格，卡片尺寸各异，顶部导航栏，以及大型背景水印文字
07
动效与交互
150msmicro
400mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
悬停状态的透明度淡入淡出过渡 · 导航的平滑透明度与 transform 过渡 · 交互元素的背景颜色过渡
导航链接和项目卡片的透明度降低 · 导航至项目详情页面
08
组件
- button 带下划线状态的最小文本链接，无可见按钮容器
- card 项目预览卡片，具有不同宽高比，包含截图和案例研究图像
- chip 带 1px 黑色边框的小型药丸状标签，用于项目元数据
- input 当前视图中不可见
- hero 项目卡片散布在大型淡化背景排版之上
09
文案语气与禁用清单
- 语气 低调、专业，让作品自我表达
- 标题风格 极简、直接，项目类别使用大写字母
- 按钮文案 无视觉强调的简单文本链接
- 不要使用多种字重——截图显示全文统一使用字重 400
- 不要添加装饰性 UI 元素——截图显示纯内容驱动的布局
- 不要使用彩色背景——截图显示一致的 #ECEAE5 米白色
- 不要创建复杂的按钮样式——截图显示带下划线的纯文本导航
- 不要为主容器添加投影——截图显示简洁扁平的卡片呈现
- 不要使用品牌强调色——截图显示完全的单色方案
- 避免: 避免使用与客户作品竞争的装饰性元素
- 避免: 避免使用复杂渐变或阴影
- 避免: 避免使用多种字重
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Kaleidografik 是一个独立创意工作室作品集，采用极简、内容优先的设计。网站使用温暖米白色背景（#ECEAE5）搭配纯黑色文本（#000000），创造出单色画布，让大胆的客户作品提供所有视觉趣味。排版完全使用 Suisse Intl Regular 字体，字重为 400，巨型背景水印文字是主要装饰元素。导航是一个简单的三项目水平栏（Work、Studio、Play），活动状态带下划线。项目卡片以非对称瀑布流布局展示，留白充足。关键禁忌：绝不使用多种字重，绝不添加装饰性 UI 元素，绝不引入彩色背景或强调色，绝不创建复杂按钮样式，绝不为容器添加投影，绝不使用品牌强调色。设计理念是极致克制——机构自身网站刻意退后，将客户作品作为视觉中心来展示。
en · zh-CN · zh-TW · ja · ko