精选 · 开放 · 免费
July Fund
一个精致、具有编辑风格的风险投资基金网站，采用大号衬线展示字体和简洁的基于卡片的布局。
EditorialCurationCleanRefinedConsumer
01
设计气质 DNA
风险投资投资编辑风格精致策展
一本融合经典编辑排版与简洁数字卡片布局的现代策展投资杂志。
02
色彩
#56D270Accent
#433E3CInk
#EEE7E5BG
#F0E7E4BG soft
#9A9390Muted
rgba(67, 62, 60, 0.1)Line
温暖、柔和的中性色系，搭配一个用于交互元素和标签的鲜亮绿色点缀。
03
字体
didone-serif · humanist-sans
- display
56px · 400 - h2
36px · 400 - body
16px · 400 - small
10px · 700
小型UI元素和徽章使用大写字母并搭配宽字间距。 · 正文需保持高度可读性，行高应充裕。 · 大型Didone衬线字体严格保留用于主要展示文本。
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
悬停时应用CSS背景色和变换过渡效果 · 页面揭示时应用平滑的透明度过渡
背景色过渡和细微的元素移动。 · 所有交互元素均采用标准指针光标交互。
08
组件
- button 胶囊形按钮，大写文本，1px边框，透明背景。
- card 圆角容器，具有微妙的背景色变化（例如亮色与暗色模式卡片），文本居中。
- chip 小型、色彩鲜艳（绿色或紫色）的胶囊徽章，大写文本，字间距较宽。
- input 在提供的视图中未突出展示。
- hero 巨大的衬线字体标志居中，位于简短描述性段落之上，背景为温暖的中性色。
09
文案语气与禁用清单
- 语气 权威而不失亲和力，融合高端金融与现代科技感。
- 标题风格 大型经典衬线标志和小写新闻标题。
- 按钮文案 低调、大写、胶囊形、细边框按钮。
- 不要使用尖锐的方形边角——截图显示卡片使用了充足的20px圆角。
- 不要对正文使用全大写——截图显示全大写仅用于小型徽章和日期。
- 不要使用厚重的投影——截图显示通过背景色对比定义的平面化表面。
- 不要使用冰冷、临床的蓝色系——截图使用温暖、大地感的中性色和绿色点缀。
- 不要使用怪诞无衬线字体作为展示文本——截图使用经典的Didone衬线字体。
- 不要使用高对比度、多色渐变——截图使用纯色背景和偶尔的柔和图像纹理。
- 避免: 避免使用多种竞争色使界面显得杂乱。
- 避免: 避免将现代无衬线字体用于主要标题。
- 避免: 避免使用尖锐、方形的容器边角。
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）。排版以优雅的大型Didone衬线字体展示元素和清晰的人文主义无衬线字体正文为主。布局基于卡片网格构建，采用充足的20px圆角，依靠背景色变化而非投影来营造深度。按钮低调、呈胶囊形且为大写。关键禁忌：不要使用尖锐边角，不要应用厚重投影，不要将现代无衬线字体用于大型展示标题。
en · zh-CN · zh-TW · ja · ko