Visual Identity

Category: identity Sources: approved Trace website, production logo assets, Trace voice guide Confidence: high Last Updated: 2026-08-08

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

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 website is light-only. Dark regions are deliberate local compositions, not an automatic dark theme.

Typography

The approved typeface is Plus Jakarta Sans.

Use the self-hosted font files for web and:

"Plus Jakarta Sans", Arial, sans-serif

as the fallback stack.

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.

Marks

The website uses the compact TR monogram. It appears small and precise in navigation and as the favicon.

The wider Guiding Progress mark and full lockups remain available for broader brand applications. Do not mix several mark systems 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

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 website's only current photographic exception.

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 restrained and functional:

• small button compression
• slight card lift where the whole surface is interactive
• navigation state change after the home hero
• no looping or decorative animation

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, TR monogram, 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

• Brand Assets
• Website
• Voice Guide
• Positioning