精选 · 开放 · 免费
Fly By Jing
采用大胆、表现力强且毫不掩饰的辛辣品牌设计的优质四川主食调料。
fooddtc
01
设计气质 DNA
辛辣大胆四川风味现代传承
一个充满活力、大胆的街头美食摊位,通过优质包装和现代DTC品牌设计得到提升。
02
色彩
#FFCD35Accent
#FFFFFFInk
#E52228BG
#F2F2F2Muted
rgba(0,0,0,1)Line
高饱和度、以香辣为灵感的色彩方案,使用鲜艳的红色、黄色和大胆的黑色来传达风味与活力。
03
字体
grotesque-sans · transitional-serif
- display
88px · 700 - heading
44px · 700 - body
22px · 400
所有主要导航和操作标签使用大写 · 在红色背景上使用高对比度的白色文字 · 保持紧凑、粗犷的字体层级
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
版块间使用充裕的垂直内边距(44px),让大字体和摄影图片得以呼吸。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
rgb(204, 204, 204) 0px 0px 2px 2px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉版块,采用居中字体或图文并列布局,在移动端转换为堆叠列。
07
动效与交互
150msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上平滑的颜色和背景色过渡 · 悬停/点击时细微的缩放和变换效果
按钮和链接上的颜色变化或细微背景偏移。 · 通过细微变换或状态变化提供即时视觉反馈。
08
组件
- button 粗犷、大写的文字标签,通常采用药丸形(大圆角)或矩形背景,配以高对比度色彩。
- card 简洁的容器,带有充裕的内部内边距,常用于展示食物摄影。
- chip 不适用
- input 带有细微边框的简洁文本输入框。
- hero 沉浸式、全出血的背景色或大型产品摄影,配以巨大、粗犷、居中或左对齐的大标题。
09
文案语气与禁用清单
- 语气 自信、大胆、富有表现力且略带俏皮。
- 标题风格 简短、有力、祈使句式、视觉化。
- 按钮文案 直接、以行动为导向,始终大写。
- 不要为标题使用细体或浅色字重——截图显示所有主标题都使用了粗体、700字重的 grotesque-sans。
- 不要使用小巧、低调的字体——截图显示了巨大、紧凑的展示型字体(88px+)。
- 不要依赖中性、单色的调色板——截图以高饱和度的红色(#E52228)和黄色(#FFCD35)为主导。
- 不要为展示使用优雅、高对比度的衬线字体——截图中的标题使用了粗体 grotesque-sans。
- 不要对导航使用标准大小写——截图显示菜单项和分类链接均为全大写文本。
- 不要使用细的 1px 边框作为主要分隔手段——截图依靠大块鲜明的色彩。
- 避免: 微妙或柔和的语言
- 避免: 小巧、精致的字体
- 避免: 低调的调色板
- 避免: 复杂、多词的大标题
- 避免: 用于展示的草书或优雅的衬线字体
- 避免: 没有大胆色彩的大片留白
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Fly By Jing 是一个高端的、直接面向消费者的四川辣椒脆和主食调料品牌。其设计DNA以毫不掩饰的大胆、高饱和度色彩为核心,围绕鲜艳的辣红色(#E52228)和醒目、高可见度的黄色(#FFCD35)构建。字体方面,粗壮的 grotesque-sans 用于巨大的展示标题,搭配稳重的过渡衬线体用于正文。布局沉浸式,包含全出血色块和大型产品摄影。关键限制:绝不要为标题使用细体或浅色字重;避免小巧、低调的字体;不要使用柔和或单色的调色板。品牌语调自信、直接、富有表现力,主要操作和导航始终使用大写。
en · zh-CN · zh-TW · ja · ko