精选 · 开放 · 免费
Soussfurniture
通过交互式文本导航展示家具的极简产品目录。
EditorialRestraintProductCuration
01
设计气质 DNA
极简产品目录功能性干净
一个精心策划的展厅，家具本身就是主角
02
色彩
#000000Ink
#D6D5CFBG
#666666Muted
rgba(0,0,0,1.0)Line
绝对单色——在柔和的暖灰色画布上使用黑色文字，无任何色彩变化。
03
字体
geometric-sans
- display
48px · 400 - body
16px · 400 - caption
30px · 400
所有文字字重统一为 400 · 下划线用于指示活动/选中的产品状态 · 导航使用句首字母大写，无装饰性样式
04
间距
4px
8px
16px
20px
24px
32px
48px
64px
宽松的垂直节奏，交互元素周围留有充足内边距
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
无可见边框——布局仅依赖字体和留白实现分隔
06
布局
1440container
1columns
48pxgutter
768 / 1024breakpoints
非对称布局，固定页头，居中文本块，以及悬浮的产品轮廓
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0.0, 0.2, 1.0)easing
产品轮廓在不同状态间进行过渡 · 文本下划线在悬停/选中时出现 · 所有交互元素具有平滑过渡效果
产品名称下方出现下划线 · 产品轮廓变化，文本状态更新
08
组件
- button 无传统按钮——整个产品名称字符串可点击，带有下划线悬停状态
- card 无卡片容器——产品以悬浮轮廓的形式呈现在背景上
- hero 全视口文本驱动的产品选择器，带有交互式下划线状态
09
文案语气与禁用清单
- 语气 直接、功能化、极简
- 标题风格 简洁的产品名称，句首字母大写并带句号
- 按钮文案 微妙的 'Info' 和 'Insta>' 导航链接
- 不要添加鲜艳色彩——截图显示为纯单色调色板
- 不要使用粗重字重——截图显示全部为统一的 400 字重
- 不要创建基于卡片的布局——产品以轮廓形式悬浮在纯色背景上
- 不要添加装饰性边框或分隔线——截图显示仅通过字体进行分隔
- 不要使用多种字体家族——截图显示全部使用单一几何无衬线字体
- 不要为元素添加阴影效果——截图显示为完全扁平化设计
- 避免: 装饰性语言
- 避免: 营销夸张用语
- 避免: 复杂的导航结构
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Souss Furniture 是一款用于家具产品的极简主义产品目录。设计采用单色调色板：背景为 #D6D5CF，文字为 #000000。字体为几何无衬线体 (acumin-pro)，全程字重 400，产品列表使用 48px，导航使用 16px。布局为非对称结构，包含固定顶部页头、居中产品列表文本块和悬浮产品轮廓。交互依赖文本下划线来指示选中状态。关键注意事项：绝不添加鲜艳色彩——设计为严格单色。绝不使用粗重字重——所有文字均为 400 字重。绝不创建基于卡片的布局——产品以轮廓形式悬浮。绝不添加装饰性边框——分隔纯粹通过排版实现。绝不使用多种字体家族——一致性是关键。绝不添加阴影效果——设计为完全扁平化。
en · zh-CN · zh-TW · ja · ko