精选 · 开放 · 免费
Martin Laxenaire Fr
为创意网页设计师打造的高能量、字体大胆的作品集。
PortfolioPlayfulBold TypographyAgencyExpressive
01
设计气质 DNA
趣味性实验性创意代理大胆
一个如同充满活力的交互艺术作品的创意机构作品集。
02
色彩
#121212Ink
#FFFFFFBG
#9D968EMuted
rgba(18, 18, 18, 1)Line
高对比度单色基底搭配鲜艳多彩的几何点缀。
03
字体
extended-grotesque-sans · grotesque-sans
- display
167px · 700 - heading-lg
105px · 700 - heading-md
63px · 700 - body-lg
31px · 400 - body-md
21px · 400
大型展示文字使用宽体 grotesque-sans。 · 正文使用标准 grotesque-sans。 · 展示文字应用紧凑的字间距。 · 多数文本元素使用大写转换。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于8px网格，配合充裕的内边距以保证呼吸感。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 21px
pill · 999px
交互元素与边框使用2px纯黑实线。
0px 4px 24px rgba(18, 18, 18, 0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全视口首屏区域带有巨型中央文本块，其后是用于展示项目的多列网格。
07
动效与交互
220msmicro
350mssmall
500msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
元素出现时使用平滑的高缓出过渡。 · 滚动时的视差与缩放效果。 · 交互式几何背景元素。
交互元素上的缩放与颜色过渡。 · 具有即时视觉反馈的激活状态。
08
组件
- button 药丸形状，粗黑色边框，白色背景上的黑色文字。
- card 项目卡片，采用大字体与加粗的背景色。
- hero 全屏首屏，配有旋转的多彩几何星爆图案与巨大、重叠的展示排版。
09
文案语气与禁用清单
- 语气 自信、有趣且极具创意。
- 标题风格 简短、有力，通常全大写。
- 按钮文案 直接且以行动为导向，使用药丸形状按钮。
- 不要在标题中使用标准、狭窄的无衬线字体——截图显示的是宽体 grotesque 字体。
- 不要使用小而密集的正文——截图显示的是行高充裕、易于阅读的大号文本。
- 不要使用暗淡或深色的调色板——截图显示的是明亮的白色背景搭配鲜艳的绿色、棕色与黄色点缀。
- 不要为 UI 元素使用尖锐的直角——截图显示的是大圆角（21px 半径）。
- 不要使用细而微妙的边框——截图显示的是按钮和卡片使用粗厚的2px黑色边框。
- 不要使用传统的纯水平布局——截图显示的是动态、重叠的排版首屏。
- 避免: 乏味的布局
- 避免: 暗淡的颜色
- 避免: 传统衬线字体
- 避免: 小号文字
- 避免: 仅限标准网格的布局
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为网页设计师打造的创意机构作品集，其特点是大胆、有趣且实验性的美学。设计使用高对比度单色基底搭配鲜艳的几何点缀。关键色彩包括用于背景的纯白(#FFFFFF)和用于文字与边框的近黑(#121212)。排版方面，标题使用宽体 grotesque-sans，正文使用标准 grotesque-sans，两者均常以大写形式出现。关键禁忌：避免使用狭窄字体、暗淡调色板、小号文字、尖锐圆角、细边框以及仅限标准网格的布局。该网站强调动效、交互性以及非传统的网页设计方法。
en · zh-CN · zh-TW · ja · ko