Pilla brand kit

The brand system for anyone making on-brand work for Pilla. Logo, wordmark, colours, type, and the dot canvas — each section has its own downloads and click-to-copy hex codes.

Writing about Pilla? Boilerplate, founder bio, and a press email live on the press page. Building something that uses our mark? Read the fine print at the bottom.

The wordmark

Icon plus the “pilla” lockup. Used where there’s room to say the name.

pilla

Specification

  • Face: Nunito 600 (semibold)
  • Case: lowercase, always
  • Tracking: -0.035em
  • Gap to icon: 0.28× icon size
  • Colour: #283343 (Ink)

Use

The wordmark introduces the brand where there’s room to say its name — page headers, hero lockups, business cards, sign-offs. For tight spaces (favicon, app icon, small chips) use the icon alone.

Full spec and do/don’t →

Downloads

pilla-wordmark.svg

Primary lockup (icon + “pilla”)

download

pilla-wordmark-mono-black.svg

Wordmark mono black

download

pilla-wordmark-mono-white.svg

Wordmark mono white

download

pilla-wordmark-mono-green.svg

Wordmark mono mint

download

Colours

Five colours total. Click any swatch to copy the hex.

Mint / Peach / Pink

Reserved for the logo. Never as text colour, never as button fill, never as background. The brand expresses warmth through imagery and copy, not through tinted chrome.

Ink

Single working colour. Body text, buttons, icons, links, focus rings — everything that isn’t the logo.

Typography

Inter for everything. Nunito for the wordmark only. The scale below is what the homepage uses — match it exactly on every marketing page.

Hero title (h1)

Create operational workflows for teams to run on any device

text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl

Section headline (h2)

Run workflows for any kind of team.

text-3xl sm:text-4xl font-semibold tracking-tight text-balance text-gray-900

Sub-headline (h3)

You are in control of how people work.

text-xl font-semibold text-gray-900 sm:text-2xl

Stat value

300k+ steps

text-2xl sm:text-3xl font-semibold tracking-tight text-gray-900

Body

Your team will carry out your requirements on the device they already carry.

text-base text-foreground

Muted description

across different locations

text-base text-gray-600

Button label

Try the canvas

text-lg font-medium

Weights in use

400 body · 500 buttons · 600 headings and stat values. 700 is reserved and not currently used. Tracking-tight on all headings and stat values; default elsewhere.

Colour pairings

Headings and stat values text-gray-900. Body text-foreground. Muted descriptions text-gray-600. Don’t use text-muted-foreground on marketing pages — it’s too pale.

Loading

Inter via next/font/google in src/app/layout.tsx. Nunito loaded only inside the /brand route group via src/app/brand/layout.tsx.

Backgrounds

The dot canvas is the only chrome element. Everything else is white.

The canvas, made literal.

Slate-300 dots on a 135° diagonal. Two stacked layers (dense 18px + sparse 40px) with opposing fade masks give a real density transition from top-left to bottom-right. Used as full-bleed section chrome on the marketing site — reads as the React Flow canvas the product is built around.

Anatomy, spec, do/don’t →

Brand rules

The non-negotiables.

  1. 1 · Never redraw the rings

    Always derive from the canonical SVG. Keep viewBox, radii, and strokeWidth exact; resize via width/height only.

  2. 2 · Backgrounds are white

    No gradients, no patterns, no glassmorphism, no blurred logo. Warmth comes from imagery and copy, not from chrome. The dot canvas is a defined chrome element — not a free pass to add backgrounds elsewhere.

  3. 3 · Never use uppercase

    No text-transform: uppercase, no all-caps strings. Sentence case for everything; lowercase for quiet small labels. The wordmark itself is lowercase.

  4. 4 · Inter is the brand font

    Inter for all sans use. Nunito for the wordmark only. Geist Mono only for actual code — hex values, CSS variables, file paths, class strings inside <code> tags. Never as eyebrows, captions, or body text.

  5. 5 · When in doubt

    White background. Logo at logo size, in a logo position. Ink for everything else. If a design feels flat, the answer is better typography or a real photo — never a gradient.

Fine print

Pilla and the three-ring logo are trademarks of Your Pilla Ltd. Use the assets here to write about us, integrate with us, or partner with us. Don’t redraw the rings, don’t change the wordmark, don’t lock our mark up with yours into a single combined logo. Questions or you need something that isn’t here — email liam@yourpilla.com.