精選 · 開放 · 免費

Sirup Online

一個採用粗體排版與戲劇性攝影，慶祝五週年的高端編輯式藝人展示網站。

01

設計氣質 DNA

一本為音樂藝人里程碑創作的高級時尚雜誌封面。

02

色彩

在複雜的攝影或漸層背景上使用單色文字，依靠對比度和尺寸來建立視覺層次。

03

字型

transitional-serif · humanist-sans

• display120px · 700
• body16px · 400

展示型字體使用高對比度的過渡襯線體，以巨大尺寸呈現。 · 內文字體使用中性的人文無襯線體。 · 垂直文字使用無襯線體以確保可讀性。 · 展示型文字的字間距設定較緊。

04

間距

不對稱、由佈局驅動的間距，透過重疊元素來定義。

05

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

極簡，依靠重疊的攝影圖層來劃分。

06

版面

全幅攝影主視覺，搭配分層排版與絕對定位。

07

動效與互動

滾動觸發的揭示動畫採用 linear 過渡。 · 互動元素採用 cubic-bezier 緩動效果。

滑鼠游標在互動元素上變為指針圖示。 · 標準的導航連結。

08

組件

• button 無可見的獨立按鈕元件；互動透過連結或圖示實現。
• card 無背景的重疊圖片卡片，展示藝人肖像。
• chip 無可見的標籤元件。
• input 無可見的輸入欄位。
• hero 巨大的排版式週年慶主視覺，中央為肖像，文字重疊其上。

09

文案語氣與禁用清單

• 語氣 自信、精緻且充滿慶祝感。
• 標題風格 粗體、富表現力，且尺寸戲劇化。
• 按鈕文案 含蓄，以文字連結或極簡圖示形式整合。

• 不要使用小而緊湊的展示型文字——截圖顯示的是巨大、重疊的排版。
• 不要使用平坦、單色的背景——截圖顯示的是複雜的攝影和漸層背景。
• 不要使用標準的網格式卡片佈局——截圖顯示的是重疊、不對稱的照片擺放方式。
• 不要使用柔和的色彩方案——截圖顯示的是在鮮明影像上的高對比度文字。
• 不要使用標準、置中的 UI 元件——截圖使用的是絕對定位和垂直文字。
• 不要使用友善、圓潤的美學風格——截圖呈現的是銳利、高端的編輯式風格。
• 避免: 避免使用通用或過於活潑的無襯線體標題。
• 避免: 避免雜亂的佈局遮蓋了核心影像。
• 避免: 避免使用標準的按鈕元件。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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