Brand guidelines · v1.0 · 2026
Global content.
A smoother loop.
Translation management for modern software teams. This document is the single source of truth for the locoloop identity.
Two languagesOne connected loop
Four assetsPrimary, reversed, mono, icon
Four coloursBlue, green, navy, light
01 — Brand idea
Two languages. One connected loop.
The mark is a continuous translation cycle — a source language and its target, joined by arrows that never stop turning. That cycle is the product, and it is the one idea every application of this identity should carry.
Content→
Translation→
Review→
Localization→
Publishing↻
New content
02 — Logo
Four official assets
The system is deliberately small. Everything else is an application of these four, never a new variant. Always place them from the approved master artwork — never redraw.
01 · Primary, full colourdefault
Icon, wordmark and the “Translation Management” descriptor. The default everywhere colour reproduces: website, product, decks, documents.
02 · Reversedfor dark
The full-colour loop with a white wordmark, for navy and other dark surfaces. Never filter or invert the light version to fake this.
Awaiting master
locoloop-logo-mono.svg
03 · Monochromepending
Single dark colour, for print, engraving and anywhere colour is unavailable. Supply the mono master — never filter the full-colour logo to fake it.
04 · Icon onlyFavicon, app icon, avatar and small UI. A reversed icon ships alongside for dark chrome.
03 — Clear space
One X on every side
X is the height of the “A” inside the icon. Nothing enters this area — no text, images, UI, borders, other logos or decoration.
X
X
04 — Minimum size
Below 120px, switch to the icon
Never shrink the full lockup past the legibility of its descriptor. Use the icon-only asset instead.
120 px · lockup floor
16 px · icon floor
140–180 pxsite header
16 / 32 pxfavicon
512 pxapp icon
05 — Usage
Do, and don't
✓
On white and light neutrals
✓
On navy, reversed asset
✕
Never stretch or squash
✕
Never recolour the mark
✕
Never rotate or add shadows
Also never: apply gradients to the wordmark, change its typography, rearrange the icon and wordmark, modify the A / 文 glyphs, separate the two loops, or place the logo over a busy photograph.
06 — Colour
Blue, green, navy, light
Blue carries actions. Green marks success and completion. Navy is the voice. Everything else is quiet.
Loop Blue#2D8CFFButtons, links, focus, brand accent
Loop Green#00D19ASuccess, completion, secondary accent
Deep Navy#0F172AHeadings, wordmark, dark surfaces
Slate#64748BBody, descriptions, metadata
Off White#F8FAFCPage and section backgrounds
White#FFFFFFCards, navigation, content areas
Brand gradient — Loop Blue → Loop Green. Hero areas and selected marketing moments only. Never behind body text, and never simply because it appears in the logo.
07 — Typography
Inter, one family
Global content
H1 · Inter Bold · 48–64px
Client variants that inherit
H2 · Inter Semibold · 32–40px
Translation memory
H3 · Inter Semibold · 24–28px
Body runs 16–18px with generous line spacing, flush left and never justified. Paragraphs cap around 60 characters.
Body · Inter Regular · 16–18px
Supporting text, metadata and table captions.
Small · Inter Regular · 13–14px · Buttons · Inter Medium · 14–16px
08 — UI language
Rounded, quiet, usable
Buttons — 10px radius, white label, Inter Medium
Cards — white, 1px border, 12–16px radius, minimal shadow
Inputs — clean border, blue focus ring
Tables — minimal borders, strong column hierarchy
Avoid glassmorphism, neon, heavy shadows, cartoon illustration and gradient overuse. Brand colours are accents inside the product, never whole screens.
09 — Voice & personality
Clear, confident, technical but accessible
Say what the product does and what happens next. No corporate jargon, no aggressive selling, no exaggerated claims.
01
ConnectedLanguages, people, content and workflows work together.
02
SimpleComplex localization should feel easy to manage.
03
ReliableContent moves through the workflow correctly, every time.
04
GlobalBuilt for products operating across languages and markets.
05
ModernA contemporary experience designed for digital products.
“A custom project is a copy of your default. Cells you don't override fall back to it.”
Explain the mechanism. The reader is an engineer.
“Unlock seamless global growth with AI-powered localization.”
No unlocking, no seamless, no journeys. Nothing is powered by anything.
10 — The brand in product
Accents, not costumes
Inside the platform the brand appears in four places only: the mark in the chrome, blue on the primary action, green on completion, and navy on everything you read. Screens stay white and quiet so the content — which is someone else's words — is the loudest thing on them.
locoloop
/Kestrel iOS
Export
Translate
Key
de-DE
fr-FR
State
wallet.topup.cta
Konto aufladen
Recharger
approved
pay.confirm.body
Wir belasten…
Nous débiterons…
AI draft
errors.retry
Erneut versuchen
—
missing
Chrome carries the markIcon at 22px in the header, wordmark beside it. Never the full descriptor lockup inside the app.
Blue means actOne primary button per view. Everything else is a bordered secondary.
Green means doneApproved, synced, complete. Never decorative, never a button.
Slate carries stateMissing, inherited and metadata stay neutral so real signals stand out.
11 — Applications
Where the logo goes
Same three assets, placed consistently. Nothing here is a new variant.
Start free
Website headerLockup at 140–180px wide, left aligned, blue CTA on the right.
Dark surfacesFooters, login panels and slide covers use the reversed asset.
Favicon & app iconIcon only. Reversed variant for dark browser chrome.
Maya Okonkwo
Localization Lead · locoloop
locoloop.dev
Email signatureIcon at 34px, name in navy, one blue link. No tagline.
Global content.
A smoother loop.
Presentation coverThe one place the gradient runs full bleed, with reversed lockup.
Login screenLockup above the form, centred, at the 120px floor or larger.
12 — Design principles
Five tests for any new screen
SimpleFewer elements, each one meaningful.
ConnectedShow the relationship between languages, people and content.
ClearHierarchy readable at a glance, always.
ProfessionalCredible in an enterprise procurement review.
GlobalInternational without flags or country clichés.
13 — Core message
Global content.
A smoother loop.
Translation management for modern software teams. Manage translations, collaborate with your team, and deliver content worldwide.
Start translating this week
Free while you are evaluating — no card, and no call in the way.