# paper.design/mono

Source: https://paper.design/mono
Captured: 2026-10-07
Tags: other, product, light, both, swiss, minimal, technical, calm, elegant, confident
Colors: #f3f4f2, #2c2b28, #d0d5d9, #4e4c49, #b5b7b7, #8b6738, #686766, #909191
Type (h2): paperMono · 198px/237.6px · 800 — "1 Design"
Type (h3): paperMono · 14px/18px · 400 · tracking -0.126px — "a.glyph"
Type (body): paperMono · 14px/18px · 400 — "Paper Mono is a free and open source font family"
Type (button): paperMono · 12px/16px · 500 — "Fill"
Button: "Fill" — fill #f9f9f9, text #000000, radius 5px, border 0px, padding 3px 10px, height 22px, type 12px/500
Radii: 4px (21), 5px (18), 6px (11)

## Images

- Hero (desktop): https://media.lvly.design/library/paper-design-mono/hero.webp?v=12db0cb8
- Page crop (mid-1): https://media.lvly.design/library/paper-design-mono/mid-1.webp?v=8b45ad91
- Page crop (mid-2): https://media.lvly.design/library/paper-design-mono/mid-2.webp?v=6495c173
- Hero (mobile): https://media.lvly.design/library/paper-design-mono/mobile-hero.webp?v=5b236bfb
- Full page (desktop): https://media.lvly.design/library/paper-design-mono/full.jpg?v=3bd71957
- Full page (mobile): https://media.lvly.design/library/paper-design-mono/mobile-full.jpg?v=b5460982
- Clip preview (mp4): https://media.lvly.design/library/paper-design-mono/video-jrtuir.preview.mp4?v=be365c49

A type specimen dressed as a font editor. Every surface is set in the font being sold (Paper Mono, 14px/18px body, 12px/500 controls, 800-weight display at 198px), on a cool off-white `#f3f4f2` with near-black `#2c2b28` ink. The page never shows a finished hero headline. Instead it shows the word "paper mono" as outlines with Bézier handles, on-curve points, metric numbers (710 / 509 / 0) and a halftone-dot shadow, so the product is literally the subject under construction. Below that, a dashed-hairline grid of two-column rows (a short mono explainer on the left, a live specimen on the right) runs through the features. The only warmth is a bronze-on-black printed specimen photo (`#8b6738`), and a pale blue construction layer of grid lines, guides and point markers carries the "design tool" identity.

## Steal-worthy details

- Hero type drawn as editable outlines (thin strokes, square corner points, round handles, blue on-curve diamonds) instead of solid glyphs, so the page reads like a frame inside the design tool itself
- A halftone-dot drop shadow offset down and right behind each outline glyph, giving flat vectors depth without a gradient or blur
- Font metric values (710, 509, 606, 0) printed in tiny blue mono at the ends of dashed guide lines, turning the specs into decoration
- The tagline sits in a small bordered callout with a 2px offset bottom edge, placed over the artwork like a selected text layer, not as a headline
- A version chip ("v1.0") with a hard offset shadow and 5px radius, the page's one tactile, button-like object
- A moody photo of a printed specimen in bronze ink on black paper breaks up the cool, clinical UI with one warm, physical image
- Features show their claim in the type itself: a box-drawing progress bar at "75%", a ligature grid, tabular prices. The demo is the proof
- Tiny segmented controls (On/Off, Fill/Outline, letters/symbols/drawing) at 12px with a white active tab on a gray track, 4–5px radii, 22px tall
- A glyph inspector paired with a 10-column glyph grid in dashed hairline cells, with a weight ruler (100–800) and a caret marker under the big glyph
- Chapter dividers ("1 Design", "2 Glyphs", "3 Play") set as huge outlined numerals and words in pale blue with a hard offset shadow
- Floating mini "window" cards with blue title bars, scattered over the graph-paper grid like open panels in an app

## Style recipe

Design it as if the page is a working file inside a precise design tool. Use one monospace family for everything: body 14px/18px weight 400, labels and buttons 12px/16px weight 500, display weights up to 800 at very large sizes (around 200px, line-height 1.2), with tracking left at normal. Background is a cool off-white `#f3f4f2` (page `#f6f6f3`), ink is `#2c2b28`, secondary text `#4e4c49` / `#686766`, rules and inactive fills `#d0d5d9` / `#b5b7b7`. Add a pale, desaturated blue construction layer for grid lines, guides, point markers, tiny metric labels and outlined display type. Treat it as an annotation color, never a fill. Keep warmth to a single physical photographic moment in bronze `#8b6738` on near-black. Build the structure from a max-width ~1200px frame with 1px side rails, rows split 50/50 (a short explainer left, a live demonstration right) and separated by dashed 1px hairlines. Use graph-paper squares behind showcase areas. Keep radii small and consistent (4px for chips, 5px for buttons, 6px for panels). Controls are compact: 22px tall, 3px 10px padding, a white active segment on a light gray track, no borders, no shadows. The only shadow is a hard 2px offset (no blur) on badges, callouts and outlined display words. Show capabilities by rendering them rather than describing them: outlines with handles, live glyph grids, text-drawn diagrams. Copy stays terse and lowercase-friendly, and navigation is two text links with arrow glyphs (↓, ↗), not buttons.