精选 · 开放 · 免费
Embacy
一个干净、精致的设计代理商作品集,以大胆的字体排印和高对比度的黑白基底为特色。
AgencyPortfolioCleanBold TypographyRefinement
01
设计气质 DNA
全球化科技设计合作伙伴代理商
一个专注于全球科技品牌的高端设计代理商作品集。
02
色彩
#ff5319Accent
#000000Ink
#ffffffBG
#f7f7f7BG soft
#999999Muted
rgba(0,0,0,0.1)Line
高对比度单色基底,仅点缀一个鲜亮的橙色,克制地用于强调和行动号召。
03
字体
geometric-sans
- display
56px · 400 - heading
43px · 400 - body
16px · 400 - caption
14px · 400
标题使用紧凑的负字间距。 · 各区块之间保持充足的垂直留白。 · 避免使用过重的字重;依靠字号和间距来建立层级。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足的留白,网格项目之间有清晰的分隔。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 10px
pill · 999px
尽可能不使用可见边框;结构通过间距和背景对比来定义。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准的12栏网格,在移动端会坍缩为2栏网格。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.1, 0, 0.3, 1)easing
页面元素的平滑透明度与变换过渡。 · 用于公告的水平滚动字幕。
微妙的透明度或颜色过渡。 · 直接导航或平滑滚动。
08
组件
- button 胶囊形状的主要行动号召按钮,带有铅笔表情符号;次要选项为文本链接。
- card 项目卡片包含全宽图片、项目名称和国家。
- chip 未见使用。
- input 未见使用。
- hero 用于介绍代理商的超大左对齐字体排印。
09
文案语气与禁用清单
- 语气 专业、直接且自信。
- 标题风格 极简、大尺度且具有宣告性。
- 按钮文案 活泼而清晰,使用表情符号作为视觉锚点。
- 不要使用多种亮色点缀色——截图显示仅有一个主导的橙色。
- 不要使用粗体或黑体等过重的字重——截图显示文本主要为400字重。
- 不要为卡片添加装饰性边框——截图显示结构是通过间距和图片内容来体现的。
- 不要为标题使用宽字间距——截图显示的是紧凑的负字距。
- 不要用过多的UI组件使界面变得杂乱——截图显示的是一个非常干净、极简的布局。
- 不要使用投影来营造深度感——截图显示的是扁平化的设计美学。
- 避免: 过度的形容词
- 避免: 技术术语
- 避免: 响亮或激进的销售文案
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(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
这是Embacy的设计代理商作品集,其定位是'全球科技品牌的设计合作伙伴'。设计依赖于高对比度的单色色板,配以一个鲜亮的橙色(#FF5319)点缀色。字体排印使用了几何无衬线字体(Haffer),具有大尺寸、紧凑字距的标题和充足的留白。关键禁忌包括:避免使用过重的字重、多种点缀色、装饰性边框、宽字距、杂乱的界面以及投影。布局干净且具有编辑感,专注于大尺寸图像和大胆文本。
en · zh-CN · zh-TW · ja · ko