精选 · 开放 · 免费
Promlyapp
一个以摄影为驱动、倡导青年连接与赋权的醒目网站。
Non-profitYouthEmpowermentCleanPhotographic
01
设计气质 DNA
赋权青年连接安全变革者
充满活力的青年倡导数字社区中心。
02
色彩
#A957FEAccent
#FFFFFFInk
#FFFFFF99Ink soft
#000000BG
#040723BG soft
#333333Muted
rgba(255, 255, 255, 0.2)Line
采用高对比度暗色模式，搭配富有情感张力的鲜明紫色作为强调色。
03
字体
humanist-sans · monospace
- display
60px · 300 - h2
28px · 300 - body
18px · 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
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Promly 是一个致力于重塑青年连接的非营利组织，采用醒目的高对比度暗色模式美学。调色板以深黑色 (#000000) 和鲜明紫色 (#A957FE) 为主，营造紧迫感与赋权氛围。排版使用人文无衬线字体（Poppins 与 Avenir），在亲和力与专业性间取得平衡。关键约束：绝不使用浅色背景或纤细、压缩的字体。始终保持图片区域的充足间距与圆角（20px）。聚焦高品质摄影与直接、鼓舞人心的文案。确保设计传递安全、包容的感受，体现组织使命。
en · zh-CN · zh-TW · ja · ko