精选 · 开放 · 免费
Limonoslo No
一个融合了大胆排版、温暖色彩与沉浸式美食摄影的现代餐厅网站。
ConsumerPhotographicWarmBold TypographyClean
01
设计气质 DNA
餐厅新鲜现代温暖诱人
一家充满活力的现代餐厅，融合了新鲜食材与大胆、简洁的排版风格。
02
色彩
#F7EA48Accent
#1D0B0DInk
#141414Ink soft
#FCF9F0BG
#103B15Muted
rgba(16,59,21,0.2)Line
温暖、诱人的配色方案，结合奶油色背景、深色自然墨水色调以及单一的亮黄色点缀。
03
字体
sans-serif
- display
56px · 700 - heading
36px · 700 - body
16px · 400 - caption
15px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
通过4的倍数建立一致的垂直节奏，确保均衡的留白。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 32px
pill · 999px
使用深绿色（#103B15）的实线边框以强调，以及浅灰色（#D6D6D6）的细分线。
rgba(0,0,0,0.3) 0px 32px 68px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准网格布局，具有清晰的结构分区和充足的间距。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
背景颜色和透明度的微妙过渡。 · 用于动态布局调整的宽高度动画。
交互元素上的颜色变化和微妙过渡。 · 激活状态过渡时的即时视觉反馈。
08
组件
- button 纯黄色按钮（#F7EA48）配深色大写文本，或深色纯色按钮配白色大写文本。
- card 摄影布局，带有重叠文本和微妙的投影。
- chip 极少使用，主要作为结构性导航元素。
- input 标准表单字段，具有清晰的视觉反馈和深色边框。
- hero 全宽沉浸式主视觉区域，展示高品质美食摄影。
09
文案语气与禁用清单
- 语气 富有感染力、现代且充满热情。
- 标题风格 大胆、大写的排版，与背景形成高对比度。
- 按钮文案 直接、大写的指令，带有强烈的色彩强调。
- 不要使用冷色调、单色的配色方案——截图显示的是温暖、诱人的色调。
- 不要对所有UI元素都应用厚重的投影——截图显示的是选择性使用。
- 不要使用精致、低对比度的排版——截图采用的是大胆、高度易读的字体。
- 不要优先考虑复杂的动画而忽略清晰的内容传达——截图显示的是最小化的动效。
- 不要使用没有清晰标签的抽象图标——截图依赖于基于文本的导航。
- 不要避免使用全幅摄影——截图显著地运用了沉浸式的美食图像。
- 避免: 过于正式的语言
- 避免: 微妙的字重
- 避免: 柔和的调色板
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
设计一个现代、诱人的餐厅网站，强调新鲜食材和鲜活风味。使用温暖的配色方案，以奶油色背景（#FCF9F0）、深色自然墨水色调（#1D0B0D）和单一的亮黄色点缀（#F7EA48）为基础。采用大胆、高度易读的无衬线字体用于标题，清晰易读的无衬线字体用于正文。通过充足的留白和标准网格来构建布局。关键约束：绝不使用冷色调、临床感的配色方案；不应用微妙或精致的排版；避免缺乏沉浸式美食摄影的极简布局。专注于打造一个大胆、富有表现力且热情好客的视觉形象。
en · zh-CN · zh-TW · ja · ko