精選 · 開放 · 免費

Thefascination

一本探索時尚、生活風格與現代文化交匯點的策展型數位刊物。

01

設計氣質 DNA

一本聚焦於生活風格、時尚與文化的高端數位雜誌。

02

色彩

以溫暖的米白色為背景，搭配深色、易讀的文字，並使用鮮明的藍色與紫色作為強調色。

03

字型

transitional-serif · humanist-sans

• display96px · 700
• headline30px · 700
• body18px · 400
• caption14px · 400

使用過渡襯線字體作為標題與大字排版，以增添編輯權威感。 · 使用人文主義無襯線字體作為內文，確保高度可讀性與現代感。 · 謹慎搭配手寫風格字體（如 Qwitcher Grypen）作為裝飾性點綴。

04

間距

遵循 4px 格線系統，保持一致且具節奏感的間距，營造結構分明又通透的佈局。

05

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

簡潔而乾淨，主要用於結構分隔，採用 1px 線條。

無 · 0 0 5px 0 rgba(128, 128, 128, 1)

06

版面

簡潔的置中欄位佈局，保留充裕留白與清晰的區塊標題。

07

動效與互動

為彈出視窗與互動元素提供平滑的透明度與變形過渡效果。 · 為連結與按鈕提供細膩的懸停效果。

在互動元素上產生細微的色彩變化或透明度位移。 · 透過輕微的變形或透明度變化提供即時視覺回饋。

08

組件

• button 簡約的文字型按鈕，搭配乾淨的排版與極簡的樣式。
• card 以圖片為主的卡片，配有清晰的標題與中繼資料，常以細線分隔。
• chip 分類標籤，有時會加上彩色頂部邊框以強調。
• input 標準的簡潔輸入欄位，帶有 1px 邊框。
• hero 大型、以圖片為主的首頁橫幅區域，通常帶有宣傳性質的彈出覆蓋層。

09

文案語氣與禁用清單

• 語氣 策展感、精緻，並帶點俏皮。
• 標題風格 粗體且具宣言性，常使用襯線字體以增添權威感。
• 按鈕文案 直接而明確，使用全大寫以強調。

• 不要使用深色模式——網站僅使用溫暖的淺色背景 (#FAF8EF)。
• 不要使用無襯線字體作為標題——網站主要使用過渡襯線字體作為大字排版。
• 不要使用鮮明的綠色作為強調色——網站使用鮮明藍色 (#2EA3F2) 與柔和紫色 (#4C40E0)。
• 不要使用厚重的陰影效果——網站偏好乾淨、扁平的表面，僅搭配極少或細膩的陰影。
• 不要使用多欄文字排版來呈現文章——網站維持單一、置中、易讀的欄位。
• 不要在卡片上使用圓角——網站使用直角或非常輕微的圓角 (2-6px)。
• 避免: 避免使用過於激進或推銷式的語言。
• 避免: 避免擁擠的佈局或過多的視覺干擾。
• 避免: 避免使用超過 2-3 種字體系列。
• 避免: 避免使用過於明亮或霓虹色的調色盤。
• 避免: 避免使用未搭配圖片的密集、連續文字區塊。
• 避免: 避免使用複雜、多層次的陰影或漸層。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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