精選 · 開放 · 免費

Thankyoumachine Zendesk

一個專業、高對比的 SaaS 說明中心頁面，專注於清晰的溝通與強烈的字體層次。

01

設計氣質 DNA

一個簡潔、專業的 SaaS 平台客服介面

02

色彩

高對比的黑與白，搭配單一鮮明的黃綠色作為主要操作的強調色。

03

字型

humanist-sans

• display68px · 600
• displaySmall42px · 600
• displaySmall32px · 500
• body16px · 400
• caption14px · 400

主標題使用粗體的人文無襯線字體，行高緊湊，字母間距為負值。 · 內文保持舒適的 1.5 倍行高以提升易讀性。 · 按鈕使用稍粗的字重（500-600）以示強調。 · 頁尾文字使用較小的尺寸（14px）以容納密集資訊。

04

間距

一致的 8px 網格，各區塊之間留有充裕的空間。

05

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

1px solid rgba(0,0,0,0.1)

rgba(0,0,0,0.08) 0px 8px 24px 0px

06

版面

標準的 12 欄網格，擁有充裕的邊距，並在頁首、首頁大圖與頁尾區塊之間保持清晰的分隔。

07

動效與互動

互動元素的背景位置平滑過渡效果。 · 懸停狀態的線性微交互效果。 · 主要佈局變動的 cubic-bezier 轉場效果。

互動元素上細微的背景顏色過渡效果。 · 透過游標指標提供即時的視覺回饋。

08

組件

• button 膠囊形的主要按鈕，採用高對比強調色背景；次要按鈕則使用細微的外框線樣式。
• card 此視圖中未明確呈現，但首頁大圖使用了圓角容器。
• chip 此視圖中未使用。
• input 此視圖中未使用。
• hero 分割式佈局，左側為大型標題，右側為圓角圖片容器，兩者之間以充裕的留白空間分隔。

09

文案語氣與禁用清單

• 語氣 務實、專業且直接，即使在傳達錯誤訊息時亦然。
• 標題風格 字體大而粗體，並略帶口語化（「喔喔，此說明中心已不存在」），以軟化負面訊息。
• 按鈕文案 清晰、以行動為導向的按鈕（「閱讀指南」、「免費試用」），採用高對比樣式。

• 不要為主要內容區域使用深色背景——截圖顯示的是簡潔的白色背景。
• 不要為標題使用襯線字體——截圖對所有文字均使用人文無襯線字體。
• 不要為主要文字使用低對比顏色——截圖使用白底黑字的高對比配色。
• 不要使用銳利的矩形按鈕——截圖使用的是圓角（膠囊形）按鈕。
• 不要在首頁大圖區域塞入多個元素——截圖顯示的是簡潔的分割式佈局與充裕的留白。
• 不要將強調色用於文字或背景——截圖將其限定於高對比的按鈕。
• 避免: 避免在面向用戶的文案中使用過於技術性的術語。
• 避免: 避免使用缺乏明確層次的密集文字段落。
• 避免: 避免將強調色用於主要行動號召以外的任何用途。

11

System Prompt

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