精选 · 开放 · 免费
Artek
一个精致的家具品牌网站,强调摄影叙事与克制的经典排版。
furnituredesign
01
设计气质 DNA
北欧风格家具设计传承极简主义
简洁、高端的家具产品目录
02
色彩
#000000Ink
#FFFFFFBG
#F7F7F7BG soft
#EAEAEABG quiet
#919191Muted
rgba(0,0,0,0.1)Line
单色调 UI 调色板,高度依赖高质量摄影来提供温度与层次。
03
字体
geometric-sans
- display
48px · 400 - heading
26px · 400 - body
18px · 400 - small
14px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充裕的留白,通常由 45px 这样的 padding 块定义。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 15px
pill · 999px
极简,通常使用 1px solid black 作为轮廓或下划线。
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
大尺寸、全宽的摄影区块与用于文本的结构化网格布局交错分布。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
UI 元素采用流畅的渐显与微妙过渡。
微妙的颜色变化或透明度偏移。 · 即时反馈。
08
组件
- button 极简的 outline 样式,通常只是带边框或简单填充的文字。
- card 以图像为主导,搭配简洁的文字覆盖层。
- chip 不适用
- input 简洁的下划线或边框极简输入框。
- hero 全出血摄影,配以突出、居中或左对齐的排版。
09
文案语气与禁用清单
- 语气 沉静、权威且优雅。
- 标题风格 简短、直接且排版突出。
- 按钮文案 低调,通常只是带下划线的文字或简单的按钮。
- 不要使用高饱和度颜色——截图显示的是严格的单色调色板。
- 不要使用厚重的阴影——截图显示的是扁平、干净的表面。
- 不要使用装饰性衬线字体——截图显示的是几何无衬线排版。
- 不要用小而密集的文本块使布局显得杂乱——截图显示的是充裕的间距。
- 不要使用花哨、彩色的按钮——截图显示的是极简的 outline 按钮。
- 不要使用深色模式——截图显示的是以浅色为主的背景。
- 避免: 过度装饰
- 避免: 鲜艳色彩
- 避免: 俏皮语言
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Artek 是一个高端的芬兰家具品牌。其网站呈现出精致的编辑美学,专注于高质量摄影。设计依赖于简洁的几何无衬线字体(Artek Futura)。调色板严格单色,使用黑、白与中性灰(#F7F7F7,#EAEAEA),让产品摄影提供温度与个性。关键十六进制值包括用于主背景的 #FFFFFF 和用于主要文本的 #000000。不要使用过度装饰或鲜艳颜色;避免厚重阴影或俏皮排版;不要让布局显得杂乱。
en · zh-CN · zh-TW · ja · ko