---
version: alpha
name: "Logseq"
website: "https://logseq.com"
description: >-
  Logseq's open-source knowledge-graph tool uses a deep teal-black canvas
  system — dark navy backgrounds ranging from near-black to a mid-teal surface
  — with white and light gray text on top. The system-sans typeface runs across
  all tiers; there is no custom font. A cool teal used for gradient decorations
  and UI highlights contrasts with a light-gray mist used at high frequency for
  structural borders. The page reads like a dark-mode app shell rather than a
  typical marketing surface.

seo:
  title: "Logseq Design System for React — dark teal canvas, system-sans, 15 components"
  metaDescription: "Logseq's marketing system runs a deep teal-black canvas with light gray and teal text on top, system-sans type at modest weights, and no custom font. For React, Next.js, and AI coding tools."
  highlights:
    - "Dark teal-black canvas — the page runs on a deep teal navy rather than a neutral black or charcoal; the specific hue family (dark teal through near-black) is the single most distinctive surface choice"
    - "App-shell marketing — the page looks and feels like the Logseq app running in dark mode; the nav, content cards, and sidebar elements all mirror the product's own UI"
    - "System-sans throughout — no custom typeface; the ui-sans-serif stack renders the entire hierarchy from 64px hero to 12px caption"
    - "High-frequency light border — a cool light gray at 456 border occurrences dominates the structural layer; hairlines define every panel boundary"
    - "Multi-persona tab strip — a role-based tab row (Students, Academics, Writers, Project Managers, Developers) with an amber-on-dark active state is the primary interactive surface on the page"
  tags:
    - "Documentation & Knowledge"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Logseq's marketing page at logseq.com is the most app-like marketing surface in the knowledge-management category. The nav sits on a deep teal-black background, the hero runs light text on that same dark surface, and by the time the page reaches its feature sections the look is indistinguishable from the Logseq desktop client running in dark mode. Where Obsidian uses a slightly purple-tinted near-black and Roam Research uses a light-cream canvas, Logseq renders a specific family of dark teal hues — from the deep near-black of the page floor to a slightly elevated teal panel color — that signals "this is a technical tool for serious knowledge workers."

    The hero headline is a two-part stacked construction: "Today, everyone is a" in a light mist gray at 64px / weight 400, with "knowledge worker." below it in pure near-white at 64px / weight 600. No display typeface — the entire page runs the system-sans stack, which renders as the OS default on each platform. The sub-headline below offers "Logseq is the open toolbox for workflows that deal with lots of information," then transitions directly into a 4-icon feature grid (Task Management, PDF Annotations, Flashcards, Whiteboards). Below that is the persona tab strip — Students, Academics, Writers, Project Managers, Developers — the page's most interactive element and the one surface that uses an accent color (an amber-on-teal active chip).

    Feed this file to an AI coding tool and it will reproduce Logseq's dark-canvas moves: the deep teal-black floor, light mist text instead of pure white for the primary display tier, system-sans at weight 400-600, the 8px dominant radius, and the high-frequency cool-gray hairline system that defines every panel. The persona tab strip and the community-call-to-action section are the two components most worth borrowing for knowledge-tool marketing.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://logseq.com"
      title: "Logseq — official site"
      description: "Logseq's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Logseq's brand color?"
      answer: "Logseq does not use a single saturated brand accent the way Cloudflare uses orange or Bear uses coral red. The brand-layer colors in the extraction are all dark teal and navy values — deep backgrounds rather than highlight accents. The highest-frequency brand color is a mid-teal-navy used 14 times as the surface background of feature cards and the nav. An amber-yellow appears once in a gradient (inside the active persona tab), and a teal mid-tone functions as a gradient stop and a few text instances, but neither appears as a persistent marketing-page accent. The effective 'brand color' of Logseq is its canvas family — the specific dark-teal palette that distinguishes it from neutral-black tools like Linear or Vercel."
    - id: "typography"
      title: "What typeface does Logseq use, and what should I use as a substitute?"
      answer: "Logseq uses the system-sans stack throughout: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans. There is no custom typeface or second family. The hero headline runs 64px at weight 400 (mist-colored first line) and weight 600 (white second line); body and sub-heading tiers run 14-26px at weights 400-700. The uppercase label tier uses weight 700 / uppercase transform for section identifiers. Any system-sans or open-source neutral grotesk — Inter, Geist, DM Sans — substitutes cleanly. The brand identity lives in the canvas palette, not the typeface; font substitution does not change the visual signature."
    - id: "dark-canvas"
      title: "What are the specific dark teal background colors Logseq uses?"
      answer: "The Logseq dark canvas runs four related values from near-black to mid-teal. The page floor spans a very dark near-black teal (extracted as #01171d, the darkest background). The dominant feature-card surface is a deep navy-teal used 14 times as background fill. A slightly lighter teal surface hosts the feature section cards. The nav and outer canvas run in the darkest register. All four values share the same blue-green hue family (hues between 215-220 degrees in OKLCH), making the canvas feel tonally unified — different from the purple-tinted near-black of Obsidian and the neutral near-black of Linear."
    - id: "persona-tabs"
      title: "How does Logseq's persona tab strip work?"
      answer: "The persona tab strip (Students, Academics, Writers, Project Managers, Developers) sits below the feature-icon grid and above the app screenshot section. Each tab is a pill-shaped chip on the dark surface. The active state uses an amber-yellow fill chip with dark text, contrasting with the inactive tabs that use a slightly lighter teal surface with muted text. The active chip changes the screenshot mockup displayed below it, making the persona strip the primary interactive navigation mechanism on the page. The amber active color is the only warm hue in the system and appears only on this single element."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own knowledge-graph tool marketing page?"
      answer: "Yes — feed this file to Claude, Cursor, or any AI tool that reads design tokens. The agent will reproduce Logseq's dark-teal-canvas marketing system: the deep navy page floor, light-mist primary text instead of pure white, system-sans at weight 400-600, 8px dominant radius on feature cards, and the high-frequency cool-gray border system that defines every panel boundary. The persona tab strip (Students, Academics, Writers, Project Managers, Developers) is the most distinctive reusable component and is fully specified in the components section. You can swap in your own persona labels and feature screenshots."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  canvas: "#01222a"
  surface-1: "#023643"
  surface-2: "#195d6c"
  surface-3: "#094b5a"
  surface-deep: "#01171d"
  ink: "#f3f4f6"
  ink-muted: "#b7d5d5"
  ink-dim: "#9ca3af"
  ink-secondary: "#d1d5db"
  hairline: "#e5e7eb"
  hairline-mid: "#6b7280"
  shadow: "#000000"

typography:
  display-xl:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 60.8px
    letterSpacing: "1px"
  display-xl-light:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 60.8px
    letterSpacing: "1px"
  display-md:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 45.6px
    letterSpacing: "0.95px"
  heading-lg:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: 0
  heading-md:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 35px
    letterSpacing: 0
  body-lg:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: "0.5px"
  body-md:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: 0
  label-upper:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0
  caption:
    fontFamily: "ui-sans-serif, system-ui, -apple-system, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "4px"
  sm: "6px"
  md: "8px"
  lg: "12px"
  xl: "16px"
  2xl: "24px"
  full: "9999px"

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

components:
  button-primary:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: "4px 8px"
    height: "28px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "36px"
    borderColor: "{colors.hairline-mid}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "8px 16px"
    height: "48px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "8px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  hero-heading-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.display-xl-light}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-dim}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  feature-icon-cell:
    backgroundColor: "transparent"
    textColor: "{colors.ink-dim}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "12px 8px"
  persona-tab:
    backgroundColor: "{colors.surface-2}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "8px 16px"
    height: "40px"
    borderColor: "{colors.hairline}"
  community-card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "12px 16px"
    borderColor: "{colors.hairline-mid}"
  testimonial-card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.xl}"
    padding: "24px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-dim}"
    typography: "{typography.body-sm}"
    padding: "32px 16px"
---

## Overview

Logseq's marketing page extends the app itself into the browser. **App-shell marketing.** Where Notion uses a white canvas with black type and occasional gray tones, Obsidian uses a near-black with purple tints, and Roam Research uses a light cream, Logseq renders a dark teal-black surface system that is indistinguishable from the Logseq desktop client running in dark mode. The marketing site IS the product's visual environment; the product screenshots in the mid-page sections feel native rather than inserted.

The hero typographic move is a two-weight stacked construction: "Today, everyone is a" in a light teal-mist at 64px / weight 400, and "knowledge worker." in near-white at 64px / weight 600. No display typeface — the entire page runs system-sans. The contrast comes from color and weight together: muted teal text as setup, bright white text as punchline. Below the hero, a 4-icon feature grid (Task Management, PDF Annotations, Flashcards, Whiteboards) and then a persona tab strip (Students, Academics, Writers, Project Managers, Developers) act as the page's primary navigation. The active tab uses the only warm tone in the system — an amber chip — against the cool dark surface.

The color system is unusual in the directory: the "brand layer" colors are all dark surfaces rather than chromatic accents. There is no cobalt blue, no orange, no coral — the brand identity is encoded in the specific dark teal family. Compare to Bear (which uses coral red) and Things (which uses cobalt): Logseq's chromatic identity is its canvas, not its accent.

**Key Characteristics:**
- Deep teal-black canvas family (`{colors.canvas}` through `{colors.surface-2}`) — four related dark teal-navy values from near-black to a panel mid-teal, all sharing a 215-220° hue.
- Two-weight hero stacked headline: muted teal-mist at weight 400 as setup + white at weight 600 as punchline — both at 64px, only color and weight differentiate them.
- System-sans only — ui-sans-serif / system-ui renders as the OS default; no custom typeface.
- High-frequency cool-gray hairline (`{colors.hairline}` — 456 border occurrences) defines every panel boundary in the dark system.
- Persona tab strip (Students / Academics / Writers / Project Managers / Developers) with amber-on-dark active state — the only warm accent in the system.
- 8px dominant radius (`{rounded.md}`) on cards and interactive surfaces — a tight-but-not-sharp developer-tool aesthetic.
- Community section (Discord + forum CTAs with live-user count) as a distinct content band — positions the open-source community as product infrastructure.
- The open-source download is the primary action ("Download for MacOS"); there is no Stripe-gated paywall CTA.

## Colors

### Brand (dark canvas family)

- **Canvas** (`{colors.canvas}` — #01222a): frequency 13 as background. The outer page floor — a deep teal-black used for the nav background and section transitions. The darkest tone in the canvas family.
- **Surface-1** (`{colors.surface-1}` — #023643): frequency 14 as background. The primary feature card and content band surface — slightly elevated from the canvas. The highest-frequency background fill.
- **Surface-2** (`{colors.surface-2}` — #195d6c): frequency 8 (6 background, 2 border). The mid-teal surface used on persona chips, feature cards in the highlighted state, and section panel backgrounds.
- **Surface-3** (`{colors.surface-3}` — #094b5a): frequency 5 (3 background, 2 border). A dark mid-teal between surface-1 and surface-2 — used for community action cards.
- **Surface Deep** (`{colors.surface-deep}` — #01171d): frequency 5 (1 background, 4 gradient). The deepest near-black teal, appearing as gradient stops and the darkest background anchor.

### Text

- **Ink** (`{colors.ink}` — #f3f4f6): frequency 364 as text. The dominant text color — a very light cool gray, not pure white. Reads as near-white on the dark canvas. Wired as the body text color across the system.
- **Ink Muted** (`{colors.ink-muted}` — #b7d5d5): frequency 24 as text. A cool light teal used for the muted setup line in the hero ("Today, everyone is a"), feature icon sub-labels, and secondary annotation text.
- **Ink Secondary** (`{colors.ink-secondary}` — #d1d5db): frequency 15 as text. A mid-light gray used for secondary body copy and caption text.
- **Ink Dim** (`{colors.ink-dim}` — #9ca3af): frequency 8. A dimmer mid-gray for tertiary content — feature icon captions, footnote text, and footer.

### Hairlines

- **Hairline** (`{colors.hairline}` — #e5e7eb): frequency 456 (438 border). The dominant structural border tone — used on every panel boundary, card outline, and grid separator. The high frequency explains the app-shell grid feel.
- **Hairline Mid** (`{colors.hairline-mid}` — #6b7280): frequency 4 (2 border). A medium gray used for interactive element outlines (community CTA chips, button secondary borders).

### Shadow

- **Shadow** (`{colors.shadow}` — #000000): frequency 4, used in gradient stops. No traditional drop shadow system.

## Typography

### Font Family

The system runs a single long system-sans stack: **ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif** plus emoji fallbacks. There is no custom font, no display family, no second voice. The entire hierarchy — from the 64px hero to the 12px caption — uses this one stack at varying weights (400, 600, 700) and sizes.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 600 | 60.8px | 1px | Hero h2 second line ("knowledge worker.") |
| `{typography.display-xl-light}` | 64px | 400 | 60.8px | 1px | Hero h1 first line ("Today, everyone is a") |
| `{typography.display-md}` | 38px | 400 | 45.6px | 0.95px | Section display headings ("Braindump everything into…") |
| `{typography.heading-lg}` | 30px | 400 | 36px | 0 | Mid-section h3 headings |
| `{typography.heading-md}` | 26px | 400 | 35px | 0 | Testimonial quote body |
| `{typography.body-lg}` | 20px | 400 | 30px | 0.5px | Feature sub-deks and lead paragraphs |
| `{typography.body-md}` | 16px | 400 | 24px | 0 | Default body text and nav links |
| `{typography.body-sm}` | 14px | 400 | 20px | 0 | Feature caption rows |
| `{typography.label-md}` | 14px | 600 | 20px | 0 | Persona tab labels, card title labels |
| `{typography.label-upper}` | 14px | 700 | 20px | 0 | Uppercase section identifiers |
| `{typography.caption}` | 12px | 400 | 16px | 0 | Metadata, icon sub-labels |

### Principles

The two-weight hero construction is the system's signature typographic move: same size (64px), same tracking (1px), different weight (400 vs. 600) and different color (muted teal vs. near-white). The effect is a setup-punchline rhythm that reads clearly on the dark canvas. Display weight tops at 600 — there is no 700 or 800 at display size. The system's heaviest moments are 700 weight uppercase labels at 14px.

Letter-spacing is applied at display sizes (0.95-1px) to improve legibility on the dark canvas. Body text at 14-16px runs zero tracking. This is the inverse of Cloudflare (which applies tight negative tracking at display) — Logseq opens tracking to pull letters apart on the dark surface.

### Note on Font Substitutes

No substitution is needed — the system-sans stack is already cross-platform. On macOS it renders San Francisco, on Windows Segoe UI, on Android Roboto. **Inter** or **Geist** at the same weights will produce a stable non-system result if you need consistent rendering across platforms.

## Layout

### Spacing System

- **Base unit:** 4px, with 8px as the dominant working module.
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 4px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px.
- **Section vertical padding:** 48px between major content bands.
- **Card internal padding:** `{spacing.lg}` (16px) for feature cards, `{spacing.xl}` (24px) for testimonial and community cards.
- **Nav padding:** `{spacing.base}` (8px) vertical, `{spacing.lg}` (16px) horizontal.

### Grid & Container

- **Max content width:** ~720px for the hero text column; feature grids expand to ~960px.
- **Hero:** centered, full dark-canvas band. Two-line stacked headline + sub-copy + two CTA chips (Download for MacOS, Live Demo).
- **Feature icon grid:** 4-column equal-width grid — icon + label for Task Management, PDF Annotations, Flashcards, Whiteboards.
- **Persona tab strip:** 5-tab horizontal pill row (Students, Academics, Writers, Project Managers, Developers) — changes the screenshot section below on activation.
- **Feature benefit grid:** 3-column equal-width cards (Review notes / Memorize facts / Outline essays) with icon + heading + body paragraph per cell.
- **Community section:** 2-column centered CTA row (Join our Discord / Join our forum) with live-user count below.

### Rhythm

The page runs entirely on the dark teal canvas without surface-color section transitions. Depth between sections comes from the hairline border system and tonal elevation (`{colors.surface-2}` cards slightly above `{colors.surface-1}` panels). The consistent dark floor makes the page read as one continuous app surface, with content bands distinguished by card rounding and border treatment rather than alternating background color.

## Elevation

The dark canvas system has no shadow tier. Elevation is expressed entirely through surface toning — cards at `{colors.surface-1}` sit above the `{colors.canvas}` floor by roughly 15-20 lightness points; `{colors.surface-2}` panels sit above `{colors.surface-1}` by another 10 points. The hairline border (`{colors.hairline}` at 456 occurrences) outlines every container boundary.

- **Flat (no shadow):** the entire nav, hero, footer, and editorial bands.
- **Tonal lift (surface-1 on canvas):** feature cards, the persona screenshot zone, community cards — uses `{colors.surface-1}` (14 background occurrences) against the canvas floor.
- **Higher lift (surface-2):** the active persona chip and highlighted feature cards use `{colors.surface-2}` as the most-elevated surface.
- **No blur or glow:** the system avoids glassmorphism and colored glows, even though the dark canvas would support them.

## Shapes

The radius scale is tight-to-medium, anchored at 8px:

- `{rounded.none}` 0px — hero display text and structural dividers.
- `{rounded.xs}` 4px — the primary download button and small interactive chips.
- `{rounded.sm}` 6px — secondary interactive elements.
- `{rounded.md}` 8px — the dominant card radius (19 occurrences); feature cards, persona chips.
- `{rounded.lg}` 12px — larger feature cards and testimonial containers (11 occurrences).
- `{rounded.xl}` 16px — prominent section cards and the community CTA area (10 occurrences).
- `{rounded.2xl}` 24px — the largest card surfaces, used sparingly (2 occurrences).
- `{rounded.full}` 9999px — fully circular avatar and icon chips (3 occurrences).

The 8px anchor distinguishes Logseq from Mac-native tools like Bear (40px) and Things (18px). The tight rounding reads as developer-tool precision — similar to Linear and Vercel — rather than consumer-app softness.

## Components

**`button-primary`** — The download CTA. Mid-teal `{colors.surface-2}` fill, light ink text at `{typography.body-sm}`, `{rounded.xs}` 4px radius, 4×8px padding, 28px height. "Download for MacOS" is the canonical instance.

**`button-secondary`** — Transparent fill, ink text, mid-gray `{colors.hairline-mid}` border, `{rounded.md}` 8px radius, 8×16px padding, 36px height. "Live Demo" is the canonical instance.

**`top-nav`** — Deep canvas `{colors.canvas}` fill, 48px height. Left: Logseq wordmark + Home / Downloads links. Right: Forum, Docs, GitHub, Blog dropdowns + "Download for MacOS" CTA chip.

**`nav-link`** — Transparent background, ink text at `{typography.body-md}`, 8×12px padding.

**`hero-heading`** — Transparent background, near-white ink at `{typography.display-xl}` (64px / 600 / 1px tracking). Second line of the stacked hero — "knowledge worker."

**`hero-heading-muted`** — Transparent background, teal-mist `{colors.ink-muted}` text at `{typography.display-xl-light}` (64px / 400). First line of the hero — "Today, everyone is a" — the setup.

**`section-heading`** — Near-white ink at `{typography.display-md}` (38px / 400 / 0.95px tracking). Section display headings — "Braindump everything into . New ideas will pop up with time."

**`body-paragraph`** — Near-white ink at `{typography.body-lg}` (20px / 400 / 0.5px tracking). The lead sub-copy below the hero and section headings.

**`body-paragraph-muted`** — Dim `{colors.ink-dim}` text at `{typography.body-md}`. Secondary captions and feature icon sub-labels.

**`card`** — `{colors.surface-1}` fill, near-white ink, 1px `{colors.hairline}` border, `{rounded.lg}` 12px radius, 16px padding. The default feature content card.

**`feature-icon-cell`** — Transparent background, dim ink text at `{typography.body-sm}`, no border. The 4-column feature-icon grid items (Task Management, PDF Annotations, Flashcards, Whiteboards).

**`persona-tab`** — `{colors.surface-2}` fill, ink text at `{typography.label-md}`, 1px `{colors.hairline}` border, `{rounded.md}` 8px radius, 8×16px padding, 40px height. The 5-persona tab strip — Students, Academics, Writers, Project Managers, Developers.

**`community-card`** — `{colors.surface-1}` fill, ink text at `{typography.body-md}`, `{colors.hairline-mid}` border, `{rounded.lg}` 12px radius, 12×16px padding. The Discord and forum join chips with live-user count.

**`testimonial-card`** — `{colors.surface-1}` fill, ink text at `{typography.heading-md}` (26px / 400), `{rounded.xl}` 16px radius, 24px padding. The user testimonial blocks in the mid-page social proof section.

**`footer`** — Canvas continuation, dim ink text at `{typography.body-sm}`, 32×16px padding.

## Do's and Don'ts

**Do** use the two-weight stacked display construction for the hero. The setup line in muted teal-mist at weight 400 and the punchline in near-white at weight 600 — both at 64px — is the page's most distinctive typographic moment and worth replicating in any knowledge-tool marketing context.

**Do** use `{colors.hairline}` borders on every card and panel boundary. The 456-occurrence high-frequency border system is what makes the page read as an app shell rather than a generic marketing surface. Removing borders and relying on color contrast alone would make the cards disappear into the canvas.

**Do** treat the persona tab strip as the primary navigation mechanism, not a filter. Each tab revealing a distinct product screenshot makes the feature architecture legible to different audiences without requiring additional pages.

**Do** keep the active persona chip as the only warm-hued element. The amber active state reads strongly because everything else in the system is cool — introducing a second warm accent anywhere on the page would diminish the persona-strip's navigational clarity.

**Don't** introduce a custom display typeface. Logseq's brand identity lives in the canvas palette, not the type. A custom display font would signal "consumer app" rather than "open-source knowledge tool" — the opposite of the positioning.

**Don't** use a light-mode canvas. The dark teal-black system is the entire visual identity; switching to white or cream would require a different component approach and would lose the "marketing page IS the app" coherence.

**Don't** add a third surface elevation level above `{colors.surface-2}`. The three-step tonal ladder (canvas → surface-1 → surface-2) is already at the limit of what reads as meaningful elevation on a dark canvas. A fourth step would compress the range and make the elevation system indecipherable.

**Don't** use weight 700 at display sizes. The system caps display weight at 600. Weight 700 at 38-64px would read as aggressive on the dark surface — the current 600 cap is the maximum contrast that still reads as a knowledge tool rather than a SaaS landing page.

## Known Gaps

- **Primary brand accent:** the system does not expose a single chromatic accent like a green or teal used for CTA buttons; the download button uses a dark surface fill rather than a brand voltage. A true accent is hinted at in the active persona chip (amber) but appears only once.
- **Light mode:** Logseq ships a light editor theme but the marketing page is dark-only. No light-mode token equivalents are captured.
- **Hover and focus states:** only resting states are documented. The dropdown nav menus (Forum, Docs, GitHub, Blog) carry hover surfaces that are not captured.
- **Gradient construction:** the hero uses gradient stops spanning the dark teal family (navy through near-black), but the full gradient CSS values are not independently documented — only the stop colors are extracted.
- **Persona tab screenshot content:** the five persona tab states each surface different app screenshots, but the screenshot content and the tabbed image-swap interaction are not tokenized.
- **App download flow:** the "Download for MacOS" action leads to a download-picker page with platform variants (Windows, Linux, Android, iOS); the secondary platform surfaces are not captured.