---
title: "The OpenVibe mark · OpenVibe.Design"
canonical: "https://openvibe.design/brand"
updated: null
---
# The OpenVibe mark · OpenVibe.Design
HTML: [The OpenVibe mark · OpenVibe.Design](https://openvibe.design/brand)
The OpenVibe mark
# A ring and a round V.
The O is the network, open to everyone; the V is the vibe in it. Where they cross, the ground shows through, so the mark holds on anything: a dark theme, a light one, a photo. It moves only when it has something to say.
[Download the SVG](/brand/openvibe-mark.svg) [Use it on your site](#use)
## It moves when it means something
Every move is a word: one shape says working, thinking, done, failed and live, in colour and in form. The only thing that goes round is its own O.
Still. It moves for a moment on your first visit, and when you point at it.
- **Working** The O breaks into dots that go round while the V bobs: something is on its way.
- **Thinking** Three dots rise inside the O and the V glimmers: your agent is thinking or writing.
- **Done** The V becomes a tick and goes green. The tick only ever means done.
- **Failed** The V becomes an exclamation mark, red, and the mark shakes once.
- **Declined** The V becomes a cross, grey: cancelled, turned down, not now.
- **Something new** A dot pops up by the V: something is waiting for you.
- **Live** The O is the record light and the signal goes out from it.
- **Asleep** The O closes like an eye: offline, or down for maintenance.
- **A page on its way** Follow a link and the navbar’s ring empties, then draws itself round as the next page loads, at the pace this site usually takes in your browser. It closes and the V hops when the page is here.
## The motion, as files
For a video, a slide or a stream overlay. Each one is rendered from the same ov-mark.js the navbar runs, so what you download is how the mark really moves. On a web page, drop in the live mark instead: it moves, and it keeps still under reduced motion. Everything else on OpenVibe moves the same way: [see the motion](/motion).
**The intro** The ring draws round, the V drops in on a spring, a glint crosses and the glow comes up. About two seconds, once.
- [**WebM** 512 px · 53 KB](/brand/motion/ov-mark-intro.webm?v=eef90939fa)
- [**MP4** 1080 px · 123 KB](/brand/motion/ov-mark-intro.mp4?v=77294adfc9)
- [**GIF** 256 px, clear · 465 KB](/brand/motion/ov-mark-intro.gif?v=a1b4661d29)
- [**APNG** 256 px, clear · 1.2 MB](/brand/motion/ov-mark-intro.png?v=fdf2c07bc2)
- [**Still** 1024 px PNG · 272 KB](/brand/motion/ov-mark-poster.png?v=2b134eadbd)
**The Live intro** The same arrival, with Live’s record light in the O.
- [**WebM** 512 px · 63 KB](/brand/motion/ov-mark-live-intro.webm?v=18cf5ed30a)
- [**MP4** 1080 px · 158 KB](/brand/motion/ov-mark-live-intro.mp4?v=82d331401f)
- [**GIF** 256 px, clear · 476 KB](/brand/motion/ov-mark-live-intro.gif?v=53d68bccd3)
- [**APNG** 256 px, clear · 1.5 MB](/brand/motion/ov-mark-live-intro.png?v=0678ddc8d1)
- [**Still** 1024 px PNG · 270 KB](/brand/motion/ov-mark-live-poster.png?v=f926951be6)
### The live mark, on any page
~~~~
~~~~
## One shape at every size
At 22 px and under the strokes thicken (the heavy form), so the gap around the V stays open on a favicon or inside a button.
16 px heavy
20 px heavy
24 px pair
32 px pair
48 px pair
96 px pair
## On any ground
The gap is cut out of the ring, not painted, so whatever is behind the mark shows through it.
Night Day A picture White, on colour Ink, one colour  The app icon
## The names beside it
Names are set in Nunito, round like the mark, at 800 and 900. Everything you read is set in Inter where you have it, and otherwise in your system’s own face.
OpenVibe
OpenVibe . Live
OpenVibe . Codes
OpenVibe . Chat
OpenVibe . Games
OpenVibe . VIP
Nunito for names · 800, 900
Inter for everything you read, or your system’s face
## Colours
Two for the mark. The rest belong to its states, and come from the theme where the theme has them.
**O blue** `#4f7cff` the ring
**V violet** `#8b5cf6` the V
**Done** `#22c55e` the tick
**Failed** `#ef4444` the "!"
**Live** `#ff3b5c` the record light
**Declined** `#94a3b8` the cross
## Use it
On any page, in any app, with every move above. It is open source (MIT); the font is Nunito (SIL Open Font License).
### On a web page
~~~~
~~~~
### On a server, or in an app openvibe-shared v4.59.0 or later
~~~~
const mark = require('openvibe-shared/mark');
mark.svg({ size: 64 }); // 64 px square
mark.svg({ wide: true, size: 32 }); // 53 × 32
mark.svg({ tone: 'white' }); // one colour
mark.svg({ form: 'heavy' }); // 22 px and under
~~~~
### The names’ face
~~~~
@font-face {
font-family: 'OV Brand';
src: url(https://openvibe.design/shared/ov-brand.woff2) format('woff2');
font-weight: 700 900;
font-display: swap;
}
.name { font: 800 1em 'OV Brand', Nunito, sans-serif; }
~~~~
### Files
- [**The mark** blue and violet, square · SVG](/brand/openvibe-mark.svg)
- [**Wide** the box hugs the mark, for beside a name · SVG](/brand/openvibe-mark-wide.svg)
- [**Small** the heavy form, for 22 px and under · SVG](/brand/openvibe-mark-small.svg)
- [**Ink** one colour: it takes the text colour · SVG](/brand/openvibe-mark-ink.svg)
- [**White** for a colour or a photo · SVG](/brand/openvibe-mark-white.svg)
- [ **App icon** 512 px · PNG](/shared/icons/network-512.png?v=f5eea8942947)
- [**The brand face** Nunito, Latin, 700 to 900 · WOFF2](/shared/ov-brand.woff2)
## Keep it itself
**Do: give it room.** Leave the width of the ring’s stroke clear on every side, and more beside a name.
**Do: use one colour when two won’t do.** Ink on paper and white on colour are the only other ways to draw it.
**Don’t: recolour, rotate or outline it.** A violet O or a slanted V is someone else’s mark.
**Don’t: spin it, or tick it for anything but done.** A loading mark bobs and breathes; the tick is the only way it says yes.