精選 · 開放 · 免費

Logseq

一款隱私優先、開源的知識庫，隨您的思緒共同成長。

productivitynotes

Logseq 網站截圖

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

原站: https://logseq.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

知識管理網路化思考隱私優先本地優先

一座為您的思緒打造的私密花園，路徑在此自然延伸。

02

色彩

#85C8C8Accent

#F3F4F6Ink

#B7D5D5Ink soft

#012A36BG

#023643BG soft

#A4B5B6Muted

rgba(9, 75, 90, 1)Line

深邃、沉靜的 teal 背景搭配柔和、發光的點綴色，打造沉浸且專注的環境。

03

字型

humanist-sans

display56px · 700
display38px · 700
body-lg20px · 400
body16px · 400
caption14px · 400

使用系統字型堆疊以營造原生感受 · 標題使用粗細 700 · 內文使用粗細 400 · 次要文字使用 inkSoft 色 (#B7D5D5)

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

一致的 4px 網格，確保精確對齊。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgba(9, 75, 90, 1) 帶來細微的輪廓界定

None: rgba(133, 200, 200, 0.3) 0px 4px 32px 0px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

置中的內容區塊，搭配充裕內邊距與響應式佈局

07

動效與互動

150msmicro

200mssmall

400msmedium

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

滑鼠懸停狀態的流暢轉場 · 內容的淡入效果 · 背景元素的細微浮動動畫

細微的色彩變化或亮度調整 · 立即的視覺回饋

08

組件

button 實心 teal 主按鈕採用圓角設計，次要按鈕則為透明或外框樣式。
card 半透明玻璃質感的卡片，帶有細微 teal 邊框與圓角。
chip 小型圓角徽章，用於標示「人物」、「書籍」等類別。
input 搜尋欄位採用圓角與透明背景設計。
hero 大型置中標題，搭配包含古典雕像與重疊介面元素的插圖背景。

09

文案語氣與禁用清單

語氣深思熟慮、專業且略帶哲學思維
標題風格 以行動為導向並強調效益
按鈕文案 清晰直接，強調本地優先的優勢

避免使用鮮豔、飽和的色彩——截圖顯示的是柔和、低飽和度的 teal 色調
避免使用襯線字體——截圖顯示的是系統無襯線字型堆疊
避免使用銳角——截圖顯示的是一致的 8px 圓角
避免使用厚重陰影——截圖顯示的是細微的 teal 光暈效果
避免介面擁擠——截圖顯示的是充裕的留白與聚焦的內容
避免大量使用大寫字母——截圖顯示其僅用於小型標籤與徽章
避免: 技術術語
避免: 過度隨意的語言
避免: 恐懼行銷
避免: 誇大用語與流行詞

10

包內真實截圖

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

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

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

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

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

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

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

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

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

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

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

Logseq — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Logseq 是一款隱私優先、開源的知識庫，擁有沉靜、專注的深色模式介面。設計採用深 teal (#012A36) 背景，搭配柔和、發光的點綴色 (#85C8C8) 與半透明玻璃質感的卡片。字體依賴系統字型堆疊，並在標題（700 粗細）與內文（400 粗細）之間建立清晰的層級。介面強調本地優先原則，並以深思熟慮、專業的語氣呈現。關鍵設計規則：避免使用鮮豔飽和的色彩、不使用襯線字體、維持一致的 8px 圓角、使用細微 teal 光暈取代厚重陰影、保留充裕留白，並僅在小型標籤使用大寫字母。整體感受是專注的沉靜與知性深度，與 Logseq 連結思考的哲學完美契合。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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