精選 · 開放 · 免費

Getcoco

一個活潑、注重實用的 SaaS 登入頁，運用大膽排版與鮮明強調色來行銷社群銷售應用程式。

01

設計氣質 DNA

為現代社會企業家打造的活潑、親切工具組。

02

色彩

以高對比中性色為基底，搭配單一鮮明電光藍作為主要行動的強調色。

03

字型

geometric-sans · monospace

• display64px · 700
• h232px · 700
• body14px · 500

所有文字使用幾何無襯線體 (GT America)。 · 標題使用粗體 (700)，內文使用中等字重 (500)。

04

間距

使用一致的 24px、40px 與 48px padding 來分隔內容區塊。

05

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

互動元素（如輸入框）使用 1px solid rgba(0,0,0,0,1) 邊框。

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 0px 0px 1px rgba(0, 0, 0, 0.1)

06

版面

標準的居中容器佈局，具有充足的垂直間距。

07

動效與互動

按鈕在 hover 時有流暢的背景色過渡效果。

按鈕與互動元素在 hover 時平滑改變背景色。 · 互動元素點擊時提供立即視覺回饋，游標顯示為手指圖示。

08

組件

• button 主要 CTA 為藥丸形按鈕，採用鮮明藍色背景與白色文字。次要 CTA 為純文字連結。
• card 卡片使用非常大的圓角 (24px-32px) 與最小邊框。
• chip 應用程式 UI 中的狀態指示器使用藥丸形背景與鮮明色彩。
• input 輸入框具有細微的內陰影與圓角。
• hero 以醒目居中標題開頭，下方接大型影片/媒體容器與描述文字。

09

文案語氣與禁用清單

• 語氣 自信、賦權且略帶俏皮。
• 標題風格 簡短有力、以效益為導向，搭配大型粗體幾何字型。
• 按鈕文案 直接以行動為導向，使用鮮明色彩吸引注意。

• 勿使用小型緊湊字型——截圖顯示為大型粗體幾何字型。
• 勿使用柔和、大地色系調色板——截圖顯示為明亮、高對比並帶有鮮明強調色的調色板。
• 勿使用尖銳邊角——截圖顯示為高度圓潤、藥丸狀形狀。
• 勿使用細體、輕字重——截圖顯示為中等至粗體字重以保持清晰。
• 勿使用深色模式——截圖顯示為以白色為主的背景搭配深色文字。
• 勿使用複雜、擁擠的佈局——截圖顯示為簡潔、寬敞的單欄佈局。
• 避免: 過於正式或企業化的術語。
• 避免: 被動語態。
• 避免: 複雜的句子結構。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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