brand
The mark for Josh Vaughen and ijosh.com, and every file other sites link to. Paths here mirror the repository: /mark/<file> is mark/<file>, and so on for social/ and photo/. Link to these URLs; do not copy the files.
The mark
A J on a three-by-three grid. Two forms: the mark, in two tones, and the solid mark for anywhere the grey cannot be trusted — mid-tones, photographs, anything under 32px, and every process that prints one 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 brings its own background, so the icon reads 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. Copy only favicon.ico to your site root: browsers probe it on the page's own origin, and it is the one format Google is certain to read.
<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 has to name this origin under img-src. Nothing here needs CORS.
The photo
The other half of the identity, and not the mark. A face goes where someone expects to meet a person: avatars on personal accounts. The mark goes where someone expects to meet the work. One crop at every size, 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 of its own grid, extended — it is not set on a pattern, it is the lattice, lit. Each is placed where that platform neither crops it nor covers it: all three put the avatar over the bottom-left, and X runs the name and bio across the bottom on mobile. The avatar beside these is the photo.
The field's cells take one of four tones of their own, chosen by a hash of where each cell sits. That is not a random draw — there is no seed and no state, so the field reads as scattered while the same cell stays the same tone in every build. The four are the field's, not the mark's and not the print greys.
| 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. |
Upload the PNG; every one of these takes it. The SVG beside each is the source, same name without the size.
The palette
Every color the site paints, as custom properties, in a light and a dark block. --mark and --mark-muted are the mark's own two tones, read from the artwork that draws them, so they cannot drift from it. Take the values at build time and inline them; a cross-origin @import puts this origin on your render path for twenty lines of CSS.
| 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. Nothing enters it.
- Never pink, never any color, in the mark. The accent lives on links and the pinned-tab tint.
- Never rotated, mirrored, outlined, shadowed, or laid over a photo or gradient.
altis the name, never "logo".