精選 · 開放 · 免費

Valohealth

簡約高端的深色模式介面,運用大尺度排版與青色強調,傳達科學權威與高科技創新感。

AICleanPremiumDark ModeEditorial
Valohealth 網站截圖
↓ 下載設計系統包 (8 MB)在 OpenDesign 中開啟

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

📦 瀏覽包內檔案 →

01

設計氣質 DNA

科學發現藥物開發工程數據驅動

科學工程公司的數位宣言。

02

色彩

#1CB6E0Accent
#FFFFFFInk
#A0A0A0Ink soft
#000000BG
#151515BG soft
#1A1A1ABG quiet
#737373Muted
rgba(255,255,255,0.1)Line

高對比單色深色模式,搭配單一高飽和度青色強調,用於關鍵品牌訊息。

03

字型

geometric-sans · monospace

展示文字採用細字重(300-400)以保持優雅 · 類別標籤使用大寫上標與字距調整 · 所有文字區塊嚴格左對齊 · 深色背景上的長文內容採用大行高以提升可讀性

04

間距

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

寬裕的垂直節奏,由大 padding 區塊(如 40.5px)與章節間充足間距構成,以強調內容份量。

05

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

sm · 2px
md · 6px
lg · 12px
pill · 9999px

極度簡約;主要依賴色彩對比與間距區隔,而非可見邊框,僅在互動元素上使用細微 1px 下劃線。

rgba(0,0,0,0.3) 0px 32px 68px 0px

06

版面

1200container
12columns
24pxgutter
768 / 1024breakpoints

全寬深色畫布,搭配大尺度排版區塊與簡潔的 2×2 攝影網格。

07

動效與互動

150msmicro
300mssmall
1000msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

懸停時平滑的色彩與透明度過渡 · 互動元素輕微變換位移 · 大內容區塊的延長淡入效果

細微色彩變化或背景透明度調整,搭配快速 150ms 過渡。 · 即時回饋,帶有輕微縮放或透明度降低。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一家高端深色模式的生物科技與 AI 公司網站。設計以純黑(#000000)背景為基調,搭配橫跨全版面的幾何無襯線大尺度細字重(300-400)排版。單一高飽和度青色(#1CB6E0)僅用於點綴關鍵品牌語句,如「關鍵突破」時刻。佈局嚴格左對齊,搭配寬裕垂直間距,營造編輯感與權威氣質。重要禁忌:永遠不要使用裝飾性邊框或陰影,永遠不要使用粗體展示字重,永遠不要引入第二強調色。互動模式採極簡風格,依賴快速(150ms)色彩與透明度過渡,而非複雜動態。此網站代表企業深色模式設計的「工作室級」手法。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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