精選 · 開放 · 免費

Courier

一個高級的深色主題 SaaS 平台，用於設計與發送通知。

devnotifications

Courier 網站截圖

↓ 下載設計系統包 (25 MB)在 OpenDesign 中開啟

原站: https://www.courier.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

通知編排訊息傳遞平台開發者

一個以開發者為首的控制中心，用於編排跨管道通知。

02

色彩

#FFFFFFInk

rgba(255,255,255,0.72)Ink soft

#0A0A0ABG

rgba(255,255,255,0.56)Muted

rgba(255,255,255,0.04)Line

高對比度深色介面，搭配細膩的視覺層次感。

03

字型

humanist-sans · monospaced

display56px · 500
display-sm40px · 500
body-lg18px · 400
body-sm14px · 400
mono12px · 400

大型展示文字使用緊湊行高（1.0-1.2）。 · 各區塊之間保持寬裕的垂直間距。 · 程式碼片段與變數使用等寬字體。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

以 8px 為基準單位，保持一致的垂直間距。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

纖細、低對比度的邊框，用於細膩的區隔。

0px 1px 1px 0px rgba(0, 0, 0, 0.12) · 0px 0.602187px 0.602187px -1.25px rgba(0, 0, 0, 0.25) · 0px 2.28853px 2.28853px -2.5px rgba(0, 0, 0, 0.22)

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

標準的置中欄位佈局，搭配全寬度英雄區域。

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

平滑的淡入效果與滾動時細膩的視差效果。 · 互動元素懸停時，以細膩的縮放或透明度變化作為回應。

互動元素在懸停時，背景或透明度發生細膩變化。 · 細膩的縮放或深度變化，以指示啟用狀態。

08

組件

button 圓角藥丸形按鈕，具有細膩的背景過渡效果。
card 具有圓角與細膩背景漸層的浮凸容器。
chip 小型圓角徽章，用於狀態或標籤。
input 深色主題輸入框，具有細膩邊框與圓角。
hero 大型置中標題，搭配輔助文字與互動式產品模型。

09

文案語氣與禁用清單

語氣自信、技術性且專業。
標題風格 直接、以效益為導向的陳述。
按鈕文案 以行動為導向的動詞，例如「申請演示」、「立即註冊」。

不要使用淺色背景——截圖顯示主背景色為接近黑色（#0A0A0A）。
不要使用多種亮色調的強調色——截圖顯示的是單色調色盤，僅謹慎使用一個品牌色（紫色）。
不要使用裝飾性襯線字體——截圖顯示所有文字均採用乾淨的人文無襯線字體。
不要使用複雜的網格圖案或厚重的紋理——截圖顯示的是乾淨、扁平的表面，搭配細膩的漸層。
不要使用尖銳的方形角落——截圖顯示所有介面元素均採用圓角（8px, 12px）。
不要使用複雜的佈局——截圖顯示的是乾淨、置中的佈局，具有寬裕的留白。
避免: 過於隨意或俏皮的語言。
避免: 模糊的行銷術語。
避免: 不必要的驚嘆號。

10

包內真實截圖

Courier — 桌面首屏（hero） — 桌面首屏（hero）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Courier — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Courier 是一個高級的 B2B SaaS 平台，專為開發者為核心的通知編排而設計。它採用深色模式（#0A0A0A）設計系統，搭配高對比度白色（#FFFFFF）與柔和（#rgba(255,255,255,0.72)）文字。排版採用乾淨的人文無襯線字體，並搭配等寬字體用於程式碼元素。佈局寬敞、置中，並聚焦於產品模型。關鍵禁忌：不要使用明亮、多彩的強調色；不要使用裝飾性或襯線字體；不要用不必要的圖案或紋理使介面雜亂；不要使用尖銳的角落；不要使用淺色背景。語氣自信且技術性，直接與開發者及產品經理對話。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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