精选 · 开放 · 免费
Joinlava
一个社交音频平台，运用充满活力的渐变与大胆的排版，打造充满能量、富有表现力的品牌形象。
ConsumerDark ModeApp UIMobile UIPlayful
01
设计气质 DNA
社交音频富有表现力充满活力年轻化创意
夜空中绽放的绚丽霓虹灯秀，象征着多元声音的活力。
02
色彩
#ffffffInk
#010101BG
#1f2023BG soft
#333333BG quiet
rgba(255, 255, 255, 0.1)Line
以深色模式为基础，采用充满活力的多彩渐变来表达能量与创意。
03
字体
grotesque-sans · humanist-sans
- display
53px · 900 - subtitle
18px · 400 - body
14px · 400 - label
11px · 700
标题使用紧凑的 grotesque-sans 字体，字重为 900，并采用负字间距。 · 正文使用高度易读的 humanist-sans 字体，字号为 14px。 · 强调标签使用字间距较宽的大写样式，填充彩虹渐变色。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用一致的 4px 栅格系统，设置充足的垂直内边距（例如约 37px），使元素在深色背景上拥有呼吸空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 15px
xl · 20px
pill · 300px
主要边框为细微的白色或深灰色，通常为 1px 实线，有时用于分隔栅格区域。
None: None
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
主视觉采用居中单列布局，过渡至双列功能布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 1, 0.5, 1)easing
交互元素上细微的悬停过渡效果。 · 关键强调区域（如顶部边框）的渐变动画或发光效果。
按钮与交互元素可能采用细微的色彩变化或边框发光效果。 · 所有主要交互元素均使用标准指针光标。
08
组件
- button 药丸形按钮，黑色背景、白色文字，配有 1px 多彩渐变边框。
- card 圆角卡片（15-20px 圆角），通常包含图像或界面模型，有时带有深色投影。
- chip 小巧的圆角标签或标记，通常为深色背景配浅色文字。
- input 极简输入框，深色背景搭配细微边框。
- hero 大型居中区域，以深色背景搭配加粗放大的白色文字为特色，辅以多彩浮动元素点缀。
09
文案语气与禁用清单
- 语气 充满活力、自信且聚焦社区。
- 标题风格 大胆、富有表现力且直接，常使用大号加粗字体。
- 按钮文案 简洁且行动导向，例如'获取应用'。
- 勿使用白色背景——截图显示深黑色（#010101）背景。
- 勿在标题中使用衬线字体——截图显示加粗、紧凑的 grotesque-sans 字体。
- 勿使用纯色单色强调按钮——截图显示带有多彩渐变边框的按钮。
- 勿在标题中使用宽松、空灵的字间距——截图显示紧凑的负字间距（-1px）。
- 勿在正文中使用纤细的字重——截图显示清晰易读的中等字重。
- 勿为品牌标识使用单一静态颜色——截图显示以多彩渐变作为关键识别元素。
- 避免: 正式或过于企业化的语言。
- 避免: 缺乏活力的柔和或单色调色板。
- 避免: 纤细薄弱、显得无力的字体。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
设计一个充满活力的深色模式消费类音频应用。使用深黑色（#010101）背景搭配亮白色（#ffffff）文字。融入标志性的多彩渐变用于强调、边框和标签。排版应大胆且富有表现力，标题使用加粗的 grotesque-sans 字体并采用紧凑字间距。正文使用 humanist-sans 字体，字号为 14px。关键元素包括带渐变边框的药丸形按钮、充足的垂直间距以及圆角界面卡片（15-20px 圆角）。关键禁忌：切勿使用白色背景，切勿在标题中使用衬线字体，切勿使用纯色单色按钮，切勿在展示字体中使用宽松字间距。
en · zh-CN · zh-TW · ja · ko