精選 · 開放 · 免費

Zen Browser

設計優美、注重隱私的瀏覽器,帶來更平靜的網路體驗。

browserproduct
Zen Browser 網站截圖
↓ 下載設計系統包 (11 MB)在 OpenDesign 中開啟

原站: https://zen-browser.app

📦 瀏覽包內檔案 →

01

設計氣質 DNA

平靜隱私優美簡潔禪意

一款現代、以隱私為導向的瀏覽器,提供平靜的數位環境。

02

色彩

#F76F53Accent
#2E2E2EInk
#F2F0E3BG
#9E9E9EMuted
rgba(46, 46, 46, 0.1)Line

溫暖的米白色畫布,搭配深炭灰色文字與單一溫暖的珊瑚色調。

03

字型

transitional-serif · humanist-sans

大型展示標題使用過渡襯線體,增添優雅與溫潤感。 · 內文使用簡潔的人文無襯線體,確保可讀性與親和力。

04

間距

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

充足的垂直間距(例如 96px、144px)創造平靜、舒適的佈局。

05

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

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

使用柔和墨色的細微 1px 邊框,形成輕微區隔。

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 10px 15px -3px rgba(0, 0, 0, 0.1)

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

主視覺區段採用置中單欄佈局,延伸至功能區段。

07

動效與互動

150msmicro
200mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

互動元素與頁面呈現採用流暢的透明度與變形過渡效果。

互動元素在懸停時有細微的背景色變化或輕微的縮放/變形效果。 · 透過狀態變化提供即時的視覺回饋。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

Zen Browser 的設計優先考慮平靜、優美且注重隱私的體驗。色調以溫暖的米白色背景(#F2F0E3)為基底,搭配深炭灰色文字(#2E2E2E)與單一珊瑚色強調色(#F76F53)。字體排印方面,優雅的標題使用過渡襯線體,可讀的內文則採用簡潔的人文無襯線體。佈局寬敞、置中且舒適,運用充足的垂直間距與主要元件的圓角(24px)。關鍵禁忌:不要使用冰冷的藍色強調色;不要營造密集、擁擠的佈局;不要在主要元素上使用尖銳的 90 度角;不要使用純白色背景;不要使用具攻擊性、刺眼的字型排印;不要讓不必要的視覺雜訊使介面雜亂。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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