Brand
The look of MelaCMS, for the documentation, the website and anything else that carries the name.
The mark
A ring holding an M. The M is one sharp stroke folded like a ribbon. The up strokes take one shade and the down strokes another, and its legs run into the ring.
| Version | File | Use it |
|---|---|---|
| Ring, for light backgrounds | /logo.svg | Headers, documents, light pages |
| Ring, for dark backgrounds | /logo-dark.svg | Dark pages, the share image |
| Solid disc | /favicon/favicon.svg | Small sizes: favicons, avatars, anything under 48px |
Keep clear space around the mark of at least the thickness of the ring. Do not recolour the two shades of the M separately from each other, stretch the mark, or put the ring version on a busy photo.
The name
Write it MelaCMS: one word, capital M and CMS. In the wordmark, Mela takes the text colour and CMS takes Mela Blue on light backgrounds and Sky on dark ones.
Colours
#1D6FA5#38BDF8#155780#0B1622#4A5B6A#EEF4F8#CFE9FA| Colour | Role |
|---|---|
| Mela Blue | The brand colour: links and buttons on light backgrounds, the start of the ring gradient |
| Sky | The accent: the end of the ring gradient, CMS in the wordmark, links on dark backgrounds |
| Deep Blue | Hover and pressed states |
| Ink | Dark backgrounds and body text on light ones |
| Slate | Secondary text |
| Mist | Light backgrounds and panels |
| Ice | The second shade of the M on the solid disc |
The ring and the solid disc run a gradient from Mela Blue to Sky, top left to bottom right. Ink and Mist carry the page; blue carries the brand. Sky is not used for text on white, where its contrast is too low.
Type
The documentation uses Inter, the VitePress default, for text and a monospace font for code. The share image uses Avenir Next.
Files
| File | Size |
|---|---|
/favicon/favicon.ico | 16, 32 and 48px |
/favicon/favicon-96x96.png | 96px |
/favicon/apple-touch-icon.png | 180px, on Ink |
/favicon/web-app-manifest-192x192.png, -512x512.png | Maskable, on Ink |
/images/mela-cms-social-share.png | 1200 x 630, for Open Graph and Twitter |
Every file is generated from code in brand-source/. To change the mark or a colour, edit brand-source/mark.mjs and run npm run brand.
Trademark
The MIT License covers the code of MelaCMS, not its name or logo. The MelaCMS name and logo are trademarks of Luca Visciola (Melasistema).
You may use them to refer to MelaCMS: in articles, talks, tutorials and videos, and to say that a site, package or service is built for or works with MelaCMS. You may not use them as the name or logo of a fork, a product or a service, or in a way that suggests it is made or endorsed by the MelaCMS project when it is not.
For anything else, ask first by opening an issue on the repository.