CURATED · OPEN · FREE

Logseq

A privacy-first, open-source knowledge base that grows with your thoughts.

productivitynotes

↓ Download design system (13 MB)Open in OpenDesign

Visit: https://logseq.com

📦 Browse pack contents →

Identity DNA

knowledge managementnetworked thoughtprivacy-firstlocal-first

A private garden for your thoughts where paths naturally emerge.

Color

#85C8C8Accent

#F3F4F6Ink

#B7D5D5Ink soft

#012A36BG

#023643BG soft

#A4B5B6Muted

rgba(9, 75, 90, 1)Line

Deep, calm teal backgrounds with soft, glowing accents create an immersive, focused environment.

Typography

humanist-sans

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

Use system-ui font stack for native feel · Headings use weight 700 · Body text uses weight 400 · Muted text uses the inkSoft color (#B7D5D5)

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px grid for precise alignment.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

1px solid rgba(9, 75, 90, 1) for subtle definition

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered content with generous padding, responsive layout

Motion & Interaction

150msmicro

200mssmall

400msmedium

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

Smooth transitions for hover states · Fade-in effects for content · Subtle floating animations for background elements

Subtle color changes or brightness adjustments · Immediate visual feedback

Components

button Solid teal primary button with rounded corners, secondary buttons are transparent or outline.
card Semi-transparent glass-like cards with subtle teal borders and rounded corners.
chip Small rounded badges for categories like 'Person' and 'Book'.
input Search bar with rounded corners and transparent background.
hero Large centered headline with an illustrative background featuring a classical statue and overlapping UI elements.

Voice & Don'ts

Tone Thoughtful, professional, and slightly philosophical
Headlines Action-oriented and benefit-focused
CTAs Clear and direct, emphasizing local-first benefits

Don't use bright, saturated colors — screenshot shows muted, desaturated teal palette
Don't use serif fonts — screenshot shows sans-serif system font stack throughout
Don't use sharp corners — screenshot shows consistent 8px border radius
Don't use heavy drop shadows — screenshot shows subtle teal glow effects
Don't clutter the interface — screenshot shows generous whitespace and focused content
Don't use uppercase extensively — screenshot shows it only for small labels and badges
Avoid: Technical jargon
Avoid: Overly casual language
Avoid: Fear-based marketing
Avoid: Hype and buzzwords

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Logseq is a privacy-first, open-source knowledge base with a calm, focused dark mode interface. The design uses a deep teal (#012A36) background with soft, glowing accents (#85C8C8) and semi-transparent glass-like cards. Typography relies on the system-ui font stack with clear hierarchy between display (700 weight) and body (400 weight) text. The interface emphasizes local-first principles with a thoughtful, professional tone. Critical design rules: avoid bright saturated colors, don't use serif fonts, maintain consistent 8px border radius, use subtle teal glows instead of heavy shadows, preserve generous whitespace, and limit uppercase to small labels only. The overall feel is one of focused calm and intellectual depth, matching Logseq's philosophy of connected thought.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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