厳選・オープン・無料

Serpentine

ドラマチックな白黒タイポグラフィとコンテンツ優先のレイアウトを備えた、洗練された、エディトリアルな博物館インターフェース。

01

デザイン DNA

大胆な建築タイポグラフィと穏やかな写真背景のバランスを取った、厳選されたギャラリースペース。

02

カラー

厳密な黒と白の要素を通じて、アートワークを優先する高コントラストのモノクロームパレット。

03

タイポグラフィ

geometric-sans · transitional-serif

• display56px · 700
• body16px · 400
• caption13px · 700

すべてのナビゲーションとUIラベルは、幾何学的サンセリフの大文字で設定する。 · 記事の段落は、可読性のためにトランジショナルセリフを使用する。 · 大きなディスプレイ見出しには、タイトなネガティブな文字間隔を維持する。

04

余白

大きなタイポグラフィ要素のクリーンなアライメントを保証する、一貫した4pxの基本単位。

05

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

鋭いエッジを維持するための、黒または白の厳密な1pxの実線ボーダー。

rgba(0,0,0,0.3) 0px 32px 68px 0px

06

レイアウト

フルブリードの写真ヒーローセクションに続く、構造化された、幅広のマージンを持つコンテンツブロック。

07

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

インタラクティブ要素上の滑らかなカラーと不透明度の遷移 · モーダルオーバーレイ用の標準的なリニアフェード

テキストリンク上の繊細な不透明度の変化または色の反転。 · 標準的なブラウザフォーカス状態を通じた即時視覚フィードバック。

08

コンポーネント

• button 実線の黒または白の塗りつぶしと大文字テキストを持つミニマリストな長方形。
• card 階層付けに大きなタイポグラフィに依存する、クリーンでボーダーレスな画像コンテナ。
• chip ナビゲーション用のシンプルな下線付きテキストタブ。
• input ボーダー下に重点を置いた標準的なフォームフィールド。
• hero オーバーサイズのタイポグラフィオーバーレイを持つ、高コントラストの写真背景。

09

文体と禁止事項

• トーン 権威があり、文化的に洗練され、ミニマリスト。
• 見出し 注意を引く、短く、パンチのある、全て大文字の命令形。
• CTA 装飾がなく、直接的で、プレーンテキストボタンまたはシンプルな矢印を使用。

• 角丸を使用しない — スクリーンショットはすべてのコンテナに厳格なシャープな0pxの角を示している
• 装飾的なスクリプトフォントを使用しない — スクリーンショットは、太字の幾何学サンとトランジショナルセリフのみを示している
• 遊び心のある、鮮やかなカラーを使用しない — スクリーンショットは厳格な高コントラストの白黒パレットを示している
• 重い影のあるボタンを使用しない — スクリーンショットは、シンプルなボーダーを持つフラットで実線塗りのボタンを示している
• 小さく隠れたナビゲーションを使用しない — スクリーンショットは、ヘッダー内に太字の大文字のテキストリンクを示している
• 密集した、ごちゃごちゃしたグリッドを使用しない — スクリーンショットは、豊富なホワイトスペースとフルブリードの写真を示している
• 避ける: 遊び心のある、または過度にカジュアルな言語を避ける。
• 避ける: 装飾的、またはスクリプトスタイルのフォントを避ける。
• 避ける: プライマリUI要素に角丸を避ける。
• 避ける: 鮮やかなカラーの過度な使用を避ける。
• 避ける: 標準ボタンにドロップシャドウを避ける。
• 避ける: ごちゃごちゃした、または密集したレイアウトを避ける。

10

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

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

11

System Prompt

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