← brand kit  /  wordmark

Wordmark

Icon plus “pilla”, set in Nunito 600 lowercase. The wordmark is a sibling to the icon — never a replacement. Use the icon alone where space is tight; use the lockup where the brand needs to introduce itself.

// primary lockup

pilla

// specification

Wordmark face
Nunito, weight 600 (semibold)
Case
Lowercase. Always.
Letter-spacing
-0.035em
Wordmark colour
#283343 Ink — never coloured to match a ring
Icon : word size
1 : 1 — icon height equals wordmark cap-height + descender
Gap
0.28× the icon size, between icon and the ‘p’
Vertical alignment
Wordmark’s x-height centres on the icon centre (not cap-height)
Source
family=Nunito:wght@600 via Google Fonts

// on surfaces

pilla

On white

Default. Wordmark in Ink, icon full colour.

pilla

On Ink

Icon stays full colour; wordmark inverts to white.

pilla

Mono — one ink

For embroidery, foil, fax-grade reproduction. Both icon and word in the same colour.

pilla

Mono white

On dark surfaces — photography, ink backgrounds.

// minimum sizes

pilla32px · footer
pilla24px · site nav (min)
pilla20px · don’t go below
pilla16px · use icon only

Below 24px, the three rings start to blur into a single mass. At and below 20px, drop the wordmark and use the icon alone (mono variant works best at small sizes).

// don’t

Don't capitalise

It's "pilla", lowercase, always. The lowercase 'p' bowl matches the icon's roundness; an uppercase 'P' rises past the icon and breaks the lockup.

Don't go heavier than 600

800/900 outweighs the icon's airy 80-unit stroke. The wordmark stops composing with the mark and starts overpowering it.

Don't recolour the wordmark

The word stays in Ink (or white on dark, or the single mono ink). Never a ring colour — it competes with the icon.

Don't use Inter for the wordmark

Inter is for product UI and body copy. Setting the wordmark in Inter makes the brand look like a UI label, not a brand.

Don't stack vertically

Icon-above-word breaks the rhythm. The lockup is always horizontal, word-right.

Don't add a tagline inside the lockup

Taglines live in body copy near the lockup, never welded to it. Keeps the mark portable.

// files

// inline lockup — copy / paste

<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600&display=swap" rel="stylesheet">

<span style="display: inline-flex; align-items: center; gap: 0.28em;">
  <svg viewBox="0 0 1024 1024" width="1em" height="1em" aria-hidden="true">
    <circle cx="512" cy="512" r="380" fill="none" stroke="#3FB683" stroke-width="80"/>
    <circle cx="512" cy="512" r="260" fill="none" stroke="#EC8A35" stroke-width="80"/>
    <circle cx="512" cy="512" r="140" fill="none" stroke="#DD5E72" stroke-width="80"/>
  </svg>
  <span style="font: 600 1em/1 Nunito, sans-serif; letter-spacing: -0.035em; color: #283343;">pilla</span>
</span>