Brand identity & logo design

Names become
identities.

Original marks, typography, colour and motion, designed together. Explore the ideas behind the identities we have created, and play with the gestures that make them recognisable.

The mark, the type, the colour and the way it moves — carried through the website, product and places the brand lives.

Explore the marks ↓ See the whole identity ↓

10 original identities · Real artwork · Playable motion

yourOSThe open ring

Yours becomes yourOS.Play the identity ↗

Eclipse · Crescent

Podswap · Two weights

Selected identities

Meet the marks.

Choose a name and explore its available moments: its entrance, how it answers a hover and, where designed, a press. Each gesture comes from the idea behind the identity.

yourOS / Open ring

Hover or tap the mark to take over.

Our own product

Open ring

“Yours” becomes yourOS. An open ring takes the place of the O, with a dot at its centre. The symbol belongs inside the name.

The drawing & type: Jost Light · custom open-ring O
The visual language: Warm red and cream, the open ring and a shared motion language across the operating system and its site.

See the full project ↗

01 / On arrival: “Yours” rises in. The lowercase s sinks; the ring opens a space and a capital S rises into place.
02 / On hover: The ring opens further, the dot grows and the letters part slightly.
03 / On press: The arc unwinds, springs past its resting point and settles, like a watch being wound.

Eclipse.com / Crescent

Hover or tap the mark to take over.

Domain identity

Crescent

The C is a crescent cut from a full disc. The word carries the idea before the page says anything about it.

The drawing & type: Outlined wordmark · Hanken Grotesk · Source Serif 4
The visual language: A violet crescent, lunar phases and a sky that carries the identity through a whole day.

See the landing page ↗

01 / On arrival: The letters draw in; a full disc is bitten into the crescent C.
02 / On hover: The crescent narrows and a fine ring appears around it.
03 / On press: The moon crosses the disc for a moment of totality.

ZeroOne.com / On/Off

Hover or tap the mark to take over.

Domain identity

On/Off

A wordmark built around a switch. The second O holds a 1, making the name’s binary meaning part of its drawing.

The drawing & type: Original outlined wordmark
The visual language: Binary notation, a light-switch theme and a page that behaves like the name.

See the landing page ↗

01 / On arrival: The letterforms trace into place and the switch arrives.
02 / On hover: The switch answers the pointer before it is pressed.
03 / On press: The name switches between its on and off states.

Altitude.com / Thin Air

Hover or tap the mark to take over.

Domain identity

Thin Air

Horizontal lines thin as they rise. A point lifts above them: altitude expressed through spacing, weight and a single accent.

The drawing & type: Sora · original animated symbol
The visual language: Atmospheric layers, an altimeter and a page that climbs from ground to orbit.

See the landing page ↗

01 / On arrival: The bars draw across and the point rises through them.
02 / On hover: The lines spread vertically and the point lifts higher.
03 / On press: A wake runs through the bars and the point shoots upward.

Coral.com / Script

Hover or tap the mark to take over.

Domain identity

Script

A flowing ink line grows into the name. Small living tips make the handwriting feel like a specimen from the reef.

The drawing & type: Original script lettering
The visual language: Field notes, specimen labels and an illustrated reef drawn in the same ink.

See the landing page ↗

01 / On arrival: The script writes itself and its tips grow into view.
02 / On hover: The lettering lifts and its living tips expand.
03 / On press: The line writes itself again as the tips close and reopen.

Ascend.com / Ascender

Hover or tap the mark to take over.

Domain identity

Ascender

The d’s ascender rises out of the word and ends in a dot. One letter gives the whole identity its direction.

The drawing & type: Original outlined wordmark
The visual language: Rising lines, a vertical rhythm and a timeline of the name’s history.

See the landing page ↗

01 / On arrival: The word draws in and the dot appears above its ascender.
02 / On hover: The stem stretches and the dot climbs.
03 / On press: The dot launches and the ascender twangs as it settles.

Protocol.com / Lattice

Hover or tap the mark to take over.

Domain identity

Lattice

A route through a network draws the P. The mark turns an abstract idea about connection into a recognisable structure.

The drawing & type: Three.js lattice · Red Hat Display
The visual language: Packets, handshakes and a traceroute become the page’s visual language.

See the landing page ↗

01 / On arrival: Two layers of nodes come online and their links build a three-dimensional P. Packets begin to travel around the bowl.
02 / On hover: The lattice follows the pointer, revealing the truss between its two layers.
03 / On press: The lattice turns once as a signal flashes outward from its base node.

Podswap / The wordmark

The original artwork is a still mark.

Our own product

The wordmark

A rounded, outlined wordmark with a heavier “pod” and a lighter “swap”. The change in weight gives the two parts of the name their own roles.

The drawing & type: Original vector outlines
The visual language: One identity applied across the website, product, app icons and store listings.

See the full project ↗

Coherence / Ripple

Hover or tap the mark to take over.

Client identity

Ripple

Three wave-edged rings spread from one source, cut open into a C. Coherence is expressed as many waves keeping one rhythm, a behaviour as well as a symbol.

The drawing & type: Original ripple symbol · Bricolage Grotesque
The visual language: A cyan source on ink, and a motion language of rings spreading in step, carried through the mark, typography and page.

See the full project ↗

01 / On arrival: The rings swell into place and the source pops in; from then on, new rings keep spreading outward from it.
02 / On hover: The mark leans in and the ripples hold still.
03 / On press: A single pulse leaves the source and spreads past the outer ring.

Domainbooth / Signature

Hover or tap the mark to take over.

Client identity

Signature

A serif DB monogram inside a hand-drawn ring that stops short of closing. A full stop marks the point where the pen lifts.

The drawing & type: Custom DB monogram · Cormorant Garamond
The visual language: Ivory, midnight blue and champagne, with a serif wordmark and a signature gesture carried through the brokerage’s site.

See the full project ↗

01 / On arrival: The ring draws, D and B wipe into place, the pen-dot appears and the wordmark inks in.
02 / On hover: The ring swells, D and B part, the wordmark opens out and its full stop grows.
03 / On press: The ring takes a lap, a ripple leaves the dot and a wave travels through the letters.

Beyond the mark

An identity has to live somewhere.

The same decisions should hold together on a homepage, inside a product and at the size of an app icon. Here is the identity carried through two products we designed and built.

The yourOS identity applied to its website

yourOS · Our own product

A symbol that becomes a behaviour.

The open ring sits inside the name. Its arrival, hover and winding gesture belong to the same warm red-and-cream world as the site, the operating system and its loading language.

Wordmark · Colour · Typography · Motion

Explore yourOS ↗

The Podswap identity applied to its website

Podswap · Our own product

One identity, across the whole product.

The outlined wordmark and visual identity carried into the website, applications and store listings. A single system for the places a creator meets the product.

Mark · Visual identity · Website · App assets

Explore Podswap ↗

The system

Everything that makes it yours.

01

The mark

Primary lockup, symbol and wordmark variants. Original vector sources and exports for the sizes and backgrounds you actually use.
02

The language

A considered type hierarchy, colour palette, spacing and image direction, with examples that show how they belong together.
03

The behaviour

Entrance, hover and press states where motion serves the idea. A clear reduced-motion version and rules for when the mark stays still.
04

The handover

Guidelines, usable assets and application examples so your team can carry the identity into its next website, product or campaign.

How we work

A clear idea, worked all the way through.

Find the idea

We start with the name, audience, positioning and places the identity needs to work. The direction comes from what makes your brand specific.

Explore the drawing

We develop distinct directions, test them at small sizes and in context, then refine the strongest with you. The work above shows how different the answers can be.

Build the identity

We resolve the mark, typography, colour and motion together, apply them to the agreed touchpoints and document the decisions for your team.

Before we start

Questions about identity.

Can you design just a logo?

Yes. We agree the scope around what you need: a focused mark and its essential variants, or a wider identity with typography, colour, motion and application guidelines.

Can you evolve an existing identity?

Yes. We look at what already carries recognition, what needs to change and where the identity needs to work next. That can mean a careful refinement rather than starting again.

Do all the logos animate?

No. The gallery labels still artwork honestly. Where a mark moves, its entrance, hover and press are designed around its idea, with a reduced-motion version.

What do we receive?

The agreed vector sources, production exports, variants and guidelines. We define the application examples and usage terms in the project scope; trademark clearance can be arranged separately with your legal adviser.

Let Qubi show you around.

Names become
identities.