OpenDesign·你的设计资产库

网页参考

July Fund

一个精致、具有编辑风格的风险投资基金网站,采用大号衬线展示字体和简洁的基于卡片的布局。

EditorialCurationCleanRefinedConsumer
July Fund 网站截图

01

设计气质 DNA

风险投资投资编辑风格精致策展

一本融合经典编辑排版与简洁数字卡片布局的现代策展投资杂志。

02

色彩

#56D270Accent
#433E3CInk
#EEE7E5BG
#F0E7E4BG soft
#9A9390Muted
rgba(67, 62, 60, 0.1)Line

温暖、柔和的中性色系,搭配一个用于交互元素和标签的鲜亮绿色点缀。

03

字体

didone-serif · humanist-sans

  • display56px · 400
  • h236px · 400
  • body16px · 400
  • small10px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

本设计系统代表了一个精致、具有编辑风格的风险投资基金网站。其核心是温暖、柔和的中性色系(#EEE7E5背景,#433E3C墨色),并搭配一个用于状态徽章和标签的鲜亮绿色点缀(#56D270)。排版以优雅的大型Didone衬线字体展示元素和清晰的人文主义无衬线字体正文为主。布局基于卡片网格构建,采用充足的20px圆角,依靠背景色变化而非投影来营造深度。按钮低调、呈胶囊形且为大写。关键禁忌:不要使用尖锐边角,不要应用厚重投影,不要将现代无衬线字体用于大型展示标题。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。