厳選・オープン・無料
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 · アンダーラインは、アクティブ/選択された製品状態を示す · ナビゲーションは文頭大文字(sentence case)を使用し、装飾的なスタイルは無し
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
文体と禁止事項
- トーン 直接的、機能的、ミニマル
- 見出し 文頭大文字で表記された、シンプルな製品名。ピリオド付き。
- CTA 控えめな「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