brand

The mark for Josh Vaughen and ijosh.com, the color palette, the type, and every file other sites link to. Paths mirror the repository: /mark/<file> is mark/<file>, and the same for social/, share/, photo/ and fonts/. Link to these URLs instead of copying the files. The exceptions are favicon.ico, tokens.css and fonts/, which say why below.

The mark

A J on a three by three grid, in two forms. The mark uses two tones. The solid mark uses one, for mid-tones, photographs, anything under 32px, and any process that prints a single ink.

A PNG sits beside each SVG, same name with the size appended: 512 and 1024 for the mark, 512 for the solid form. The resume marks ship as PDFs instead.

The icons

A charcoal tile holding the on-dark mark. The tile includes its own background, so the icon looks the same on any page.

On a website

Link the icons from here, and copy favicon.ico to your site root. Browsers request it on the page's own origin, and ICO is a format Google reads for sure.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" href="https://brand.ijosh.com/mark/jshvn-icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://brand.ijosh.com/mark/apple-touch-icon-180.png">
<link rel="mask-icon" href="https://brand.ijosh.com/mark/safari-pinned-tab.svg" color="#ca486d">

Your page's Content-Security-Policy needs this origin under img-src. No CORS headers are needed.

The photo

The other half of the identity. Use the face for avatars on personal accounts, where someone expects to meet a person, and the mark where someone expects to meet the work. Every size is the same crop, so the face sits in the same place at each.

The banners

One profile banner per platform, at the pixel size that platform asks for. The mark sits on a charcoal field patterned with the same grid, placed where the platform will neither crop it nor cover it. Each puts the avatar over the bottom left, X runs the name and bio along the bottom on mobile, Discord hangs the status bubble there, and Bluesky crops the top and bottom on the web and the sides on a phone. The avatar beside these is the photo.

GitHub's social preview is here too. It is not a profile banner — GitHub has none — but the picture a repository unfurls with. Nothing overlays it, so the mark is centred; a repository link unfurls at 1.91:1, and that crop is what it has to survive.

Each field cell takes one of four grey tones, chosen by hashing the cell's position. There is no random seed, so the field looks scattered and every build produces the same file.

Upload the PNG. The SVG beside each is the source, same name without the size.

The share image

What a link to ijosh.com unfurls with, in a feed, in Slack, in a message. The photo takes the left square and the mark signs the charcoal beside it — the one file here that carries both halves of the identity at once. It is a JPEG because the same picture as a PNG runs past a megabyte, and a card still loading is a card not shown.

This is the one directory here a search engine may crawl: it is what ijosh.com names in og:image, and a search engine may fetch that to draw a result for the page.

The palette

Every color ijosh.com paints, as custom properties, in a light block and a dark block. --mark and --mark-muted are the mark's two tones, read from the artwork so they cannot drift from it. Inline the values at build time. A cross-origin @import blocks your page from rendering until this origin answers.

The type

Each face has one job and one weight: the type ijosh.com sets. tokens.css carries a token for each and the @font-face rules for every file below.

Display · Montserrat 600, uppercase, untracked · the name, and headings

Josh Vaughen

Label · Graduate 400, 14px, tracked 0.28em · one or two words

EngineerExplorerSeattle

Text · PT Serif 400, 16px, line height 1.4 · running text

Running text is set in PT Serif at 16px, in the body grey, with a little air between the lines. It is the only face here meant to be read at length.

Copy fonts/ to /fonts/ at your site root, beside your copy of tokens.css. A font is a CORS fetch and this origin sends no CORS headers, so a font linked from here is refused. Ask for the weight that ships, set font-synthesis: none so nothing is faked in bold or italic, and type labels in title case: Graduate draws its lowercase as small capitals.

The rules that matter

• The two-tone mark on white, light grey, charcoal or black, at 32px or 8mm and up. Everything else gets the solid form.
• One cell of clear space on every side.
• No pink, or any other color, in the mark. The accent is for links and the pinned-tab tint.
• No rotation, mirroring, outlines, or drop shadows, and never over a photo or gradient.
• alt is the name, never "logo".