精選 · 開放 · 免費

Hygraph

一款 AI 驅動的 Headless CMS，旨在加速企業團隊的內容速度。

01

設計氣質 DNA

企業內容營運的高效能引擎。

02

色彩

簡潔專業，以充滿活力的紫色作為強調色，用於突顯關鍵操作與狀態變更。

03

字型

geometric-sans · humanist-sans · monospace

• display56px · 500
• headline40px · 500
• subtitle20px · 400
• body16px · 400
• label14px · 500

標題採用幾何無襯線字體，營造現代、結構化的視覺感。 · 內文使用人文無襯線字體，確保高度可讀性。 · 等寬字體（Space Grotesk）用於程式碼片段與技術細節。 · 大寫文字謹慎用於標籤與導航元素。 · 大寫文字的字距稍微增加，以提升辨識度。

04

間距

所有內邊距、外邊距與佈局間距均一致使用 4px 基礎網格。

05

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

1px solid rgba(231, 234, 239, 1.0)

None: rgba(0, 0, 0, 0.047) 0px 12px 12px 0px, rgba(0, 0, 0, 0.055) 0px 25px 25px 0px · None: rgba(91, 76, 255, 0.6) 0px 2px 4px 0px, rgb(91, 76, 255) 0px 0px 0px 1px

06

版面

標準的 12 欄網格系統，最大寬度 1280px，並在 768px 與 1024px 設有響應式斷點。

07

動效與互動

互動元素的懸停狀態使用細膩的彈簧動畫（cubic-bezier(0.18, 0.89, 0.31, 1.57)）營造彈跳感。 · 顏色、背景色與邊框色的變更使用流暢的過渡效果（0.15 秒）。 · 元素的顯示使用淡入淡出效果（0.3 秒）。

按鈕和連結等互動元素在懸停時，顏色或背景會發生細微變化，通常伴隨彈簧動畫效果。 · 點擊元素可能會觸發輕微的變形或顏色變化，以提供回饋。

08

組件

• button 主要按鈕為膠囊形狀（9999px 圓角），背景為實心紫色（#685CEF）並配白色文字。次要按鈕背景為淺薰衣草色（#E8E9FF），文字為紫色。
• card 卡片是簡潔的容器，帶有細微邊框、白色背景和極簡陰影。
• chip 小型膠囊狀元素，用於標籤或標示，通常帶有淺色背景和細微邊框。
• input 文字輸入框帶有細微邊框、圓角和簡潔的白色背景。
• hero 一個寬大、置中的主視覺區塊，包含醒目的標題、副標題和清晰的行動呼籲。

09

文案語氣與禁用清單

• 語氣 專業、自信且具前瞻性。
• 標題風格 大而具衝擊力的標題，清晰陳述價值主張。
• 按鈕文案 直接且以行動為導向，例如「聯繫我們」或「立即開始」。

• 不要使用既定紫色色板以外的刺眼、高飽和度顏色。
• 不要使用厚重、哥德體或高度裝飾性的字體作為標題。
• 不要使用完全的深色模式，因為截圖顯示的是一個明亮、通透的介面。
• 不要在按鈕或卡片上使用銳利的 90 度直角，因為設計偏好較柔和、圓潤的形狀。
• 不要在主要內容中使用密集、多欄的文字佈局，因為設計偏好簡潔、置中的閱讀路徑。
• 不要使用會與文字內容競爭的大型、複雜背景圖片。
• 避免: 過於隨意的語言
• 避免: 缺乏背景的技術術語
• 避免: 被動語態

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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