Realmdrop Software

Brand kit

Our logo, colours, type, and the rules that hold them together — plus “Built by Realmdrop” badges for the sites we build.

Download the kit Get a badge

ZIP · 3.3 MB · logos, favicons, social image, badges (SVG + PNG)

01 · Logo

The portal ring.

Our mark is the portal from the homepage hero: teal water ringed with marigold flowers. It comes in full colour and in two single-colour versions.

Photo ring

The primary mark. Footers, favicons, app icons, social images.

PNG · 512 WebP · 960

White ring

One colour, for dark backgrounds. Used in the site header.

SVG

Ink ring

One colour, for light backgrounds, print, and stamps.

SVG

Realmdrop Software

Always use the thick band — about 11% of the ring's diameter, matching the homepage portal.
Leave clear space around the ring of at least half its band width.
Don't recolour, outline, stretch, or add effects to the ring.
Pair it with the wordmark in Josefin Sans Light, uppercase, widely tracked.

02 · Colour

Teal is structure. Marigold is action.

Teal carries the dark anchor bands. Marigold is the only action colour, in shades tuned for contrast. Click any swatch to copy its hex.

Teal

Marigold

Neutrals

Ink on marigoldDo · 7.6:1

White on marigoldDon't · 2.2:1

03 · Type

Two typefaces.

Display · Josefin Sans

Beautiful software. Built without limits.

Headlines, eyebrows, buttons, and the wordmark. Wordmark: Light 300, uppercase, 0.18em tracking. Eyebrows: bold, uppercase, 0.22em tracking.

Body · Inter

We build software with the promise of true economies of scale: you pay for what you need, when you need it — nothing more.

Body copy, captions, forms, and UI. 15–17px for reading, 1.6–1.7 line height.

04 · Style

The rules that hold it together.

White sections

Every section background is pure white. Teal is for dark anchor bands only — no beige or tonal bands.

Square corners

Everything is square — cards, panels, buttons, inputs, menus, and image frames. The only round shapes are circles: the ring, dots, avatars, and pill tags.

One action colour

Marigold is the only action colour. Text on marigold is always ink — never white (2.2:1 contrast).

The Portal Effect

Project heroes show the same photo upside down through a portal ring, under the colour overlay.

The Portal Effect · on the Plantaerium hero photo

05 · Badges

Built by Realmdrop.

A credit for the footer of sites we build. Pick a style, add the client, and copy the snippet — the badge is served from this site, and the ref tells us which sites send visitors.

Client ref (optional)Added to the link as ?ref=. Snippets update as you type.

Pill

The everyday footer credit. Teal is the recommended default.

Teal Any background · 199×44

SVG PNG

<a href="https://software.realmdrop.com/" target="_blank" rel="nofollow noopener" title="Built by Realmdrop Software">
  <img src="https://software.realmdrop.com/badges/pill-teal.svg" alt="Built by Realmdrop Software" width="199" height="44" loading="lazy">
</a>

White Any background · 199×44

SVG PNG

<a href="https://software.realmdrop.com/" target="_blank" rel="nofollow noopener" title="Built by Realmdrop Software">
  <img src="https://software.realmdrop.com/badges/pill-white.svg" alt="Built by Realmdrop Software" width="199" height="44" loading="lazy">
</a>

Outline · ink Light backgrounds only · 199×44

SVG PNG

<a href="https://software.realmdrop.com/" target="_blank" rel="nofollow noopener" title="Built by Realmdrop Software">
  <img src="https://software.realmdrop.com/badges/pill-outline-ink.svg" alt="Built by Realmdrop Software" width="199" height="44" loading="lazy">
</a>

Outline · white Dark or photo backgrounds only · 199×44

SVG PNG

<a href="https://software.realmdrop.com/" target="_blank" rel="nofollow noopener" title="Built by Realmdrop Software">
  <img src="https://software.realmdrop.com/badges/pill-outline-white.svg" alt="Built by Realmdrop Software" width="199" height="44" loading="lazy">
</a>

Portal chip

The featured option: the portal ring around a mini wordmark. Use at 140px or larger.

Portal Any background · 160×160

SVG PNG

<a href="https://software.realmdrop.com/" target="_blank" rel="nofollow noopener" title="Built by Realmdrop Software">
  <img src="https://software.realmdrop.com/badges/chip-portal.svg" alt="Built by Realmdrop Software" width="160" height="160" loading="lazy">
</a>

Mark

The ring on its own, for tight spots (24–40px).

Photo ring Any background · 32×32

SVG PNG

<a href="https://software.realmdrop.com/" target="_blank" rel="nofollow noopener" title="Built by Realmdrop Software">
  <img src="https://software.realmdrop.com/badges/mark-photo.svg" alt="Built by Realmdrop Software" width="32" height="32" loading="lazy">
</a>

Photo ring · tile Any background · 32×32

SVG PNG

<a href="https://software.realmdrop.com/" target="_blank" rel="nofollow noopener" title="Built by Realmdrop Software">
  <img src="https://software.realmdrop.com/badges/mark-teal.svg" alt="Built by Realmdrop Software" width="32" height="32" loading="lazy">
</a>

Ink Light backgrounds only · 32×32

SVG PNG

<a href="https://software.realmdrop.com/" target="_blank" rel="nofollow noopener" title="Built by Realmdrop Software">
  <img src="https://software.realmdrop.com/badges/mark-ink.svg" alt="Built by Realmdrop Software" width="32" height="32" loading="lazy">
</a>

White Dark or photo backgrounds only · 32×32

SVG PNG

<a href="https://software.realmdrop.com/" target="_blank" rel="nofollow noopener" title="Built by Realmdrop Software">
  <img src="https://software.realmdrop.com/badges/mark-white.svg" alt="Built by Realmdrop Software" width="32" height="32" loading="lazy">
</a>

All badge text is converted to outlines, so badges look identical everywhere with no font loading.
Use the SVG where you can. The PNGs (1× and 2×, transparent) are for site builders that don't accept SVG.
Links use rel="nofollow" so widely placed badges aren't treated as a link scheme by search engines.

Need something that isn't here?

Ask us for source files or a custom lockup.

Get in touch