01
设计气质 DNA
博物馆历史交通档案华沙
一场在数字屏幕上重现的精选博物馆展览。
02
色彩
#E30713Accent#CFC8B7Ink#212121BG#867660Mutedrgba(207, 200, 183, 0.2)Line以档案感的暗色调为基底,点缀一抹醒目的品牌红。
03
字体
- display
265px · 700 - heading
44px · 400 - body
14px · 400
04
间距
4px8px16px24px32px48px64px96px元素间采用大面积、富有戏剧性的留白,以突出摄影内容。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 10px
lg · 0px
pill · 999px
圆形UI元素采用细线、低透明度的描边。
06
布局
1920container
12columns
24pxgutter
768 / 1024breakpoints
全视口主视觉布局,导航靠边对齐,内容块垂直堆叠。
07
动效与交互
220msmicro
400mssmall
1400msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
时间线各时代之间缓慢、平滑的页面过渡。 · 导航元素上细微的悬停效果。
交互元素上轻微的透明度或缩放变化。 · 触发时间线前进。
08
组件
- button 大尺寸圆形按钮,采用细线描边,图标居中。
- card 全出血摄影面板。
- hero 沉浸式分屏设计,巨型字体叠加在复古照片之上。
09
文案语气与禁用清单
- 语气 权威、历史感、沉静。
- 标题风格 巨型、重叠的日期与带下划线的衬线体标题。
- 按钮文案 极简的圆形图标。
- 避免使用明亮、饱和的背景色——截图显示背景为深炭灰(#212121)。
- 避免使用活泼或圆润的字体——截图显示使用了严肃的didone-serif与结构化的grotesque-sans字体组合。
- 避免用不必要的边框或方框使界面杂乱——截图依赖于大量的留白。
- 避免使用小而密集的主视觉文本——截图以巨大的展示字体(最大265px)作为主要元素。
- 避免为使用圆角矩形作为主导航——截图中的交互按钮使用了完美的圆形。
- 避免避免使用摄影素材——截图大量运用了全出血的档案图像作为核心视觉锚点。
- 避免: 明亮的霓虹色彩
- 避免: 圆润、活泼的形状
- 避免: 密集的文本块
11
System Prompt
这是一个深沉、沉浸式的数字博物馆,旨在庆祝华沙公共交通的百年历史。它采用深炭灰(#212121)背景,搭配温暖、羊皮纸质感的奶油色(#CFC8B7)和哑光青铜色(#867660)调,并用一抹鲜艳的红色(#E30713)作为高色度点缀。字体设计平衡了巨大、戏剧性的didone-serif日期与用于正文和导航的结构化grotesque-sans字体。至关重要的是,该设计避免了明亮的背景、活泼的字体和杂乱的布局,转而偏爱极致的留白、圆形的UI元素以及全出血的档案摄影。动效应缓慢而具有电影感,强调历史时间轴上时间的流逝。