// source of truth
pilla brand kit
the working brand system for anyone making on-brand work for pilla. logo, wordmark, colours, type, the dot canvas, and the voice we write in — plus every file in /public/brand/ as a one-click download. hex codes are click-to-copy.
writing about pilla? boilerplate, founder bio, and a press email live on /press. building something that uses our mark? read the fine print at the bottom of this page.
// logo · the three concentric rings
pilla-icon.svg
Default · use everywhere
pilla-icon-mono-white.svg
For dark surfaces only
pilla-icon-mono-black.svg
One-ink jobs · stamps · embroidery
never redraw the rings — always derive from the canonical svg
keep viewBox="0 0 1024 1024", radii 380 / 260 / 140, stroke 80. resize via the svg’s width/height only. visual examples below.
canonical radii, on white.
mono white on ink (dark surface).
redraw with different radii or stroke.
place on a gradient or coloured background.
// wordmark · icon + “pilla” lockup
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 & do/don’t →// colours · five 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.
// type · Inter for everything · Nunito only for the wordmark
Hero title
Create operational workflows for teams to run on any device
Section headline
Stop repeating yourself, make your staff work more independently
Sub-headline
Pilla connects apps to the people on the ground.
Body
Your staff ask the same questions every week and you’re not always there to answer them. Upload your policies, training materials, and standard operating procedures so staff can find them themselves.
Button label
Book a demo
Caption / spec readout
125,000+ nodes carried out per year
Weights in use
400 body · 500 labels · 600 headings · 700 reserved for stat emphasis. Tracking-tight on all headings; default elsewhere.
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 · dot canvas · section chrome
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 →// voice & tone · operator-to-operator
Person
Second person — “you” and “your team”. First-person plural only in customer testimonials.
Case
Sentence case everywhere. Title Case reserved for established feature names (Knowledge Hub, Work Management, Poppi). Never ALL CAPS — not anywhere.
Numbers
Always specific. “Up to 10 minutes”, “every 6 months”, “100+ MCP integrations”. Vague superlatives don’t appear.
Formula
Outcome first, mechanism second. Lead with the result, follow with how it works.
FAQs
Answer then explain. Start with “Yes.” or “No.” then give the mechanism. Never “Absolutely!”
Forbidden
No emoji. No exclamation marks in UI labels. No “revolutionize”, “unleash”, “blazingly fast”. No metaphors except “nodes” and “workflows” — which aren’t metaphors, they’re the product.
// rules · the non-negotiables
1 · Never redraw the rings
Always derive from the canonical SVG. Keep
viewBox, radii, andstrokeWidthexact; resize viawidth/heightonly.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 · 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 · Inter is the brand font
Inter for all sans use. Nunito for the wordmark only. Geist Mono for timestamps and data readouts inside product mockups.
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.
// downloads · everything in /public/brand/
tokens.css
CSS variables — the five colours and the wordmark spec, ready to drop into any project
pilla-icon.svg
Canonical logo · transparent · use everywhere
pilla-icon-on-white-tile.svg
Rounded white tile baked in
pilla-icon-256.png
PNG · 256×256 · transparent
pilla-icon-512.png
PNG · 512×512 · transparent
pilla-icon-mono-black.svg
Single-ink black · stamps, embroidery
pilla-icon-mono-green.svg
Single-ink mint · one-colour print
pilla-icon-mono-white.svg
Single-ink white · on dark surfaces
pilla-wordmark.svg
Primary lockup (icon + “pilla”)
pilla-wordmark-mono-black.svg
Wordmark mono black
pilla-wordmark-mono-white.svg
Wordmark mono white
pilla-wordmark-mono-green.svg
Wordmark mono mint
// the 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.