Home/Brand
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
locoloop — Translation Management
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.

locoloop — Translation Management
01 · Primary, full colourdefault Icon, wordmark and the “Translation Management” descriptor. The default everywhere colour reproduces: website, product, decks, documents.
locoloop on dark
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.
locoloop icon locoloop icon reversed
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#2D8CFF

Buttons, links, focus, brand accent

Loop Green#00D19A

Success, completion, secondary accent

Deep Navy#0F172A

Headings, wordmark, dark surfaces

Slate#64748B

Body, descriptions, metadata

Off White#F8FAFC

Page and section backgrounds

White#FFFFFF

Cards, 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
Connected

Languages, people, content and workflows work together.

02
Simple

Complex localization should feel easy to manage.

03
Reliable

Content moves through the workflow correctly, every time.

04
Global

Built for products operating across languages and markets.

05
Modern

A 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 mark

Icon at 22px in the header, wordmark beside it. Never the full descriptor lockup inside the app.

Blue means act

One primary button per view. Everything else is a bordered secondary.

Green means done

Approved, synced, complete. Never decorative, never a button.

Slate carries state

Missing, 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.
512 32 16
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

Simple

Fewer elements, each one meaningful.

Connected

Show the relationship between languages, people and content.

Clear

Hierarchy readable at a glance, always.

Professional

Credible in an enterprise procurement review.

Global

International 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.

Start freeLog inBook a demo