精選 · 開放 · 免費

Limonoslo No

一個融合大膽排印、溫暖色彩和沉浸式美食攝影的現代餐廳網站。

ConsumerPhotographicWarmBold TypographyClean

↓ 下載設計系統包 (13 MB)在 OpenDesign 中開啟

原站: https://limonoslo.no

📦 瀏覽包內檔案 →

設計氣質 DNA

餐廳新鮮現代溫暖引人入勝

一家結合新鮮食材與大膽、簡潔排印的活潑現代餐廳。

色彩

#F7EA48Accent

#1D0B0DInk

#141414Ink soft

#FCF9F0BG

#103B15Muted

rgba(16,59,21,0.2)Line

溫暖、引人入勝的配色方案，結合奶油色背景、深色自然墨色和單一活潑的黃色點綴。

字型

sans-serif

display56px · 700
heading36px · 700
body16px · 400
caption15px · 400

間距

4px

8px

16px

24px

32px

48px

64px

96px

透過 4 的倍數建立一致的垂直節奏，確保平衡的留白。

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

sm · 4px

md · 8px

lg · 32px

pill · 999px

使用深綠色 (#103B15) 的實心邊框作為強調，以及細微的淺灰色 (#D6D6D6) 作為分隔。

rgba(0,0,0,0.3) 0px 32px 68px 0px

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

具有清晰結構分區和寬裕間距的標準網格佈局。

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

背景顏色與透明度的細膩過渡。 · 用於動態佈局調整的寬度與高度動畫。

互動元素上的色彩變換與細膩過渡。 · 透過活躍狀態的過渡提供立即的視覺回饋。

組件

button 實心黃色按鈕 (#F7EA48) 搭配深色大寫文字，或深色實心按鈕搭配白色大寫文字。
card 攝影佈局，文字交疊並帶有細微的陰影效果。
chip 極少量使用，主要為結構性導覽元素。
input 標準表單欄位，具有清晰的視覺回饋和深色邊框。
hero 全版寬度沉浸式主視覺區塊，採用高品質美食攝影。

文案語氣與禁用清單

語氣引人入勝、現代且充滿熱情。
標題風格 大膽、大寫的排印，與背景形成高對比。
按鈕文案 直接、大寫的指令，帶有強烈的色彩點綴。

不要使用冷色調、單色配色方案——截圖顯示的是溫暖、引人入勝的色調。
不要對所有 UI 元素施加厚重的陰影——截圖顯示的是選擇性使用。
不要使用纖細、低對比度的排印——截圖採用大膽、高可讀性的字體。
不要將複雜動畫置於清晰內容傳遞之上——截圖顯示的是最小限度的動效。
不要使用沒有清晰標籤的抽象圖標——截圖依賴基於文字的導覽。
不要迴避全版攝影——截圖顯著使用了沉浸式的美食影像。
避免: 過於正式的語言
避免: 細微的字體粗細
避免: 柔和的配色方案

包內真實截圖

Limonoslo No — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

擷取自真實頁面 · 真 computed styles

System Prompt

設計一個現代、引人入勝的餐廳網站，強調新鮮食材與活潑風味。使用以奶油色背景 (#FCF9F0)、深色自然墨色 (#1D0B0D) 和單一亮黃色點綴 (#F7EA48) 為基調的溫暖配色方案。為標題採用大膽、高可讀性的無襯線字體，為內文採用清晰、易讀的無襯線字體。以寬裕的留白和標準網格結構化佈局。關鍵限制：切勿使用冷色調、臨床感的配色方案；不要採用細微或纖細的排印；並避免缺乏沉浸式美食攝影的極簡佈局。專注於打造大膽、富有表現力且熱情 welcoming 的視覺識別。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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