# Downloads

Every file the style guide produces. Use them as they are: link to them, or download them. They are rebuilt from the [design tokens](tokens.json) whenever the guide changes.

Other websites can load the fonts and tokens straight from here:

```html
<link rel="stylesheet" href="https://brand.msrvs.co.uk/dist/fonts/fonts.css">
<link rel="stylesheet" href="https://brand.msrvs.co.uk/dist/tokens/msrvs.css">
```

## Logos: SVG

|  | File | Pixels | For |
|---|---|---|---|
| | [`emblem.svg`](dist/logo/svg/emblem.svg) | vector | Full emblem: blue panel, wheel, lettered ribbon |
| | [`lockup-compact-on-dark.svg`](dist/logo/svg/lockup-compact-on-dark.svg) | vector | Mark + MSRVS, light lettering |
| | [`lockup-compact-on-light.svg`](dist/logo/svg/lockup-compact-on-light.svg) | vector | Mark + MSRVS, dark lettering |
| | [`lockup-on-dark.svg`](dist/logo/svg/lockup-on-dark.svg) | vector | Mark + MSRVS + full name, light lettering |
| | [`lockup-on-light.svg`](dist/logo/svg/lockup-on-light.svg) | vector | Mark + MSRVS + full name, dark lettering |
| | [`mark-mono-black.svg`](dist/logo/svg/mark-mono-black.svg) | vector | One-colour mark, black |
| | [`mark-mono-blue.svg`](dist/logo/svg/mark-mono-blue.svg) | vector | One-colour mark, steam blue |
| | [`mark-mono-white.svg`](dist/logo/svg/mark-mono-white.svg) | vector | One-colour mark, white (for dark grounds) |
| | [`mark.svg`](dist/logo/svg/mark.svg) | vector | The wheel on its blue disc |

## Logos: PNG

|  | File | Pixels | For |
|---|---|---|---|
| | [`emblem-1200.png`](dist/logo/png/emblem-1200.png) | 1200 × 1076 | Emblem for screens and documents |
| | [`emblem-2400.png`](dist/logo/png/emblem-2400.png) | 2400 × 2152 | Emblem for print: 20 cm wide at 300 dpi |
| | [`lockup-compact-on-dark-480.png`](dist/logo/png/lockup-compact-on-dark-480.png) | 1611 × 480 | Compact lockup, light lettering |
| | [`lockup-compact-on-light-480.png`](dist/logo/png/lockup-compact-on-light-480.png) | 1611 × 480 | Compact lockup, dark lettering |
| | [`lockup-on-dark-480.png`](dist/logo/png/lockup-on-dark-480.png) | 2460 × 480 | Lockup with full name, light lettering |
| | [`lockup-on-light-480.png`](dist/logo/png/lockup-on-light-480.png) | 2460 × 480 | Lockup with full name, dark lettering |
| | [`mark-1024.png`](dist/logo/png/mark-1024.png) | 1024 × 1024 | Mark for print |
| | [`mark-512.png`](dist/logo/png/mark-512.png) | 512 × 512 | Mark for screens |
| | [`mark-mono-black-1024.png`](dist/logo/png/mark-mono-black-1024.png) | 1024 × 1024 | One-colour mark, black |
| | [`mark-mono-blue-1024.png`](dist/logo/png/mark-mono-blue-1024.png) | 1024 × 1024 | One-colour mark, steam blue |
| | [`mark-mono-white-1024.png`](dist/logo/png/mark-mono-white-1024.png) | 1024 × 1024 | One-colour mark, white |

## Website icons

|  | File | Pixels | For |
|---|---|---|---|
| | [`android-chrome-192x192.png`](dist/icons/android-chrome-192x192.png) | 192 × 192 | Android home screen |
| | [`android-chrome-512x512.png`](dist/icons/android-chrome-512x512.png) | 512 × 512 | Android home screen and splash screen |
| | [`apple-touch-icon.png`](dist/icons/apple-touch-icon.png) | 180 × 180 | iPhone and iPad home screen |
| | [`favicon-16x16.png`](dist/icons/favicon-16x16.png) | 16 × 16 | Favicon, 16px |
| | [`favicon-32x32.png`](dist/icons/favicon-32x32.png) | 32 × 32 | Favicon, 32px |
|  | [`favicon.ico`](dist/icons/favicon.ico) | 16, 32, 48 | Favicon for browsers and tools that ask for /favicon.ico |
| | [`favicon.svg`](dist/icons/favicon.svg) | vector | Favicon for current browsers, sharp at any size |
| | [`maskable-512x512.png`](dist/icons/maskable-512x512.png) | 512 × 512 | Android adaptive icon: the mark sits inside the safe zone, whatever shape the phone crops to |
|  | [`site.webmanifest`](dist/icons/site.webmanifest) |  | Web app manifest: name, colours and the Android icons |

## Social media

|  | File | Pixels | For |
|---|---|---|---|
| | [`avatar-1024.png`](dist/social/avatar-1024.png) | 1024 × 1024 | Profile picture for Facebook and the like; survives a circular crop |
| | [`share-1200x1200.png`](dist/social/share-1200x1200.png) | 1200 × 1200 | Square share image |
| | [`share-1200x630.png`](dist/social/share-1200x630.png) | 1200 × 630 | Link preview image; Facebook, LinkedIn and X show it uncropped |

## Fonts

|  | File | Pixels | For |
|---|---|---|---|
|  | [`OFL-inter.txt`](dist/fonts/OFL-inter.txt) |  | Inter licence |
|  | [`OFL-source-serif-4.txt`](dist/fonts/OFL-source-serif-4.txt) |  | Source Serif 4 licence |
|  | [`fonts.css`](dist/fonts/fonts.css) |  | `@font-face` rules for the fonts beside it |
|  | [`inter-latin-ext.woff2`](dist/fonts/inter-latin-ext.woff2) |  |  |
|  | [`inter-latin.woff2`](dist/fonts/inter-latin.woff2) |  |  |
|  | [`source-serif-4-latin-ext.woff2`](dist/fonts/source-serif-4-latin-ext.woff2) |  |  |
|  | [`source-serif-4-latin.woff2`](dist/fonts/source-serif-4-latin.woff2) |  |  |

For desktop and print work, install the full families from Google Fonts: [Source Serif 4](https://fonts.google.com/specimen/Source+Serif+4) and [Inter](https://fonts.google.com/specimen/Inter).

## Design tokens

|  | File | Pixels | For |
|---|---|---|---|
|  | [`msrvs.css`](dist/tokens/msrvs.css) |  | CSS custom properties, `--msrvs-*`, with light and dark schemes |
|  | [`msrvs.json`](dist/tokens/msrvs.json) |  | Every token, resolved to plain values |
|  | [`msrvs.less`](dist/tokens/msrvs.less) |  | LESS variables, `@msrvs-*` |

## The forum: admin uploads

|  | File | Pixels | For |
|---|---|---|---|
| | [`email-logo.png`](dist/flarum/admin/email-logo.png) | 1230 × 240 | Admin → Email → Logo |
| | [`favicon.png`](dist/flarum/admin/favicon.png) | 256 × 256 | Admin → Appearance → Favicon |
| | [`logo-full.png`](dist/flarum/admin/logo-full.png) | 1230 × 240 | Admin → Appearance → Logo (alternative, with the full name) |
| | [`logo.png`](dist/flarum/admin/logo.png) | 806 × 240 | Admin → Appearance → Logo |
| | [`social-share.png`](dist/flarum/admin/social-share.png) | 1200 × 1200 | Admin → SEO → Social media image (fof/seo) |

## The forum: extension files

|  | File | Pixels | For |
|---|---|---|---|
| | [`assets/apple-touch-icon.png`](dist/flarum/extension/assets/apple-touch-icon.png) | 180 × 180 | iOS home-screen icon (core has no slot for one) |
|  | `assets/fonts/*` |  | The web fonts again, at the extension's path |
| | [`assets/icons/android-chrome-192x192.png`](dist/flarum/extension/assets/icons/android-chrome-192x192.png) | 192 × 192 | Android home screen |
| | [`assets/icons/android-chrome-512x512.png`](dist/flarum/extension/assets/icons/android-chrome-512x512.png) | 512 × 512 | Android home screen and splash screen |
| | [`assets/icons/maskable-512x512.png`](dist/flarum/extension/assets/icons/maskable-512x512.png) | 512 × 512 | Android adaptive icon |
|  | [`assets/icons/site.webmanifest`](dist/flarum/extension/assets/icons/site.webmanifest) |  | Web app manifest, beside the icons it names |
| | [`assets/images/emblem.svg`](dist/flarum/extension/assets/images/emblem.svg) | vector | Full emblem, for pages with room for it (180px wide or more) |
| | [`assets/images/mark.svg`](dist/flarum/extension/assets/images/mark.svg) | vector | Footer mark |
|  | [`less/msrvs-tokens.less`](dist/flarum/extension/less/msrvs-tokens.less) |  | Design tokens as LESS variables |
| | [`resources/icon.png`](dist/flarum/extension/resources/icon.png) | 256 × 256 | Extension icon in the admin panel |