精选 · 开放 · 免费
Majacerar
展示高端产品与品牌设计作品的精致设计作品集
PortfolioEditorialCleanRefinementTypography
01
设计气质 DNA
极简编辑式专业简洁
一个注重布局与负空间的精致画廊式作品集
02
色彩
#111111Ink
#ffffffBG
#bb1111Muted
rgba(17, 17, 17, 0.1)Line
高对比度单色系，策略性使用柔和色调
03
字体
geometric-sans
- display
56px · 400 - body
19px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于主要区块间 48px 间距的垂直节奏
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 64px
pill · 999px
1px solid rgba(17, 17, 17, 0.1) 水平分隔线
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
三栏页头布局，单栏项目区块配合充足留白
07
动效与交互
220msmicro
400mssmall
900msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
元素进入视口时采用 0.9s ease-out 平滑过渡
交互元素上细微的指针光标 · 即时响应配合平滑过渡
08
组件
- button 极简文本式导航，带 hover 过渡效果
- card 项目展示卡片，大尺寸图像搭配极简文字覆盖
- hero 宽敞的页头，包含个人简介文本与项目分类
09
文案语气与禁用清单
- 语气 专业、精致、含蓄
- 标题风格 简洁、直接、信息明确，无修饰
- 按钮文案 极简文本式链接，无传统按钮样式
- 不要使用饱和色——截图显示白色背景的单色配色
- 不要添加投影——截图显示完全扁平化的设计
- 不要使用粗体字重——截图显示全文统一 400 字重
- 不要创建密集布局——截图显示元素间距充足
- 不要在主要元素上使用圆角——截图显示仅特定元素使用 64px 圆角
- 不要使用多种强调色——截图显示无主导强调色
- 避免: 鲜艳色彩
- 避免: 复杂动画
- 避免: 装饰性元素
- 避免: 过载的布局
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是为旧金山设计师 Maja Cerar 设计的精致作品集，她专注于品牌标识与数字产品设计。设计采用单色配色，#ffffff 背景与 #111111 文字，使用几何无衬线字体，正文尺寸 19.2px，字重 400。关键特征包括充足留白、56px 大号展示字体配合紧密字距，以及极简视觉元素。布局采用三栏页头结构与单栏项目区块，配以水平分隔线。核心设计规则包括：避免使用饱和色，所有字重保持 400，保持区块间大间距（48px），仅使用文本式导航而非传统按钮组件。整体美学简洁、专业、画廊感，配合 0.9s 平滑过渡效果。
en · zh-CN · zh-TW · ja · ko