厳選・オープン・無料

Peak Design

荒々しいアウトドア美学と洗練されたミニマリストデザインを融合した、ビジュアル主導の製品中心ブランド。

01

デザイン DNA

ハイエンドアウトドアギアカタログとモダンデザインポートフォリオの融合。

02

カラー

写真が主な色の源泉であり、UIはダークグレイとライトグレイのハイコントラストな中性の枠組みを提供します。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display40px · 700
• headline32px · 700
• body16px · 400

ボタンラベルとナビゲーションリンクには大文字のトラッキングを使用します。 · 大きなディスプレイ見出しには tightened ネガティブレタースペーシングを使用します。 · インクと背景要素の間には高いコントラスト比を維持します。

04

余白

一貫した4pxベースグリッドが全体のパディングとギャップに使用され、構造化されたレイアウトを保証します。

05

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

プライマリインクカラーを使用した、低不透明度の最小限の1px solidボーダーで、微細な分離を実現します。

0px 0px 4px 0px rgba(0, 0, 0, 0.04)

06

レイアウト

中央にコンテンツを持つフルブリード写真ヒーローと、製品リスト用の12カラムグリッド。

07

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

オーバーレイとモーダルのためのスムーズなopacityとvisibilityトランジション。 · hoverとクリック時のインタラクティブ要素のクイックなtransform（scale）トランジション。

微細なopacity変化またはbackground-colorシフト（0.2s cubic-bezier）。 · アクションに続く即座のtransform scale（0.15s ease-out）。

08

コンポーネント

• button ハイコントラストな単色背景（ホワイトまたはダーク）に大文字テキスト、広めのパディング（8px 16pxまたは12px 24px）。
• card 製品画像が主役となる、清潔でボーダレスなコンテナ。ミニマルなタイポグラフィでサポート。
• chip カテゴリやタグに使用される、ピル型要素（border-radius: 32px to 9999px）。
• input 1px solidボーダーとborder-radius 4pxを持つシンプルな矩形フィールド。
• hero フルブリードの高品質写真背景に、中央配置の大きなディスプレイテキストと目立つCTAボタン。

09

文体と禁止事項

• トーン 自信に満ち、直接的で、プレミアム。
• 見出し 太字、大文字、ハイコントラスト。
• CTA アクション重視、大文字、非常に読みやすい。

• マルチカラーグラデーション背景を使用しないこと — サイトはクリーンな単色（#FBFDFC）またはフルブリード写真に依存します。
• 装飾的なセリフフォントを使用しないこと — タイポグラフィは厳密に幾何学的およびヒューマニストサンスセリフです。
• 角の丸みが強く遊び心のあるコンポーネントを使用しないこと — ボタンとインプットは微細な4pxから8pxのborder-radiusを使用します。
• CTAに小さな低コントラストのテキストを使用しないこと — 見出しとボタンは太字、大文字、非常に読みやすいです。
• 複雑で多層的なシャドウを使用しないこと — エレベーションは単一の非常に微細なbox-shadowで処理します。
• 雑然としたごちゃごちゃしたレイアウトを使用しないこと — 全ての要素は広めの余白（16pxから24pxのギャップ）を持ちます。
• 避ける: 明るく人工的なアクセントカラーの過度な使用。
• 避ける: 写真と競合するごちゃごちゃしたレイアウト。
• 避ける: 遊び心を感じすぎる、角の丸い「泡泡」のようなUI要素。
• 避ける: インパクトのない小さな繊細なタイポグラフィ。
• 避ける: 複雑なグラデーションや装飾的な背景パターン。
• 避ける: 一貫性のないパディングや間隔。

10

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

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

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