厳選・オープン・無料

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

ホバーステートにおける滑らかな透明度とトランスフォームのトランジション · ページ読み込み要素の微かなフェードイン

テキストとボタンボーダーにおける微かな色や透明度の変化 · 新しいステートへのトランジションによる即時フィードバック

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

Ferm Livingは、エディトリアル写真とミニマルなスカンジナビアン美学を融合させたプレミアム家庭用品・家具のeコマースサイトです。コアパレットは暖色系オフホワイトの背景(#FFFEFA、#F7F5EF)と、深いチャコール色のテキスト(#383838)のコントラストに依存しています。タイポグラフィは、高インパクトなディスプレイ見出しに洗練されたトランジショナルセリフを、本文やUI要素にはクリーンなジオメトリックサンセリフを組み合わせています。重要なデザイン制約:明るく高彩度のアクセントカラーは決して使用せず、標準UIコンポーネントに重いドロップシャドウを避け、豊かな余白を維持します。レイアウトは、広いマージンのグリッドに基づき、感情的なつながりを生み出すためにフルブリードのライフスタイル写真を駆使し、抑制されたエレガントなビジュアルシステムが必要です。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック(エージェント用) ↗

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