厳選・オープン・無料
Wemakethings De
厳格なモノクロームグリッドで支えられた大胆なタイポグラフィによる表現。
EditorialBold TypographyMonochromeProductRestrained
01
デザイン DNA
精密性技芸ドイツエンジニアリングミニマリズム明瞭さ
産業用設計図面
02
カラー
#000000Ink
#FFFFFFBG
rgba(0,0,0,1)Line
絶対的な黒と白を使用した純粋なモノクロームバイナリシステム。
03
タイポグラフィ
geometric-sans
- display
864px · 400 - heading
80px · 500 - body
24px · 400 - nav
16px · 500
タイポグラフィは主要な構造的かつ表現的な要素 · 巨大な背景テキストは常にアウトライン表示でインタラクティブではありません · ナビゲーションリンクは大文字の幾何学的サンセリフ
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
十分なpaddingを備えた厳格なグリッド
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
グリッド境界やアクティブ状態の下線を定義するために使用される、細い1pxの実線黒線
06
レイアウト
1920container
12columns
24pxgutter
768 / 1024breakpoints
1pxの黒いボーダーで交差するフル幅セクション。技術的な設計図面グリッドを構築
07
モーションとインタラクション
220msmicro
400mssmall
600msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing
滑らかなページトランジション · グリッドベースの固定スクロール効果
定義されたグリッドセル内で微妙な下線またはカラー反転 · 過度なフィードバックなしの即時状態変化
08
コンポーネント
- button 矢印インジケーターを備えたテキストベース、大文字の幾何学的サンセリフ、1pxボーダー処理
- card 細い黒いボーダーで定義されたグリッドセル
- chip なし
- input なし
- hero 巨大なアウトライン付き背景文字の上に重ねられた、巨大な大文字の太字タイポグラフィ
09
文体と禁止事項
- トーン 自信に満ち、直接的、権威があり、ミニマル
- 見出し ALL CAPS、太字、簡潔、大規模な幾何学的サンセリフ
- CTA 最小限の矢印インジケーターを備えた大文字テキスト、グリッドに統合
- グラデーションや複雑なシャドウを使用しない — スクリーンショットではフラットなモノクロームサーフェスが示されています
- 角丸を使用しない — スクリーンショットではすべての要素で厳格な0px半径が示されています
- 複数のフォントファミリーを使用しない — スクリーンショットでは幾何学的サンセリフのみが排他使用されています
- 明るいアクセントカラーを使用しない — スクリーンショットでは厳格な黒と白のパレットが示されています
- 小さく詰まったタイポグラフィを使用しない — スクリーンショットでは巨大で広大なディスプレイテキストが示されています
- 標準的なカードレイアウトを使用しない — スクリーンショットでは巨大なアウトライン付き背景タイプの上に直接テキストが重ねられています
- 避ける: 感嘆符
- 避ける: 浮ついたマーケティング表現
- 避ける: 柔らかい角丸UI要素
- 避ける: グラデーションフィル
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このデザインシステムは、プレミアム自転車およびライフスタイルブランドにサービスを提供し、絶対的なモノクロームの抑制と巨大で自信に満ちたタイポグラフィを通じて自身をポジショニングしています。パレットは厳格にバイナリです:白背景(#FFFFFF)と絶対的な黒テキスト(#000000)、二次色やアクセントカラーは一切使用しません。タイポグラフィカテゴリーは幾何学的サンセリフのみで、 tinyなナビゲーションリンクから巨大な864px背景透かしまで、すべてのスケールで使用されます。レイアウトは細い1pxの黒いボーダーによる厳格なグリッドで定義され、技術的な設計図面を彷彿とさせます。重要な制約:角丸は絶対に使用しない(半径は常に0px)、カラーは絶対に導入しない(デザインは厳格にモノクローム)、柔らかいシャドウやグラデーションは絶対に使用しない。インタラクションモデルは微細であり、厳格な構造フレームワーク内での鋭く正確なトランジションと明確なビジュアル階層に依存しています。
en · zh-CN · zh-TW · ja · ko