brand
The mark for Josh Vaughen and ijosh.com, the color palette, and every file other sites link to. Paths mirror the repository: /mark/<file> is mark/<file>, and the same for social/ and photo/. Link to these URLs instead of copying the files.
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.
| File | Use |
|---|---|
| jshvn-mark-on-light.svg | The mark on white to light grey. |
| jshvn-mark-on-dark.svg | The mark on dark grey to black. |
| jshvn-mark-solid-on-light.svg | One tone, light surface. Also every one-ink process. |
| jshvn-mark-solid-on-dark.svg | One tone, dark surface. |
| jshvn-mark-resume.svg, .pdf | Print greys for a resume. |
Each SVG has a 512 and 1024 PNG beside it, same name with the size appended.
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.
| File | Use |
|---|---|
| jshvn-icon.svg | Rounded tile. App icons, favicons at 48px and up. 512, 1024. |
| jshvn-icon-square.svg | Square tile; iOS rounds it. apple-touch-icon-180.png, 512. |
| jshvn-icon-circle.svg | Any avatar that is a circle. 1024. |
| jshvn-icon-maskable.svg | Android maskable. 192, 512. |
| jshvn-icon-solid.svg | Favicons at 16 and 32px. |
| favicon.ico | Solid at 16 and 32, two-tone at 48, in one file. |
| safari-pinned-tab.svg | Single-color mask; Safari paints it. Tint #ca486d. |
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.
| File | Pixels | Use |
|---|---|---|
| profile.png | 1024 | The master, lossless. The best source when a form takes it. |
| profile-1024.jpg | 1024 | GitHub, LinkedIn, X, Slack. |
| profile-512.jpg | 512 | The next rung down when a form caps pixels or bytes. |
| profile-400.jpg | 400 | |
| profile-256.jpg | 256 | |
| profile-128.jpg | 128 | |
| profile-64.jpg | 64 |
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. All three put the avatar over the bottom left, and X runs the name and bio along the bottom on mobile. 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.
| File | Pixels | Use |
|---|---|---|
| jshvn-banner-linkedin-1584x396.png | 1584×396 | The LinkedIn profile background. |
| jshvn-banner-facebook-851x315.png | 851×315 | The Facebook profile cover. |
| jshvn-banner-x-1500x500.png | 1500×500 | The X profile header. |
| jshvn-social-preview-1280x640.png | 1280×640 | A repository's social preview, under Settings, General. |
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.
| File | Pixels | Use |
|---|---|---|
| jshvn-share-1200x630.jpg | 1200×630 | The og:image for ijosh.com. Give the width and height in the markup too. |
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.
| File | Use |
|---|---|
| tokens.css | The palette. The source for every color on ijosh.com. |
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.
altis the name, never "logo".