paper.design/mono

Paper Monosaved 2d ago · captured 2d ago

Eleven details, eleven pinned.

View as Markdown ↗

Colors8 colors · ground #F3F4F2

ground#f3f4f2·88.08%#2c2b28·7.81%#d0d5d9·1.89%#4e4c49·1.16%#b5b7b7·0.39%accent#8b6738·0.27%#686766·0.26%#909191·0.14%

Sized by coverage · click to copy.

Typography1 family · 3 styles · paperMono

1 Design

paperMono · 198/238 · 800 · normal

a.glyph

paperMono · 14/18 · 400 · -0.126px

Body

Paper Mono is a free and open source font family

paperMono · 14/18 · 400 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsFill1 style

Fill

primary · fill #f9f9f9 · label #000000 · radius 5px · border 0px · padding 3px 10px · height 22px · type 12px / 500

Shape3 radii · 50 uses

4px21 uses · 42%

5px18 uses · 36%

6px11 uses · 22%

AnalysisA type specimen dressed as a font editor.

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.

Style recipeDesign it as if the page is a working file inside a precise design tool.

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.

Details11 worth noting

paper.design/mono — the captured page — Product, 1440 × 900 · captured Oct 7, 2026

1Bézier-outline hero letterforms
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
2Halftone-dot offset shadow
A halftone-dot drop shadow offset down and right behind each outline glyph, giving flat vectors depth without a gradient or blur
3Metric numbers as ornament
Font metric values (710, 509, 606, 0) printed in tiny blue mono at the ends of dashed guide lines, turning the specs into decoration
4Tagline as a canvas text box
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
5Offset-shadow version chip
A version chip ("v1.0") with a hard offset shadow and 5px radius, the page's one tactile, button-like object
6Printed specimen photo break
A moody photo of a printed specimen in bronze ink on black paper breaks up the cool, clinical UI with one warm, physical image
7Specimen-as-proof feature rows
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
8Micro segmented toggles
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
9Glyph inspector with weight ruler
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
10Outlined numbered chapter dividers
Chapter dividers ("1 Design", "2 Glyphs", "3 Play") set as huge outlined numerals and words in pale blue with a hard offset shadow
11Scattered app-window cards
Floating mini "window" cards with blue title bars, scattered over the graph-paper grid like open panels in an app

other · product · light · swiss, minimal · technical, calm, elegant, confident

designengineer.tools0

paper.design/mono

More like this