厳選・オープン・無料
Neutra Vdl
歴史的な建築ランドマークの、静謐なエディトリアルプレゼンテーション。
EditorialCurationStudioPremiumClean
01
デザイン DNA
文化歴史建築ミニマル洗練
中世の建築モノグラフをウェブに持ち込んだもの。
02
カラー
#1E1E1EInk
#F7F4EFBG
#808080Muted
rgba(0,0,0,0.2)Line
温かみのあるオフホワイト背景とほぼ黒のインクを使用した、高コントラストの近単色パレット。
03
タイポグラフィ
grotesque-sans · monospace
- display
67px · 400 - body
18px · 400 - caption
12px · 400
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
一貫したline-heightとテキストブロック間の垂直marginにより、垂直リズムを維持しています。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
コンテンツブロックの区切りには細い実線を、リンクやナビゲーション要素にはアンダーラインを使用しています。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
大きなタイポグラフィ要素と広い余白を活かした、広いグリッドベースのレイアウト。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
フェードイン · 不透明度の変化
インタラクティブなテキスト要素に対する、繊細な不透明度や色の変化。 · すべてのクリック可能な要素に対する標準ポインターカーソル。
08
コンポーネント
- button 背景や境界線を持たないテキストベースのリンク。
- card 細い水平線で区切られたコンテンツブロック。
- chip なし
- input なし
- hero 明確な水平線を伴う、大きく印象的なタイポグラフィヘッダー。
09
文体と禁止事項
- トーン 教育的、洗練され、プロフェッショナル。
- 見出し 直接的で事実に基づいた、大きく、トラッキングを詰めたタイポグラフィを使用。
- CTA レイアウトに自然と統合される、控えめなテキストリンク。
- 角丸を使用しない — スクリーンショットは厳密な直線的でエッジの锐いレイアウトを示しています。
- ドロップシャドウを使用しない — スクリーンショットは奥行き効果のないフラットな2D要素を示しています。
- アクセントカラー(主調色)を使用しない — スクリーンショットは単一の支配的な色相を持たない単色パレットを示しています。
- 中央揃えレイアウトを使用しない — スクリーンショットは左揃えのテキストと要素を示しています。
- 密集した複数カラムのテキストを使用しない — スクリーンショットは広いマージンとブロック間の明確な区切りを示しています。
- 装飾的なボーダーを使用しない — スクリーンショットは単純で機能的な水平線のみを示しています。
- 避ける: 遊び心のある言葉
- 避ける: 明るい色
- 避ける: 装飾的な要素
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このデザインは、文化遺産サイトに対する洗練されたエディトリアルアプローチを示しています。温かみのあるオフホワイト背景(#F7F4EF)とほぼ黒のインク(#1E1E1E)を使用した高コントラストの近単色パレットが特徴です。タイポグラフィは、すべてのスケールで単一のグロテスクサンセリフカテゴリーを使用し、非常に大きく、トラッキングを詰めたディスプレイサイズを特徴としています。重要な禁止事項:明るいアクセントカラー、角丸、ドロップシャドウの使用は避けてください。レイアウトは厳密に左揃えとし、サイトの静謐で集中した特質を維持するために、広い余白を活用してください。
en · zh-CN · zh-TW · ja · ko