精選 · 開放 · 免費

Tomoseattle

一個折衷風格的互動式日本餐廳網站，採用拖放式拼貼介面。

01

設計氣質 DNA

一本互動式剪貼簿，或現代餐廳的數位靈感板。

02

色彩

溫暖的中性底色，搭配醒目的黑色排版與單一鮮豔珊瑚色點綴。

03

字型

didone-serif · transitional-serif · geometric-sans

• display32px · 400
• body25px · 400

導覽項目使用多樣字型，模擬拼貼或勒索信件效果。 · 主標題「TOMO」使用粗體、高對比度的 Didone 繅線字體。 · 說明文字使用等寬或幾何無襯線字體。

04

間距

不規則且由拼貼驅動，間距取決於可拖曳元素的手動擺放，而非嚴格的網格。

05

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

無可見的 box-shadow；元素依賴硬邊緣或圖片透明度。

06

版面

自由形式的非結構化佈局，圖片與文字區塊相互重疊，並可由使用者重新排列。

07

動效與互動

可拖曳元素以標準的 220ms 過渡效果跟隨游標移動。

游標懸停於可拖曳元素時，變為「移動」圖示。 · 元素可點擊並拖放至畫布上的新位置。

08

組件

• button 白色類紙質背景上的風格化文字標籤，搭配多樣字型。
• card 相互重疊的照片剪報與文字區塊。
• chip 小型可拖曳文字片段。
• input 無傳統輸入框；互動完全透過拖放進行。
• hero 佔據頁面上半部的巨大「TOMO」排版字型。

09

文案語氣與禁用清單

• 語氣 趣味、隨性且略帶不羈。
• 標題風格 粗體、超大尺寸且具排版表現力。
• 按鈕文案 以邀請互動的方式框架（「打造自訂組合」）。

• 避免使用嚴格、統一的網格——畫面顯示的是混亂、重疊的拼貼佈局。
• 避免為所有文字套用單一字型系列——畫面顯示導覽項目至少使用了四種不同字體。
• 避免使用冷色或深色背景色——畫面顯示的是溫暖的淺米色底色。
• 避免依賴細膩陰影營造深度——畫面顯示的是硬邊緣的照片剪報。
• 避免為任何元素使用圓角——畫面顯示的是銳利的矩形邊緣。
• 避免使用柔和或單色調的點綴色盤——畫面顯示的是單一、鮮豔的珊瑚紅用於強調。
• 避免: 企業化
• 避免: 極簡主義
• 避免: 高度結構化
• 避免: 嚴肅

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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