厳選・オープン・無料

Cowboy

モノクロパレットと高品質な映像を用いた、アーバンEバイク会社のための洗練されたプレミアムブランドサイト。

ProductHardwareCalmRefinedClean
Cowboy のスクリーンショット
↓ デザインシステムをダウンロード (59 MB)OpenDesign で開く

オリジナル: https://cowboy.com

📦 パックの中身を見る →

01

デザイン DNA

プレミアムアーバンモビリティミニマリスト洗練されたライフスタイル

工業デザインとアーバンライフスタイルの写真を融合した、ハイエンドのヨーロッパ製Eバイクブランド。

02

カラー

#1D1D1DInk
#1D1D1D99Ink soft
#FFFFFFBG
#EBEAE7BG soft
#A3A3A3Muted
rgba(229, 231, 235, 1)Line

ブラックに近い色と白を主体とする厳格にニュートラルなパレット。セカンダリ要素やボーダーには精微なウォームグレーが使用されます。

03

タイポグラフィ

humanist-sans · monospace

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

4pxをベースユニットとする一貫したリズム。標準的なインクリメントを用い、主要セクションのパディングにはより大きな値（48px、64px）が使用されます。

05

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

sm · 4px
md · 8px
lg · 8px
pill · 9999px

入力フィールドや精微な区切り線に使用される、1px solid rgb(229, 231, 235)。

rgba(0, 0, 0, 0.1) 0px 10px 15px -3px · rgba(0, 0, 0, 0.06) 0px 1px 6px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

モーダルオーバーレイは、デスクトップで50/50の画像・テキストレイアウトに分割され、モバイルでは垂直にスタックされます。

07

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

100msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

色、背景、ボーダー変化のための滑らかなトランジション · マイクロインタラクションのための標準的なマテリアルスタイルイージング

インタラクティブ要素の上での、精微な色や背景のトランジション。 · 精微なトランスフォームや色の反転を伴う可能性のあるアクティブ状態。

08

コンポーネント

09

文体と禁止事項

10

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

Cowboy — 桌面首屏（hero）
桌面首屏（hero）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Cowboy — 移动首屏
移动首屏

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

11

System Prompt

これは、現代的なEバイク会社（Cowboy）のための、プレミアムで洗練されたブランドサイトです。デザインDNAはミニマリスティックで洗練されており、ブラックに近い色（#1D1D1D）とホワイト（#FFFFFF）からなる厳格にニュートラルなパレットを用い、ボーダーやセカンダリテキストには精微なウォームグレーが使われています。書体はクリーンなhumanist-sans（SuisseIntl）で、大きく、トレッキングを tight にしたヘッドラインが特徴です。主要なインタラクションは、ピルシェイプのボタンとクリーンで十分なパディングを持つフォーム入力で処理されます。レイアウトはフォーカスされ、余裕があり、しばしばセンタリングされます。重要な禁止事項：決して鮮やかなアクセントカラーを使用せず、決して鋭い角の四角形を使用せず、決して広いトレッキングまたは装飾的なタイポグラフィを使用しないこと。

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

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

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

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