---
name: Logseq
description: "A beautiful example of how dark mode can be both functional and emotionally resonant for productivity tools."
version: alpha

colors:
  background: "#012A36"
  primary: "#F3F4F6"
  secondary: "#B7D5D5"
  tertiary: "#85C8C8"
  neutral: "#A4B5B6"
  bg-soft: "#023643"
  line: "rgba(9, 75, 90, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1px"
  display:
    fontFamily: humanist-sans
    fontSize: 38px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.5px"
  body-lg:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A private garden for your thoughts where paths naturally emerge.*

## Colors

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

- **Background (`#012A36`)** — uses `bg` token
- **Primary text (`#F3F4F6`)** — uses `ink` token
- **Secondary text (`#B7D5D5`)** — uses `ink-soft` token
- **Accent (`#85C8C8`)** — uses `accent` token
- **Muted (`#A4B5B6`)** — uses `muted` token
- **Borders (`rgba(9, 75, 90, 1)`)** — uses `line` token

## Typography

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

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

## Layout

Centered content with generous padding, responsive layout

*Rhythm:* Consistent 4px grid for precise alignment.

## Elevation & Depth

- None: rgba(133, 200, 200, 0.3) 0px 4px 32px 0px
- Borders: 1px solid rgba(9, 75, 90, 1) for subtle definition

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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