# Logseq · Design system migration spec

> Source: https://logseq.com  ·  Curated by OpenDesign  ·  en

> A beautiful example of how dark mode can be both functional and emotionally resonant for productivity tools.

## 1. Identity DNA

Logseq's design system is built around the concept of a private garden for your thoughts, where structure emerges organically from connection. The visual language serves this metaphor through a deep teal environment that feels both expansive and focused, supporting the tool's core identity as a privacy-first, local-first knowledge base for networked thought.

**One-liner:** A privacy-first, open-source knowledge base that grows with your thoughts.
**Keywords:** knowledge management · networked thought · privacy-first · local-first
**Analogy:** A private garden for your thoughts where paths naturally emerge.

## 2. Color

The color system establishes an immersive dark mode foundation with a deep teal background, using soft, glowing accents to guide attention without disrupting concentration. This palette creates a calm, focused atmosphere that reflects the tool's emphasis on deep work and intellectual clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#012A36` | main background |
| `--bg-soft` | `#023643` | card background |
| `--ink` | `#F3F4F6` | body text |
| `--ink-soft` | `#B7D5D5` | secondary text |
| `--muted` | `#A4B5B6` | placeholder |
| `--accent` | `#85C8C8` | single accent |
| `--line` | `rgba(9, 75, 90, 1)` | divider |

**Color principle:** Deep, calm teal backgrounds with soft, glowing accents create an immersive, focused environment.

The guiding principle is restraint—color serves as ambient context rather than dominant expression, allowing content to remain the primary focus.

## 3. Typography

Typography employs the native system font stack to maintain platform coherence, with weight differentiating between display and body text. The type hierarchy is functional rather than expressive, supporting information density while preserving readability across the interface.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 700 | -1px | Main hero headline |
| display | 38px | 1.2 | 700 | -0.5px | Section headings |
| body-lg | 20px | 1.5 | 400 | 0px | Subheadings and introductory text |
| body | 16px | 1.5 | 400 | 0px | Standard body text and UI elements |
| caption | 14px | 1.4 | 400 | 0.5px | Secondary text and labels |

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

## 4. Spacing

Spacing follows a consistent 4px grid that creates precise alignment and rhythmic consistency throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid for precise alignment.

## 5. Surfaces

Surfaces use semi-transparent, glass-like materials with subtle teal borders to create depth without heavy shadows. The design avoids sharp corners and heavy visual weight, instead favoring gentle glow effects that suggest floating elements within the dark environment.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - None: rgba(133, 200, 200, 0.3) 0px 4px 32px 0px
- **Borders:** 1px solid rgba(9, 75, 90, 1) for subtle definition

## 6. Layout

The layout skeleton centers content with generous padding, establishing clear visual hierarchy through spacing rather than dividing lines. This responsive structure adapts gracefully across screen sizes while maintaining the tool's characteristic spaciousness and focused presentation.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with generous padding, responsive layout

## 7. Motion & Interaction

Motion is deliberately subtle, with smooth transitions that provide immediate feedback without drawing attention to themselves. The animation philosophy prioritizes functional clarity—hover states adjust brightness, content fades in gently, and background elements float with barely perceptible movement.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for hover states
  - Fade-in effects for content
  - Subtle floating animations for background elements

- **Hover:** Subtle color changes or brightness adjustments
- **Click:** Immediate visual feedback
- **Transition:** All transitions use 0.15s cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Standard focus states for accessibility

## 8. Voice & Don'ts

The editorial voice is thoughtful and professional, with a slightly philosophical tone that matches the tool's approach to knowledge management. Language is action-oriented and benefit-focused, emphasizing the practical advantages of local-first architecture without resorting to technical jargon or marketing hype.

- **Tone:** Thoughtful, professional, and slightly philosophical
- **Headline style:** Action-oriented and benefit-focused
- **CTA style:** Clear and direct, emphasizing local-first benefits
- **Avoid:** Technical jargon / Overly casual language / Fear-based marketing / Hype and buzzwords

### Don'ts
- ❌ 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

The system deliberately avoids bright saturated colors, serif typography, sharp corners, heavy shadows, interface clutter, and extensive uppercase treatment—each omission reinforcing the design's core commitment to focused calm.

## System Prompt (paste into AI tool)

```
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.
```
