A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
10type steps
2radius steps
3pxspacing base
Obsidian, in one page
Obsidian's iOS app is a dark workshop for thought. It treats your notes as a personal knowledge graph stored as plain markdown files, and the interface is built to make that graph feel tangible: a deep charcoal canvas (#1E1E1E), monospace-friendly editor lines, file-tree rows, and the signature graph view where every note is a node and every link is an edge you can watch settle into place. The philosophy is "tools for thinking, not a product to consume" — the UI is utilitarian, dense where it needs to be, and gets out of the way of the text. Surfaces lift in small charcoal steps (#262626, #2D2D2D) and a low-contrast divider (#363636) separates panes; there is no glossy chrome, no marketing gradient. It feels like a developer tool that happens to be about ideas.
The accent is Obsidian Purple — #7C3AED as the structural action color, lightened to #A78BFA for links, active nodes, and selection so it reads on the dark canvas. Purple is the brand and the connective tissue: it marks the active file, internal [[wikilinks]], the selected graph node, tag pills, and the primary action. It is used with restraint so that in a sea of gray text, the purple is always "this connects to something." There is no second brand accent; structure and state are carried by gray, white-ish text, and the purple.
Typography is dual by design: an interface sans (Inter) for chrome, file rows, and the reading view, and a monospace (JetBrains Mono) for the markdown source editor, code blocks, and the command palette — used at 400 / 600 / 700 across a 12–26pt range. This split *is* the identity: the app is simultaneously a calm reading surface and a raw text editor, and the type reflects both. The most expressive typographic moment is the editor itself, where markdown syntax characters (#, **, [[) sit in dimmed purple-gray monospace beside the rendered-feel content — you are always aware you are editing text, not a document.
Key Characteristics:
- Deep charcoal canvas (
#1E1E1E) — a dark workshop, not a polished consumer surface - Obsidian Purple (
#7C3AEDaction /#A78BFAlinks & nodes) as the single connective accent - Graph view — notes as draggable nodes, links as edges, with gentle physics drift
- Backlinks pane — "Linked mentions" listing every note that references the current one
- Markdown source editor — monospace lines with dimmed syntax characters always visible
- File-tree rows — an indented vault explorer (folders → notes), the primary navigation
- Tag pills —
#tagchips in tinted purple; tags are first-class graph connections - Command palette — a monospace-flavored fuzzy action sheet (the keyboard-first control)
Do's and don'ts
Do
- Use the deep charcoal canvas (
#1E1E1E) — a workshop, not a polished consumer surface - Reserve Obsidian Purple (
#7C3AED/#A78BFA) for connections: active file, wikilinks, nodes, primary action - Keep markdown syntax characters visible but dimmed (
#6B6B6B) in the source editor - Use two type systems on purpose — Inter for chrome/reading, JetBrains Mono for source/commands
- Make the graph view full-bleed with gentle physics drift and a purple-glowing active node
- Show backlinks as "Linked mentions" with a context snippet and the matched link highlighted
- Render
#tagsas tinted-purple pills that filter the graph when tapped - Communicate pane elevation with a charcoal step + 1pt divider, not shadows
- Keep the command palette monospace and keyboard-first
Don't
- Don't use a glossy or gradient surface — Obsidian's restraint is the developer-tool identity
- Don't introduce a second brand accent — purple is the single connective color
- Don't hide markdown syntax in the source editor — the dimmed markers are the point
- Don't use one font for everything — collapsing the sans/mono split erases the identity
- Don't add a bottom tab bar — navigation is the ribbon + file-tree panes
- Don't put heavy shadows on panes or rows — flat + 1pt divider is the look
- Don't make the graph snap or jump — node motion is a gentle continuous drift
- Don't color-code headings — size and weight carry hierarchy; text stays primary color
- Don't use light font weights — Inter 400/600/700, JetBrains Mono 400/600 only
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Obsidian design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Obsidian Purple: #7c3aed
- Purple Link: #a78bfa
- Purple Pressed: #6d28d9
- Canvas: #1e1e1e
- Surface 1: #262626
- Surface 2: #2d2d2d
- Surface 3: #363636
- Divider: #363636
- Text Primary: #dcddde
- Text Secondary: #999999
Type:
- families: Inter, Interface, JetBrains Mono, Monospace
- scale: 11, 12, 13, 14, 15, 16, 17, 20, 24
- weights: 400, 600, 700
Shape:
- radius: 6, 10
- elevation: Shadow: `rgba(0,0,0,0.6) 0 20px 56px`
Spacing: 3, 9
Rules:
- Use the deep charcoal canvas (`#1E1E1E`) — a workshop, not a polished consumer surface
- Reserve Obsidian Purple (`#7C3AED` / `#A78BFA`) for connections: active file, wikilinks, nodes, primary action
- Keep markdown syntax characters visible but dimmed (`#6B6B6B`) in the source editor
- Use two type systems on purpose — Inter for chrome/reading, JetBrains Mono for source/commands
- Make the graph view full-bleed with gentle physics drift and a purple-glowing active node
- Show backlinks as "Linked mentions" with a context snippet and the matched link highlighted
Avoid:
- Don't use a glossy or gradient surface — Obsidian's restraint is the developer-tool identity
- Don't introduce a second brand accent — purple is the single connective color
- Don't hide markdown syntax in the source editor — the dimmed markers are the point
- Don't use one font for everything — collapsing the sans/mono split erases the identity
- Don't add a bottom tab bar — navigation is the ribbon + file-tree panes
- Don't put heavy shadows on panes or rows — flat + 1pt divider is the look
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- Obsidian Purple (
#7C3AED): Primary action, the active file marker, command-palette focus, tag-pill base. - Purple Link (
#A78BFA): Internal[[wikilinks]], the selected/active graph node, link hover, selection text. - Purple Pressed (
#6D28D9): Active/pressed state for purple buttons and the focused command row. - Purple Tint (
rgba(124,58,237,0.14)): Selected-row wash, active-node halo, tag-pill background.
Canvas & Surface (Dark — primary)
- Canvas (
#1E1E1E): Primary charcoal canvas — the editor and graph background. - Surface 1 (
#262626): Side panes (file tree, backlinks), the command-palette body, cards. - Surface 2 (
#2D2D2D): Higher elevation — modals, popovers, the active/hover row, code-block background. - Surface 3 (
#363636): Pressed state on surfaces, input field fill. - Divider (
#363636): Hairline dividers between panes and file-tree groups. - Text Primary (
#DCDDDE): Body text, note titles, primary UI text — soft off-white, not pure white. - Text Secondary (
#999999): Metadata, folder labels, backlink context, timestamps. - Text Tertiary (
#6B6B6B): Disabled, placeholder, dimmed markdown syntax characters.
Editor Semantic
- Heading Text (
#DCDDDE): Rendered heading content (size carries hierarchy, not color). - Syntax Marker (
#6B6B6B): The#,**,>,[[]]characters — dimmed but present. - Wikilink (
#A78BFA):[[Note Name]]internal links, underlined on press. - External Link (
#7C9CBF):https://external links — a cooler blue to distinguish from wikilinks. - Code / Mono (
#DCDDDEon#2D2D2D): Inline code and fenced code blocks. - Highlight (
rgba(255,213,79,0.25)):==highlighted==text background. - Blockquote Bar (
#7C3AED): The 3pt left bar on>blockquotes.
Semantic
- Tag Pill (
#A78BFAtext onrgba(124,58,237,0.14)):#tagchips. - Unresolved Link (
#6B6B6B): A[[link]]to a note that doesn't exist yet (dimmed). - Success Green (
#4ADE80): Sync complete, save confirmation. - Error Red (
#F87171): Sync conflict, failed operation. - Modified Dot (
#A78BFA): Unsaved-changes indicator on a file-tree row.
Light Mode
Obsidian ships a light theme; the default identity is the dark workshop.
- Light Canvas (
#FFFFFF) - Light Surface (
#F5F5F5) - Light Text (
#1E1E1E) - Light Secondary (
#6B6B6B) - Purple stays the accent;
#7C3AEDreads on both.
Type scaleRead the full spec
Font Family
- Interface:
Inter(chrome, file rows, reading view) — 400 / 600 / 700 - Monospace:
JetBrains Mono(source editor, code blocks, command palette) — 400 / 600 - Fallback Stack (sans):
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Fallback Stack (mono):
'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Note Title (Large) | Inter | 26pt | 700 | 1.25 | -0.3pt | The note's H1 / title at the top of the editor |
| Editor H1 | Inter | 24pt | 700 | 1.3 | -0.2pt | # Heading rendered in the editor |
| Editor H2 | Inter | 20pt | 700 | 1.3 | -0.2pt | ## Heading |
| Editor H3 | Inter | 17pt | 600 | 1.3 | -0.1pt | ### Heading |
| Reading Body | Inter | 16pt | 400 | 1.6 | 0pt | Rendered prose in reading view |
| Source Body | JetBrains Mono | 15pt | 400 | 1.55 | 0pt | The raw markdown in the source editor |
| Syntax Marker | JetBrains Mono | 15pt | 400 | 1.55 | 0pt | #, **, [[ — color tertiary, same metrics |
| File-Tree Row | Inter | 15pt | 400 | 1.3 | -0.1pt | A note/folder row in the explorer |
| Pane Title (UPPER) | Inter | 11pt | 700 | 1.2 | 0.6pt | "LINKED MENTIONS", "FILES" pane headers |
| Backlink Context | Inter | 13pt | 400 | 1.45 | 0pt | The surrounding-text snippet in a backlink |
| Metadata | Inter | 13pt | 400 | 1.3 | 0pt | "modified 2h ago", word count, node label |
| Tag Pill | Inter | 13pt | 600 | 1.0 | 0pt | #tag chip text |
| Command Row | JetBrains Mono | 14pt | 400 | 1.3 | 0pt | A row in the command palette |
| Command Shortcut | JetBrains Mono | 12pt | 600 | 1.0 | 0pt | "⌘P" trailing hint in the palette |
| Button (Primary) | Inter | 15pt | 600 | 1.0 | -0.1pt | "Create note", confirm actions |
| Graph Node Label | Inter | 11pt | 600 | 1.0 | 0pt | The text under a graph node |
Principles
- Two type systems on purpose: Inter for chrome and reading, JetBrains Mono for source and commands — the split is the identity
- Size carries heading hierarchy, not color: H1–H3 differ by size/weight; color stays primary text
- Syntax is dimmed, not hidden:
#,**,[[render in tertiary mono — you always know you're editing text - Weights at 400 / 600 / 700 (sans), 400 / 600 (mono): no light, no black; monospace stays readable at 15pt
- Generous editor line-height: 1.55–1.6 so long-form writing and source both stay comfortable
Components and layoutRead the full spec
Buttons
Primary Button ("Create note", confirm)
- Background:
#7C3AED - Text:
#FFFFFF, Inter 15pt weight 600 - Padding: 9pt vertical, 16pt horizontal
- Corner radius: 6pt
- Height: 34pt
- Pressed: background
#6D28D9, scale 0.98, light haptic - Disabled: background
#2D2D2D, text#6B6B6B
Ghost / Toolbar Button
- Background: transparent
- Icon: 18pt,
#999999; on active/press#A78BFA, background#2D2D2D, 6pt radius - Hit target: 36pt; used for the ribbon (left edge) and the note toolbar
Ribbon Icon (left vertical action strip)
- 20pt glyph in a 40pt cell,
#999999default,#A78BFAactive - Stacks vertically: open graph, command palette, search, new note, settings
Tag Pill
- Background:
rgba(124,58,237,0.14) - Text:
#A78BFA, Inter 13pt weight 600, with a leading# - Padding: 3pt vertical, 9pt horizontal; corner radius 500pt
- Pressed: background
rgba(124,58,237,0.24)— tapping filters the graph/search to that tag
Cards & Containers
File-Tree Row (the navigation unit)
- Height: 32pt
- Layout: indent (16pt per depth) → disclosure chevron (folders) → 14pt icon → name (15pt w400) → optional modified dot
- Background: transparent (
#1E1E1E) - Active file: background
rgba(124,58,237,0.14), name#DCDDDE, a 2pt#7C3AEDleft bar - Hover/press: background
#2D2D2D - Folder toggle: chevron rotates 90°, children animate height 180ms
Markdown Editor Surface
- Background:
#1E1E1E, full-bleed, comfortable 16pt side padding - Source mode: JetBrains Mono 15pt, syntax markers (
#,**,[[) in#6B6B6B - Wikilinks
[[…]]in#A78BFA; external links in#7C9CBF - Code blocks:
#2D2D2Dbackground, 6pt radius, mono 15pt, 12pt padding - Blockquotes: a 3pt
#7C3AEDleft bar + indented text in#999999 - Highlights:
==text==on argba(255,213,79,0.25)background
Backlinks Pane ("Linked mentions")
- A
#262626pane (bottom of the note or a side panel) - Header: "LINKED MENTIONS" 11pt w700 UPPER
#999999+ a count - Each backlink: source note title (15pt w600
#DCDDDE) + a 13pt#999999context snippet with the matched[[link]]highlighted in#A78BFA - Tap a backlink to open that note at the reference
Graph Node + Edge
- Node: a filled circle, radius scales with link count (4–14pt), color
#7C3AED; the active note's node is#A78BFAwith argba(124,58,237,0.14)halo - Edge: a 1pt
#363636line; edges to the active node brighten to#7C3AED - Label: Inter 11pt w600
#999999, shown on zoom-in or near the focused node - Drag a node to reposition; the force simulation re-settles neighbors
Command Palette
- Width: 560pt (regular) / full-width minus 24pt (compact)
- Background:
#262626, 1pt border#363636, corner radius 10pt - Shadow:
rgba(0,0,0,0.6) 0 20px 56px - Top: a 44pt monospace input, leading
>prompt glyph in#6B6B6B - Rows: 38pt — JetBrains Mono 14pt label + trailing shortcut (mono 12pt
#999999) - Focused row: background
rgba(124,58,237,0.14), label#DCDDDE
Navigation
Sidebar / Panes (no bottom tab bar)
- Left ribbon (40pt vertical strip) + a slide-over file-tree pane (280pt) on
#262626 - The vault explorer (folders → notes) is the primary navigation; tap a note to open it in the editor
- A right pane can host backlinks / outline / graph (on iPad shown side-by-side)
- Opened via the ribbon or edge-swipe; canvas dims
rgba(0,0,0,0.5)behind on iPhone
Tab Strip (open notes)
- A thin row of note tabs above the editor (optional, like a code editor)
- Active tab:
#1E1E1Ewith a 2pt#7C3AEDtop accent; inactive#262626text#999999 - A modified note shows an
#A78BFAdot instead of the close ✕ until saved
Note Toolbar
- Height: 40pt over the editor
- Leading: pane toggle ; Center: note title (15pt w600, tappable to rename) ; Trailing: reading/source toggle, more (18pt
#999999) - No blur — opaque
#1E1E1E
Input Fields
Command / Search Input
- Background: transparent inside the
#262626palette - Height: 44pt; leading
>(commands) ormagnifyingglass(search) 16pt#6B6B6B - Placeholder: "Type a command…" / "Search vault…", mono/sans 14–15pt
#6B6B6B - Text:
#DCDDDE; caret#A78BFA; no border
Inline Title Field (note rename)
- Background:
#262626, 1pt border#363636, 6pt radius, 36pt height - Text: Inter 15pt
#DCDDDE; focus border#7C3AED
Note Property / Frontmatter Field
- A
#2D2D2Dkeyed row (key: value), mono 14pt; values editable inline - Tag values render as purple tag pills
Distinctive Components
Graph View
- The defining surface — your vault as a physics-driven node-link diagram
- Nodes sized by connection count; the active note glows
#A78BFA; tags can appear as their own nodes - Pinch to zoom, drag to pan, drag a node to reposition; the force simulation gently drifts and re-settles
- Filters (by folder, tag, link depth) restyle the graph live; orphan notes float at the edges
Backlinks / Linked Mentions
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Editor full-bleed; panes slide over fully; graph zoomed-out by default |
| iPhone 13/14/15 | 390pt | Standard editor measure, slide-over file tree |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the 40pt note toolbar |
| iPhone 15/16 Pro Max | 430pt | Wider editor measure, more backlink context shown |
| iPad | 768pt+ | Multi-pane: ribbon + file tree + editor + backlinks/graph side-by-side |
Dynamic Type
- Reading body, note titles, file-tree rows: scale with Dynamic Type
- Source editor (mono): scales but preserves the monospace grid; min 13pt
- Graph node labels: fixed 11pt (layout-critical at zoom)
- Command shortcuts: fixed mono 12pt (never scales)
Orientation
- Editor / reading / file tree: portrait and landscape
- Graph view: portrait and landscape (more nodes visible in landscape)
- iPad: landscape unlocks the full multi-pane workspace
Touch Targets
- File-tree row: full 32pt height tappable (≥44pt effective with hit slop)
- Ribbon icons: 20pt glyph, 40pt cell
- Toolbar icons: 18pt glyph, 36pt hit area
- Graph node: the node + a generous radius around it is the drag/tap target
- Command rows: full 38pt height
Safe Area Handling
- Top: note toolbar respects Dynamic Island / notch
- Bottom: editor and backlinks pane clear the home indicator; the keyboard accessory bar sits above it
- Sides: 16pt editor insets; slide-over panes start at the screen edge
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-obsidian {--page-bg: #1e1e1e;
--page-bg-gradient: none;
--text-color: #dcddde;
--heading-color: #dcddde;
--link-color: #f87171;
--link-hover-color: #f64040;
--border-color: #404041;
--card-bg: #1e1e1e;
--card-shadow: 0 1px 2px rgba(220,221,222,0.06);
--card-hover-shadow: 0 6px 18px rgba(220,221,222,0.12);
--header-bg: #303030;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #1e1e1e;
--footer-text-color: #9a9a9b;
--button-bg: #f87171;
--button-text-color: #000000;
--button-hover-bg: #f64040;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #29292a;
--button-secondary-text-color: #dcddde;
--button-secondary-hover-bg: #353535;
--button-secondary-border: 1px solid #404041;
--prompt-bg: #282828;
--prompt-text-color: #dcddde;
--base-font: var(--font-inter);
--heading-font: var(--font-mono);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/productivity/obsidian/DESIGN.md· 22.9 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.