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.
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.
The live mark, on any page
<script src="https://openvibe.design/shared/ov-mark.js"></script>
<span class="ov-mark" data-size="64"></span>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.
On any ground
The gap is cut out of the ring, not painted, so whatever is behind the mark shows through it.
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.
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.
#4f7cffthe ring#8b5cf6the V#22c55ethe tick#ef4444the "!"#ff3b5cthe record light#94a3b8the crossUse 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
<script src="https://openvibe.design/shared/ov-mark.js" async></script>
<span class="ov-mark" data-size="48"></span>
<span class="ov-mark" data-size="34" data-wide></span>
<span class="ov-mark" data-size="20" data-state="busy"></span>
<!-- data-state busy, ok, error, no, notify, live, sleep
data-progress 0.4, with style="--ovm-p:.4"
data-tone ink or white: one colour
data-wide the box hugs the mark
OVMark.intro(el) plays the intro again -->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 underThe 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
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.