厳選・オープン・無料

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

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

ホバーステートの滑らかなトランジション · コンテンツのフェードイン効果 · 背景要素の控えめな浮遊アニメーション

控えめな色の変化や明るさの調整 · 即座の視覚的フィードバック

08

コンポーネント

09

文体と禁止事項

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の哲学に合致しています。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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