Web
urbancodinglabs.com and every deliverable we ship.
- Plate as favicon and header lockup
- Paper background, ink type, oxide accent on links
- Mono labels for section indices
01 — The name
Urban Coding Labs, shortened to UCL.
Written in full on first mention, abbreviated after that. Sentence case, never all caps in running text, and never “Urban coding labs” — the three words are the name.
| Form | Use it for | Never |
|---|---|---|
| Urban Coding Labs | Contracts, page titles, first mention in an article, letterhead, invoice. | Do not abbreviate it in a legal line. |
| UCL | Nav, badges, chat, tables, anything with 3 characters of room. | Do not use in a headline someone may read cold. |
| UCL plate | Favicon, app icon, avatar, stamp on a deliverable. | Do not stretch, recolour or add a drop shadow. |
| Urban Coding Labs · Design · Engineering · Operations | Lockup subtitle under the wordmark. | Do not reorder the three words. |
02 — The mark
A chamfered plate with a U cut into it.
The corner is cut because it is an engineering part, not a badge. The notch of accent colour sits opposite the cut. It is drawn at 64 units and holds at 16.
Primary · on paper
Reversed · on ink
Single colour · on accent
UCL
Text mark · where the plate cannot render
Clear space and minimum sizes
Clear space on every side equals the height of the U aperture (roughly 25% of the plate). Minimum reproduction: 16 px digital, 5 mm print. Below that, use the plate alone rather than the lockup.
03 — Palette
Concrete, ink, one oxide accent.
These values are read live from the site’s own theme file — edit them in Admin › Colours & type and this page changes with it. Accent is a signal, not a decoration: one accent element per view.
Contrast is not optional: body text on paper must clear 4.5:1, large display type 3:1. Muted is the floor for anything a user has to read, not a colour for whole paragraphs of body copy.
04 — Typography
A grotesque to shout, a serif to read, a mono to label.
Three families, three jobs. Headings are set tight and large; body copy is a readable serif because an engineering studio should not be afraid of long sentences; everything structural is monospaced and uppercase.
Portals that survive their second year
ABCDEFGHIJKLM · 0123456789 · −0.035em at display sizes
We model the workflow first, then build the screens around it — with audit trails, roles and the exports people keep asking for in month six. Nothing gets built on a description of a description.
SECTION 03 — PALETTE · WCAG 2.2 AA · EST. 2016
| Level | Size | Use |
|---|---|---|
| H1 | clamp(40–82px) | One per page. Max three lines. |
| H2 | clamp(32–58px) | Section titles. |
| H3 | 21–33px | Card and step titles. |
| Body | 17px / 1.62 | Measure capped at 62–74ch. |
| Label | 11.5px mono | Indices, metadata, buttons. |
05 — Voice
Say the specific thing, once.
Written like an engineer who has done the work, not a brochure. Numbers, trade-offs and the boring parts are the differentiator — adjectives are not.
Never
“Seamless”, “cutting-edge”, “unlock your potential”, “in today’s fast-paced digital world”.
Never
A sentence that could appear on any agency site. If it could, rewrite it or delete it.
Never
Promises without a number attached. “Fast delivery” is not a claim; “4–8 weeks” is.
Always
Name what is deliberately out of scope. It reads as experience because it is experience.
Always
British-English spelling, sentence case headings, one em dash per paragraph maximum.
Always
Price bands visible. If we will not say a number, we say why on the call.
The three claims the brand rests on
- Ten years in production — since 2016, calculated on every page load, not asserted.
- Three services only: websites, software, portals. Depth over a menu of buzzwords.
- Clean exit guaranteed: the client owns the code, the accounts and the data, with a rehearsed restore.
06 — In use
Where the identity appears.
The site itself is the reference implementation. Everything below reads from the same stylesheet, so there is nothing here that is not already live.
Documents
Proposals, statements of work, invoices, handover runbooks.
- Wordmark top-left, UCL plate in the footer
- Source Serif 4 body at 11pt
- No accent colour in body text — accent only for rules and figures
Physical
Cards, equipment labels, the sign on the studio door.
- Blacked paper stock, oxide foil on the notch
- Plate reversed out at 8 mm minimum
- No gradients, no shadows, no glow
Files: the plate is defined in public/favicon.svg and drawn inline by public/js/view.js. Colours and fonts live in :root in public/css/site.css and are editable from the admin panel without touching the files.