精選 · 開放 · 免費
Storyblok
為現代框架設計的企業級 Headless CMS,具備簡潔愉悅的美學
cmsdev
01
設計氣質 DNA
Headless CMSDeveloper-firstAI 內容愉悅感
一個開發者友好的內容平台,兼具精緻質感與親和力
02
色彩
#7530F7Accent
#1F1F1FInk
#44474AInk soft
#FFFFFFBG
#808080Muted
rgba(31,31,31,0.12)Line
以高對比中性色調為基底,搭配單一活潑的紫色作為主強調色,並策略性地運用藍色作為輔助亮點
03
字型
geometric-sans
- display
56px · 900 - heading
48px · 900 - subheading
36px · 700 - body
16px · 400 - small
14px · 400 - caption
12px · 400
標題使用字重 900,字距緊湊 · 內文維持寬裕行高以利閱讀 · 按鈕文字為字重 500,尺寸 16px · 強調色彩僅用於英雄區塊的關鍵語句
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
固定 24px 欄間距,區段內距寬裕,設為 48-96px
05
表面 (圓角 / 陰影 / 邊線)
sm · 8px
md · 12px
lg · 24px
pill · 999px
卡片與輸入框採用 1-2px 的柔和邊框
0 2px 8px rgba(31,31,31,0.08) · 0 4px 16px rgba(31,31,31,0.12)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
採用置中單欄英雄區塊設計,下方為全寬內容區段
07
動效與互動
200msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
按鈕與連結具備流暢的 hover 過渡效果 · 互動元素具有細膩的色彩過渡變化
按鈕背景色變化,連結透明度改變 · 主要操作具有縮放回饋
08
組件
- button 主要按鈕為實心深色填充配白色文字,次要按鈕為描邊外框,採用圓角設計
- card 簡潔有框線的容器,內距一致
- input 標準文字輸入框,具備柔和邊框
- hero 大型粗體排版,淺色背景搭配藍色強調文字,採用置中佈局
09
文案語氣與禁用清單
- 語氣 自信、具技術感,並帶有些許俏皮
- 標題風格 大膽的陳述性標題,搭配選擇性的色彩強調
- 按鈕文案 直接的行動動詞,如「免費試用」與「查看我們的 MCP」
- 不要使用多種強調色——畫面截圖顯示紫色與藍色被謹慎運用,並具有清晰的層級關係
- 不要使用厚重陰影——畫面截圖顯示僅使用最低限度、細膩的立體效果
- 不要使用裝飾性字體——畫面截圖顯示整體採用幾何無襯線字體
- 不要使介面雜亂——畫面截圖維持充足的留白與呼吸空間
- 不要使用激進的 CTA——畫面截圖顯示冷靜、清晰的按鈕標籤
- 不要混用視覺風格——畫面截圖維持一致的圓角與排版
- 避免: 過度企業化的語言
- 避免: 被動語態
- 避免: 未經解釋的術語
- 避免: 激進的銷售推廣
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個以開發者為導向的 SaaS 平台,用於 Headless CMS。其設計平衡了技術可信度與親和力。主要色彩為白色背景搭配近黑色文字 (#1F1F1F) 與紫色強調色 (#7530F7)。藍色亮點 (#3B82F6) 用於英雄區塊文字。排版採用幾何無襯線字體,標題字重為 900,字距緊湊。不要使用多種相互競爭的強調色。不要使用厚重陰影或漸層。不要使用裝飾性襯線字體。佈局採用置中設計,留白充足。主要操作按鈕採用實心深色填充與圓角設計。整體介面感覺簡潔現代,同時不顯冰冷。
en · zh-CN · zh-TW · ja · ko