厳選・オープン・無料
July Fund
大型のセリフ表示タイポグラフィと清潔なカードベースレイアウトを持つ、洗練されたエディトリアルスタイルのベンチャーキャピタル基金ウェブサイト。
EditorialCurationCleanRefinedConsumer
01
デザイン DNA
ベンチャーキャピタル投資エディトリアル洗練されたキュレーション
クラシックなエディトリアルタイポグラフィと清潔なデジタルカードレイアウトを融合させた、モダンでキュレーションされた投資ジャーナル。
02
カラー
#56D270Accent
#433E3CInk
#EEE7E5BG
#F0E7E4BG soft
#9A9390Muted
rgba(67, 62, 60, 0.1)Line
インタラクティブ要素やタグ用に、明るいグリーンアクセントを1つ配置した、暖かみのある控えめなニュートラルパレット。
03
タイポグラフィ
didone-serif · humanist-sans
- display
56px · 400 - h2
36px · 400 - body
16px · 400 - small
10px · 700
小さなUI要素やバッジには、広い文字間隔の大文字を使用。 · 本文テキストは、十分な行高で高い可読性を維持。 · 大型ディドンセリフは、プライマリ表示テキストに限定して使用。
04
余白
4px
8px
12px
16px
20px
24px
32px
40px
60px
4pxの基本単位により、すべてのカードコンポーネントで一貫したパディングを確保。
05
サーフェス (角丸 / 影 / 罫線)
sm · 8px
md · 12px
lg · 20px
pill · 999px
カードに目立つハードボーダーはなし。奥行きは背景のコントラストと広めの角丸で作成。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
デスクトップではカードのマルチカラムメーソングリッド、モバイルでは単一カラムにスタック。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover時のCSS background-colorおよびtransformトランジション · ページ表示時の滑らかなopacityトランジション
背景色トランジションと微細な要素シフト。 · インタラクティブ要素全体で標準カーソルポインターコンテンション。
08
コンポーネント
- button 大文字テキスト、1pxボーダー、透明背景のピル型ボタン。
- card ライトモードとダークモードなどの微細な背景シフトと中央揃えテキストを持つ角丸コンテナ。
- chip 緑や紫などの鮮やかな色の小さなピルバッジ。大文字で広い文字間隔のテキスト。
- input 提供されたビューでは目立って使用されていません。
- hero 暖かみのあるニュートラル背景上に、短い説明段落を中央揃えで配置した大型セリフロゴ。
09
文体と禁止事項
- トーン 権威がありながらも親しみやすい、ハイエンドフィナンスとモダンテクノロジーを融合。
- 見出し 大型のクラシックセリフロゴと小文字のニュースタイトル。
- CTA 控えめな、大文字の、薄いボーダーを持つピル型ボタン。
- 鋭い角を使用しない — スクリーンショットではカードに20pxの広めの角丸が使用されている。
- 本文テキストに全て大文字を使用しない — スクリーンショットでは全て大文字は小さなバッジや日付に限定されている。
- 強いドロップシャドウを使用しない — スクリーンショットでは背景色コントラストで定義されるフラットなサーフェスが使用されている。
- クールで無機質なブルーパレットを使用しない — スクリーンショットでは温かみのあるアース系ニュートラルとグリーンアクセントが使用されている。
- ディスプレイテキストにグロテスクサンセリフを使用しない — スクリーンショットではクラシックなディドンセリフが使用されている。
- ハイコントラストで複数色のグラデーションを使用しない — スクリーンショットではソリッド背景と時折のソフトな画像テクスチャが使用されている。
- 避ける: 複数の競合する色でインターフェースを煩雑にしない。
- 避ける: プライマリヘッドラインにモダンサンセリフを使用しない。
- 避ける: コンテナに鋭く角張った角を使用しない。
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
このデザインシステムは、洗練されたエディトリアルスタイルのベンチャーキャピタル基金ウェブサイトを表しています。暖かみのある控えめなニュートラルパレット(#EEE7E5背景、#433E3Cインク)を基調とし、ステータスバッジやタグ用の鮮やかなグリーンアクセント(#56D270)で対比させています。タイポグラフィは、表示要素用の大型でエレガントなディドンセリフと本文用の清潔なヒューマニストサンセリフが主体です。レイアウトは、20pxの広めの角丸を持つカードベースのグリッドで構成され、奥行きはシャドウではなく背景色のシフトに依存しています。ボタンは控えめで、ピル型、大文字です。重要な注意点:角を鋭くしない、強いドロップシャドウを適用しない、大型ディスプレイヘッドラインにモダンサンセリフを使用しないこと。
en · zh-CN · zh-TW · ja · ko