精选 · 开放 · 免费
Aplos
一个高端的直接面向消费者品牌,专注于精致的植物基饮品,以深邃的暗调影像与优雅的衬线排版为特色。
ConsumerPhotographicPremiumCleanProduct
01
设计气质 DNA
无酒精精致植物基健康
一家面向零烈酒的现代奢华药剂店。
02
色彩
#000000Ink
#646464Ink soft
#F2F1EDBG soft
rgba(180,174,172,1)Line
以高对比度单色为基底,搭配温暖的离白色表面,确保可读性与视觉焦点。
03
字体
transitional-serif · humanist-sans
- display
40px · 400 - subtitle
26px · 400 - body
13px · 400
04
间距
严格遵循 3px 的倍数,主要间距为 12px 与 24px。
05
表面 (圆角 / 阴影 / 边线)
sm · 3px
md · 5px
lg · 12px
pill · 999px
采用细微的 1px 边框与内阴影来定义输入框与容器。
rgb(180, 174, 172) 0px 0px 0px 1px inset
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全出血深色英雄区,搭配大型居中模态覆盖层。
07
动效与交互
200msmicro
300mssmall
800msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing
交互元素的平滑背景与颜色过渡 · 填充与悬停状态的变换动画
交互元素上的微妙颜色与背景过渡。 · 通过标准指针光标提供即时视觉反馈。
08
组件
- button 高对比度的黑色胶囊形或大圆角按钮,采用白色文字用于主要操作。
- card 分屏模态界面,一侧为电影感图像,另一侧为简洁、功能性的表单。
- input 简洁的文本输入框,带有细微的 1px 内阴影与微圆角。
- hero 大尺寸摄影英雄区,配合氛围光效与叠加排版。
09
文案语气与禁用清单
- 语气 精致、自信且富有吸引力。
- 标题风格 采用字间距紧凑的大型精致衬线标题。
- 按钮文案 直接且以行动为导向,例如“立即购买”或“继续”。
- 勿使用明亮的强调色——截图显示严格的黑白与离白色调色板
- 勿使用大圆角按钮——截图显示按钮采用更微妙的现代圆角(5px)
- 勿使用通用无衬线字体作为展示字体——截图显示所有主要标题均采用过渡衬线体
- 勿使用杂乱的多栏版式——截图显示简洁、聚焦的分屏模态与全出血英雄区
- 勿为网站主体使用浅色、轻盈的背景——截图显示主导性的深黑背景
- 勿使用强烈的投影——截图显示用于界定的细微内阴影与边框
- 避免: 鲜艳的霓虹色
- 避免: 俏皮或过于随意的语言
- 避免: 杂乱拥挤的版式
- 避免: 通用的无衬线标题
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
该设计呈现一个专注于零烈酒的高端直接面向消费者饮品品牌。它运用了一种精致、极简的美学风格,以深黑色(#000000)与温暖的离白色(#F2F1ED)表面为主导。排版方面,展示字体采用精致的过渡衬线体,正文与界面元素则使用清晰的人文无衬线体。关键交互模式包括高对比度、大圆角的主要按钮,以及用于表单字段的细微内边框。重要约束:严格避免使用鲜艳的强调色,绝不可使用通用无衬线体作为标题,并维持这种克制、以摄影为主导的版式。
en · zh-CN · zh-TW · ja · ko