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>. 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 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".