Assets
Marks and icons
Every file is the real artefact. Download it here, or copy and download straight from the brand page's mark cards.
Source of truth: Downloads/avatar-1 and avatar-2 masters · varick-docs/assets
The marks
Logomark, wordmark, combination. The brand page carries the same three as interactive cards.
Documents render the wordmark PNG, never the SVG
The SVG is stroke-based. Browsers render it correctly, but the docx toolchain draws hollow, outlined letterforms from it. The PNG (cairosvg at scale=8, 3856 × 288) is what every document pipeline uses.
Favicons and app icons
The logomark, cut to the two sizes platforms ask for.
Installing them
<link rel="icon" href="/brand/varick-favicon.png" sizes="128x128" />
<link rel="apple-touch-icon" href="/brand/varick-logomark-288.png" />In a Next.js app
export const metadata: Metadata = {
icons: {
icon: '/brand/varick-favicon.png',
apple: '/brand/varick-logomark-288.png',
},
}- Favicon
- 128 × 128 PNG. The logomark; browsers round it where the platform does.
- App tile
- 288 × 288 PNG for iOS home screens and larger placements.
- Master
- 840 × 840 PNG when something needs print or retina headroom.
- Rounding
- 2px, always. The tile ships square; the radius is applied at usage time.
Usage
The rules that keep the mark looking like the mark.
Do
- Scale the lockup to the full content width. In documents that is 6.7in, which puts it at 0.5in tall.
- Keep clear space of at least the height of the mark on every side.
- Put the lockup in the page header so it repeats on every page.
- Place it on white, or on navy where it is the reversed cut.
Don’t
- Do not add a second rule under the lockup. The hairline is part of the asset and it is the divider.
- Do not add a tagline under the wordmark. It was removed deliberately.
- Do not replace the wordmark with type. The masthead is an image, always.
- Do not stretch, skew, outline, or apply an effect or shadow.
- Do not recolour it. Navy on white, or reversed. Nothing else.
- Do not place it on a busy photograph or a low-contrast background.
- Do not call the masthead helper inside the document body. Header only.
On navy and on white
The logomark carries its own ground, so it works on both without a reversed cut.
The plain-gradient variant exists for surfaces where the bridge halftone is too busy at small sizes. It is in the brand page’s download menu.