精选 · 开放 · 免费
Aletagency
一家总部位于哥本哈根的创意工作室和制作公司，拥有精心策展、具有编辑风格的数字呈现。
AgencyStudioCurationPhotographicRefined
01
设计气质 DNA
创意叙事制作哥本哈根
一个作为精心策展、高端作品集的数字情绪板
02
色彩
#000000Ink
#252525Ink soft
#E5DDC4BG
#A2A093Muted
rgba(0, 0, 0, 0.1)Line
柔和、质朴的中性背景，搭配高对比度的黑色排版。
03
字体
transitional-serif · humanist-sans
- display
23px · 400 - body
11px · 400
导航和标签使用较宽的字间距 · 仅将衬线字体用于富有表现力的焦点时刻
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
核心内容周围拥有大量留白，形成宽松的垂直节奏
05
表面 (圆角 / 阴影 / 边线)
sm · 11px
md · 11px
lg · 11px
pill · 9999px
极简，主要依赖间距实现视觉分隔
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.06) 0px 1px 2px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中内容，带有充足内边距，并采用瀑布流式的图片排列
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
光标变为‘抓取’形状以指示画廊可拖动
交互式文本元素上的细微色彩过渡 · 主画廊的拖拽探索交互
08
组件
- button 极简、基于排版的导航链接
- card 超大尺寸的摄影卡片，带有细微边框
- chip 用于视图模式（线性/随机）的简单胶囊形开关
- hero 一个动态、重叠的项目图像网格，中心配有文本陈述
09
文案语气与禁用清单
- 语气 专业、精致且低调
- 标题风格 基于衬线字体、略带诗意的陈述
- 按钮文案 简洁、无衬线、大写的标签
- 不要使用亮色强调色 — 截图显示使用的是严格柔和、质朴的调色板
- 不要使用厚重的投影 — 截图显示仅使用极简、柔和的层级感
- 不要为图片使用严格的网格布局 — 截图显示的是动态、重叠的布局
- 不要使用装饰性的无衬线字体 — 截图为UI功能性使用了人文主义无衬线字体
- 不要让界面变得杂乱 — 截图优先考虑大量留白和呼吸空间
- 不要过度使用全大写 — 截图严格保留给导航和切换控件使用
- 避免: 响亮的营销术语
- 避免: 复杂的布局模式
- 避免: 杂乱的界面
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
该网站是一个位于哥本哈根的创意代理机构作品集，优先考虑精致、具有编辑风格的美学。主要背景是温暖、柔和的米色（#E5DDC4），搭配醒目的黑色排版（#000000）。字体系统在富有表现力的时刻使用过渡衬线体，在功能性的UI元素上使用人文主义无衬线体。至关重要的是，该设计避免了亮色强调、厚重阴影和杂乱的网格，而是利用大量留白、细微边框和重叠的摄影卡片。导航是极简的大写形式，交互专注于触感丰富的‘抓取探索’画廊体验。
en · zh-CN · zh-TW · ja · ko