We make the sexiest visuals.
Drawn by hand.
Timed by the frame.
Every orbimotion film starts as a pencil test: a loose drawing that finds the idea, then a clean-up pass that makes it shine. The brand keeps both on show. The rough says a person thought about this. The clean line says it was finished properly.
The hand shows
Rough blue lines, red margin notes and circled words stay visible. They are not decoration. They show the thinking.
Timed on twos
Anything hand-drawn moves at 12 frames a second, like real drawn animation. The product itself moves smoothly.
Two materials
By day, a sheet of animation paper. By night, the same sheet on a lightbox. Never pure black, never pure white.
The logo
An orb in two passes: a loose Col-Erase blue rough, then the ink clean-up. It is a real line test, frozen on frame 12.
1 · The rough
Col-Erase blue, drawn twice around. Always one of the three master drawings.
2 · The clean-up
A solid orb in graphite. Paper-white on dark. It sits slightly off-centre, as drawn.
3 · The i-dots
Both dots in orbimotion are tiny orbs with a rough ring: the mark, hidden in the name.
4 · The wordmark
Schibsted Grotesk ExtraBold, −5% tracking, all lowercase. Supplied as outlines. Never retype it.
Logo versions
Clear space and minimum size
Clear space = R, the radius of the ink orb, on every side. Nothing else goes inside the dashed line: no text, no edges, no other logos.
| Version | Screen | |
|---|---|---|
| Primary | 140 px wide | 35 mm wide |
| Stacked | 96 px wide | 24 mm wide |
| Mark | 48 px | 12 mm |
| Small mark | 20–47 px | 6–11 mm |
| Favicon | 16 px | — |
Below 48 px the rough line gets too thin to read, so it becomes one clean ring. At 16 px only the orb survives.
Logo don’ts
The rough is on purpose. Please don’t tidy it, recolour it or redraw it.
App icon and favicon
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#F3EFE6"
media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#141310"
media="(prefers-color-scheme: dark)">
favicon.svg switches to the dark version by itself when the browser is in dark mode. The app icon uses a simpler, single rough loop so it stays crisp at 60 px.
Colour: Paper
The light theme. Animation bond paper, graphite, a Col-Erase blue pencil and a red one.
About 70 paper · 18 graphite · 7 blue · 5 redContrast ratios are against Paper. Col-Erase blue is for lines and drawings only: it is too light for text, so blue text uses Col-Erase deep.
Colour: Lightbox
The dark theme. The same sheet on a lightbox in a dark room: warm, never pure black.
About 70 desk · 18 paper-white · 7 glow blue · 5 warm redContrast ratios are against Desk. Cards on the lightbox get a soft warm glow: 0 0 60px rgba(255, 236, 196, 0.16).
Typography: three hands
rough idea.
Every film starts as a pencil test. We keep the rough visible so you can see the thinking, then clean it up until it shines.
Headlines 800, −4 to −5% tracking · body 400, 17/27| Display | 96–120 / 0.98 · 800 · −5% |
| Heading 1 | 56–72 / 1.0 · 800 · −4.5% |
| Heading 2 | 36–48 / 1.05 · 800 · −3% |
| Heading 3 | 20–28 / 1.2 · 700 |
| Body | 17–21 / 1.5 · 400 |
| Note | 17–22 / 1.15 · Shantell 500 |
| Label | 11–13 · DM Mono · caps |
All three are free Google Fonts under the SIL Open Font License. The files are in 01-fonts.
Hand-drawn elements
The pencil work is what makes this brand feel human. Use it with restraint: one idea per mark.
Pencil circle
Circles the one word that matters. Once per screen, red pencil, drawn on then boiling.
Construction guides
Baseline and x-height lines in soft blue, on hero headlines only. They run edge to edge.
Margin notes
The animator talking. Short, lower case, red, tilted. Three per screen at most, never essential information.
Arrows
Point from a note to its subject. Drawn loose, never a UI icon.
Peg bar
The three holes of animation paper. Tops cards, reels and sheets like this one.
Rough icons
Blue rough outline plus one ink detail. They jitter gently in place.
Motion: two speeds
The hand moves on twos. The product moves on ones. That contrast is the whole motion system.
The logo, roughs, notes, arrows, the pencil circle, rough icons
Product UI, cards, page transitions, scrolling, the reel’s final pass
UI easing: cubic-bezier(.3, .7, .2, 1) at 240 or 400 ms.
Three drawings of the same line, looped at about 8 fps (360 ms). Pencil lines are never still.
Lines draw in 12 steps over one second, never a smooth wipe.
The ink orb lands in 3 frames: overshoot, settle, hold.
After the sting, the rough keeps boiling. Files: 02-logos/svg/animated and 05-motion/gif.
| on twos | 83 ms a drawing |
| line boil | 360 ms loop |
| UI fast / base | 240 / 400 ms |
| reduced motion | hold drawing 1 |
Light and dark
One sheet of paper, two lighting conditions. The switch in the nav is a lightbox, not a moon icon.
sexiest visuals.
sexiest visuals.
Turning it on flickers twice like a real tube (about 160 ms), then the glow warms up over 600 ms.
Turning it off is instant, like pulling the plug, with a soft daylight fade.
First visit follows the visitor’s system setting. After that, remember their choice.
RulesNever pure black or pure white. Blue lines get lighter on dark, red gets warmer. Cards glow; pages don’t.
tokens.css, motion.css and theme-switch.js in the kit do all of this.
Voice
We talk like the animator on the call, not the agency deck: confident, specific, a little cheeky.
Show us your rough idea.
Every launch started as a pencil test.
Drawn by hand, timed to the frame.
We’ll bring the clean lines, the timing and the sound.
rough · clean-up · frame · timing · launch · hand · sheet · cut
Unlock end-to-end motion solutions.
We create stunning, world-class content.
Elevate your brand with cutting-edge visuals.
Storytelling that drives engagement.
solutions · leverage · cutting-edge · world-class · synergy · elevate
Headlines are short, sentence case, and end with a full stop.
Notes are lower case, one thought, in the animator’s voice:
Labels borrow from the exposure sheet: SC 03 · F 096 · 01:12.
Numbers are real or shown as placeholders like [+00%]. Never invent a client result.
The tagline “We make the sexiest visuals.” is said once per page and meant.
In use
The kit
Everything on these pages, ready to use.
Schibsted Grotesk, Shantell Sans and DM Mono: static TTF for design apps, variable TTF, and WOFF plus fonts.css for the web. Licences included.
Every logo as SVG and transparent PNG: primary, construction, stacked, wordmark, mark and small mark, in light, dark, graphite and white. Animated SVGs in /animated.
App icons (light, dark, full-bleed), favicon.svg, favicon.ico, PNG favicons and the Apple touch icon.
tokens.css, tokens.json and palette.json, plus swatch files for Adobe (.ase) and GIMP, Inkscape and Krita (.gpl).
motion.css (boil, draw-on, pop, flicker), theme-switch.js and GIF versions of the logo sting and boil.
Pencil circle, arrows, peg bar and rough icons as SVG, in light and dark.
Avatars, link share images, LinkedIn and X banners, in light and dark.
This page as HTML (upload it as is) and as a PDF.