name: FileGraph Design System
description: Soft editorial workbench for local markdown notes, source provenance, and graph exploration.
colors:
bg: "oklch(97.4% 0.006 168)"
surface: "oklch(98.8% 0.004 168)"
surface-strong: "oklch(99.3% 0.003 168)"
surface-muted: "oklch(95.8% 0.008 168)"
canvas: "oklch(96.6% 0.008 168)"
line: "oklch(86% 0.01 168)"
line-strong: "oklch(76% 0.014 168)"
text: "oklch(23% 0.015 168)"
text-soft: "oklch(46% 0.014 168)"
accent: "oklch(43% 0.05 164)"
accent-strong: "oklch(35% 0.04 164)"
accent-soft: "oklch(93% 0.018 164)"
success: "oklch(47% 0.08 150)"
danger: "oklch(54% 0.09 32)"
typography:
body: { fontFamily: "var(--font-sans), sans-serif", fontSize: 16px, fontWeight: 400, lineHeight: 1.6, letterSpacing: 0 }
display-title: { fontFamily: "var(--font-display), serif", fontSize: "1.35rem to 1.7rem", fontWeight: 600, lineHeight: 1, letterSpacing: 0 }
panel-title: { fontFamily: "var(--font-display), serif", fontSize: 1.4rem, fontWeight: 600, lineHeight: 1.06, letterSpacing: 0 }
editor-title: { fontFamily: "var(--font-display), serif", fontSize: 1.9rem, fontWeight: 600, lineHeight: 1.1, letterSpacing: 0 }
mono: { fontFamily: "var(--font-mono), monospace", fontSize: 0.95rem, fontWeight: 400, lineHeight: 1.75, letterSpacing: 0 }
spacing:
xs: 0.25rem
sm: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
2xl: 2rem
3xl: 3rem
rounded:
sm: 0.375rem
md: 0.5rem
lg: 0.75rem
full: 999px
components:
workbenchShell: { radius: 0.75rem, border: "1px solid {colors.line}", shadow: "0 24px 60px rgba(24, 34, 33, 0.08)" }
workbenchTab: { padding: "0.75rem 1rem", radius: 0.5rem, activeBackground: "{colors.surface-strong}" }
toolbarButton: { minHeight: 2.75rem, padding: "0.7rem 0.95rem", radius: 0.5rem }
editorToolButton: { minHeight: 2.4rem, minWidth: 2.4rem, radius: 0.5rem }
noteRow: { padding: "1rem 1.15rem", selectedBackground: "{colors.accent-soft}" }
markdownBody: { maxWidth: 68ch, fontSize: 0.98rem, lineHeight: 1.78 }Overview
FileGraph is a local-first markdown graph workbench. Its design should feel like an editorial desk rather than a generic dashboard: calm green-gray surfaces, serif display headings, a focused markdown editor, a note list, provenance chips, and a graph canvas that supports exploration without overwhelming writing.
The visual source is src/app/globals.css. The main application shell is implemented in src/components/filegraph-app.tsx and combines notes, graph tabs, markdown tools, search, status pills, and save or refresh actions.
Colors
The palette uses subtle OKLCH greens. Background, surface, canvas, and line tokens separate workspace regions with low contrast. Accent tokens mark active tabs, selected notes, primary toolbar actions, and links.
Success and danger are reserved for analysis status. Neutral status remains surface-muted with text-soft. Do not add bright graph colors unless they encode relation type or selected state.
Typography
Use the sans font for operational UI and the display serif for workbench titles, panel titles, editor titles, and markdown headings. CodeMirror editor content uses the mono font with a comfortable 1.75 line height.
Markdown preview should stay readable at 68ch. Keep labels uppercase and small; reserve larger type for note titles and rendered document headings.
Layout
The workbench shell is a bordered, softly shadowed container. Tabs switch between notes and graph views. The editor area pairs title input, markdown toolbar, CodeMirror body, and preview or graph-adjacent context.
Toolbars wrap on constrained screens. Pointer-coarse targets should preserve at least 2.75rem hit areas for tabs, toolbar buttons, and note rows.
Elevation & Depth
Use the single workbench shadow for the shell. Inside the shell, rely on lines, surface shifts, and selected backgrounds. Avoid stacking multiple shadows inside editor or graph panes.
Shapes
Default radii are 0.375rem to 0.75rem. Use full pills for source chips, status pills, and scroll thumbs. Keep editor and toolbar controls moderately rounded, not pill-shaped.
Components
Workbench tabs show selected state through surface-strong and an inset line. Toolbar buttons use surface-strong, border, and accent-filled primary variants. Editor tool buttons are icon controls for markdown insertion.
Note rows should be full-width, left-aligned, and selected via accent-soft. Markdown preview uses typographic hierarchy for headings, tables, blockquotes, pre blocks, and links. Status pills distinguish ready and error states with semantic tints.
Do's and Don'ts
Do keep writing and graph exploration visually connected.
Do use the display serif for document identity and markdown hierarchy.
Do preserve provenance and analysis status as first-class UI metadata.
Don't turn the graph canvas into a decorative background.
Don't introduce per-note color themes that break source-provenance scanning.