精選 · 開放 · 免費

Contentful

專業的 SaaS 平台，用於企業級內容管理與個人化。

cmsdev
Contentful 網站截圖
↓ 下載設計系統包 (15 MB)在 OpenDesign 中開啟

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

📦 瀏覽包內檔案 →

01

設計氣質 DNA

內容管理開發者平台企業級應用個人化體驗數位體驗

為開發者與內容團隊打造的簡潔專業工作空間，強調清晰與效率。

02

色彩

#3C80CFAccent
#2B2D31Ink
#6D7682Ink soft
#FFFFFFBG
#F5F7F9BG soft
#E4EFF8BG quiet
#55575BMuted
rgba(229, 231, 235, 1)Line

以專業克制為原則，採用柔和的藍色點綴配色，營造清晰與信任感。

03

字型

humanist-sans · monospace

標題採用緊湊的負字距，以強化視覺衝擊。 · 內文保持寬裕的行高，以確保閱讀舒適度。 · 字體權重主要為 Regular (400)，UI 元素則使用 Semibold (600)。

04

間距

4px
8px
16px
24px
32px
48px
64px
96px

網格項目與區塊之間保持一致的 32px 間距。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid #E5E7EB

rgba(0, 0, 0, 0.25) 0px 0px 20px 0px

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

置中的內容區域，搭配寬幅導覽列與充裕的垂直內距。

07

動效與互動

100msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

hover 時平滑的色彩與背景色過渡效果。 · UI 狀態變化時的變形與透明度過渡效果。

文字連結的色彩變化，以及按鈕的背景色位移。 · 細微的變形或透明度降低。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Contentful — 桌面首屏（hero）
桌面首屏（hero）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Contentful — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是 Contentful 首頁，一個專業的企業級內容管理 SaaS 平台。設計簡潔、克制，並專注於清晰度。主要色彩包括白色背景 (#FFFFFF)、柔和的灰色區塊 (#F5F7F9) 以及主要的藍色點綴色 (#3C80CF)。字體採用人文無襯線字體 (Avenir Next)，擁有大尺寸、字距緊湊的展示標題與舒適的內文。主要禁忌：勿使用襯線字體、勿使用霓虹色、勿使用厚重的深色邊框、勿使用銳利的圓角、勿使用緊湊的內文行距，以及勿使用複雜的背景漸層。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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