厳選・オープン・無料

Nothing

タイポグラフィの精度とハイコントラストなUI要素に焦点を当てた、厳格なモノクロマティック・エステティック。

01

デザイン DNA

高精度な技術図面、またはラグジュアリーな産業部品

02

カラー

ニュートラルグレー・スケールを厳密に遵守した、ハイコントラストなモノクローム。

03

タイポグラフィ

geometric-serif · grotesque-sans · dot-matrix

• display-large40px · 400
• display-medium24px · 400
• body16px · 400
• caption11px · 400

04

余白

標準4px ベースグリッド

05

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

1px solid #E5E7EB

0px 0px 0px 1px rgba(229,231,235,1)

06

レイアウト

十分なpaddingを備え、垂直および水平方向に中央揃えされたモーダル。

07

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

opacityによるフェードイン/アウト · hover時の微妙なtransform

インタラクティブ要素におけるopacityまたは微妙なtransformの変化。 · すべてのクリック可能要素に標準のポインターカーソル。

08

コンポーネント

• button プライマリ: 白テキストのブラック塗りつぶしピル型。セカンダリ: 1px solidアンダーライン付きテキスト。
• card 微細な1pxボーダーとピル型ボタンを備えたモーダルコンテナ。
• chip 標準的なサンセリフ・スタイルのテキストベース・ラベル。
• input クリーンなラインを持つミニマリスト・テキスト入力。
• hero ディスプレイ・タイポグラフィが支配的な、中央揃え・垂直積み上げレイアウト。

09

文体と禁止事項

• トーン 情報を伝え、直接的。
• 見出し 短く、全大文字のステートメント。
• CTA 明確で、行動を促し、全大文字。

• 角丸コンテナを使用しない — スクリーンショットではピル型ボタン（radius: 9999px）とわずかに角丸のモーダルコーナー（6px-8px）が使用されている。
• 複数色を使用しない — スクリーンショットでは黒、白、および単一のニュートラルグレーからなる厳格なモノクロパレットが使用されている。
• 装飾的なサンセリフ・フォントを使用しない — スクリーンショットではディスプレイ用のジオメトリック・セリフと本文用の標準的なグロテスク・サンセリフが使用されている。
• 太いドロップシャドウを使用しない — スクリーンショットでは深度表現に微細なボーダーまたは非常に柔らかく拡散したシャドウが使用されている。
• 長い段落にセンタリングされたテキストを使用しない — スクリーンショットでは短いUIコピーに厳密にセンタリングが適用されている。
• プライマリCTAに小文字を使用しない — スクリーンショットではボタンとディスプレイ・テキストに全大文字が使用されている。
• 避ける: 曖昧な表現
• 避ける: 過度にフレンドリーまたはカジュアルな言葉遣い
• 避ける: 複雑な文章

10

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

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

11

System Prompt

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