厳選・オープン・無料

Thebeamslondon

実験的なタイポグラフィ主導の文化的会場アイデンティティ。

01

デザイン DNA

視覚コミュニケーションの境界を探求する、現代的なギャラリープログラム。

02

カラー

厳格なモノクロームパレットで、最大限のビジュアルインパクトのためにハイコントラストな黒と白に依存します。

03

タイポグラフィ

neue-haas-grotesk

• display160px · 400
• heading38px · 400
• body19px · 400

ディスプレイサイズでは、タイトなネガティブトラッキングを使用します。 · すべてのスケールで均一なフォントウェイト400を維持します。 · ディスプレイテキストでは行高をコンパクトに保ち、较小なサイズでは読みやすさのために広めに保ちます。

04

余白

構造化された4pxベースグリッドで、大きなタイポグラフィ要素に対応するためにスケールアップします。

05

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

細い1ピクセルの黒い線が、セクションを分離し、入力フィールドを定義するために使用されます。

06

レイアウト

最小限のエッジツーエッジグリッドで、従来のコンテンツブロックよりも大きなタイポグラフィ要素を優先します。

07

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

繰り返しテキストのための連続的な水平マーキースクローリング。 · インタラクティブ要素の微妙な可視性遷移。

微妙な不透明度または色の変化。 · 直接ナビゲーションまたはフォーム送信。

08

コンポーネント

• button '>'接尾辞を付いた、最小限のテキストベースリンク。
• card 存在せず、レイアウトはフルワイドセクションを使用します。
• chip 存在しません。
• input ボトムボーダーのみの単一行テキスト入力。
• hero フレーズを垂直に繰り返して構造パターンを形成する、巨大なタイポグラフィ処理。

09

文体と禁止事項

• トーン 直接的で、自信に満ち、芸術的です。
• 見出し タイポグラフィにビジュアル作業を任せる、簡潔でインパクトのあるステートメント。
• CTA 控えめで機能的、シンプルなテキストリンクを使用。

• 複数の色を使用しないでください — スクリーンショットは厳格なモノクロームパレットを示しています。
• 要素にボーダーラジウスを追加しないでください — スクリーンショットは鋭く四角い角を示しています。
• セリフフォントを使用しないでください — スクリーンショットはNeue Haas Groteskの一貫した使用を示しています。
• ドロップシャドウやソフトな深度効果を使用しないでください — スクリーンショットはフラットな平面に依存しています。
• 小さなコンポーネントでレイアウトを雑然とさせないでください — スクリーンショットは大きく開かれた空間を使用しています。
• 遊び心のあるまたは装飾的なアイコングラフィを使用しないでください — スクリーンショットは'+'や'>'のような必須シンボルのみを使用しています。
• 避ける: 装飾要素
• 避ける: カラフルなグラデーション
• 避ける: 角丸
• 避ける: 重いシャドウ
• 避ける: セリフフォント
• 避ける: 絵文字や遊び心のあるアイコン

10

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

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

11

System Prompt

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