厳選・オープン・無料

Gretel

峻厳なコントラスト、惜しみない余白、大規模なタイポグラフィで定義されるハイエンド・デザインスタジオのポートフォリオ。

01

デザイン DNA

作品が息をし、自ら語るのを許すミニマルなギャラリー。

02

カラー

写真とタイポグラフィへの最大限の集中を保証するための厳格なモノクローム。

03

タイポグラフィ

humanist-sans

• display75px · 400
• heading39px · 400
• body16px · 400

大きなディスプレイテキストには、詰めた負の文字間隔を使用。 · 小さな本文テキストの可読性のために、高いline height（1.7）を維持。 · boldウェイトは避け、单一ファミリーのサイズとウェイトの変化に頼る。

04

余白

8pxの基本リズムと、主要セクション間の広大な垂直マージン。

05

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

UIボーダーは不要。分離は完全に余白によって処理。

06

レイアウト

左揃えのテキスト列と右揃えのフルブリードまたはインセット画像を持つ不釣り合いなグリッド。

07

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

Opacityフェードイン · 精微なtransform translate · スムーズなhoverトランジション

リンクと画像の精微なopacity低減。 · 重いバウンスのない即時フィードバック。

08

コンポーネント

• button 精微なopacityや色のトランジションを持つミニマルなテキストリンク。
• card 大きなタイポグラフィとエッジツーエッジの画像を持つギャラリー様プロジェクトカード。
• hero 大きな上下のpaddingを伴い、ビューポートを支配する大規模な左揃えタイポグラフィ・ステートメント。

09

文体と禁止事項

• トーン 自信に満ち、権威があり、少し詩的。
• 見出し 詰めた文字間隔と文頭大文字の宣言的ステートメント。
• CTA 目立つボタンコンテナのない控えめなテキストリンク。

• ドロップシャドウを使用しない — スクリーンショットは高さを感じさせる完全にフラットな表面を示している。
• 装飾的なボーダーを追加しない — スクリーンショットは余白のみによる分離を示している。
• 大きな本文コピーを中央揃えにしない — スクリーンショットは強力な左揃えの読書重力を示している。
• カラフルなアクセントを使用しない — スクリーンショットは厳格な白黒パレットを示している。
• 角丸を使用しない — スクリーンショットは鋭角な90度の角またはエッジツーエッジの画像を示している。
• 重いフォントウェイトを使用しない — スクリーンショットは全体のUIを支配するRegular（400）ウェイトを示している。
• 避ける: 過度の感嘆符
• 避ける: マーケティング用語
• 避ける: 雑然としたレイアウト

10

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

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

11

System Prompt

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