厳選・オープン・無料

Urbanwoodsystems

大胆なタイポグラフィとニュートラル・パレットを用いた、グリッドベースのハードウェア・プロダクトサイト。

01

デザイン DNA

ミニマルなスイスのデザインマガジンとハイエンドハードウェアカタログの融合。

02

カラー

暖かみのあるニュートラル背景を用いた、高コントラストのモノクローム・パレット。

03

タイポグラフィ

grotesque-sans

• display140px · 500
• body11px · 500

テキストはすべて厳密にmedium weight（500）で設定。 · 全要素で狭い字間（-0.1pxから-2px）を採用。 · フォントウェイトの変化はなく、階層はスケルトンの巨大なスケール差のみで構築。

04

余白

厳密な4pxグリッドを採用し、インタラクティブ要素周辺のパディングは最小限に抑える。

05

サーフェス (角丸 / 影 / 罫線)

標準の1pxシステムデフォルト以外に目立つボーダーは不要。レイアウトとスペーシングのみに完全に依存。

06

レイアウト

デスクトップ向けの非対称2カラムグリッド。モバイルでは単一カラムにスタック。

07

モーションとインタラクション

インタラクティブ要素のカラー変化（0.2秒）。 · 複雑な出現アニメーションやモーションパターンは不可視。

クリック可能要素に標準ポインターカーソルを設定。 · 特になし。

08

コンポーネント

• button 主要なナビゲーションハブとして機能する、大きな白い円形コンテナ。
• card なし。ナビゲーションは大きな幾何学的形状で実現。
• chip なし。
• input なし。
• hero 片側に大きなプロダクト写真、もう片側に巨大なタイポグラフィブロックを配置した非対称スプリットレイアウト。

09

文体と禁止事項

• トーン 自信に満ち、控えめで、機能的。
• 見出し 巨大で、大胆で、字間が極めて狭い。
• CTA 大きな幾何学的ナビゲーションハブの中に、巧みに統合された控えめなスタイル。

• ライトウェイトやシンフォントウェイトを使用しない — スクリーンショットでは全テキストがweight 500で表示されている。
• 表面にドロップシャドウや奥行きを追加しない — スクリーンショットでは完全にフラットな要素が使用されている。
• 純白の背景を使用しない — スクリーンショットでは暖かみのあるニュートラル（#E6E6DD）が使用されている。
• ボタンに複雑なボーダーラディウスを使用しない — スクリーンショットでは大きなピル/円形（300px半径）が使用されている。
• 明るいまたは多色のアクセントパレットを使用しない — スクリーンショットは黒インクを用いた厳密なモノクロームである。
• ワイドまたはリラックスした字間を使用しない — スクリーンショットではタイトで圧縮されたタイポグラフィが使用されている。
• 避ける: 過度な形容詞やマーケティング的誇張表現。
• 避ける: 複雑な多段階ナビゲーションメニュー。
• 避ける: 派手なネオンカラースキーム。
• 避ける: 装飾的要素や不必要なUI装飾。
• 避ける: イタリック体やスクリプト書体。

10

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

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

11

System Prompt

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