精選 · 開放 · 免費

Schulhaus Tirol

Schulhaus Tirol 是一個將蒂羅爾傳統與令人驚喜的現代美食融為一體的美食 destination。

01

設計氣質 DNA

一個傳統的蒂羅爾阿爾卑斯山間小屋，以現代編輯式設計重新詮釋。

02

色彩

溫暖而大膽的赤陶色主導整個畫布，搭配鮮明的黑色字體和影像。

03

字型

transitional-serif · monospace

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

小型標籤、導航連結和技術細節使用等寬字體。 · 大型展示標題、內文和所有主要文字使用襯線字體。 · 為等寬文字保持寬鬆的字距以確保高可讀性。

04

間距

使用寬裕的留白來分隔視覺區塊並強調大型字體。

05

表面 (圓角 / 陰影 / 邊線)

Cookie 同意分隔線使用細的 1px 實線；核取方塊使用 2px 實線邊框。

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

06

版面

一個不對稱的編輯式網格，大型文字區塊和圖片以非傳統位置放置。

07

動效與互動

互動元素使用流暢的 0.4 秒顏色和背景轉換。

由 cubic-bezier 緩動函數觸發的細微顏色轉換。 · 互動元素使用標準指標游標，靜態文字使用預設游標。

08

組件

• button 實心黑色矩形按鈕，白色文字，無 border-radius。
• card 圖片以網格佈局呈現，無邊框或內距。
• chip 等寬文字標籤浮動於圖片上方或下方。
• input 簡單的黑白色核取方塊，搭配等寬標籤。
• hero 一個巨大的襯線標題 'Schulhaus Tirol' 直接放置在黑白攝影圖片上或旁邊。

09

文案語氣與禁用清單

• 語氣 溫暖、 welcoming，同時精緻而令人驚喜。
• 標題風格 大型、經典的襯線字體，感覺具有編輯感且永恆。
• 按鈕文案 直接、大膽且功能性的等寬文字用於按鈕和連結。

• 不要使用無襯線字體——截圖顯示所有主要文字都使用經典的過渡襯線字體。
• 不要使用多種鮮豔的強調色——截圖顯示嚴格的赤陶色與黑色雙色色板。
• 不要在按鈕或卡片上使用圓角——截圖顯示銳利的矩形邊緣。
• 不要使用厚重的 box-shadow 來製造層次——截圖顯示平坦的、基於佈局的層次結構。
• 不要將所有內容都置中對齊——截圖顯示左對齊和浮動文字區塊的混合使用。
• 不要使用複雜的漸層——截圖顯示實心、高飽和度的背景顏色。
• 避免: 避免使用多種強調色或複雜的漸層。
• 避免: 避免過度圓角或「柔軟」的 UI 元素。
• 避免: 避免使用無襯線字體作為標題或內文。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko