01
设计气质 DNA
趣味性音乐性交互性奇思妙想亲切感
一个神奇的森林空地,微小的音乐生物聚集于此演奏。
02
色彩
#ffffffInk#0d0d0dBG#a3a3a3Mutedrgba(255,255,255,0.1)Line深沉暗黑的背景营造出专注而富有氛围感的环境,使鲜艳的角色色彩格外突出。
03
字体
- display
64px · 400 - body
20px · 400
大型表现性展示文字使用过渡衬线体。 · 清晰易读的正文使用人文无衬线体。 · 副标题文字保持较短的行宽。
04
间距
4px8px16px24px32px48px64px96px标题与副标题周围留有充足的垂直间距,形成清晰的视觉焦点。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
App Store 按钮带有纤细的白色边框(1px solid white)。
0 8px 32px rgba(0,0,0,0.4)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
双栏主视觉布局,左侧为文字,右侧为大型手机模型。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
标准按钮悬停状态。 · 标准按钮点击状态。
08
组件
- button 带有白色边框、Apple 标志和“Download on the App Store”文字的 App Store 徽章。
- card 全屏手机模型,展示应用内部界面。
- hero 深色、富有氛围的主视觉区域,包含一个大型衬线标题、描述文字、一个 App Store 徽章,以及一个突出的手机模型,展示色彩丰富的角色。
09
文案语气与禁用清单
- 语气 奇趣、引人入胜且富有诗意。
- 标题风格 富有表现力的衬线标题,采用诗意结构。
- 按钮文案 直接且平台特定(App Store 徽章)。
- 不要使用亮白色背景——截图显示的是深沉暗黑的背景。
- 不要为展示文字使用几何无衬线体——截图显示的是过渡衬线体。
- 不要为界面框架添加多种高饱和度强调色——截图显示鲜艳色彩仅限于应用模型内部。
- 不要使用繁杂、拥挤的布局——截图显示的是简洁、聚焦的双栏主视觉。
- 不要所有元素都使用生硬、尖锐的转角——截图显示 App Store 徽章带有圆角。
- 不要为主标题使用粗重、加粗的字重——截图显示的是较轻盈、优雅的衬线字重。
- 避免: 正式或企业化语言。
- 避免: 技术术语。
- 避免: 复杂的句子结构。
11
System Prompt
这是一款名为“Chantlings”的移动应用的产品着陆页。设计采用深沉暗黑的背景,营造专注而富有氛围感的环境。字体搭配上,大型优雅的过渡衬线标题与简洁的人文无衬线正文字体相结合。布局为双栏主视觉,左侧是文字,右侧是大型手机模型。鲜艳的色彩被限定在手机展示的应用界面内。关键禁忌:不要使用亮色背景。不要为标题使用几何无衬线体。不要为页面本身添加多种强调色。