From naming to system: how we built the Melement identity

Building your own brand is the hardest brief in the business. You're the client and the agency simultaneously, which means every decision feels loaded — because there's no one else to blame if it doesn't land.

Here's the full story of how Melement went from a name in a notebook to a living identity system.

The name

"Melement" isn't a real word. It's a portmanteau: me (the personal, the craft, the hands-on founder) + element (the building block, the missing piece, the thing that connects a system together).

The tagline writes itself: The missing element to your growth.

We wanted a name that:

• Was short enough to be a URL without abbreviation
• Sounded like a real word (phonetically clean)
• Had a conceptual hook that could flex across studios and services
• Didn't limit us to one discipline

"Melement" hit all four. The domain .ink sealed it — short, creative, and distinctive against the sea of .com and .io agencies.

The palette

The colour system started with one constraint: it needed to work across dark-dominant (the studio's actual aesthetic) and light-dominant (for readable long-form content like this blog).

The palette is deliberately warm. Cool greys and blues are everywhere in tech — we chose warm neutrals (that off-white paper, the earthy muted tone) to feel human and tactile, like a studio that still values craft you can touch.

Typography

Three typefaces, each with a precise role:

Pathway Extreme (variable, serif-adjacent) — Our display face. Tight letter-spacing, variable weight from 300 to 800, and optical sizing that keeps it sharp from 12px labels to 160px hero headlines. The italic variant adds the editorial flair we wanted.

Hanken Grotesk (variable, sans-serif) — Body copy. Clean, geometric, excellent readability at paragraph sizes. Similar in spirit to Inter but with slightly more personality in the curves.

JetBrains Mono (monospace) — Labels, meta information, tags, and code. The mono typeface signals "technical precision" and creates a clear typographic hierarchy: if it's monospaced, it's metadata.

The cursor

The custom cursor is a miniature of our logomark — a stylised pointer arrow in coral. It's a small detail but it does a lot of work:

• Reinforces brand on every interaction
• Signals "this is a crafted experience, not a template"
• Scales up on hover (1.9x) to create a satisfying interaction
• Disappears on touch devices (no false affordances)

The magnetic button effect (elements that subtly attract toward the cursor) came from the same thinking: every interaction should feel intentional and physical.

The logomark

The logo is simply that cursor — the pointer arrow. It's a reference to the digital craft at the core of what we do. We're literally pointing the way.

It works at 17px (nav) and at 13rem (footer wordmark). Single-colour, clean geometry, no gradients or complex paths.

The design system as product

From day one, we built the identity as a system, not a set of one-off decisions:

• CSS custom properties hold every colour, font, and easing curve
• Component patterns (buttons, tags, section labels, cards) are reusable across pages
• Spacing rhythm — 5vw horizontal gutters, clamp()-based vertical padding
• Motion vocabulary — One easing curve (cubic-bezier(.16,1,.3,1)) used everywhere

The system is documented in a design-system.md reference file. Every new page or feature is built by consulting that file first, not by eyeballing what "looks right."

What we'd do differently

If we started again:

• We'd have chosen a fourth typeface for pull quotes (Pathway Extreme italic works but a dedicated display serif would have more character)
• We'd have designed the dark/light switch into the system from the start, rather than engineering it per-section
• We'd have built the blog at the same time as the homepage, not after (content strategy should shape the design system, not the other way around)

The result

The identity is live at melement.ink. Every page, every animation, every micro-interaction is an expression of the same system. No stock themes, no third-party UI kits, no compromises.

That's the standard we hold for clients, and the first person we had to prove it to was ourselves.