dev-test.uk
brand guidelines

01Brand at a glance

dev-test.uk is the software development arm of the Colloquize group. It builds web and mobile applications, APIs, integrations and internal tools with testing and security built into every release.

Positioning line

Working headline used on the website. Confirm before adopting it as a formal strapline.

Personality

Audience

Engineering leaders, product owners and technical founders who need a delivery partner they can inspect, not just trust.

02The logo

The mark is a terminal prompt: a chevron (the command) and an underscore cursor (the next input), in a dark rounded square that doubles as an app icon. Sky blue is the command; green is the passing state. The wordmark is set in JetBrains Mono Bold, with ".uk" picked out in sky blue.

Primary logo (full colour)

The mark, for avatars, favicons and small spaces

Use the full logo wherever there is room. Use the mark alone only where the brand name is already clear from context or space is tight (below about 100 px wide).

03Light and dark variants

Always choose the version made for the background it sits on. Never place a light-background logo on a dark background, or the reverse.

Full colour

Light backgrounds · dev-test-logo-light

Dark backgrounds · dev-test-logo-dark

Mark · dev-test-mark-light

Mark · dev-test-mark-dark

One colour

For single-colour print, embossing, stamps, fax-style documents and anywhere colour cannot be reproduced.

dev-test-logo-mono-dark

dev-test-logo-mono-white

On tinted and photographic backgrounds

• Tinted light backgrounds (e.g. #F1F5F9): use the light-background logo.
• Photography: place the logo over a calm, uncluttered area. Use the dark-background logo on dark images and the light-background logo on light images. If in doubt, put the logo on a solid panel.
• Brand-colour backgrounds: use the one-colour white logo.

04Clear space and minimum size

Keep an exclusion zone around the logo equal to half the height of the mark (½ x, where x is the mark height) on every side. No text, image edges or other logos may enter it.

Clear space = ½ mark height, all sides

Minimum sizes

	Screen	Print
Full logo	height 24 px	height 8 mm
Mark	16 px	5 mm

Below these sizes use the mark, not the full logo; below the mark minimum, do not use the logo.

05Logo misuse

Do not alter the logo. Always use the supplied files.

Don't stretch or squash

Don't rotate or skew

Don't recolour

Don't add shadows or effects

Don't use the wrong version for the background

Don't stack or duplicate elements

• Do not redraw, re-typeset or substitute fonts in the wordmark.
• Do not add outlines, gradients (other than the built-in ones), glows or 3D effects.
• Do not place the logo inside another shape or badge, or combine it with other marks, unless the guidelines allow it.
• Do not change the proportions between the mark and the wordmark.

06Colour

Colour values are given as HEX and RGB for screens. CMYK figures are straight conversions for guidance only; for print, proof against a Pantone or press-calibrated reference before committing.

Accessible colour pairings

Contrast ratios calculated to WCAG 2.x (logos themselves are exempt from these text requirements, but the guidance applies to all live text). Body text needs at least 4.5:1; large text (24 px, or 19 px bold) and UI graphics need at least 3:1.

07Typography

Both are free and open-source families, so they can be used on the web, in apps and in print without licence fees.

Hierarchy

The wordmark is supplied as outlined artwork: never retype it. Where a brand typeface is not installed, fall back to Segoe UI, Helvetica or Arial.

08Voice and tone

We write the way we want to be spoken to: clearly, respectfully and with a point.

Avoid

Buzzwords ("rockstar", "10x") · unsupported speed or quality claims · vague estimates.

09Applications

Website header

Services    About    Contact

Services    About    Contact

Buttons

Avatar, favicon and app icon

Light avatar

Dark avatar

Favicon at 32 and 16 px

Use the mark for square and circular avatars with the mark centred and clear space kept. Use the supplied SVG as the favicon.

10Digital implementation

Drop these variables into your stylesheet so the palette stays consistent.

:root {
  --terminal-slate: #0F172A;
  --slate-800: #1E293B;
  --command-sky: #0EA5E9;
  --deep-sky: #0369A1;
  --bright-sky: #38BDF8;
  --pass-green: #34D399;
  --slate-grey: #64748B;
  --cloud: #F1F5F9;
  --white: #FFFFFF;
}

body {
  font-family: Inter, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  color: var(--ink, #16202E);
}

11Logo files

All files are in the logos/ folder beside this document. Prefer SVG; use PNG (1024 px tall, transparent) where SVG is not supported.

Questions or approvals: contact Colloquize.