精選 · 開放 · 免費

Apartamento

融合經典編輯排版與大膽高對比圖形點綴的生活風格雜誌網站。

01

設計氣質 DNA

一本改編為網頁形式、具備大膽獨特風格的精緻紙本雜誌。

02

色彩

以柔和、溫暖的中性色調為主視覺基調，並以單一、強烈的高飽和黃色作為關鍵互動元素的點綴。

03

字型

transitional-serif · humanist-sans

• display42px · 700
• h224px · 700
• body16px · 400

使用高對比的過渡襯線體作為主要標題，以喚起紙本雜誌的質感與聲望。 · 使用幾何人文無襯線體作為 UI 元素、導覽與內文，以確保清晰易讀性。 · 為無襯線體文字應用寬鬆的字距，以增強其現代、通透的感覺。

04

間距

寬裕的邊距與留白，以支撐編輯式版面並讓圖片得以呼吸

05

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

極簡，僅使用細黑框線作為輸入框與導覽下底線

06

版面

經典雜誌格線，包含一個顯著的全寬主視覺圖片，以及用於文章卡片的結構化欄位佈局。

07

動效與互動

淡入彈窗 · 互動元素的平滑轉場

文字連結在 hover 時產生細微的色彩變化或底線 · 互動元素使用標準的指標游標

08

組件

• button 極簡的文字按鈕，帶有膠囊狀圓角邊框。
• card 內容卡片，包含大型編輯式攝影圖片、襯線體標題與無襯線體的元資料。
• chip 簡單的文字連結或類似標籤的元素。
• input 高對比的圓角膠囊輸入框，黑色邊框，背景為鮮明的黃色。
• hero 全視口的攝影主視覺，中央帶有醒目的圖形彈窗疊加層。

09

文案語氣與禁用清單

• 語氣 精緻、具吸引力且富有文化氣息
• 標題風格 直接、大膽且略帶內斂，依賴字體排版來創造影響力。
• 按鈕文案 清晰、直率，並融入編輯流程中。

• 避免使用純白背景——截圖顯示基底色為溫暖的米白色 (#F8F4EC)
• 避免將每個按鈕都設為亮黃色——截圖顯示黃色嚴格保留用於彈窗疊加層
• 避免使用無襯線體作為主要標題——截圖顯示「最新故事」使用了高對比的過渡襯線體
• 避免為輸入框使用過度圓潤的方形——截圖顯示使用了極致的膠囊形圓角
• 避免在版面中堆砌密集的 UI 模式——截圖顯示了乾淨、通透的編輯式格線
• 避免為 UI 卡片添加複雜的陰影——截圖顯示為完全扁平、無陰影的元件
• 避免: 具侵略性的行銷用語
• 避免: 喧鬧、不協調的霓虹色調
• 避免: 厚重的陰影
• 避免: 過度俏皮或過圓的 UI 元素

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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