精選 · 開放 · 免費

Datalands

一個融合品牌與數據的視覺傳達與資訊設計工作室。

StudioData VisualizationBold TypographyDark ModeClean

Datalands 網站截圖

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

原站: https://datalands.co

📦 瀏覽包內檔案 →

01

設計氣質 DNA

視覺傳達資訊設計數據視覺化品牌識別工作室

一個大膽的、單色調的數據建築事務所。

02

色彩

#FFFFFFInk

#000000BG

#3D3D3DMuted

rgba(255, 255, 255, 0.2)Line

在深邃黑色畫布上，採用純白字體的高對比單色調。

03

字型

geometric-sans · grotesque-sans · monospace

display120px · 900
heading60px · 400
subheading22px · 400
caption12px · 400

為介面標籤與小型標籤使用等寬字體。 · 主要標誌字體保持粗體。 · 內文採用清晰且極高可讀性的 grotesque-sans。

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

充裕

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid white 用於主要輪廓，徽章使用 2px 邊框

06

版面

1440container

12columns

24pxgutter

768 / 1024breakpoints

全寬首頁區塊，內容採用分割佈局

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.44, 0, 0.56, 1)easing

互動元素上細微的 hover 過渡

細微的色彩或透明度變化 · 細微的壓縮或狀態改變

08

組件

button 圓角膠囊按鈕，透明背景搭配白色輪廓
card 極簡佈局，清晰的字體分隔
chip 小型膠囊標籤，採用實色背景（例如：案例研究使用橘色）
input 極簡、透明的輸入框，僅有底邊框線
hero 充滿螢幕寬度的巨型字體展示

09

文案語氣與禁用清單

語氣專業、簡約且精緻
標題風格 大膽、直接且極具視覺性
按鈕文案 等寬字體、全大寫，並置於圓角按鈕中

不要使用彩色漸層 — 截圖顯示的是嚴格的單色調色盤
不要使用裝飾性襯線字體 — 字體完全採用幾何與 grotesque-sans
不要使用厚重的陰影 — 截圖顯示的是平坦、乾淨的表面
不要使用狹窄、擁擠的間距 — 佈局極具空間感，具有充裕的 padding
不要使用大小寫混合的首頁字體 — 標誌是獨特的幾何自訂風格
不要使用複雜的導覽選單 — 截圖顯示的是簡單的文字連結與極簡按鈕
避免: 不必要的裝飾
避免: 色彩漸層
避免: 俏皮或非正式的語言

10

包內真實截圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Datalands — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Datalands 是一個專精於數據視覺化與品牌識別的視覺傳達與資訊設計工作室。其設計以使用純黑（#000000）作為背景、白色（#FFFFFF）作為文字的鮮明高對比單色調色盤為定義，僅在特定標籤上點綴如橘色（#FF7400）等極少強調色。字體方面，主要標誌採用粗體的自訂幾何 sans-serif，內文則採用清晰的 grotesque-sans，並輔以等寬字體用於小型標籤。關鍵禁止事項包括：切勿使用彩色漸層、避免裝飾性襯線字體，以及不要以不必要的介面元素擁擠佈局。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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