OpenDesign·你的设计资产库

网页参考

Schulhaus Tirol

Schulhaus Tirol 是一个融合蒂罗尔传统与令人惊喜的现代美食体验的烹饪目的地。

EditorialPremiumCurationPhotographicTypography

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

01

设计气质 DNA

schulhaustirolrestaurantgastronomytraditionalsurprising

一家蒂罗尔阿尔卑斯传统客栈,以现代编辑式设计重新诠释。

02

色彩

#000000Ink
#FF7D50BG
rgba(0,0,0,0.25)Line

大胆、温暖的赤陶色主导画面,搭配纯粹的黑色字体与图像。

03

字体

transitional-serif · monospace

  • display80px · 400
  • h226px · 400
  • body16px · 400
  • caption12px · 400

使用等宽字体呈现小型标签、导航链接和技术细节。 · 使用衬线字体呈现大型展示标题、正文及所有主要文本。 · 为等宽文本保持充足的字间距,以确保高可读性。

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px

运用充足的留白来分隔视觉区块并突出大字体。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 0px
lg · 0px
pill · 999px

用于 Cookie 同意分隔线的 1px 细实线;复选框使用 2px 实线边框。

0px 25px 50px -12px rgba(0, 0, 0, 0.25)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称的编辑式网格,大型文本块和图像以非常规位置放置。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素采用 0.4 秒平滑的颜色和背景过渡。

由 cubic-bezier 缓动函数触发的微妙颜色过渡。 · 交互元素使用标准指针光标,静态文本使用默认光标。

08

组件

  • button 纯黑色矩形按钮,搭配白色文字,无圆角。
  • card 图片以网格布局呈现,无边框或内边距。
  • chip 等宽文本标签浮动于图像上方或下方。
  • input 简洁的黑白复选框,搭配等宽标签。
  • hero 巨大的衬线标题 'Schulhaus Tirol' 直接置于黑白摄影作品之上或旁边。

09

文案语气与禁用清单

  • 语气 温暖、热情,同时精致且富有惊喜感。
  • 标题风格 大型、经典的衬线字体,呈现编辑感与永恒感。
  • 按钮文案 直接、大胆且功能性强,按钮和链接使用等宽文本。
  • 不要使用无衬线字体——截图显示所有主要文本均使用经典的过渡衬线字体。
  • 不要使用多种鲜艳的强调色——截图显示仅使用赤陶色和黑色的严格双色调色板。
  • 不要在按钮或卡片上使用圆角——截图显示为锐利的矩形边缘。
  • 不要使用厚重的投影来营造层次——截图显示为基于布局的扁平层次结构。
  • 不要将所有内容居中对齐——截图显示左对齐和浮动文本块的混合布局。
  • 不要使用复杂的渐变——截图显示为纯色、高饱和度的背景颜色。
  • 避免: 避免使用多种强调色或复杂的渐变。
  • 避免: 避免使用过于圆润的角落或“柔和”的界面元素。
  • 避免: 避免在标题或正文中使用无衬线字体。

10

包内真实截图

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

11

System Prompt

Schulhaus Tirol 是一个高端美食网站,采用编辑式布局呈现传统蒂罗尔餐饮,并带有令人惊喜的现代转折。设计以温暖的赤陶色背景(#FF7D50)为主导,搭配纯粹的黑色(#000000)字体和图像。字体排版大量依赖经典的过渡衬线字体用于展示和正文,并辅以功能性的等宽字体用于标签和链接。关键设计规则包括:避免使用无衬线字体,摒弃圆角转而采用锐利的几何形状,以及避免使用厚重投影以保持扁平的视觉层次。布局采用非对称网格,允许文本和图像相互重叠,营造出一种精心策划的、画廊般的氛围,强调工艺与传统。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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