精選 · 開放 · 免費

Ably

一個以開發者為中心的基礎架構平台，用於建構具韌性的即時應用程式。

01

設計氣質 DNA

為現代、多裝置數位體驗提供高效能的引擎室。

02

色彩

高對比深色模式，搭配充滿活力、動感的橙色強調色，用於高優先級操作。

03

字型

geometric-sans · humanist-sans · monospace

• display56px · 500
• body17px · 500

使用清晰的字型層級結構，以大型、粗體的展示文字傳達關鍵訊息。 · 確保白色/灰色文字與深色背景之間有足夠的對比度。

04

間距

一致的 4px 基本單位，為整個版面提供結構與可預測的間距。

05

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

使用 1px solid rgba(226,232,240,1.0) 進行細微區隔，互動元素則使用 1px solid rgba(255,255,255,0.25)。

0px 4px 4px 0px rgba(0,0,0,0.25)

06

版面

結構化的 12 欄網格系統，採用中央容器，設有主視覺內容、統計數據與應用案例卡片等獨立區塊。

07

動效與互動

為互動狀態（如 hover、顏色變化與版面調整）提供流暢的過渡效果。

透過顏色變化、透明度調整或細微的內距移動提供視覺反饋。 · 以標準互動反饋提供即時回應，通常會將元素過渡至其啟用狀態。

08

組件

• button 粗體、實色的主要按鈕（常為橙色漸層）與外框式的次要按鈕，兩者皆具備較大的內距與圓角。
• card 深色主題的卡片，採用圓角，用於展示搭配圖像與精簡描述的應用案例。
• chip 小型、圓角的標籤或徽章，用於 UI 中的狀態或分類。
• input 深色主題的輸入欄位，具備清晰邊框與互動元素的特定狀態。
• hero 大型、左對齊的主視覺區塊，包含引人注目的標題、描述性文字與顯著的行動號召按鈕。

09

文案語氣與禁用清單

• 語氣 自信、具權威性且以開發者為中心，強調可靠性與效能。
• 標題風格 直接、以效益為導向且簡潔，常使用強力動詞與具衝擊力的數字。
• 按鈕文案 可操作且清晰，使用「開始」、「前往」等動詞引導使用者。

• 不要使用淺色主題——畫面截圖顯示的是深色背景（#03020D）搭配白色文字。
• 不要使用藍色作為主要強調色——畫面截圖顯示的是鮮豔的橙色（#FF5416）用於關鍵操作。
• 不要使用小於 4px 的圓角——畫面截圖顯示卡片一致使用 8px-12px 的圓角。
• 不要使用複雜的無襯線字體——畫面截圖顯示的是簡潔的幾何與人文無襯線體。
• 不要使用擁擠狹窄的間距——畫面截圖顯示的是寬裕的 24px 欄溝與較大的內距。
• 不要使用裝飾性的襯線字體——畫面截圖顯示的是現代、功能性的無襯線字型。
• 避免: 避免使用過於隨意或術語過多的語言，以免模糊技術價值主張。
• 避免: 避免使用與深色高對比主題衝突的淺色或粉彩色調色盤。
• 避免: 避免擁擠的版面；保持充足的留白以突顯關鍵資訊。
• 避免: 避免複雜或不可預測的動畫；保持動態效果細膩且有意義。
• 避免: 避免使用多個相互競爭的強調色；專注於主要的橙色作為焦點。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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