精選 · 開放 · 免費

Earlydog

充滿趣味、幾何風格的 SaaS 品牌設計，透過大膽的排版與抽象形狀，賦予雲端基礎設施人性化的面貌。

01

設計氣質 DNA

雲端運營的數位包浩斯工作室

02

色彩

高對比幾何色盤，以溫暖的奶油色為基底，搭配搶眼的主色調。

03

字型

geometric-sans · humanist-sans · monospace

• display116px · 700
• display-md80px · 700
• body18px · 400

04

間距

寬裕的垂直間距，章節內距為 120px-128px。

05

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

按鈕使用 1px solid rgba(0, 6, 9, 0.1)，啟用狀態則為 3px solid。

06

版面

全出血的主視覺，採用文字與圖形的不對稱分割佈局。

07

動效與互動

全域套用 transition: all

互動元素的細微狀態變化。 · 即時回應。

08

組件

• button 膠囊形狀的描邊按鈕，帶有粗黑邊框與粗體文字。
• card 不適用 - 佈局使用圖形構圖，而非傳統卡片。
• chip 不適用
• input 不適用
• hero 大型分割佈局，包含兩行粗體標題與幾何圖形構圖。

09

文案語氣與禁用清單

• 語氣 專業且平易近人
• 標題風格 大膽、直接、聚焦於效益
• 按鈕文案 簡潔的膠囊按鈕，搭配清晰的行動動詞

• 請勿使用深色背景 — 螢幕截圖顯示基底為溫暖的奶油色 (#FFF9F0)。
• 請勿使用襯線字體 — 螢幕截圖僅顯示幾何無襯線與人文無襯線字體。
• 請勿使用帶有陰影的圓角卡片 — 螢幕截圖顯示扁平的幾何構圖，無陰影效果。
• 請勿使用柔和、飽和度低的顏色 — 螢幕截圖顯示高飽和度的主色調 (藍色、橘色、黃色)。
• 請勿使用漸層背景 — 螢幕截圖顯示純色平面與幾何形狀。
• 請勿使用纖細、輕盈的字體 — 螢幕截圖顯示極粗 (700 weight) 的標題，並帶有緊湊的字距。
• 請勿使用標準矩形按鈕 — 螢幕截圖顯示帶有粗黑邊框的膠囊形狀按鈕。
• 避免: 充滿術語的語言
• 避免: 暗黑模式美學
• 避免: 寫實風格的影像

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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