Visual Identity
Category: identity
Sources: brand-wiki/assets/logo-assets/ (31 production logo files, 2026-08-01), brand-wiki/website/mockups/ (Trace Brand Design System — Revised/Logo Fixed, Trace Homepage Hero Section, Trace Social Posts — Full Set), brand-wiki/website/images/ (product photography assets)
Confidence: high
Last Updated: 2026-08-01
Note on sources: the files in brand-wiki/website/mockups/ are AI-generated design-system and homepage mockups used to establish tone, layout direction, and colour/type treatment. They are reference material only — do not clone or ship any mockup layout, copy, or composition directly. This article documents the identity system they point to, not the mockups themselves. Actual logo files live in brand-wiki/assets/logo-assets/ and are production-ready; see Brand Assets for the full file-by-file logo specification.
Brand Personality
Trace's visual identity reads as technical, controlled, and quietly confident — closer to a precision-engineering or safety-technology brand than a fashion or lifestyle apparel brand. It borrows the visual language of the products it protects: matte black surfaces, hard edges, high-contrast studio lighting, and one sharp accent colour used sparingly. Nothing about the identity is soft, decorative, or warm. It communicates competence and restraint rather than excitement or trend.
This tone matches Voice Guide almost exactly: direct, precise, technically confident, no hype, calm authority. The visual identity and the voice are one system — a page that reads calm and specific should also look calm and specific.
Colour Palette
| Colour | Hex | Role |
|---|---|---|
| Trace Yellow | #F1F252 |
The single accent. Used for the logo mark, highlighted phrases, CTAs, and the one "pop" moment in an otherwise monochrome layout. Never used as a large background field in product photography; reserved for brand surfaces (logo, UI accents, highlighted text, tiles). |
| Black | #0E0F10 (near-black, not pure #000000 in the design-system mockup swatch) |
The dominant surface. Primary background for social content, hero sections, and dark-mode brand applications. |
| Stone | #ECECEC |
Light neutral background — used where a page needs a light surface without going to pure white (softer than white, still high-contrast against black text). |
| White | #FFFFFF |
Secondary light surface and reversed-out text/logo colour on black. |
Why this palette works for Trace: black and yellow together read as hazard/safety-industry colour coding (workwear hi-vis, warning signage) without literally using safety-yellow-and-black striping — it's a knowing reference for an audience that lives in PPE, not a literal one. The near-black rather than pure black keeps the palette from feeling flat or purely digital; it has a slight warmth consistent with matte fabric and hardware photography.
Rule: yellow is an accent, not a base. A layout that is more than roughly 10–15% yellow has gone off-brand — the identity's power comes from yellow appearing rarely and deliberately against black or stone.
Typography
- Headers: Satoshi (Bold / Medium / Regular) — geometric, modern, confident at large sizes.
- Body: Inter (Regular / Medium) — a highly legible, neutral workhorse for body copy and UI text.
- Direction: modern, technical, and clear. Confident without shouting. Built for clarity at every size.
- Hierarchy pattern: a short, high-contrast headline, a shorter supporting subhead, then concise scannable body copy. Copy blocks stay short — this is not a brand that uses long-form paragraph hero copy.
Note: the logo wordmark itself uses Manrope ExtraBold, outlined to vector in SVG lockups so it never depends on a font being installed (see Brand Assets). Satoshi/Inter govern everything else — page headers, body copy, UI.
Imagery Style
Subject: PPE in use — close, focused, technical shots of protective equipment: motorcycle jackets, gloves, helmets, safety glasses, ear defenders, hi-vis workwear. Product and material texture is the hero, not a person wearing it in a lifestyle setting.
Treatment — three approved styles:
- Monochrome — pure black-and-white or near-black-and-white studio photography. The default, safest treatment.
- Yellow duotone — a black/yellow two-tone treatment applied to product photography, used sparingly as a highlight moment (e.g. one image in a set, not the whole set).
- Dark duotone — a deep, desaturated near-monochrome treatment with a faint colour cast, used for atmosphere shots (fabric texture, hardware close-ups) where full monochrome would feel flat.
Lighting and composition: high-contrast studio lighting, often a vignette that pulls focus to the product centre (see the actual jacket and safety-glasses photography in brand-wiki/website/images/). Backgrounds are dark and uncluttered — no environments, no locations, no props beyond the product itself.
People rule: no people unless they are wearing or using the protective gear itself — never off-gear "stock business people," headshots, office/team photography, or generic corporate imagery. If a person appears, the product is still the subject (a hand in a glove, a torso in a jacket), not a posed portrait.
What to avoid (from mockup Do/Don't guidance): full-colour/unfiltered product shots, people without their gear on, and overcrowded layouts. The "Do" examples that hold up: high-contrast/clear-detail product shots, bold two-word contrast headlines ("Clear not clever."), and consistent, restrained mark use.
Logo in Context
The Guiding Progress mark (two-triangle waypoint arrow, see Brand Assets for full specification) always keeps generous clear space and appears small and precise in layouts — bottom-corner placement on social tiles, top-left in navigation. It is never stretched, decorated, or used as a large background texture. Minimum sizes and colour rules are documented in full in Brand Assets; this article covers how the mark sits inside the wider visual system rather than repeating the file-level spec.
Applied Patterns (from mockup reference)
These patterns are what the mockups demonstrate about how the identity scales across formats — describe them for direction, do not copy mockup layouts or copy verbatim:
- Social posts: single bold statement per tile, one phrase highlighted in yellow, logo mark small in a corner, alternating black and stone/white backgrounds tile-to-tile for rhythm across a grid or carousel.
- Carousel covers: same pattern, with a numbered/labelled service name (e.g. "01 ROUTE FINDER") sitting above the headline when a carousel walks through the six services in Services order.
- Website hero direction: large, short, two-line headline with the second line in yellow, a short supporting sentence, a single primary CTA button, and a strong dark product photograph occupying roughly half the viewport. See Website Main for how this direction is applied to actual site structure.