Logo (mark)

A circle and a golden-ratio triangle

The Unless mark — every coordinate derived from a single radius R and the golden ratio φ. Pre-rendered to static SVGs and served as cacheable images. Two variants — one for light surfaces, one for dark.

Light · #629BF8 · for dark backgrounds

Dark · #3B82F6 · for light backgrounds

Geometry — everything in {R, φ}.
ViewBox is 2R × 2R, canvas centre = (R, R).

  · Outer disc: radius R, filled brand colour.
  · Inner disc: concentric, radius R / φ ≈ 0.618 R (golden ratio),
                filled #FFFFFF.
  · Triangle  — closed filled isoceles, apex points UP:
        apex      = (R, R)
        leftBase  = (R − R·tan θ, 2R)
        rightBase = (R + R·tan θ, 2R)
        with θ = 90° / φ² ≈ 34.38°.
        The base sits on the bottom edge of the viewBox, outside
        the outer disc on both flanks. The outer-disc clip-path
        trims it away — no visible flat base inside the disc.

Two-tone fill — via clip-paths, matches the historical
unless-icon-*.svg files:
  · Layer 1: outer disc        (brand colour)
  · Layer 2: filled triangle   (outer-tri, darker shade)
                                 clip-path: outer disc
  · Layer 3: inner disc        (#FFFFFF)
  · Layer 4: filled triangle   (inner-tri, lighter shade)
                                 clip-path: inner disc

Net result: darker shade on the brand ring, lighter shade on
the white core.

Palettes:
  Light variant  brand #629BF8  outer-tri #4B66BF  inner-tri #80B7FB
  Dark  variant  brand #3B82F6  outer-tri #1E40AF  inner-tri #60A5FA
  Inner disc     #FFFFFF

Variant by background, not by mood

The variant prop names the MARK's tonal family. Pick the variant that contrasts with the background it sits on:

• variant="light" - peak-blue mark, for DARK backgrounds (navy bands, dark heroes, the dashboard's navy strip).
• variant="dark" - brand-blue mark, for LIGHT backgrounds (paper, paper-cool surfaces).