Trevarn — Brand Guidelines

Logo Mark

Mark system, variants, and usage specifications

The Trevarn mark is a single continuous line tracing three ascending stone forms. This page documents the mark system: primary and secondary variants, background treatments, small-size simplifications, and the favicon. For the story behind the mark, see Mark Origins.

January 2026  ·  Final specification
TREVARN
Primary mark: Continuous outline, 2% disorder, Aour Glaz

Primary Mark — Continuous Outline

The Default

The primary Trevarn mark is a continuous outline with 2% disorder. This is the default for all standard usage: website, documents, presentations, product UI, signage.

It works at any size above 24px. It's clean, professional, and versatile. The continuous line emphasises the unified nature of the three stones — one system, one path, one mark.

TREVARN
Aour Glaz — Primary
TREVARN
Aour Balan
TREVARN
Lin Violet

Primary Mark Usage

Use the continuous outline as the default mark. It works on white, dark, and coloured backgrounds. Minimum size: 24px mark height. Preferred colour: Aour Glaz on light backgrounds, white on dark backgrounds.

Primary Outline 2% Disorder

Secondary Mark — Continuous Hatched

For Editorial & Expressive Contexts

For editorial and expressive contexts — hero sections, blog headers, brand campaigns, print collateral — the hatched variant adds visual texture and weight. Each stone gets a unique hatch angle (43°, 48°, 41°) that reinforces its individual lean.

When to use: When you want more visual presence than the outline provides. When the context is expressive rather than functional. When the mark will be displayed at 48px or larger.

When NOT to use: Below 48px (hatching becomes noise). In UI contexts where simplicity matters. Mixed with the outline version in the same layout — pick one.

TREVARN
Aour Glaz — Hatched
TREVARN
Aour Balan — Hatched
TREVARN
Lin Violet — Hatched

Secondary Mark Usage

Use the hatched variant for editorial/expressive contexts where you want more visual weight and texture. Each stone has a unique hatch angle (43°/48°/41°) and density that reinforces its individual character. Minimum size: 48px mark height.

Secondary Hatched Editorial

Background Treatments

The primary mark adapts to all standard backgrounds.

TREVARN
On White — default
TREVARN
On Ink — dark mode
TREVARN
On Aour Glaz
TREVARN
On Sand — warm/print
TREVARN DIFENN
Difenn product lockup — stacked
TREVARN DIFENN
Difenn product lockup — dark

Simplified Mark — Small Sizes

For favicon, app icon, and contexts under 32px where the connecting baseline would be illegible. Same distinct stone proportions, now as three separate closed polygons.

Outline Glaz
Outline Balan
On Ink
Hatched Glaz
Hatched Ink
On Glaz

Favicon — Solid Fill

At browser-tab scale (16–32px), even the simplified outline polygons lose legibility. The favicon uses solid-filled stones to maintain recognisability at the smallest sizes.

64px — preview
32px — bookmark
16px — browser tab
32px — dark mode

Why Solid Fill?

The primary mark uses a 1.8px stroke at viewBox scale — rendered at 16px wide in a browser tab, that stroke becomes sub-pixel and vanishes. Solid fill preserves the three-stone silhouette at any size, trading the drawn quality for pure recognition.

The transition from outline to solid mirrors how the mark system degrades gracefully: continuous outline → discrete outline → discrete solid. Each step simplifies while retaining the essential three-stone rhythm.

Favicon SVG Reference

<svg viewBox="0 0 64 38" xmlns="http://www.w3.org/2000/svg">
  <polygon points="2.3,34.1 4.8,16.2 11.2,13.5 13.8,34.5" fill="#4A6FA5"/>
  <polygon points="17.5,33.5 23.2,4.8 28.8,6.5 34.5,34.2" fill="#4A6FA5"/>
  <polygon points="37.2,33.8 43.8,2.8 56.2,0.5 62.5,34.8" fill="#4A6FA5"/>
</svg>

File: favicon.svg — referenced via <link rel="icon" type="image/svg+xml" href="/favicon.svg"> on all pages.

Locked Specifications

Element Specification Notes
Primary mark Continuous outline, 2% disorder Default for all usage. Minimum 24px height.
Secondary mark Continuous hatched, 2% disorder Editorial/expressive contexts. Minimum 48px height.
Simplified mark Discrete outline polygons Contexts under 32px where continuous line is illegible.
Favicon mark Discrete solid-filled polygons Browser tab, bookmarks, PWA icon. Under 32px, solid fill only.
Disorder level 2% Vertices shifted 0.5-1.0 units from mathematical positions.
Stroke width 1.8px (outline), 1.2px (hatched outline) At standard viewBox 0 0 320 38.
Hatch angles Stone 1: 43°, Stone 2: 48°, Stone 3: 41° Unique angle per stone reinforces individual character.
Primary colour Aour Glaz #4A6FA5 On light backgrounds. White on dark backgrounds.

Use Outline When:

  • Default for all contexts
  • Website headers and navigation
  • Documents and presentations
  • Product UI and interfaces
  • Any size from 24px up

Use Hatched When:

  • Hero sections and landing pages
  • Blog headers and editorial
  • Brand campaigns and advertising
  • Print collateral where texture helps
  • 48px or larger only

SVG Reference — Primary Mark

<polyline points="2.3,34.1 4.8,16.2 11.2,13.5 13.8,34.5 17.5,33.5 23.2,4.8 28.8,6.5 34.5,34.2 37.2,33.8 43.8,2.8 56.2,0.5 62.5,34.8"
  stroke="#4A6FA5" stroke-width="1.8" fill="none"
  stroke-linecap="round" stroke-linejoin="round"/>

ViewBox: 0 0 64 36 (mark only)  |  0 0 320 38 (with wordmark)