厳選・オープン・無料
Idheal Fr
IDHEALは、大胆で構造的なタイポグラフィとクリーンなエディトリアルグリッドを用い、住宅・都市計画に関する研究を提示します。
EditorialTypographyCurationCleanGrid
01
デザイン DNA
InstitutFormationLogementRechercheIDHEAL
ハイエンドの学術誌、またはアート展覧会のカタログ
02
カラー
#FF00BCAccent
#000000Ink
#FFFFFFBG
#E5E5E5BG soft
#D9D9D9BG quiet
#51633CMuted
rgba(0,0,0,1)Line
高コントラストのモノクロームベースに、分類用のシャープでクロマティックなアクセント
03
タイポグラフィ
grotesque-sans · transitional-serif · monospace
- display
56px · 700 - body
16px · 400
UI要素と見出しにはHelvetica Neueを使用 · ナラティブ本文にはNew Century Schoolbookを使用
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
グリッドベースで、読みやすさのために一貫した垂直方向の間隔を確保
05
サーフェス (角丸 / 影 / 罫線)
sm · 10px
md · 15px
lg · 38px
pill · 999px
薄い1pxの実線(黒またはカラーボーダー)をチップに使用
4px 2px 4px rgba(0,0,0,0.2) · 2px -1px 6px rgb(237,237,237)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
巨大な文字がコンテンツセクションを分割する構造的グリッド
07
モーションとインタラクション
200msmicro
300mssmall
800msmedium
lineareasing
背景色やフォントサイズの変化に対するスムーズなトランジション
クリック可能な要素上の繊細な背景色の変化 · 即座の状態変化
08
コンポーネント
- button アウトライン付きピル形状。実線ボーダーと繊細なシャドウ。
- card 構造線で区切られたフラットなコンテンツブロック
- chip カラードットに小文字テキストを配置した丸みのあるピル
- input ミニマリスト。おそらくアウトラインまたはアンダーライン。
- hero 文字がビューポート全体にわたる巨大なタイポグラフィアレンジメント
09
文体と禁止事項
- トーン 学術的、権威的、かつ正確
- 見出し 太字、大文字、非常に構造的
- CTA シンプル、直接的、しばしば小文字または文頭のみ大文字
- プライマリコンテナに柔らかく丸い角を使用しない — スクリーンショットはシャープなエッジと厳格なグリッド線を示しています
- マルチカラーグラデーションの背景を使用しない — スクリーンショットは白、グレー、黒のフラットな実色ブロックを示しています
- 深度ために重いドロップシャドウを使用しない — スクリーンショットは非常に最小限の、方向性のあるシャドウ、あるいはなしを示しています
- センタリングされた、流れるようなレイアウトを使用しない — スクリーンショットは文字がカラムを作り出す厳格で非対称なグリッドを示しています
- プライマリヒーローブランドに小文字を使用しない — スクリーンショットは「IDHEAL」を全て大文字で示しています
- ナビゲーションを複雑なUIの背後に隠さない — スクリーンショットはアイコン付きのシンプルなハンバーガーメニューを示しています
- 避ける: 遊び心のある言葉
- 避ける: 過度な装飾要素
- 避ける: 雑然としたレイアウト
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
学術機関または研究機関のための、高度に構造化されたエディトリアルインターフェースをデザインしてください。太字でオーバーサイズのタイポグラフィがコンテンツとレイアウト構造の両方として機能する厳格なグリッドを使用してください。プライマリパレットはモノクローム(黒、白、#E5E5E5)で、ハイライト用に#FF00BCのようなシャープなアクセントカラーを配置します。タイポグラフィは、見出し用の太字のグロテスクサンズと本文用の洗練されたトランジショナルセリフを対比させてください。センタリングされたレイアウト、重いシャドウ、遊び心のあるまたは丸みのあるUI要素は避けてください。クリーンで高コントラストな、知的な美学を維持してください。
en · zh-CN · zh-TW · ja · ko