精選 · 開放 · 免費

Periodaisle

一個直接面對消費者的永續經期護理品牌，採用溫暖、大地色調和包容性的攝影風格。

01

設計氣質 DNA

一個溫暖、大地色系的健康品牌，感覺像一位朋友。

02

色彩

大地色系中性色與深青綠色提供穩重、值得信賴的基礎。

03

字型

transitional-serif · humanist-sans

• display72px · 700
• heading24px · 700
• body14px · 400
• caption12px · 400

導覽與標籤使用大寫字母。 · 內文使用人文無襯線字體以確保可讀性。 · 大型展示字型使用過渡襯線字體增添優雅感。

04

間距

標準 4px 網格，按鈕與輸入欄位有特定的 padding 覆寫。

05

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

1px solid rgba(41,38,35,1.0)

0px 0px 0px 2px inset rgb(20, 71, 71) · 0px 0px 0px 2px inset rgb(255, 255, 251) · 0px 1px 0px 0px rgb(255, 255, 255)

06

版面

全寬主視覺，搭配堆疊式內容區塊和簡潔的產品網格。

07

動效與互動

hover 和 focus 時的顏色與 box-shadow 過渡效果。 · 互動元素的變換過渡效果。

顏色變化和 box-shadow 更新。 · 透過狀態變化提供視覺回饋。

08

組件

• button 藥丸形和矩形按鈕，帶有 inset box-shadows 以營造觸覺感。
• card 簡潔、無邊框的卡片，帶有細微的背景色調變化。
• chip 簡單的文字標籤，帶有青綠色背景高亮顯示。
• input 簡潔的矩形輸入欄位，帶有細邊框和圓角。
• hero 大型、沉浸式的攝影圖，搭配強烈的襯線字標題。

09

文案語氣與禁用清單

• 語氣 賦權、包容且直接。
• 標題風格 粗體、全大寫或大型襯線字標題，以清晰的利益點為主導。
• 按鈕文案 直接、行動導向的動詞，如「解鎖」或「選購」。

• 不要使用高飽和度的霓虹色——截圖顯示的是 #E9EEEA 和 #D3CEC5 等大地色、柔和色調。
• 不要使用純幾何無襯線字體——截圖顯示內文使用的是人文無襯線字體（Montserrat）。
• 不要讓介面過於複雜，層次太多——截圖顯示的是簡潔、扁平的層級結構。
• 不要在主要元素上使用尖銳、強勢的角落——截圖顯示的是圓角矩形和藥丸形狀。
• 不要到處使用刺眼、臨床感的純白背景——截圖顯示的是溫暖的米白色（#FFFFFB）。
• 不要使用純單色調色盤——截圖使用深青綠色（#144747）作為視覺亮點。
• 避免: 醫療術語
• 避免: 過度臨床的語言
• 避免: 強勢的銷售手法

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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