Ontop FiBuild financial freedom
Brand mark · specification

The Rising Coin.

The Ontop Fi brand mark represents a coin rising up to symbolize financial growth towards financial freedom, which is the ultimate goal for everyone in life. The gold field is financial knowledge — everything needed to stay on top of your financial life. The open channel is the financial path — your journey to reach your financial goals. The diamond shape is your financial worth — growing in value based on smart financial planning. The core at the center is you — which is what the platform is built around.

One clear picture of all your finances Pro-active guidance on your financial goals Personalized planning for your financial freedom

What the mark means

Knowledge, path, worth and you — a coin rising toward financial independence.

1
The Letter OThe brand — Ontop Fi

The square coin shape that reads as an O to represent the brand.

2
The fieldThe golden value — financial knowledge

Everything you need to stay on top of your financial life, minted as the golden ground of the coin.

3
The cutThe open channel — the financial path

Open where you stand today and rising to where you want to be: your journey to reach your financial goals.

4
The apertureThe diamond shape — your financial worth

Your financial worth, cut like a gem: growing in value on the strength of smart financial planning.

5
The centerThe core middle — you

You, at the exact middle of the coin: Ontop Fi is built around you and personalized to your needs.

6
The surfaceThe icon field — trust

Solid deep blue carries the gold at the locked app-icon scale, the mark at 60% of the tile.

7
ConstructionThree parts, one silhouette

Body, keyline, core — nothing else. The entire mark is a single even-odd shape, a single 2-unit stroke and a single rotated square: no masks, no groups, no effects, no live text.

Anatomy & geometry

64 · canvas 13.46 13.46 13.46 13.46 core 9.5 9.5 9 · channel 60 · field 36.4 · aperture
Construction specall values in grid units

1Grid

Canvas64 × 64
Center — every part32, 32

2Body

Buildone path, even-odd
Field60 × 60 at (2, 2)
Cornersr14

3Aperture — the diamond

Formsquare rotated 45° · radius 18.2
Span36.4 · vertices 13.8 / 50.2
Vertex cushionsr4
Margin to field edge13.46 · all four sides

4Channel

Width9 · walls x 27.5 / 36.5
Fillet at diamondr2 · tangents y 46.53
Exitopen through body edge, y 62

5Keyline — rim & liner

Buildone stroke · two subpaths
Weight2 · constant
Rimcenterline 1 → 63 · r15
Linercut-out offset +1 · walls 26.5 / 37.5
Liner turnscushions r5 · fillet r1
Capsboth end at y 63 · rim open 27.5 → 36.5

6Core

Size9.5 × 9.5 · r2
Placementrotated 45° about (32, 32)
9 9 9 9 clear space = channel width, on all four sides

Clear space & minimum size

Keep a band of 9 units — exactly the channel width — empty around the mark. No type, borders, photography or other logos inside it. Minimum size is 16 px on screen and 6 mm in print; below 24 px use the mono build (body + core only) so the 2-unit rim cannot fill in and close the channel.

Colorways

Four sanctioned surfaces. The metal changes; the story doesn't.

On deep blueSolid deep blue — the lead surface.
On sky paperThe mark, at home on light.
Mono inkOne color, whole story.
Mono paperReversed, unbroken.

In the world

From product header to pocket to profile: where the mark lives.

Ontop FiBuild financial freedom
Search all finances…
Product header — solid blue bar, tight lockup.
Ontop FiBuild financial freedom
Lockup — mark, name, promise.
Ontop Fi — Pulse✕
Ontop Fi@ontopfi · X
Ontop FiFinancial service · Facebook
Ontop Fi@ontopfi · YouTube
Favicon and social avatars — crops cleanly into tabs, circles and squares.
9:41
Mail
Photos
Maps
Wallet
Camera
Settings
Clock
Notes
Music
Weather
17Calendar
Stocks
FaceTime
Health
Podcasts
Fitness
Home screen — app icon is memorable and stands out from the crowd

Scale, space & care

One silhouette, every size — favicon to façade.

16
24
32
48
96
160

Always

  • Build the mark from its three parts only: body, keyline, core.
  • Keep core, diamond, rim and field on the center point 32, 32 with equal margins on all four sides.
  • Keep the keyline as one stroked path at a constant 2 units.
  • In mono, drop the keyline and set the core in the body colour.

Never

  • Add masks, groups, effects or extra shapes to the construction.
  • Close the keyline across the channel exit — the road leaves clean.
  • Shift the core or the diamond off the center axes.
  • Rotate, stretch, skew or sharpen the coin, the diamond or the core.

Source

Three production files, each the same three-part construction. Copy, ship, done.

ontopfi-mark.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="128" height="128">
  <defs>
    <linearGradient id="coin" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#F0C75E"/>
      <stop offset=".55" stop-color="#D9962E"/>
      <stop offset="1" stop-color="#B87F1E"/>
    </linearGradient>
    <linearGradient id="key" gradientUnits="userSpaceOnUse"
                    x1="32" y1="0" x2="32" y2="64">
      <stop offset="0" stop-color="#FFF6C9"/>
      <stop offset=".5" stop-color="#F0C75E"/>
      <stop offset="1" stop-color="#FFDF8E"/>
    </linearGradient>
  </defs>
  <!-- Body -->
  <path fill-rule="evenodd" fill="url(#coin)"
        d="M16 2H50A14 14 0 0 1 62 16V48A14 14 0 0 1 50 62H16
           A14 14 0 0 1 2 48V16A14 14 0 0 1 16 2Z
           M27.5 62V46.53A2 2 0 0 0 26.91 45.11
           L16.63 34.83A4 4 0 0 1 16.63 29.17
           L29.17 16.63A4 4 0 0 1 34.83 16.63
           L47.37 29.17A4 4 0 0 1 47.37 34.83
           L37.09 45.11A2 2 0 0 0 36.5 46.53V62Z"/>
  <!-- Keyline -->
  <path fill="none" stroke="url(#key)" stroke-width="2"
        d="M27.5 63L16 63A15 15 0 0 1 1 48L1 16
           A15 15 0 0 1 16 1L48 1A15 15 0 0 1 63 16
           L63 48A15 15 0 0 1 48 63L36.5 63
           M26.5 63V46.53A1 1 0 0 0 26.21 45.82
           L15.92 35.54A5 5 0 0 1 15.92 28.46
           L28.46 15.92A5 5 0 0 1 35.54 15.92
           L48.08 28.46A5 5 0 0 1 48.08 35.54
           L37.79 45.82A1 1 0 0 0 37.5 46.53V63"/>
  <!-- Core -->
  <rect x="27.25" y="27.25" width="9.5" height="9.5" rx="2"
        transform="rotate(45 32 32)" fill="url(#key)"/>
</svg>
ontopfi-mark-app-icon.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="128" height="128">
  <defs>…coin + key gradients (as in ontopfi-mark.svg)…</defs>
  <rect width="64" height="64" rx="16" fill="#12395E"/>
  <g transform="translate(12.8 12.8) scale(0.6)">
    <path fill-rule="evenodd" fill="url(#coin)"
          d="M16 2H50A14 14 0 0 1 62 16V48A14 14 0 0 1 50 62H16
             A14 14 0 0 1 2 48V16A14 14 0 0 1 16 2Z
             M27.5 62V46.53A2 2 0 0 0 26.91 45.11 … V62Z"/>
    <path fill="none" stroke="url(#key)" stroke-width="2"
          d="M27.5 63L16 63A15 15 0 0 1 1 48 … L36.5 63
             M26.5 63V46.53A1 1 0 0 0 26.21 45.82 … V63"/>
    <rect x="27.25" y="27.25" width="9.5" height="9.5" rx="2"
          transform="rotate(45 32 32)" fill="url(#key)"/>
  </g>
</svg>
ontopfi-mark-mono-ink.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="128" height="128">
  <path fill-rule="evenodd" fill="#14304A"
        d="M16 2H50A14 14 0 0 1 62 16V48A14 14 0 0 1 50 62H16
           A14 14 0 0 1 2 48V16A14 14 0 0 1 16 2Z
           M27.5 62V46.53A2 2 0 0 0 26.91 45.11
           L16.63 34.83A4 4 0 0 1 16.63 29.17
           L29.17 16.63A4 4 0 0 1 34.83 16.63
           L47.37 29.17A4 4 0 0 1 47.37 34.83
           L37.09 45.11A2 2 0 0 0 36.5 46.53V62Z"/>
  <rect x="27.25" y="27.25" width="9.5" height="9.5" rx="2"
        transform="rotate(45 32 32)" fill="#14304A"/>
</svg>
Gold field #F0C75E → #B87F1E Keyline & core gold #FFF6C9 → #F0C75E → #FFDF8E Deep blue #12395E Mono ink #14304A Mono paper #F2F8FC