精选 · 开放 · 免费
Koox
以粗体排版和克制自然配色呈现的纯净、产品优先型有机果汁电商平台。
ConsumerProductCleanPhotographic
01
设计气质 DNA
有机新鲜纯净果汁高端
现代匠人果汁实验室融合简约电商
02
色彩
#D25A24Accent
#232323Ink
#727272Ink soft
#FFFFFFBG
#F5F5F5BG soft
#EFEFEFBG quiet
#CCCCCCMuted
rgba(0,0,0,0.12)Line
高对比度极简主义,搭配温暖大地色系点缀色。
03
字体
geometric-sans · grotesque-sans
- display
56px · 900 - headline
30px · 700 - body
16px · 400
主要行动号召与版块标题使用粗体大写。 · 展示文本保持紧凑行高以维持视觉冲击力。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于4px的统一节奏,通过垂直间距变化建立清晰层级。
05
表面 (圆角 / 阴影 / 边线)
sm · 1px
md · 4px
lg · 0px
pill · 0px
锐利的1px实线边框用于结构界定。
rgb(107, 18, 41) 5px 5px 0px 0px · rgba(0, 0, 0, 0.2) 0px 6px 27px 0px
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
居中内容区,全宽主视觉图下方为三列产品卡片网格。
07
动效与交互
100msmicro
200mssmall
300msmedium
cubic-bezier(0, 0, 0.3, 1)easing
交互元素采用平滑的淡入淡出与形变过渡。
按钮与链接采用细微的透明度或形变变化。 · 即时响应并伴随轻微阴影调整。
08
组件
- button 实心色块按钮,大写文本,无圆角,带细微偏移阴影。
- card 全出血图片叠加居中粗体白色文本。
- chip 无
- input 无
- hero 全屏视口背景图,叠加居中白色文本与醒目的行动号召按钮。
09
文案语气与禁用清单
- 语气 自信、纯净、直接。
- 标题风格 粗体大写,以利益为导向。
- 按钮文案 直接行动导向,全大写呈现。
- 勿使用装饰性或手写字体——截图显示采用粗体、简洁的几何无衬线字体。
- 勿使用圆角或柔和形状——截图显示采用锐利的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
Koox是面向有机果汁与清洁套餐的现代产品优先型电商网站。其设计呈现简洁极简美学,采用白色、黑色与温暖赤陶色点缀(#D25A24)的高对比度配色。排版粗体几何化,使用大写增强视觉冲击力。关键十六进制色值:#FFFFFF(背景)、#232323(墨色)、#D25A24(点缀色)、#113722(深绿色品牌色)。关键禁忌:勿使用装饰性字体、勿使用圆角、勿使用深色模式、勿使用繁复图案、勿使用复杂色盘、勿使用低对比度文本。布局居中且疏朗,强调产品摄影。
en · zh-CN · zh-TW · ja · ko