OpenDesign·你的设计资产库

网页参考

Promlyapp

一个以摄影为驱动、倡导青年连接与赋权的醒目网站。

Non-profitYouthEmpowermentCleanPhotographic
Promlyapp 网站截图

01

设计气质 DNA

赋权青年连接安全变革者

充满活力的青年倡导数字社区中心。

02

色彩

#A957FEAccent
#FFFFFFInk
#FFFFFF99Ink soft
#000000BG
#040723BG soft
#333333Muted
rgba(255, 255, 255, 0.2)Line

采用高对比度暗色模式,搭配富有情感张力的鲜明紫色作为强调色。

03

字体

humanist-sans · monospace

  • display60px · 300
  • h228px · 300
  • body18px · 300

主标题使用 Poppins 字体,正文使用 Avenir 字体。 · 保持充足的行高以确保可读性。 · 严格控制字间距。

04

间距

4px
8px
12px
16px
24px
32px
48px
64px

通过大区块与统一内边距建立垂直韵律感。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 20px
pill · 999px

1px 纯色细边框 rgba(255, 255, 255, 0.5)

rgba(150, 163, 181, 0.08) 0px 4px 24px 0px · rgba(102, 77, 255, 0.2) 0px 4px 100px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

首屏采用文字与图片网格分屏布局;次级章节使用全宽或卡片网格。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

按钮与链接在悬停时具备平滑过渡效果。

细微的颜色与透明度变化。 · 即时响应并提供视觉反馈。

08

组件

  • button 紫色实心圆角矩形,配白色文字。
  • card 大圆角图片卡片。
  • chip 小圆角徽章与标签。
  • input 带细微边框的标准表单。
  • hero 采用大字号排版与图片拼贴的分屏布局。

09

文案语气与禁用清单

  • 语气 赋权、包容且富有紧迫感。
  • 标题风格 直接且鼓舞人心。
  • 按钮文案 清晰明确的行动号召。
  • 避免使用明亮或柔和的背景色——截图显示为深黑色 (#000000) 背景。
  • 避免使用纤细、压缩的字体——截图显示为几何、人文无衬线字体(Poppins/Avenir)。
  • 避免为图片使用直角边框——截图显示为圆角(最大 20px)。
  • 避免使用多种强调色——截图显示为单一主导的紫色强调色。
  • 避免使用小而密集的文字——截图显示为行高充足、易于阅读的大字号排版。
  • 避免使用网格密集、生硬的布局——截图显示为流畅、以摄影为驱动的拼贴式设计。
  • 避免: 愤世嫉俗
  • 避免: 复杂术语
  • 避免: 被动语态

10

包内真实截图

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

11

System Prompt

Promly 是一个致力于重塑青年连接的非营利组织,采用醒目的高对比度暗色模式美学。调色板以深黑色 (#000000) 和鲜明紫色 (#A957FE) 为主,营造紧迫感与赋权氛围。排版使用人文无衬线字体(Poppins 与 Avenir),在亲和力与专业性间取得平衡。关键约束:绝不使用浅色背景或纤细、压缩的字体。始终保持图片区域的充足间距与圆角(20px)。聚焦高品质摄影与直接、鼓舞人心的文案。确保设计传递安全、包容的感受,体现组织使命。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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