厳選・オープン・無料

Tokyo Uk

インテリジェンスによって支えられる、デジタル体験のエンジニアリング。

01

デザイン DNA

シネマティックな映像表現と巨大なタイポグラフィを通じて、大胆な作品を紹介するプレミアム・デジタルエージェンシー。

02

カラー

複雑なカラーシステムではなく、大胆なタイポグラフィと大規模なフォトグラフィに依存する、鮮明なハイコントラスト・パレット。

03

タイポグラフィ

geometric-sans

• display400px · 500
• h140px · 400
• body16px · 400

ヒーローテキストはビューポート幅を埋めるように動的にスケーリング · 本文テキストは約680pxの快適な阅读幅を維持 · ナビゲーションやサブタイトルにはライトウェイト（300）を使用

04

余白

120pxのトップパディングとグリッドアイテム間80pxの間隔による、ゆったりとしたホワイトスペース。

05

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

目立つボーダーはなし。区切りには画像コントラストとホワイトスペースを活用。

06

レイアウト

フルブリードのヒーローに続く、プロジェクト展示用のレスポンシブ2カラムグリッド。

07

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

テキストリンクのhoverトランジション

テキストリンクやナビゲーションに対する、繊細な透明度や色のトランジション。 · インタラクティブ要素に対する標準のポインターカーソル。

08

コンポーネント

• button 明示的なボタン形状を持たない、ミニマルなテキストベースのナビゲーション。
• card シンプルなテキスト説明を下に配置した、大きな画像ベースのプロジェクトカード。
• hero シネマティックなフルビューポートの背景画像に、巨大なオーバーレイテキスト。

09

文体と禁止事項

• トーン 自信に満ち、プロフェッショナルで、控えめ。
• 見出し ビューポートを支配する、巨大な全大文字または太字サンセリフのステートメント。
• CTA 目立つボタンよりも、控えめなテキストリンク。

• カラフルなアクセントは使用しない — スクリーンショットでは厳格な白黒パレットが示されている。
• カードにドロップシャドウを追加しない — スクリーンショットではフラットな画像ベースのカードが示されている。
• セリフフォントを使用しない — スクリーンショットでは統一された幾何学的サンセリフファミリーが示されている。
• ヒーローにUI要素を雑然とさせない — スクリーンショットでは巨大なテキストと背景画像のみが示されている。
• 見出しに小さなタイポグラフィを使用しない — スクリーンショットでは画面を埋める巨大なディスプレイテキストが示されている。
• 明示的なボタン形状を使用しない — スクリーンショットではミニマルなテキストベースのナビゲーションが示されている。
• 避ける: 雑然としたレイアウト
• 避ける: 装飾的なグラフィック
• 避ける: 目立つcall-to-actionボタン

10

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

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

11

System Prompt

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