精选 · 开放 · 免费
Norgram
一个精致的设计工作室作品集，专注于本质形式和高对比度单色呈现。
StudioPhotographicTypographyCleanPremium
01
设计气质 DNA
高级极简本质现代
一个高端斯堪的纳维亚设计工作室画廊
02
色彩
#000000Ink
#1a1a1aBG
#777777Muted
rgba(0,0,0,1.0)Line
高对比度单色板，采用深黑色背景和纯白色字体
03
字体
geometric-sans
- display
87px · 400 - body
12px · 400
大号展示标题采用紧凑的字距 · 标题和正文都严重依赖 Helvetica Now Display · 通过尺寸对比实现极简的字体层级
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
不规则的基于网格的节奏，由项目图像而非严格的垂直间距驱动
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 7px
pill · 26px
主要元素使用 1px solid black 边框
浮动 UI 元素使用 0 4px 12px rgba(0,0,0,0.15) 阴影
06
布局
1400container
12columns
8pxgutter
768 / 1024breakpoints
非对称瀑布流网格，配有大型主视觉图像和浮动文本叠加层
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.87, 0, 0.13, 1)easing
滑动 UI 面板的平滑入场过渡 · 叠加元素的淡入淡出 · 交互元素上的微妙 hover 状态过渡
交互元素上微妙的不透明度或变换偏移 · 平滑的面板过渡
08
组件
- button 用于导航标签的小型圆角药丸形按钮
- card 以图像为主导的项目卡片，带有元数据叠加层
- chip 带边框的小型元数据标签
- input 带细边框的极简文本输入框
- hero 全宽或半宽的电影级项目图像，带有叠加元数据
09
文案语气与禁用清单
- 语气 极简、自信、权威
- 标题风格 大型、紧凑字距的几何无衬线声明
- 按钮文案 内敛、功能性的导航
- 不要使用明亮的强调色——截图显示的是严格的单色调色板
- 不要使用衬线字体——截图显示通篇使用 Helvetica Now Display
- 不要使用宽字距——截图显示即使在大尺寸下也使用紧凑的字距
- 不要所有东西都使用小圆角——截图显示药丸形按钮与直角并存
- 不要使用厚重的投影——截图显示极简、微妙的阴影
- 不要使用复杂的网格线——截图显示除了特定 UI 元素外，布局干净无边框
- 避免: 装饰性元素
- 避免: 繁杂的布局
- 避免: 明亮的强调色
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Norgram 是一个高级设计工作室作品集，以严格的单色调色板和几何无衬线字体为特征。主要背景是深炭灰色 #1a1a1a，文字为纯白色 #ffffff 或纯黑色 #000000。关键字体类别是 geometric-sans，特别是 Helvetica Now Display，用于巨大的展示标题和微小的元数据。布局依赖于非对称网格，配有大型、电影般的项目图像和浮动文本叠加层。关键禁忌：不要引入明亮的强调色；保持严格的单色美学。不要使用衬线字体；其身份建立在几何无衬线之上。不要应用宽字距；设计在展示尺寸上也使用紧凑的字距。动画效果微妙，使用 ease-in-out 和 cubic-bezier 过渡用于面板滑动和不透明度淡入淡出。整体感觉是精致、本质且高度受控的。
en · zh-CN · zh-TW · ja · ko