厳選・オープン・無料

DIA Studio

ハイコントラストでグリッドベースのエディトリアル・インターフェースを通じて、作品を紹介するデザインおよびイノベーション・スタジオ。

01

デザイン DNA

洗練された、タイポグラフィを重視した空間に設えられた、デザイン作品のキュレーションされたギャラリー。

02

カラー

作品を最大限に際立たせる、最大のコントラストとニュートラルな提示を優先した、厳格なモノクローム・パレット。

03

タイポグラフィ

transitional-serif

• display56px · 500
• body16px · 450

すべてのUI要素にセリフ書体（JJannon）を使用。 · タイトな行間（約1.1）を維持し、コンパクトで密度の高いタイポグラフィ感を実現。 · アクションやフィルターの区切りとして、角括弧を標準のUI区切りとして使用。

04

余白

密接にグリッドに連動した、最小限の垂直パディングを持つタイトな間隔。密度を優先。

05

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

目に見えるUIボーダーはなし。区切りはホワイトスペース、カラーのコントラスト、グリッドの配置によって実現。

06

レイアウト

異なるアスペクト比の画像が隙間なく配置された、厳格で密なメーソンリーグリッド・レイアウト。

07

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

ギャラリー項目のhover時のフェードイン/アウト

インタラクティブ性を示すための、画像サムネイルの微妙なopacity変化。 · プロジェクト・ページやカテゴリ・ビューへの直接ナビゲーション。

08

コンポーネント

• button 従来のボタンはなし。インタラクションは角括弧で囲まれたプレーンテキスト・リンクで処理。
• card プロジェクト・カードは、オーバーレイのない密でボーダーレスのグリッドに配置された、純粋なフォトグラフィックなサムネイル。
• chip カテゴリ・フィルターは、角括弧で囲まれたテキストベースのリスト・アイテム。
• input 検索は、角括弧で囲まれたシンプルなテキスト・プロンプトで表現。
• hero ヒーローセクションは単一の大画像ではなく、ビューポートの先頭から続く、途切れることのない作品のモザイク・グリッド。

09

文体と禁止事項

• トーン プロフェッショナルで、自信に満ち、かつ控えめ。
• 見出し 宣言的で率直。クラシックなセリフ書体を使用。
• CTA 控えめでタイポグラフィ重視。従来のボタンの代わりに角括弧を使用。

• 角丸の使用不可 — UIは厳格にシャープで長方形。
• 強いアクセントカラーの使用不可 — サイトは完全にモノクローム・パレットに依存。
• ボタン・コンポーネントの使用不可 — インタラクションは角括弧付きのテキスト・リンク。
• ドロップシャドウの使用不可 — UIは完全にフラット。
• サンセリフ書体の使用不可 — サイトは厳格にセリフベース。
• 大きな垂直ギャップを持つメーソンリーグリッドの作成不可 — グリッドは密接に詰め込まれている。
• 避ける: 遊び心のある言葉
• 避ける: 大げさなマーケティング・コピー
• 避ける: 過度な大文字使用
• 避ける: 絵文字や視覚的な飾り

10

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

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

11

System Prompt

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