厳選・オープン・無料

Transformfestival

大胆なエディトリアルタイポグラフィとシネマティックな写真を用いた、国際的なパフォーミングアーツフェスティバル。

01

デザイン DNA

大胆な演劇のポスターとクリーンなエディトリアルマガジンの融合。

02

カラー

ハイコントラスト：暖かみのある、ややオフホワイトのキャンバスに深いブラックのインクを配置し、1つのエレクトリックピンクのアクセントで点睛を添える。

03

タイポグラフィ

geometric-sans

• display80px · 900
• heading56px · 800
• subhead24px · 800
• body18px · 400

強調やナビゲーションリンクには大文字を使用。 · 大きなディスプレイテキストにはトラッキングを詰め、インパクトを維持。 · ディスプレイテキストと本文テキストの間で、高いウェイトコントラストを維持。

04

余白

一貫したパディングとギャップの倍数を通じて確立された、明確な垂直リズム。

05

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

ボーダーは最小限に抑え、区切りには主に太字のタイポグラフィと画像のコントラストに依存。

0 4px 24px rgba(0, 0, 0, 0.1)

06

レイアウト

フル幅のヒーローに続き、マルチカラムのカードグリドが続き、太字のタイポグラフィセクションへと導く。

07

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

インタラクティブ要素上の滑らかなカラートランジション。 · ボタンやカードに対する、ホバー時の微妙なトランスフォーム。

ボタンやリンクに対する、即座の色反転または背景シフト。 · 軽微なトランスフォームまたはスケール効果による触覚フィードバック。

08

コンポーネント

• button 大文字テキストを含む、ハイコントラストな塗りつぶし矩形。
• card 目立つ画像、太字のヘッドライン、シンプルな矢印アイコンによるナビゲーションを持つ、クリーンでボーダーレスなカード。
• chip ナビゲーションや小さなラベルに使用され、大文字で表記されることが多い。
• input 最小限のボーダーを持つクリーンなテキストフィールド。
• hero 巨大で重みのあるタイポグラフィをオーバーレイした、フルブリードのシネマティックな写真。

09

文体と禁止事項

• トーン 自信に満ち、インパクトがあり、直接的。
• 見出し 巨大で重みのあるタイポグラフィで設定された、短く力強いステートメント。
• CTA 背景から際立つ、明確な大文字のコマンド。

• プライマリUI要素に角丸を使用しない — スクリーンショットはシャープな矩形形状を示しています。
• 複数の競合するアクセントカラーを使用しない — スクリーンショットはピンクと紫色が支配的な明確な階層を示しています。
• ヘッドラインに薄い、細いフォントウェイトを使用しない — スクリーンショットはすべて太く、ボールドなウェイトを示しています。
• 幅広または不規則なプロポーションのサンセリフフォントを使用しない — スクリーンショットは非常に幾何学的で、タイトなタイポグラフィを示しています。
• 複雑で多層的なシャドウを使用しない — スクリーンショットは定義に平坦なカラーとシャープなエッジに依存しています。
• グレーをプライマリ背景として使用しない — スクリーンショットは代わりに暖かみのあるオフホワイト（#F4EDE9）を示しています。
• 避ける: 曖昧な言葉
• 避ける: 微妙または装飾的な要素
• 避ける: 低コントラストなカラーコンビネーション

10

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

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

11

System Prompt

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