精選 · 開放 · 免費

Redis

Redis 為建構可靠的生產環境 AI 代理提供即時情境層。

devdb

Redis 網站截圖

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

原站: https://redis.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

基礎設施AI 代理情境引擎效能開發者優先

現代 AI 應用程式的高效能數據骨幹

02

色彩

#FF4438Accent

#FFFFFFInk

#B9C2C6Ink soft

#0D212CBG

#163341BG soft

#091A23BG quiet

#8A99A0Muted

rgba(255,255,255,0.15)Line

深色背景為鮮豔的品牌強調色與清晰易讀的白色文字提供高對比度的畫布。

03

字型

condensed-sans · geometric-sans · monospace

display80px · 700
headline40px · 600
body16px · 400
caption14px · 500

使用窄體無襯線字體於具衝擊力的大標題。 · 使用幾何無襯線字體於內文與介面元素。 · 使用等寬字體於技術提示與程式碼片段。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

一致的 4px 格線，區塊間採用充足的垂直內距。

05

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

sm · 4px

md · 8px

lg · 10px

pill · 999px

1px solid rgba(255,255,255,0.15)

rgba(0,0,0,0.1) 0px 0px 20px 0px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

以醒目首頁橫幅為中心的佈局，後接功能區塊與技術圖表。

07

動效與互動

200msmicro

300mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

內容區塊的細微淡入效果。 · 互動元素平滑的顏色與透明度過渡。 · 懸停狀態下組件略微變亮或浮起的效果。

按鈕與連結上細微的背景色變化或亮度調整。 · 提供立即反饋，帶有輕微下壓或透明度變化。

08

組件

button 主按鈕使用強調色填充並搭配白色文字；次按鈕使用描邊並搭配白色文字。
card 深色卡片帶有細微邊框與圓角，通常包含技術提示或功能說明。
chip 用於分類的膠囊形標籤，使用柔和背景與淺色文字。
input 深色輸入欄位帶有細微邊框，設計上與淺色文字形成高對比度。
hero 深色背景上大而粗體的窄體標題，居中置於技術提示展示與行動呼籲按鈕之上。

09

文案語氣與禁用清單

語氣具權威性、技術性且直接。
標題風格 粗體、窄體且以行動為導向，常用於點出問題或解決方案。
按鈕文案 清晰直接，使用如「試用」、「取得」、「預約」等動詞。

不要使用淺色背景——截圖顯示為了讓開發者專注的深邃深色主題。
不要使用裝飾性或手寫字體——截圖顯示的是窄體與幾何無襯線字體。
不要使用柔和或粉蠟色——截圖顯示的是高對比度的白色與鮮豔的紅色點綴。
不要使用寬闊、延展的字體——截圖顯示的是高挑、窄體的標題。
不要使用通用的圓角按鈕——截圖顯示的是略帶圓角、膠囊形或方形的按鈕。
不要使用細線、低對比度的邊框——截圖顯示的是清晰可見的分隔邊框。
避免: 避免過於隨意或俏皮的語言。
避免: 避免使用模糊核心技術價值的複雜行話。
避免: 避免使用軟弱或猶豫的措辭。

10

包內真實截圖

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

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

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

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

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

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

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

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

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

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

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

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

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

Redis — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Redis 網站是一個以開發者為中心的平台，使用深邃的深色背景 (#0D212C)、高對比度的白色文字 (#FFFFFF) 與鮮豔的紅色強調色 (#FF4438)。字體結合了用於粗體、具衝擊力標題的窄體無襯線字體、用於清晰內文的幾何無襯線字體，以及用於技術提示的等寬字體。佈局簡潔且居中，包含大型首頁橫幅區塊、技術圖表和清晰的行動呼籲按鈕。關鍵設計規則：絕不使用淺色背景、避免裝飾性字體、保持高對比度、標題使用窄體字，並透過可見邊框確保組件的清晰分隔。此設計有效地傳達了技術權威性與現代 AI 開發基礎設施。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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