精選 · 開放 · 免費

Typology

一個專注於純淨成分和科學精準的極簡主義高級護膚品牌。

01

設計氣質 DNA

現代藥房與高端編輯雜誌的結合。

02

色彩

單色調的克制，搭配高對比排版，以喚起臨床純淨感。

03

字型

grotesque-sans · monospace

• display64px · 500
• h148px · 500
• h232px · 500
• body15px · 400
• small13px · 400
• micro10px · 400

導航和實用文字始終使用大寫。 · 標題使用緊湊字距和粗體字重。 · 內文保持乾淨、中性的無襯線字體外觀。

04

間距

一致的 4px 基礎網格，搭配寬裕的留白，營造輕盈、高級的感受。

05

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

黑色或深灰色的細薄 1px 邊框，謹慎用於分隔和按鈕。

rgba(0, 0, 0, 0.3) 0px 30px 70px 0px

06

版面

全版面攝影主視覺，後接乾淨、結構化的網格用於產品探索。

07

動效與互動

按鈕和連結的懸停狀態採用平滑過渡。 · 基於變換的動畫，提供細微的互動反饋。

細微的背景顏色或不透明度變化，通常伴隨過渡效果。 · 即時視覺反饋，通常透過顏色變化實現。

08

組件

• button 高對比矩形，搭配大寫文字；主要按鈕為黑底白字，次要按鈕為白底黑框。
• card 乾淨、無邊框的卡片，搭配高品質產品圖片和精確排版。
• chip 無 - 在可見的截圖中不存在。
• input 無 - 在可見的截圖中不存在。
• hero 全出血、高衝擊力的攝影，搭配覆蓋的左對齊文字。

09

文案語氣與禁用清單

• 語氣 臨床、直接且精緻。
• 標題風格 簡短、粗體且具宣告性，通常為全大寫。
• 按鈕文案 以行動為導向且清晰，始終為大寫。

• 避免使用圓潤、活潑的形狀 - 截圖顯示銳利的幾何矩形和正方形。
• 避免使用鮮豔、飽和的強調色 - 截圖顯示嚴格的單色調色板。
• 避免使用裝飾性或手寫字體 - 截圖顯示乾淨、功能性的 grotesque-sans 無襯線字體。
• 避免使用過多邊框或框框使介面雜亂 - 截圖顯示乾淨、無邊框的版面，留白充足。
• 避免隨處使用厚重的陰影 - 截圖顯示單一、細微的深層陰影，且謹慎使用。
• 避免在主要導覽和 CTA 使用小寫 - 截圖顯示這些元素採用一致的大寫樣式。
• 避免: 過於隨意或活潑的語言。
• 避免: 過度使用驚嘆號。
• 避免: 模糊或華麗的行銷術語。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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