精選 · 開放 · 免費

Sandlandsleep

一個極簡主義的健康介面，運用柔和漸層背景與醒目的黃色點綴色，引導使用者完成睡眠困擾調查。

01

設計氣質 DNA

一場寧靜、高端的邀請，通往更好的睡眠

02

色彩

鮮明的黃色點綴色與柔和、偏冷的漸層背景之間形成高對比。

03

字型

humanist-sans · sans-serif

• display48px · 600
• subtitle20px · 400
• body14px · 400

04

間距

標準的 4px 基礎垂直節奏，並搭配寬裕的間距以營造放鬆感

05

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

實線 1px 黑色邊框，用於主要圖示容器及部分 UI 元素

0 4px 12px rgba(0,0,0,0.1) · 0 4px 20px rgba(0,0,0,0.1)

06

版面

置中的單欄堆疊，適用於手機與專注的桌面覆蓋視窗

07

動效與互動

互動元素上平滑的顏色與 box-shadow 過渡效果

按鈕的背景色或 box-shadow 產生細微變化 · 透過背景色變化提供即時視覺回饋

08

組件

• button 全寬的膠囊狀按鈕，具有高對比的黃色背景與深色文字。
• card 不適用
• chip 不適用
• input 不適用
• hero 置中的促銷覆蓋視窗，搭配大型字體與簡潔的插圖。

09

文案語氣與禁用清單

• 語氣 俏皮、直接且具吸引力
• 標題風格 對話式，使用第二人稱的問句與陳述
• 按鈕文案 清晰、以行動為導向的陳述，供使用者選擇

• 勿使用陰暗、沉悶的背景——截圖顯示的是明亮、柔和的藍色漸層。
• 勿使用尖銳、矩形的按鈕——截圖顯示的是完全圓潤的膠囊狀按鈕。
• 勿使用狹小、擁擠的佈局——截圖顯示的是垂直堆疊、間距寬裕的佈局。
• 勿使用複雜、多欄的網格——截圖顯示的是單一置中欄位。
• 勿使用低對比的按鈕文字——截圖顯示的是亮黃色背景上的深色文字。
• 勿使用微妙的淡黃色點綴——截圖顯示的是鮮明、高飽和度的黃色。
• 避免: 臨床術語
• 避免: 侵略性的銷售語言
• 避免: 複雜的醫療術語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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