Brand

Monita's logo, its mascot Moni, the colours and the type, as files to download and rules to use them by.

Logo

The mark is a pulse in a ring: a heartbeat that Monita keeps an eye on. The logo sets the mark beside the name, as the app's header does.

LogoSVG PNG 608 PNG 1216

Logo on darkSVG PNG 608 PNG 1216

MarkSVG PNG 512 PNG 1024

Mark on darkSVG PNG 512 PNG 1024

Mark in whiteSVG PNG 512 PNG 1024

Use the file made for the background: logo.svg on light, logo-on-dark.svg on dark. Use mark-white.svg on a photo or a strong colour.
Keep clear space of half the mark's height on every side.
Show the mark at 16 px or more, and the logo at 96 px wide or more.
Do not recolour, stretch, rotate, outline or shadow the mark. Do not set the name in another typeface.
The SVG logos draw the name with Inter. On a computer without Inter, use the PNG.

Moni is Monita's mascot, built from the mark: the ring is the body, the pulse is the mouth, and the antenna listens. Moni appears on the sign-in page, under every primitive's pages in the app, on the landing page, and in the README.

MoniSVG PNG 512 PNG 1024

HappySVG PNG 512 PNG 1024

WavingSVG PNG 512 PNG 1024

PeekingSVG PNG 512 PNG 1024

Moni and friendsSVG PNG 1200 PNG 2400

Moni looks the same in both themes. Never invert or recolour Moni for dark mode.
Moni wears the brand magenta. Nothing else in a drawing does, except the lines that show what Monita sends.
A drawing shows states in green and grey only. Never red or yellow: a picture that is always on screen must not look like an alarm.
Flows show their direction: magenta for what Monita sends, green for an answer.
Keep Moni's proportions. Do not crop the antenna or the feet, except in the peeking pose.
Motion stays small: a blink, a beat, a bounce. It stops when the reader asks for reduced motion.

Scenes

Each primitive has a scene, which the app draws at the foot of its pages and the landing page shows beside each part. The files use the light colours. A page that inlines one can recolour it for its theme with the --art-* CSS variables, as the landing page does.

MonitorsSVG PNG 1120 PNG 2240

HeartbeatsSVG PNG 1120 PNG 2240

IncidentsSVG PNG 1120 PNG 2240

MaintenanceSVG PNG 1120 PNG 2240

TicketsSVG PNG 1120 PNG 2240

ChangelogSVG PNG 1120 PNG 2240

Colours

Magenta is the brand. It marks the mark, the main button, links, focus and the chart line. It never marks a state.

Role	Light	Dark	Use
Brand	`#c4258f`	`#f25cbf`	Mark, main button, links, focus
Up	`#23784e`	`#4cb782`	A system that works
Down	`#d24545`	`#eb5757`	A system that is down
Issue	`#8a6300`	`#f2c94c`	A problem that is not an outage
Page	`#f7f8f8`	`#08090a`	Background
Card	`#ffffff`	`#0f1011`	Cards and the header
Ink	`#16171a`	`#f7f8f8`	Text

Moni has its own colours, the same in both themes:

Part	Colour
Body	`#fbe4f2`
Line, feet and antenna	`#c4258f`
Eyes	`#1e1a1d`
Cheeks	`#f2a7d4`

The app's source of truth is web/src/index.css.

Type

Use	Typeface
Text and headings	Inter, variable weight
Code, numbers in tables, addresses	Geist Mono

Both ship with Monita in static/fonts/.

Words

The tagline is Site reliability for every project your team ships. Write in plain words and whole sentences. Say what happened and what to do next. Never use a dot or a dash to join two ideas.

Make the files again

The files come from the app's own drawing code in web/src/components/brand/, so they always match the app. After a change there, run:

make brand

It writes the SVGs, then the PNGs, into docs/assets/brand/.