Identity
The library's visual identity, documented. The guide below covers the mark, the wordmark, the colour system, the typefaces, and how they are applied. The colophon is included as its sixth section. The stationery and the profile avatars follow the same rules.
LIBRARY
The whole drawing is four rectangles on a 512 square, the last one turned nine degrees. It began as the favicon and now stands at the head of every page, stamped in the green. On stationery it sits inside a hairline box and becomes the seal.
The fourth spine rotates nine degrees about its foot, so the shelf reads as in use, not abandoned. Nothing else moves. Do not redraw, thin, thicken, or straighten the spines, and do not add a fifth.
The source of truth is the inline SVG in the site header and the colophon. Reproduce those four rectangles exactly.
Clear space is one spine width on all sides. A spine is one tenth of the mark's height. In print the mark is never set below seven millimetres, the size at which the leaning spine closes up and the shelf becomes a smudge; on stationery it runs at 15, 10, or 7 mm only. On screen the floor is 16 pixels, the favicon.
One hard rule. Always inline the SVG with an explicit fill. The favicon file self-inverts in OS dark mode and vanishes as an image on light backgrounds. The favicon is the one place that inversion is wanted.
HUDSON STREET LIBRARY is set in Crimson Pro, Jacques Le Bailly's rework of Sebastian Kosch's Crimson Text. Crimson set every word of this site for years. It now keeps the door: the wordmark is the only place the face survives, and it appears nowhere else. Always capitals, always bold, tracked one hundredth of an em.
Mark height 1.3 em of the wordmark size, gap 0.55 rem, both set in the green. The mark and the words are one unit: do not separate them in the header, and do not let the line break.
LIBRARY
LIBRARY
The two-line setting is for print pieces and covers, where the strip lockup would run too wide. Green or ink, following the same colour rules as the mark.
Never set body text, headings, or anything else in Crimson Pro. A search of the site finding exactly one Crimson Pro declaration is correct, not an inconsistency to fix.
Never retrack, lowercase, or letter-space the wordmark for effect. It is a fixed setting, not a style.
Text sits near-black on a warm paper white, and a single green does everything else. It colours the mark, every link, and the seal on the stationery. Screen and press use the same value.
11.01 : 1 on white · reads as ink, not decoration
#81b182
#508950
#276628
#034706
#003100
#002000
The paler greens are the same green thinned, not different colours. The ramp holds one hue across every step; the version before it wandered from yellow-green at the light end to a colder green at the dark end and read as grey in the middle. 600 clears 6.96 : 1 on white; 400 and 500 are for fills and tints, never for text on white.
In print the green is a spot ink, matched to a drawdown on the running stock, never built from process colours. No Pantone number is specified; the chip is the standard.
Success, warning, and error are interface status colours. They are never the brand and never leave the interface.
One variable font does every job: display titles, deks, subheads, nav links, pull quotes, drop caps, body prose. Its optical-size axis, 7 to 72, draws a high-contrast display cut at headline sizes and a sturdier, open cut for running text, so the largest title and the smallest excerpt are the same face at different ages.
A working collection of artists' books, photobooks, zines, and printed ephemera. Body copy runs at sixteen pixels and above, where the text cut keeps its colour on screen.
The wordmark, and nothing else. See 02.
Dates, category chips, labels, and other small matter. Uppercase, tracked. From Omnibus-Type.
All three faces are free and open source, loaded from Google Fonts. New pages set body text in Literata; if a display setting feels too high-contrast, the dial is optical sizing on that heading, not a change of family.
1024 pixel squares with margins sized for a circular crop. Cream on green carries best at list sizes; green on cream matches the site. Always rasterized with explicit fills, never exported from the raw favicon file.
The print system is the pre-metric British foolscap folio, 203 × 330 mm (8 × 13 in), with a boxed seal, a stacked two-line wordmark, a 34 mm hairline, and confined ruling. Six pieces, the mark on every one:
03 DL banker envelope 110 × 220 · 04 Catalogue card 125 × 75
05 Accession label 60 × 32 · 06 Bookmark 55 × 210
Two spot colours for the whole job, Black and HSL Green, matched to a drawdown. The boxed seal runs at 15, 10, or 7 mm only. No bleed, no coatings, grain long; labels are removable low-tack acid-free adhesive. The full production spec and 1:1 printable comps live at identity/stationery.
The favicon is the one artwork that self-inverts: black in light mode, off-white in dark mode, by a media query inside the SVG. That behaviour is wanted in a browser tab and nowhere else, which is why every other use inlines the drawing with an explicit fill.
The website of Hudson Street Library is set in Literata, the typeface TypeTogether designed for long-form reading on screens. One variable font does every job on the site: its optical-size axis draws a high-contrast display cut at headline sizes and a sturdier, open cut for running text, so the largest title and the smallest excerpt are the same face at different ages.
The wordmark is the one exception. HUDSON STREET LIBRARY is set in Crimson Pro, Jacques Le Bailly's rework of Sebastian Kosch's Crimson Text. Crimson set every word of this site for years. It now keeps the door.
Dates, labels, and other small matter are set in Archivo Narrow, from the Argentine foundry Omnibus-Type. All three faces are free and open source.
The site runs on two inks. Text sits near-black on a warm paper white, and a single green does everything else: #034706, dark enough at eleven to one against white to read as ink rather than as decoration. It colours the mark, every link, and the seal stamped on the library's stationery, where it is matched to a spot ink rather than built from process colours. Screen and press use the same value.
The paler greens on the site are the same green thinned, not different colours. The ramp holds one hue across every step, which is a correction: the version before it wandered from yellow-green at the light end to a colder green at the dark end, and lost so much saturation in the middle that it read as grey.
The mark is a shelf of four spines, one leaning. It began as the favicon and now stands at the head of every page, stamped in the green. The whole drawing is four rectangles, the last one turned nine degrees. In print it is never set below seven millimetres, the size at which the leaning spine closes up and the shelf becomes a smudge.
The site is built with Eleventy and published as static pages. The catalog behind it is a single CSV file, one row per book, thirty-seven columns per row, 2,028 entries, each made by hand. There is no database, which seems right for a library that argues the shelf is the text.
- Stationery print comps · the six-piece set on Foolscap Mk II (203 × 330 mm), two spot colours
- Profile avatars · 1024 px PNG, for social accounts
- Colophon · how the site itself is set