精選 · 開放 · 免費

Topicals

一個大膽的編輯式保養品牌，運用超大排版與高對比攝影，傳達科學實證且具包容性的配方理念。

01

設計氣質 DNA

一個大膽、現代的保養品牌，結合臨床功效與活潑、包容且具高時尚編輯感的美學。

02

色彩

以深炭色與純白色為基調的高對比色板，搭配鮮明的珊瑚紅作為強調色，提供充滿活力的視覺焦點。

03

字型

geometric-sans · humanist-sans

• display120px · 700
• heading42px · 500
• body14px · 400
• label12px · 500

使用幾何無襯線字體作為大型展示文字與主要標題。 · 使用人文主義無襯線字體作為內文與介面元素，以維持可讀性。 · 為大型展示文字套用緊湊的字距，營造緊密、具衝擊力的視覺效果。 · 確保內文字體大小至少 14px 以上，以保持清晰可辨。

04

間距

結合以 4px 為基準的緊湊間距用於介面元素，以及編輯區段中充裕的留白空間。

05

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

06

版面

全出血首屏橫幅以巨大的排版文字標誌與大型產品攝影為主體，接著是雙欄編輯區段。

07

動效與互動

內容元素的淡入動畫。 · 互動元素的平滑色彩過渡。 · 文字與背景色彩變化的 linear 過渡。

按鈕與連結等互動元素，透過 0.2 秒的 linear 過渡，平滑改變背景或文字顏色。 · 背景或邊框顏色的細微變化，表示互動元素的啟用狀態。

08

組件

• button 按鈕採用簡潔的設計，具有 2px 圓角、14px 無襯線字體文字，背景透明，在 hover 時填入實色。
• card 內容卡片依賴高品質攝影與充裕留白，而非傳統的卡片邊界或陰影。
• chip 小型大寫標籤，帶有 1px 邊框與圓角，用於標籤與次要資訊。
• input 輸入框使用簡潔的 1px 邊框與 2px 圓角，保持乾淨且功能性的外觀。
• hero 全視野首屏橫幅，包含超大的排版文字標誌與中央產品照片，背景為深色。

09

文案語氣與禁用清單

• 語氣 自信、包容且以科學為基底，同時帶有一絲趣味。
• 標題風格 大膽、超大且直接，常使用單一詞彙或簡短有力的短語。
• 按鈕文案 簡潔且以行動為導向，使用乾淨的無襯線字體與透明按鈕樣式。

• 不要使用裝飾性或手寫體字體——截圖顯示一致使用乾淨的幾何與人文主義無襯線字體。
• 不要為首屏橫幅使用淺色或多彩背景——截圖顯示深炭色背景搭配白色文字。
• 不要在卡片上使用過多陰影或邊框——截圖顯示乾淨、以攝影為主的版面，無沉重容器。
• 不要使用多色調色盤——截圖顯示聚焦於黑色、白色與單一鮮明珊瑚紅的色板。
• 不要在按鈕或輸入框上使用過大的圓角——截圖顯示 2px 圓角，帶來更俐落、精緻的感覺。
• 不要使用擁擠的小版面——截圖顯示巨大的排版與充裕的留白，營造編輯式氛圍。
• 避免: 避免使用過於技術性的術語、過度裝飾的元素，或過於臨床、冰冷的美學風格。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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