厳選・オープン・無料

Cthdrl

大胆なダークテーマのエージェンシー・ポートフォリオ。巨大なタイポグラフィとモノスペースの詳細を駆使し、戦略的な洗練さを表現しています。

01

デザイン DNA

デジタルブランド向けの高級建築スタジオ。

02

カラー

厳格なハイコントラスト・モノクローム。深黒の背景に、温みのあるオフホワイトのインクを用います。

03

タイポグラフィ

grotesque-sans · monospace

• display121px · 400
• body11px · 400
• caption32px · 400

04

余白

コンテンツ領域を明確に定義する、ゆったりとした水平および垂直パッディング。

05

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

薄く1pxのボーダーを、ヘッダーや下線に最小限に使用します。

06

レイアウト

非対称な分割画面およびマルチカラム・グリッド・レイアウト。

07

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

ページ読み込み時の、穏やかな透明度フェードとトランスフォーム・スライド。

最小限の視覚変化。主にカラー変化や透明度の変動。 · 標準的なリンク動作。

08

コンポーネント

• button 最小限のテキストベースリンク。大文字で、時には下線付き。
• card 伝統的なカードは使用しません。コンテンツはモジュール形式のグリッドで配置されます。
• chip 該当なし
• input 該当なし
• hero 幾何学的な背景ライングラフィックを備えた、フルワイドの巨大なタイポグラフィ。

09

文体と禁止事項

• トーン 権威があり、知的で、未来的な視点を持つ。
• 見出し すべて大文字、高集約または tighten tracking を施した巨大な書体。
• CTA 控えめな大文字テキストリンク。時にはモノスペース風。

• 角丸を使用しない — スクリーンショットでは鋭角で radius 0 のエッジを確認できます。
• 明るく彩度の高いアクセントカラーを使用しない — スクリーンショットでは厳格なモノクローム・パレットを確認できます。
• 通常の文章大小（Sentence-case）の本文を使用しない — スクリーンショットでは大文字（Uppercase）が広範囲に使用されています。
• 小さく密度の高い段落に依存しない — スクリーンショットでは、巨大で独立したタイポグラフィ・ステートメントが使用されています。
• 装飾的またはスクリプト系のフォントを使用しない — スクリーンショットでは厳密に構造化されたグロテスク・サンスやモノスペース・フォントが使用されています。
• カードやボタンなどの複雑なUIコンポーネントを使用しない — スクリーンショットではクリーンでモジュール形式のタイポグラフィに依存しています。
• 避ける: 陳腐な表現
• 避ける: 営業的な用語
• 避ける: 非公式な言葉遣い
• 避ける: 遊び心のあるカラー
• 避ける: 重厚なUI要素

10

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

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

11

System Prompt

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