厳選・オープン・無料
Urbanwoodsystems
大胆なタイポグラフィとニュートラル・パレットを用いた、グリッドベースのハードウェア・プロダクトサイト。
HardwareCleanProductGeometricMinimal
01
デザイン DNA
プレミアムインダストリアルミニマルアーバンファンクショナル
ミニマルなスイスのデザインマガジンとハイエンドハードウェアカタログの融合。
02
カラー
#000000Ink
#E6E6DDBG
rgba(0,0,0,0.1)Line
暖かみのあるニュートラル背景を用いた、高コントラストのモノクローム・パレット。
03
タイポグラフィ
grotesque-sans
- display
140px · 500 - body
11px · 500
テキストはすべて厳密にmedium weight(500)で設定。 · 全要素で狭い字間(-0.1pxから-2px)を採用。 · フォントウェイトの変化はなく、階層はスケルトンの巨大なスケール差のみで構築。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
厳密な4pxグリッドを採用し、インタラクティブ要素周辺のパディングは最小限に抑える。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
標準の1pxシステムデフォルト以外に目立つボーダーは不要。レイアウトとスペーシングのみに完全に依存。
06
レイアウト
1440container
12columns
24pxgutter
768 / 1024breakpoints
デスクトップ向けの非対称2カラムグリッド。モバイルでは単一カラムにスタック。
07
モーションとインタラクション
0msmicro
200mssmall
0msmedium
lineareasing
インタラクティブ要素のカラー変化(0.2秒)。 · 複雑な出現アニメーションやモーションパターンは不可視。
クリック可能要素に標準ポインターカーソルを設定。 · 特になし。
08
コンポーネント
- button 主要なナビゲーションハブとして機能する、大きな白い円形コンテナ。
- card なし。ナビゲーションは大きな幾何学的形状で実現。
- chip なし。
- input なし。
- hero 片側に大きなプロダクト写真、もう片側に巨大なタイポグラフィブロックを配置した非対称スプリットレイアウト。
09
文体と禁止事項
- トーン 自信に満ち、控えめで、機能的。
- 見出し 巨大で、大胆で、字間が極めて狭い。
- CTA 大きな幾何学的ナビゲーションハブの中に、巧みに統合された控えめなスタイル。
- ライトウェイトやシンフォントウェイトを使用しない — スクリーンショットでは全テキストがweight 500で表示されている。
- 表面にドロップシャドウや奥行きを追加しない — スクリーンショットでは完全にフラットな要素が使用されている。
- 純白の背景を使用しない — スクリーンショットでは暖かみのあるニュートラル(#E6E6DD)が使用されている。
- ボタンに複雑なボーダーラディウスを使用しない — スクリーンショットでは大きなピル/円形(300px半径)が使用されている。
- 明るいまたは多色のアクセントパレットを使用しない — スクリーンショットは黒インクを用いた厳密なモノクロームである。
- ワイドまたはリラックスした字間を使用しない — スクリーンショットではタイトで圧縮されたタイポグラフィが使用されている。
- 避ける: 過度な形容詞やマーケティング的誇張表現。
- 避ける: 複雑な多段階ナビゲーションメニュー。
- 避ける: 派手なネオンカラースキーム。
- 避ける: 装飾的要素や不必要なUI装飾。
- 避ける: イタリック体やスクリプト書体。
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはハイエンド自転車ハードウェアのためのミニマルでプレミアムなプロダクトサイトです。大胆でインダストリアルな美学を用いており、暖かみのあるニュートラル背景(#E6E6DD)と深黒インク(#000000)を採用。タイポグラフィはmedium-weight(500)のグロテスクサンセリフフォント(Unica77)のみを使用し、見出しには巨大なディスプレイサイズ(最大140px)、本文テキストには非常に小さなサイズ(11px)を用いることで、鮮明な階層的コントラストを生み出しています。重要な制約として、フォントウェイトは500以外を一切使用せず、派手なアクセントなしの厳密なモノクローム・パレットを維持し、表面はシャドウなしの完全にフラットな状態を保つことが挙げられます。ナビゲーションは、従来のメニューではなく、大きな白色の円形ハブによって実現されます。
en · zh-CN · zh-TW · ja · ko