Just a Markdown Viewer
Design system of the view-only macOS / iOS markdown app — where the system is the restraint: system colors only, no accent, one reading column.
Philosophy
The app is view-only and monochrome by constraint, not by phase. There is
no accent color — deliberately. Even the toolbar toggles tint
.primary: the off state is a plain glyph, the on state a solid circle in the
label color, inverted in dark mode. There is no theme system either: every color in the
app is an Apple system semantic color, so light/dark mode is free and always correct, and
the document's text renders exactly the way the OS renders its own.
What remains — a type scale, two code-background alphas, a column width — is the whole design system. Everything on this page is extracted from the renderer source, not a style guide the app follows; the code is the spec.
Color
Six roles, all deferring to the platform. System semantic colors resolve differently in light and dark mode by design — the table lists the role, not a hex.
| Color | Used for |
|---|---|
| labelColor | Body text, headings, code text |
| secondaryLabelColor | Blockquotes, list markers, image placeholders, raw HTML blocks |
| tertiaryLabelColor | Thematic breaks (horizontal rules) |
| quaternaryLabelColor | Blockquote left bar (macOS) |
| separatorColor | Table cell borders (macOS) |
| label @ 4.5% | Code block background; table header background (macOS) |
| label @ 7% | Inline code background |
Typography
System sans for prose, monospace where the text is literal. Bold is
.semibold throughout — full bold reads too heavy at 15 pt.
Layout & Spacing
| Token | Value |
|---|---|
| Reading column | max 680 pt, centered — side insets grow with the window so the column never exceeds it |
| Inset floor | 28 pt sides / 44 pt vertical (macOS) · 20 pt sides / 32 pt vertical (iOS) |
| List indent | 28 pt — marker sits in the gutter in monospaced digits, secondary color; task lists render ☑ / ☐ |
| Code block | 12 pt padding; 1 px separator border on macOS |
| Blockquote | +14 pt indent (iOS) · 3 pt quaternary left bar + 14 pt padding (macOS) |
| Images | Scale to line width, max height 480 pt, never upscaled |
Everything the app renders lands in this shape: one centered column, system label colors, quiet code backgrounds derived from the text color itself.
Inline code like maxColumnWidth gets the 7% wash; blocks get 4.5%.
Tables: Two Engines
The most platform-divergent part of the system. macOS renders real tables with
NSTextTable; UIKit has no equivalent, so iOS draws a monospaced character
grid instead — a deliberate, visible design decision rather than a workaround hidden
behind a webview.
| Aspect | macOS — NSTextTable | iOS — character grid |
|---|---|---|
| Borders | 0.5 pt separatorColor hairlines | Box-drawing characters in the mono font |
| Cell padding | 6 pt | Column gutters in the grid |
| Header | label @ 4.5% background | Bold row |
| Width | Natural, within the column | 44-character budget — fits every phone from 6.1″ up; columns get a fair share, long cells word-wrap greedily inside |
| Rich text in cells | Full | Bold / italic / strikethrough / links preserved |
| Alignment | Real column alignment | Honored per column |
Product Constraints as Design Tokens
| Constraint | Design consequence |
|---|---|
| View-only | No edit chrome anywhere; feature requests that add editing are rejected by default |
| No network | Remote images become linked placeholders — [alt] in the secondary color |
| Formatted ⇄ raw | ⇧⌘R flips the whole document to 13 pt monospaced source |
| Light / dark | ⇧⌘D — free and always correct, because every color is a system semantic |
| HTML | Comments dropped from the formatted view; <br> becomes a line separator; other blocks shown as source in the secondary color |
Footnote: the marketing pages for this app (here and in the app repo) use grey-scale palettes of their own. The app is canonical — its design system is the one documented above.