Foundations

Logo

The mark composes three geometric elements: a circle for intelligence and complexity, a square for stability, and a diagonal line for positioning.

The mark

Symbol · ink on light

<svg viewBox="0 0 56 56" fill="none" stroke="currentColor" stroke-width="1.5">
  <circle cx="28" cy="28" r="24"/>
  <rect x="12" y="12" width="32" height="32"/>
  <line x1="12" y1="44" x2="44" y2="12"/>
</svg>

On dark

Symbol · white on noir

<svg ... style="color:#fff">…</svg>  <!-- on a dark surface -->

Construction

Three elements, one weight. The circle (r 24) signals intelligence and complexity; the square (32×32) grounds it in stability; the diagonal line running corner to corner expresses positioning. All three share the 1.5 stroke and meet on a 56-unit grid.

Wordmark

.ds-wordmark lockup

Diametral

<span class="ds-wordmark">
  <svg class="ds-wordmark__mark" viewBox="0 0 56 56" fill="none" stroke="currentColor" stroke-width="1.5">…</svg>
  <span class="ds-wordmark__name ds-title">Diametral</span>
</span>

The lockup classes — .ds-wordmark, .ds-wordmark__mark, .ds-wordmark__name — ship in css/components/app-bar.css.

Clear space & misuse

Keep clear space around the mark equal to the circle's radius. Never round it, add shadow or gradient, or rotate it. Use ink on light surfaces and white on dark — no other colourways.