Frame.io

午夜电影放映室。
一间深色套间,唯一蓝色聚光灯承担全部表达,UI退居幕后,让创意内容向前投射。
Frame.io是创意团队的午夜放映室:近黑画布层叠深宇宙渐变,大而自信的展示字体浮在产品表面上方,像胶片上方的电影片名。色板几乎完全无彩色,只有鲜亮蓝色(#6199f6)和低调紫罗兰边框色(#4f4f80)打破单色调,少量用于图标、眉题标签和卡片边缘。字体是最响亮的声音,单一几何无衬线FrameGothic承担从80px展示标题到14px正文的一切,定制墨陷字形仅用于微小全大写区块标签。组件纤细且带编辑感:胶囊形导航按钮、无填充CTA、紫罗兰着色边框的10px圆角卡片,没有任何装饰点缀;每个元素都为了框定作品而存在,不与作品竞争。
查看原始网站使用规范
建议采用
- 所有按钮、导航项和胶囊采用100px圆角,胶囊结构是品牌最常重复的形状。
- 展示标题采用400字重和紧凑负字间距,48px时为-1.92px、80px时为-3.6px,绝不通过加粗获得冲击力。
- Iris Glow(#6199f6)仅用于图标、眉题标签、链接和激活状态,唯一强调色如手术般精准使用。
- 每个区块标题上方放置NeueMachinaInktrap眉题标签,12px、大写、0.06em字间距,作为区块标记。
- 每个页面背景至少叠加一个渐变,绝不单用平面#0a0a13,宇宙氛围需要深度。
- 内容最大宽度设为1280px,所有内容在其中居中,背景则铺满画面。
- 所有正文和功能文字采用14–18px FrameGothic,颜色为#a3a3b3或#757580,这两种灰色承担全部次要信息。
- 产品影像框在10px圆角容器内,使用1px #4f4f80紫罗兰边框,光环是唯一允许的画框。
建议避免
- 展示标题不要使用600或700字重,400字重是标志性的克制选择。
- 不要引入额外强调色,Iris Glow是系统唯一彩色强调。
- 整页背景不要使用平面黑色(#000000),始终叠加渐变以创造宇宙氛围。
- 功能栏不要添加卡片背景或厚边框,它们是排版内容块,而非卡片。
- 不要使用衬线、装饰字体,或FrameGothic、NeueMachinaInktrap、系统后备字体以外的任何字体。
- 按钮或导航项不要添加投影,填充对比本身就承担层级。
- 正文段落不要居中,采用左对齐和约560px最大宽度,以获得易读的行长。
- 除区块标识外,任何文字都不要使用NeueMachinaInktrap大写眉题样式,它是一枚印章,而非普通标签。