locoloop Sign in Start free
Home / Brand
Identity v0.2 · placeholder

Brand guidelines

The mark and wordmark are a working placeholder. Everything else here — palette, type, voice, product patterns — is the system the website and app are built on, and is meant to outlive the logo.

01 — The mark

A quoted string, translated

An opening and a closing quote, rotated 180° from each other, holding two lines of text. The quotes are the string as it exists in your code; the ragged second line is the same string in another language.

locoloop

Primary lockup. Mark height = cap height × 1.5.

locoloop

Stacked. Flush left, never centred.

locoloop

On dark. The gradient tile stays; only the wordmark inverts.

App icon at 56 / 32 / 20 px. Below 20px, drop the text lines and keep the quote pair.

02 — Colour

Violet to cyan, on near-white

Violet carries every primary action. Cyan only ever appears as the far end of a gradient or as a variant marker. Amber is a warning, never decoration.

Violet#5B4BFF
Violet deep#4536E0
Cyan#00C2FF
Ink#0E1130
Surface#F6F7FC
Amber#FFB020
Primary gradient · CTAs and panels
Deep gradient · feature blocks, code
Ambient wash · page headers only
03 — Type

Plus Jakarta Sans, plus mono for strings

Ship every language
Display · 800 · 44–60px · −3% tracking
Client variants that inherit
Section · 800 · 34–38px on the site
Eyebrow label
Eyebrow · 700 · 12.5px · +10% tracking · violet
Body runs 15–19px on 1.6–1.65, flush left, never justified. Paragraphs cap around 56 characters so nothing spans a full-width section.
Body · 400 · 15–19px
checkout.button.confirm_payment
Keys, locale codes, paths, code · JetBrains Mono · 12–14px
04 — Voice

Say the mechanism

“A custom project is a copy of your default. Cells you don't override fall back to it.”

Explain the behaviour, not the benefit. The reader is an engineer.

“Unlock seamless global growth with AI-powered localization.”

No unlocking, no seamless, no journeys. Nothing is powered by anything.

“Deprecated. Removed from every export. History kept — restore anytime.”

State, consequence, escape hatch. In that order.

“Connect locoloop to GitHub.”

The name is lowercase everywhere, including sentence-start. Never LocoLoop, never all-caps.

05 — Product patterns

The states the grid must always show

overridden

Violet tint. Set explicitly in this variant.

inherited

Grey italic. Reads through to the default, live.

AI draft

Dot marker. Never counted as done until reviewed.

stale

Amber. The source changed after this value was set.

Em dash, muted. Empty is empty; never a zero or a placeholder.

10 / 12 / 14 / 16 / 18 / 22
Corner radius scale, px
4 · 8 · 12 · 16 · 24 · 32 · 44 · 72
Spacing scale, px
1200px
Page container, 32px gutters

One default set of strings. As many client variants as you sell.

The positioning line. Use it on the gradient panel, in the pitch deck, and nowhere else — it is not a tagline for the logo lockup.