厳選・オープン・無料

Thoughtlab

カテゴリファーストのブランド＋プロダクトスタジオ

01

デザイン DNA

市場カテゴリをデザインし、それを実証するためのフラッグシップデジタルプロダクトを構築する、ハイエンドのブランドコンサルタント。

02

カラー

単一の大胆な赤アクセントを持つ、高コントラクトのモノクローム基調。

03

タイポグラフィ

grotesque-sans

• display91px · 700
• h172px · 700
• h227px · 400
• body14px · 400

ディスプレイサイズではタイトなネガティブトラッキングを使用。 · テキストと背景の高いコントラクトを維持。 · 全テキストに厳密にグロテスク・サンセリフ（grotesque-sans）カテゴリを使用。

04

余白

一貫した4pxベースグリッドをパディングとマージンに使用し、ドラマチックなセクション区切りには大きな垂直間隔（例：198px、288px）を採用。

05

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

rgb(128, 128, 128) 0px 0px 5px 0px

06

レイアウト

テキストを左揃えにし、大きな図形要素（3Dオーブなど）を中央/右に配置する、フルワイドのヒーローセクション。

07

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

スクロールに連動した表示のための、滑らかなopacityとtransform遷移。 · 複雑な要素のための、遅いwidth/transformアニメーション。

控えめなopacityの変化やカーソルの変形。 · 状態変化による即時フィードバック。

08

コンポーネント

• button 高コントラートカラーのピル型プライマリボタン。
• card ミニマリストなカード。ボーダーレスまたは控えめなボーダーを使用。
• chip N/A
• input N/A
• hero 大規模なタイポグラフィと中央の3D抽象要素を持つ、フルビューポートのダークヒーロー。

09

文体と禁止事項

• トーン 権威、自信、そしてプレミアム。
• 見出し 直接的、断定的、そして大規模。
• CTA シンプルで行動を促す（例：「お問い合わせ」）。

• 明るい背景を使用しない — スクリーンショットでは、厳密にダーク（黒）の背景が示されています。
• 多様なカラーパレットを使用しない — スクリーンショットでは、黒、白、グレー、および赤のアクセントのみが使用されています。
• セリフフォントを使用しない — スクリーンショットでは、グロテスク・サンセリフタイポグラフィのみが使用されています。
• 小さく細いヘッドラインを使用しない — スクリーンショットでは、大規模で太字、タイトにトラッキングされたディスプレイテキストが使用されています。
• 複雑なボーダーまたはシャドウを使用しない — スクリーンショットでは、控えめで最小限のボーダーを持つフラットなサーフェスが使用されています。
• 過度に角丸を使用しない — スクリーンショットでは、主にシャープまたはごくわずかに角丸のエッジが使用されています。
• 避ける: 遊び心のある或いはカジュアルな言葉遣い。
• 避ける: 小さく控えめなタイポグラフィ。
• 避ける: 過度に複雑なナビゲーション。

10

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

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

11

System Prompt

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