OpenDesign·你的设计资产库

网页参考

Limonoslo No

一个融合了大胆排版、温暖色彩与沉浸式美食摄影的现代餐厅网站。

ConsumerPhotographicWarmBold TypographyClean

封面待补录,可通过原站查看设计。

01

设计气质 DNA

餐厅新鲜现代温暖诱人

一家充满活力的现代餐厅,融合了新鲜食材与大胆、简洁的排版风格。

02

色彩

#F7EA48Accent
#1D0B0DInk
#141414Ink soft
#FCF9F0BG
#103B15Muted
rgba(16,59,21,0.2)Line

温暖、诱人的配色方案,结合奶油色背景、深色自然墨水色调以及单一的亮黄色点缀。

03

字体

sans-serif

  • display56px · 700
  • heading36px · 700
  • body16px · 400
  • caption15px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

设计一个现代、诱人的餐厅网站,强调新鲜食材和鲜活风味。使用温暖的配色方案,以奶油色背景(#FCF9F0)、深色自然墨水色调(#1D0B0D)和单一的亮黄色点缀(#F7EA48)为基础。采用大胆、高度易读的无衬线字体用于标题,清晰易读的无衬线字体用于正文。通过充足的留白和标准网格来构建布局。关键约束:绝不使用冷色调、临床感的配色方案;不应用微妙或精致的排版;避免缺乏沉浸式美食摄影的极简布局。专注于打造一个大胆、富有表现力且热情好客的视觉形象。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。