厳選・オープン・無料

Config Figma

遊び心のある抽象アートと高コントラストのダークモードを特徴とする、大胆で実験的なカンファレンスイベントサイト。

01

デザイン DNA

太字のタイポグラフィと高コントラストの抽象アートを用いた、遊び心のある実験的なデザインカンファレンスサイト。

02

カラー

鮮やかで彩度の高いグラフィックアクセントを持つ、高コントラストのダークモード基盤。

03

タイポグラフィ

grotesque-sans · monospace

• display80px · 400
• h132px · 400

ナビゲーションおよびUI要素では、テキストは基本的に大文字です。 · 大きな文字サイズには、大きなネガティブ文字間隔を適用しています。

04

余白

パディングおよび間隔に4pxの基本単位を一貫して使用しています。

05

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

インタラクティブボーダーには、1px solid rgba(255, 255, 255, 0.24)を使用。

06

レイアウト

左揃えのテキストコンテンツと、右揃えの抽象的なグラフィック構図を組み合わせたレイアウト。

07

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

標準的な色や背景の変化には、150msのスムーズなトランジション。 · 複雑な要素には、500msのより長いトランスフォームトランジション。

標準的なCSSトランジションによる色の変化。 · 標準的なポインタインタラクション。

08

コンポーネント

• button 1pxボーダーを持つ大文字テキストリンク、または塗りつぶしの反転ボタン。
• card 装飾要素として使用される、オーバーラップする抽象的なグラフィックブロック。
• chip 大文字スタイルのテキストベースナビゲーションリンク。
• input ミニマルでフラットなテキスト入力（あまり目立たせない）。
• hero 左側に大きなタイポグラフィのエラーメッセージ、右側に積み重なった抽象アートを持つ分割レイアウト。

09

文体と禁止事項

• トーン 率直で明確、かつ飾り気のない。
• 見出し 大きな、大文字または太字のサンセリフステートメント。
• CTA ボーダー付きの大文字テキストリンク。

• 柔らかく落ち着いたパレットは使用しない — スクリーンショットは鮮やかなシアン、緑、オレンジ、黄のグラフィックを持つ、高コントラストの黒背景を示しています。
• セリフまたは装飾的なフォントは使用しない — スクリーンショットはクリーンで幾何学的なグロテスクサンセリフのタイポグラフィを示しています。
• 柔らかなドロップシャドウは使用しない — スクリーンショットは奥行き効果のない、フラットでオーバーラップするグラフィック要素を示しています。
• ナビゲーションに小文字は使用しない — スクリーンショットはAGENDAやSPEAKERSなどのメニュー項目にすべて大文字テキストを使用しています。
• すべてのコンテンツを中央揃えにしない — スクリーンショットは左揃えのテキストレイアウトと右揃えのグラフィックを組み合わせています。
• 複雑な複数ステップのフォームは使用しない — スクリーンショットはミニマルで直接的なテキストリンクとボタンを示しています。
• 避ける: 浮いたマーケティングコピー
• 避ける: 過度に複雑な文章構造
• 避ける: セリフタイポグラフィ

10

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

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

11

System Prompt

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