精选 · 开放 · 免费
Perkybros
一个简洁、由字体排印驱动的机构作品集，配有温暖的中性背景。
AgencyPortfolioCleanTypographyPremium
01
设计气质 DNA
品牌设计工艺雄心惯例
一个现代、注重工艺的设计工作室作品集，强调清晰度和大胆的字体排印。
02
色彩
#1E1F20Ink
#F5F1E7BG
#9E9A91Muted
rgba(30,31,32,0.2)Line
以温暖米白色背景为基的高对比度单色核心。
03
字体
geometric-sans · transitional-serif
- display
48px · 500 - headline
40px · 400 - body
18px · 400
标题使用大写的几何无衬线体。 · 正文使用过渡衬线体。 · 小标签使用大写的几何无衬线体。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于4的统一缩放比例，形成紧凑而刻意的空间关系。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
交互元素与分隔线使用微妙的1像素底部边框。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
灵活的网格，配有大型、非结构化的图像区域。
07
动效与交互
220msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover时的微妙色彩与背景过渡。 · 平滑的边框颜色过渡。
链接与按钮的标准色彩/背景过渡。 · 无可见的自定义点击动画。
08
组件
- button 基于文本的导航，采用大写样式和微妙的hover过渡。
- card 简单布局，由一张大图和随后的文本标签组成。
- chip 极简的纯文本指示器（例如，'03 of 06'）。
- input 无可见输入框。
- hero 全宽摄影展示，叠加导航。
09
文案语气与禁用清单
- 语气 专业、自信、注重工艺。
- 标题风格 直接且大写。
- 按钮文案 极简的纯文本。
- 不要使用投影 —— 截图显示为完全扁平的设计。
- 不要使用圆角 —— 截图显示所有边角均为锐角。
- 不要使用复杂渐变 —— 截图显示为纯色、扁平的颜色填充。
- 不要使用密集的文本布局 —— 截图显示有宽大的页边距和大号字体。
- 不要使用鲜艳的霓虹色 —— 截图显示为柔和的大地色系与高对比度单色。
- 不要使用通用的无衬线体正文 —— 截图显示描述文字使用了过渡衬线体。
- 避免: 装饰性图案
- 避免: 圆角
- 避免: 投影
- 避免: 渐变
- 避免: 鲜艳的霓虹色
- 避免: 密集的文本块
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Perky Bros 是一个品牌设计机构作品集。它采用温暖的米白色背景（#F5F1E7）和高对比度的深色墨色（#1E1F20），营造出简洁、精致的外观。字体排印结合了用于大写标题和导航的几何无衬线体，以及用于正文文案的过渡衬线体。布局宽敞且基于网格，以大型摄影内容为特色。关键禁忌：1）不要使用圆角；设计使用的是锐利的0半径边角。2）不要使用投影；表面完全扁平。3）不要使用复杂渐变；坚持使用纯色填充。4）不要使用密集的文本布局；保持充裕的内边距和外边距。
en · zh-CN · zh-TW · ja · ko