精选 · 开放 · 免费
The FWA
一个简洁、内容优先的数字精品展览空间。
designgallery
01
设计气质 DNA
精选策展数字奖项作品集画廊设计展示
一个精致的数字博物馆或获奖网页设计精选画廊。
02
色彩
#FFCC00Accent
#404040Ink
#9A9A9AInk soft
#FFFFFFBG
#ECECECBG soft
#8E8E8EMuted
rgba(236, 236, 236, 1.0)Line
单色画布,运用微妙纹理与单一亮黄色点缀来框定精选内容。
03
字体
grotesque-sans · humanist-sans · monospace
- display
56px · 400 - body
16px · 400 - caption
14px · 300
分类标签与日期使用大写文本转换 · 辅助信息使用轻量级字体(300) · 所有内容块严格左对齐
04
间距
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
统一使用 4px 网格进行所有内部边距与外边距设置。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 5px
pill · 999px
使用 1px 细边框分隔内容块并定义网格结构。
0 1px 3px rgba(0,0,0,0.1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
结构化的非对称网格,结合大型媒体块与窄列元数据。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
交互状态变化时的透明度淡入淡出 · 内容揭示时的滑入动画
光标变为指针,并伴有微妙的透明度或颜色变化。 · 直接导航或媒体播放触发。
08
组件
- button 基于文本的按钮与带有清晰内边距的描边药丸形状。
- card 大型媒体卡片,带有微妙的像素图案背景与结构化元数据标签。
- chip 分类用的小型大写文本标签。
- input 带有细边框的标准下拉选择器。
- hero 全宽媒体容器,带有叠加文本与交互式播放控件。
09
文案语气与禁用清单
- 语气 专业、权威且高度精选。
- 标题风格 简洁的大型数字搭配直接的项目标题。
- 按钮文案 功能性强且直接(例如:‘查看案例’、‘启动项目’)。
- 勿使用复杂渐变——截图显示的是带有微妙像素纹理的纯白背景。
- 勿对所有内容使用粗体字重——基准设计主要使用 400 和 300 字重。
- 勿到处使用鲜艳色彩——调色板严格单色,仅有一个黄色点缀。
- 勿过度使用圆角——基准设计显示仅为 2px 至 5px 的极小圆角。
- 勿使用紧凑间距——基准设计在关键区域显示有 20px 和 44px 的宽松内边距。
- 勿使用居中文本对齐——截图显示严格的左对齐排版层级。
- 避免: 过度营销术语
- 避免: 装饰性排版
- 避免: 过于随意的语言
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 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
FWA 是一个精选数字奖项画廊与作品集展示平台。其设计基因建立在极名单色画布之上,使用白色(#FFFFFF)与炭灰色(#404040),仅以亮黄色(#FFCC00)作为点缀。字体方面,正文使用人文主义无衬线体,展示元素使用窄体怪诞无衬线体,优先通过字重和大小而非颜色来确保可读性与层级。布局采用结构化网格,运用细线与微妙像素纹理定义表面。关键禁忌:切勿使用多种点缀色,切勿将大段文本居中对齐,切勿对标准界面元素使用粗重字整体感觉平静、精致、内容优先,使展示的项目在克制、画廊般的环境中脱颖而出。
en · zh-CN · zh-TW · ja · ko