厳選・オープン・無料

Wemakethings De

厳格なモノクロームグリッドで支えられた大胆なタイポグラフィによる表現。

01

デザイン DNA

産業用設計図面

02

カラー

絶対的な黒と白を使用した純粋なモノクロームバイナリシステム。

03

タイポグラフィ

geometric-sans

• display864px · 400
• heading80px · 500
• body24px · 400
• nav16px · 500

タイポグラフィは主要な構造的かつ表現的な要素 · 巨大な背景テキストは常にアウトライン表示でインタラクティブではありません · ナビゲーションリンクは大文字の幾何学的サンセリフ

04

余白

十分なpaddingを備えた厳格なグリッド

05

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

グリッド境界やアクティブ状態の下線を定義するために使用される、細い1pxの実線黒線

06

レイアウト

1pxの黒いボーダーで交差するフル幅セクション。技術的な設計図面グリッドを構築

07

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

滑らかなページトランジション · グリッドベースの固定スクロール効果

定義されたグリッドセル内で微妙な下線またはカラー反転 · 過度なフィードバックなしの即時状態変化

08

コンポーネント

• button 矢印インジケーターを備えたテキストベース、大文字の幾何学的サンセリフ、1pxボーダー処理
• card 細い黒いボーダーで定義されたグリッドセル
• chip なし
• input なし
• hero 巨大なアウトライン付き背景文字の上に重ねられた、巨大な大文字の太字タイポグラフィ

09

文体と禁止事項

• トーン 自信に満ち、直接的、権威があり、ミニマル
• 見出し ALL CAPS、太字、簡潔、大規模な幾何学的サンセリフ
• CTA 最小限の矢印インジケーターを備えた大文字テキスト、グリッドに統合

• グラデーションや複雑なシャドウを使用しない — スクリーンショットではフラットなモノクロームサーフェスが示されています
• 角丸を使用しない — スクリーンショットではすべての要素で厳格な0px半径が示されています
• 複数のフォントファミリーを使用しない — スクリーンショットでは幾何学的サンセリフのみが排他使用されています
• 明るいアクセントカラーを使用しない — スクリーンショットでは厳格な黒と白のパレットが示されています
• 小さく詰まったタイポグラフィを使用しない — スクリーンショットでは巨大で広大なディスプレイテキストが示されています
• 標準的なカードレイアウトを使用しない — スクリーンショットでは巨大なアウトライン付き背景タイプの上に直接テキストが重ねられています
• 避ける: 感嘆符
• 避ける: 浮ついたマーケティング表現
• 避ける: 柔らかい角丸UI要素
• 避ける: グラデーションフィル

10

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

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

11

System Prompt

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