How ShortcutPosters looks, sounds and signs its work: the P-key logo, the press-room palette, the type, the keycap, the posters, and the files to use.
Every section is a shortcut: press its key to go there.
ShortcutPosters is a free reference of keyboard shortcuts and controller mappings for apps, games, consoles and handhelds, and a print shop for the ones worth keeping on a wall.
Most visitors arrive mid-task, from a search for “[app] keyboard shortcuts”. They came for one line in a table. The brand's first job is to give them that line quickly; the poster is what some of them want afterwards.
The press-room reference desk. A small print shop that happens to hold the most complete shortcut archive around: warm newsprint, black ink, one vermillion for the press marks. Everything is set the way a technical reference is set: ruled lines, mono figures in the margins, an edition number on the masthead.
The one thing this paper does that paper cannot: the keys are real. The keycap is the button, the shortcut and the logo.
Every shortcut set is transcribed from the app's own documentation, cites its sources and shows the date a person last checked it.
Every shortcut is real HTML text: it can be searched, copied, and cited by search engines and AI assistants.
Apps, PC games (keyboard and controller), operating systems, Steam Deck and Nintendo Switch, in one grammar.
One word, two capitals. In the logo and in the signature, “Posters” takes the vermillion. The domain is written in lower case: shortcutposters.com.
Print shop and reference desk: precise, calm, a little dry. The copy states what is there, with its numbers, and lets the reader get back to work. Real lines from the site: “Shortcuts & controls, verified.” · “Free to read, sourced and dated.” · “Sourced from official docs · Checked by a human — nothing guessed.”
Write
Don't write
A vermillion keycap whose legend is a P, printed top-left where real keycaps print theirs.
The letter in the corner is what makes it read as a key rather than a letter in a square: centred, it becomes a parking sign. The empty lower right is part of the sign.
The P is a hole, not white paint: the background shows through. That is why the mark survives in one colour, reversed, engraved or stamped.
The lip under the face is the same pressed edge as every button on the site. The logo is a key from the interface.
| Element | Value |
|---|---|
| Key | 216 × 216 (27u), radius 40 (5u) |
| Dish (sculpted top) | 8 (1u), one arc |
| Groove, face to lip | 16 (2u) |
| Lip (the press) | 48 (6u) |
| P legend | 13u tall, stem 3u, 4u from left and top |
| P counter | horizontals 0.86 × stem |
| Lockup | Name's baseline sits on the groove; cap height ≈ 0.4 × key |
The name in the lockups is Bricolage Grotesque 800, converted to outlines, tracking −0.03 em. Always use the files; never re-set the name next to the symbol by hand.
On dark grounds the white versions open the P by 3 units: white bleeds into a hole (irradiation) and would close it.
One lip height (48/256 of the canvas) on every side of the key. Nothing enters the dashed area.
| Use | Minimum |
|---|---|
| Symbol, screen | 16 px — small cut below 24 px |
| Symbol, print | 6 mm |
| Horizontal lockup | 24 px tall · 25 mm wide |
The small cut (files named symbol-small-*) drops the dish and thickens the P, snapped to a 16 px pixel grid. It is the favicon. Use it at 24 px and below, and only there.
A warm print palette. There is no secondary accent: vermillion appears on well under a tenth of any screen, and that scarcity is the point.
Roughly how a page divides: paper, ink, greys, vermillion
A colour that fills a shape needs 3:1; a colour that forms a word needs 4.5:1. Reaching for #E8410F to colour text is always wrong.
Text on vermillion, on a category colour or on an app's brand colour is ink. White on vermillion fails contrast.
Category colours come from the data. The brand owns one accent; the data owns the rest of the spectrum.
When an app has no hand-tuned palette, its shortcut categories take these press inks, in this order. Before they are painted, each is lightened automatically until ink text on it reaches 4.8:1.
Vermillion · press blue · bottle green · ochre · oxblood · graphite · olive · plum ink
All values are RGB. CMYK and Pantone equivalents of the vermillion and the lip are to be chosen on a printed proof, with the printer: a saturated RGB vermillion falls outside CMYK, and automatic conversion dulls it. None are proposed here on purpose.
Display
Bricolage Grotesque
800 · tracking −0.025 em · line-height 0.98. Headings only.
Body
Hanken Grotesk
400 / 500 / 600 / 700 · line-height 1.55. Prose and interface text.
Label & keys
JetBrains Mono
400 / 500 / 700 · uppercase labels at 0.14 em. Keys, counts, dates, measurements.
Mac edition · 125 shortcuts · last verified 28 Sep 2026
⌘ ⇧ P claude --resume
JetBrains Mono is for keys, commands, counts, dates, file sizes and DPI. Never for a sentence.
A heading carries its own weight. Real data (an edition, a count) goes under it, as this page does.
Text a reader acts on never goes below 11 px; metadata never below 12 px.
Where the fonts can't load (e-mail, plain documents), set everything in the system sans: -apple-system, "Segoe UI", Helvetica, Arial. Never substitute another display face for Bricolage.
The keycap is the system's atom: it is the button, the shortcut and the logo, and it physically compresses when pressed.
⌘-K G G
Stock white, 1.5 px ink border, 3 px bottom border, 5 px radius, mono 600. Keys pressed together join with -; keys pressed in sequence are separated by a space. A typed command is code, not keycaps.
Depth is a bottom border, not a blur: 4 px at rest, 1.5 px and 2 px lower when pressed (try it). If it can't be pressed, it doesn't get the thick edge. Primary buttons are vermillion with an ink label.
125 shortcuts · design
Stock white on newsprint, 1.5 px ink border, 4 px bottom edge. On hover a card lifts 3 px and its bottom edge turns vermillion.
Small radii: 3 px printed marks, 5 px keycaps, 6 px buttons and fields, 7 px cards, 8 px panels. Nothing is a pill except a genuine chip. Borders are 1.5 px ink.
The page is flat newsprint under a light grain. The one exception: a framed poster casts a real shadow, because a framed print on a wall does.
Sections are separated by a 1.5 px ink rule. Hairlines replace card borders wherever a rule will do.
Pages are 1200 px wide with 1.75 rem gutters; prose stops at 60 rem. Spacing steps: 0.4 · 0.7 · 1.2 · 1.75 rem.
No dark mode. The paper metaphor doesn't survive inversion. Accessibility target: WCAG 2.2 AA, visible focus (2 px Vermillion Ink ring), 24 px minimum targets.
The product. Each poster is drawn from the same verified data as the page, in one of five art directions. Each direction has its own type and palette; the brand's signature is the constant.
Every poster is signed bottom-left with the mark followed by shortcutposters.com: the colour mark on light papers, the reversed white cut on dark grounds. The footer also prints the edition and what it is compatible with (“Updated Jan 2026 · Compatible with Figma Design · Mac”). The app's own logo and brand colours belong to the app; the poster never presents them as ours.
 |
ShortcutPosters
App keyboard-shortcut posters for your desk & studio.
shortcutposters.com · Poster Maker · Request an app
Sister site of Stream Deck Builder
|
The one place the brand sets in the system font, with every style inline: mail clients drop web fonts and stylesheets. Same structure as the sister site’s signature.
Social profiles use the avatar file as it is: the key on newsprint, never cropped tighter than its clear space.
Real screenshots of the site and real posters rendered from the data. No mock-ups of features that don't exist, no stock photos of people at desks.
App logos and game key art identify the subject; they belong to their owners and don't go into brand material, banners for press, or ads.
Brand graphics sit on Newsprint. Dark grounds are for posters whose palette is dark, with the reversed mark.
| Folder | Contents | Use |
|---|---|---|
| assets/logo/svg/ | Symbol (colour, ink, reversed, on vermillion), small cut, horizontal and stacked lockups (colour, ink, white) | Screen and web, any size |
| assets/logo/png/ | The same at 512 – 2400 px, transparent | Slides, documents, social |
| assets/logo/print-pdf/ | Vector PDF of every SVG, RGB | Printers, signage |
| assets/logo/social/ | Round-safe avatar 500 px, cover 1280 × 720 | Profiles, link previews |
| assets/posters/ | Posters at 2400 px wide | Articles, product pages |
| assets/screenshots/ | The live site, desktop 2880 × 1800 and phone 1170 × 2532 | Articles, reviews |
business@shortcutposters.com
shortcutposters.com
Bluesky: @shortcutposters.bsky.social
Use the files as they are. For anything these pages don't cover (a co-branded piece, a print run, a format not in the kit), write to business@shortcutposters.com before it goes out.