精选 · 开放 · 免费

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

深邃、平静的蓝绿色背景搭配柔和、发光的点缀，营造沉浸式、专注的环境。

03

字体

humanist-sans

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

使用 system-ui 字体栈以获得原生体验 · 标题使用 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

居中内容，充裕 padding，响应式布局

07

动效与交互

150msmicro

200mssmall

400msmedium

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

hover 状态的平滑过渡 · 内容的淡入效果 · 背景元素的微妙浮动动画

微妙的颜色变化或亮度调整 · 即时的视觉反馈

08

组件

button 实心蓝绿色主按钮，带圆角。次要按钮为透明或轮廓样式。
card 半透明的类玻璃卡片，带微妙的蓝绿色边框和圆角。
chip 用于分类的小型圆角徽章，如“人物”和“书籍”。
input 圆角搜索栏，采用透明背景。
hero 大型居中标题，配有插画风格的背景，包含古典雕塑和重叠的界面元素。

09

文案语气与禁用清单

语气深思熟虑、专业且略带哲思
标题风格 以行动为导向，聚焦于益处
按钮文案 清晰直接，强调本地优先的优势

不要使用明亮、饱和的颜色——截图显示的是柔和、去饱和的蓝绿色调
不要使用衬线字体——截图显示全程使用无衬线系统字体栈
不要使用尖锐的圆角——截图显示保持一致的 8px 圆角
不要使用厚重的投影——截图显示的是微妙的蓝绿色辉光效果
不要让界面显得拥挤——截图显示有充裕的留白和专注的内容
不要大量使用大写字母——截图显示它仅用于小型标签和徽章
避免: 技术术语
避免: 过于随意的语言
避免: 基于恐惧的营销
避免: 炒作和流行词

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 是一款隐私优先的开源知识库，拥有宁静、专注的暗黑模式界面。设计采用深蓝绿色 (#012A36) 背景，搭配柔和的发光点缀 (#85C8C8) 和半透明的类玻璃卡片。字体排版依赖 system-ui 字体栈，并在显示文本（700 字重）和正文（400 字重）之间建立了清晰的层次。界面强调本地优先原则，语气深思熟虑、专业。关键设计规则：避免使用明亮饱和的颜色，不要使用衬线字体，保持一致的 8px 圆角，使用微妙的蓝绿色辉光代替厚重的投影，保留充裕的留白，并将大写字母的使用限制在小型标签。整体感觉是专注的宁静与思想的深度，与 Logseq 的关联思维哲学相匹配。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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