厳選・オープン・無料

Hle

巨大なタイポグラフィを持つ、鮮烈なハイコントラストのダークキャンバス。人材とコンテンツのためのプレミアム軸としてポジショニング。

01

デザイン DNA

ラグジュアリーブランドのモノグラフ。

02

カラー

極端なコントラスト：近黒のフィールドに纯白のタイポグラフィ。セカンダリUI要素には控えめなグレーアクセントを使用。

03

タイポグラフィ

geometric-sans · monospace

• display118px · 400
• body15px · 400
• caption10px · 400

プライマリのサンセリフは幾何学的でクリーン、かつ非常に読みやすい。 · モノスペースフォントは特定のUI要素とラベルに使用。 · 全タイポグラフィはレギュラーウエイト（400）で設定。

04

余白

シンプルな4pxベースグリッドで全スペーシングを支配。セクションコンテナには豊かなパディング（40px-48px）を使用。

05

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

薄く低不透明度のホワイトボーダーや、ダークなソリッドボーダーを控えめに使用。

カードやボタンに、インセットとアウトセットシャドウを使った微細なニューモーフィック効果で奥行きを生み出す。 · シャドウはダーク背景に馴染むよう、低不透明度の黒とグレーを使用。

06

レイアウト

豊かなホワイトスペースと垂直リズムに焦点を当てた、クリーンなカラムベースレイアウト。

07

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

ヒーローヘッドラインにはタイプまたはリビールアニメーションが見られる。 · インタラクティブな状態にトランスフォームとトランジションが使用される。

インタラクティブ要素における、シャドウの深さやカラーの強度の微細な変化。 · ボタンやリンクにおける、微細なスケールまたはトランスフォーム効果。

08

コンポーネント

• button 微細なハイライトとシャドウを持つニューモーフィックダークボタン。しばしば50%のボーダー半径でピルシェイプに。
• card 微細なニューモーフィックシャドウと12pxのボーダー半径を持つダークカード。
• chip 提供されたスクリーンショットでは目立っていません。
• input 提供されたスクリーンショットでは目立っていません。
• hero フルスクリーンのダークヒーローセクション。巨大な左揃えのヘッドラインがタイプ出力または表示される形で支配。

09

文体と禁止事項

• トーン 自信に満ち、率直でミニマリスト。
• 見出し 巨大でbold、宣言的な「スタテメント」スタイル。
• CTA ニューモーフィックデザインシステムに統合された、控えめなもの。

• 明るく鮮やかなアクセントカラーを使用しない — スクリーンショットは厳密なモノクロームパレットを示しています。
• 装飾的なセリフフォントを使用しない — スクリーンショットは全テキストにクリーンな幾何学的サンセリフを示しています。
• 重く不透明なドロップシャドウを使用しない — スクリーンショットは微細なニューモーフィックシャドウ技術を示しています。
• 雑然としたレイアウトを作成しない — スクリーンショットは広大な余白を持つミニマリストでハイコントラストのデザインを示しています。
• boldまたは重いフォントウェイトを使用しない — スクリーンショットは全テキストがレギュラー（400）ウェイトであることを示しています。
• どこでも丸みのある柔らかい角を使用しない — スクリーンショットは鋭角と非常に丸みのある（50%）半径の混在を示しています。
• 避ける: カラフルなグラデーション
• 避ける: 遊び心のあるイラスト
• 避ける: 雑然としたレイアウト

10

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

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

11

System Prompt

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