精选 · 开放 · 免费

Ferm Living

一家专注于策划式、生活方式驱动编辑布局的高端家居用品及家具零售商。

furniturehome
Ferm Living 网站截图
↓ 下载设计系统包 (34 MB)在 OpenDesign 中打开

原站: https://fermliving.com

📦 浏览包内文件 →

01

设计气质 DNA

北欧风极简主义家居用品家具仪式感

一件件生活物件的静谧画廊

02

色彩

#383838Ink
#545454Ink soft
#FFFEFABG
#F7F5EFBG soft
#444444Muted
rgba(56, 56, 56, 1)Line

克制的暖白与深炭灰色系，依靠高品质摄影带来视觉丰富度与对比。

03

字体

transitional-serif · geometric-sans

大号展示标题使用高对比度过渡衬线体 · 正文与UI元素使用简洁的几何无衬线体 · 长篇文本保持充裕行高以确保可读性

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

充裕且开阔，大量依赖24px基础单位进行对齐。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 999px

按钮使用1px solid rgb(56, 56, 56)边框，整体边框使用极为克制。

0px 30px 70px 0px rgba(0, 0, 0, 0.3)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽摄影主图块与简洁、宽边距的产品网格交替排列。

07

动效与交互

200msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover状态下平滑的透明度与变换过渡 · 页面加载元素的微妙淡入

文本与按钮边框上微妙的颜色或透明度变化 · 即时反馈，过渡至新状态

08

组件

09

文案语气与禁用清单

10

包内真实截图

Ferm Living — 桌面首屏（hero）
桌面首屏（hero）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Ferm Living — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Ferm Living 是一家高端家居用品及家具电商网站，将编辑式摄影与极简北欧美学相融合。核心色板依赖暖白色背景（#FFFEFA, #F7F5EF）与深炭灰色文字（#383838）形成对比。字体搭配上，高冲击力的展示标题使用精致的过渡衬线体，正文与UI元素则使用简洁的几何无衬线体。关键设计约束：绝不使用明亮、高饱和度的强调色；避免在标准UI组件上使用厚重投影；并保持充裕的留白。布局基于宽边距网格构建，并运用全出血生活方式摄影以驱动情感连接，要求一个克制而优雅的视觉系统。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko