精選 · 開放 · 免費
Aplos
一個面向高端植物飲料的直銷品牌,以深沉影像與精緻襯線字體排印為特色。
ConsumerPhotographicPremiumCleanProduct
01
設計氣質 DNA
無酒精精緻植物基健康
現代奢華的無酒精烈酒藥妝店。
02
色彩
#000000Ink
#646464Ink soft
#F2F1EDBG soft
rgba(180,174,172,1)Line
高對比的單色調基底,搭配溫潤米白表面,以確保可讀性與專注度。
03
字型
transitional-serif · humanist-sans
- display
40px · 400 - subtitle
26px · 400 - body
13px · 400
04
間距
嚴格遵循 3px 的倍數,主要間距為 12px 與 24px。
05
表面 (圓角 / 陰影 / 邊線)
sm · 3px
md · 5px
lg · 12px
pill · 999px
運用細微的 1px 邊框與內嵌陰影來定義輸入欄位與容器。
rgb(180, 174, 172) 0px 0px 0px 1px inset
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全版幅深色首頁,搭配大型、置中的模式視窗覆蓋層。
07
動效與互動
200msmicro
300mssmall
800msmedium
cubic-bezier(0.645, 0.045, 0.355, 1)easing
互動元素的平滑背景與色彩過渡 · 填滿與懸停狀態的變換動畫
互動元素上的細微色彩與背景過渡。 · 標準指標游標下的即時視覺回應。
08
組件
- button 高對比黑色藥丸形或大圓角按鈕,搭配白色文字作為主要操作。
- card 分割視窗模式,一側為電影感影像,另一側為乾淨、功能性的表單。
- input 乾淨的文字輸入欄位,帶有細微的 1px 內嵌陰影與略帶圓角。
- hero 大規模攝影首頁,具備氛圍燈光與疊加的字體排印。
09
文案語氣與禁用清單
- 語氣 精緻、自信且具吸引力。
- 標題風格 大型、精緻的襯線標題,字間距緊湊。
- 按鈕文案 直接且以行動為導向,例如「立即購買」或「繼續」。
- 勿使用明亮的強調色——截圖顯示嚴格的黑、白、米白色調
- 勿使用大圓角按鈕——截圖顯示按鈕採用更細微、現代的 5px 圓角
- 勿使用通用的無襯線字體作為展示字型——截圖顯示所有主要標題均採用過渡襯線體
- 勿使用雜亂的多欄佈局——截圖顯示乾淨、專注的分割視窗模式與全版幅首頁
- 勿為主要網站使用輕盈、通透的背景——截圖顯示以深黑色為主導的背景
- 勿使用強烈的陰影——截圖顯示細微的內嵌陰影與邊框以定義輪廓
- 避免: 刺眼的霓虹色彩
- 避免: 俏皮或過於隨意的語言
- 避免: 雜亂的佈局
- 避免: 通用的無襯線標題
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計代表一個專注於無酒精烈酒的高端直銷飲料品牌。其運用由深黑 (#000000) 與溫潤米白 (#F2F1ED) 表面主導的精緻、極簡美學。字型排印以精緻的過渡襯線體作為展示字型,並搭配乾淨的新人文主義無襯線體用於內文與 UI 元素。關鍵互動模式包括高對比、大圓角的主要按鈕,以及用於表單欄位的細微內嵌邊框。關鍵限制:嚴格避免使用鮮豔的強調色,絕不使用通用的無襯線體作為標題,並保持內斂、以攝影為主的佈局。
en · zh-CN · zh-TW · ja · ko