Visual Identity

Category: identity Sources: approved Trace website, production logo assets, Trace voice guide, docs/superpowers/specs/2026-08-16-website-redesign-architecture-design.md, DESIGN.md Confidence: high Last Updated: 2026-08-17

Core brand assets here (logo, Trace Yellow, wordmark) are foundational identity, used across the business, not just the website. Where this article describes the website specifically (layout width, current photographic treatment, site navigation), it describes the old website — the redesign has its own direction, see Website Redesign Direction (notably: no photography on the redesigned site except Glen's founder-credibility photo, given an AI-glitch treatment — see Imagery below).

Brand personality

Trace is technical, controlled and quietly confident. The visual system should feel more like a well-run technical desk than a consultancy template: clear working space, precise type, direct language and one deliberate signal colour.

The identity is premium because it is edited. It does not rely on spectacle, visual clutter or luxury conventions.

Colour palette

Colour Hex Role
Trace Yellow #DEF25C the single brand signal, reserved for core/focus CTA buttons only on the redesign
Trace Ink #1C1917 the redesign's primary dark ground, site-wide (page and nav background) — a ground now, not a text colour, on the redesign
Trace Ink 2 #191516 the redesign's second dark ground — footer background and ground-to-ground step variation
Quiet Surface #242220 soft panel step above Ink/Ink-2 — grouped sections, inputs, supporting blocks
Deep Surface #2E2A27 stronger panel step above Ink/Ink-2, for separation Quiet Surface is too subtle to carry
Body Grey #9C9892 reading copy on any dark ground — 6.1:1 against Ink, 6.3:1 against Ink 2
Muted Grey #8F8B85 metadata, footer text, small numerals — 5.2:1 against Ink, 5.3:1 against Ink 2
Hairline #3A3632 rare structural boundaries
Strong Hairline #57524C controls that need a clearer edge
Link Blue #075FC5 unmistakable text links
Link Hover #004B9E link interaction
Error #A63D32 validation and failure
Completed #666700 brand-aligned completion state

Trace Yellow is an accent, not a base. Use it for a key CTA, selected or current state, short-answer callout or one consequence. Do not make every button yellow and do not substitute green tints for it.

The old website remains light-only, with dark regions as deliberate local compositions rather than an automatic dark theme. The redesign is dark-theme site-wide.

Typography

The typeface is Inter, self-hosted as a single variable WOFF2 and preloaded.

Fallback stack:

"Inter", Arial, sans-serif

One family carries display, headings, body, metadata and controls. Hierarchy comes from scale, weight, measure and spacing.

  • 400 for body
  • 500 for navigation and quiet emphasis
  • 600 for headings and controls
  • 700 or 800 only for compact marks or exceptional emphasis

Page statements are large but laptop-friendly. Section headings step down clearly. Body copy stays at 16px with approximately 1.65 line height and a readable measure. The earlier Plus Jakarta Sans files are retired and unreferenced.

Marks

The website navigation uses the typeset Trace Technical wordmark: Trace is heavier and Technical is regular. The primary asset version is the same wordmark converted to outlines. The signature lockup adds the Guiding Progress mark at the end, where it reads as direction or the resolved next step.

In the redesign, the nav mark currently defaults to the Guiding Progress icon alone, without the wordmark, across every page — pending Glen's final call during design.

The Guiding Progress mark is Trace's only standalone symbol. The favicon is its white-on-black compact tile. Do not reintroduce the retired TR monogram or mix several mark treatments inside one layout.

Rules:

  • preserve proportions
  • maintain generous clear space
  • use black, white or Trace Yellow only
  • no shadows, gradients, glow, bevels or animation
  • do not use a mark as a large decorative texture
  • keep the trailing mark on the right in the signature lockup

Layout

The website uses:

  • a 1180px primary content width
  • a 1320px wide editorial and navigation width
  • 24px desktop gutters
  • 16px mobile gutters
  • generous, varied section spacing
  • asymmetric columns where priority differs
  • one-column mobile flow

Use whitespace and tonal grouping before borders. Use contained 12 to 16px corners only when content is genuinely a component or reading surface.

Imagery

Glen's greyscale portrait is the old website's only photographic exception. The redesign carries one equivalent: Glen's founder-credibility photo, given an AI-glitch treatment. No other photography or gradient imagery appears on the redesigned site.

Do not introduce:

  • stock photography
  • image heroes
  • product collages
  • decorative technical diagrams
  • AI-generated PPE product imagery
  • abstract gradient backgrounds

Technical examples, product decisions, public records and direct copy are the visual material.

Motion

Motion is broadly permitted across the redesign, not restricted to purely functional cues:

  • the homepage carries a signature hero loop: a nervous-system-style graphic that continuously morphs between a brain and a motorcycle jacket, reacting to hover
  • every clickable element gets a tactile, reactive micro-interaction, visibly responding when clicked

Reduced-motion preferences remove non-essential transitions while keeping all content visible.

Digital accessibility

  • WCAG AA contrast
  • 44px touch targets
  • visible keyboard focus
  • no information conveyed by colour alone
  • no horizontal content scrolling on mobile
  • type and padding reduce at 700px and again at 420px

Social preview

The default website social preview uses the dark hero ground, the white Guiding Progress mark, Trace Yellow and the line:

Fewer wrong turns. Stronger products.

Files:

  • brand-wiki/assets/logo-assets/web/trace-social-preview.svg
  • brand-wiki/assets/logo-assets/web/trace-social-preview.png

Related Articles