Skip to content
Brand Kit · v1 · 2026

The Rolocode brand, ready to use.

Every logo, colour, typeface and template that makes up our identity — preview it, copy the tokens, or download the whole pack. Type is open-source (SIL OFL); use the marks to reference or link to Rolocode.

Download brand pack .zip · 2306 KB Press & partnerships

$ includes SVG masters · PNG up to 2048 · web fonts · templates · README + license

Quick pick

Which file do I use?

App icon / avatar / favicon get → WhatsApp / social profile get → Logo on a dark slide get → Logo on a white document get → Single-colour stamp / print get → Brand colours get → Fonts get → Email signature get → Invoice / letterhead get →
Logos

The mark & lockups.

SVG is the master — infinitely scalable, works everywhere. Reach for a PNG only when a tool can’t take SVG.

↓ Just the mark (SVG)
Preview on
Rolocode lockup on a dark background Rolocode lockup on a light background
Rolocode — Mark — mono white

Mark — mono white

Single-ink, for dark or busy backgrounds.

SVG PNG 512
Rolocode — Mark — mono black

Mark — mono black

Single-ink, for light or print backgrounds.

SVG PNG 512
Rolocode — Wordmark — on dark

Wordmark — on dark

The “rolocode” wordmark in light ink.

SVG PNG 1024
Rolocode — Wordmark — on light

Wordmark — on light

The “rolocode” wordmark in dark ink.

SVG
Rolocode — Lockup horizontal — on dark

Lockup horizontal — on dark

Mark + wordmark, side by side.

SVG PNG 2048
Rolocode — Lockup horizontal — on light

Lockup horizontal — on light

Mark + wordmark, side by side.

SVG PNG 2048
Rolocode — Lockup stacked — on dark

Lockup stacked — on dark

Mark over wordmark (square-ish).

SVG PNG 1024
Rolocode — Lockup stacked — on light

Lockup stacked — on light

Mark over wordmark (square-ish).

SVG
Rolocode — Favicon

Favicon

Browser favicon (same as the icon).

SVG
Rolocode mark

Anatomy of the mark

A Penrose-style impossible triangle that doubles as a “play” arrow. Its 3D illusion depends on five tonal faces — never flatten or recolour them (use a mono version instead).

  • Lit top arm Cyan Bright
  • Lower swoosh Cyan
  • Left arm Violet
  • Inner accent Violet Bright
  • Depth / shadow Elevated
Social

Ready for your profile.

Drop-in WhatsApp (and any messenger) assets — a circular-safe avatar, a 16:9 cover and a 9:16 chat wallpaper. Built from the master logo, so they never drift from the brand.

Rolocode WhatsApp avatar, shown cropped to a circle circular preview

Profile avatar

Square master with a gradient ring and built-in padding, so the mark never clips when WhatsApp masks it to a circle. Upload as-is.

SVG PNG 1024 PNG 512
Rolocode 16:9 cover — the wordmark over a faint mark pattern

16:9 cover

The wordmark over a faint tiled-mark pattern, lit by the brand glows. For covers, status screens and shareable banners.

SVG PNG 1920×1080
Rolocode 9:16 chat wallpaper — the wordmark over a faint mark pattern

9:16 chat wallpaper

Portrait build for WhatsApp’s Chat wallpaper. Centred, so taller phones crop top & bottom without touching the name.

SVG PNG 1080×1920
Colour

A near-black canvas, lit by neon.

Brand

Accent

Surfaces

Text

Status

  • Backgrounds are dark by default. Light layouts (invoices, formal docs) are fine — dark ink on white, brand colours unchanged for accents.
  • Neon is an accent, not a fill. Large flat areas of cyan/violet read cheap — use them for the logo, edges, links, glows and small emphasis.
  • Contrast: Ink on Base passes AA. On white, use Violet #7C3AED for body text, not the brights.

All tokens

The full --color-* block, ready to paste into your stylesheet.

↓ palette.svg ↓ palette.png
Type

Three open typefaces.

All SIL OFL — free for commercial print & web. Already self-hosted on this site.

↓ typography.md
Aa Ship the future

Space Grotesk

SIL OFL

Display · headings

Google Fonts ↗
Aa Production-grade

Inter

SIL OFL

Body · UI

Google Fonts ↗
Aa const ship = 0xR0

JetBrains Mono

SIL OFL

Mono · code

Google Fonts ↗

Scale

  • Display clamp(2.85rem, 1.2rem + 7vw, 7rem)
    Ag
  • H1 clamp(2.25rem, 1.4rem + 4vw, 4.25rem)
    Ag
  • H2 clamp(1.85rem, 1.2rem + 2.6vw, 3.25rem)
    Rolocode
  • H3 clamp(1.3rem, 1.05rem + 1vw, 1.85rem)
    Rolocode
  • Lead clamp(1.05rem, 0.95rem + 0.55vw, 1.375rem)
    Rolocode
  • Body 1rem
    Rolocode

Install

Self-host with Fontsource (variable, zero external requests):

@import '@fontsource-variable/space-grotesk';
@import '@fontsource-variable/inter';
@import '@fontsource-variable/jetbrains-mono';

Wordmark: Space Grotesk 600, tracking −1.75%, lowercase. Don’t retype it — use the wordmark / lockup files (outlined to curves).

Usage

Keep it unmistakable.

Clear space

Keep padding of at least the height of the mark’s top bar (≈ the wordmark’s cap-height) around the logo.

Clear space around the lockup X X

Minimum size

Mark ≥ 24 px; horizontal lockup ≥ 120 px wide. Below that, use the mark or favicon alone.

Mark at 24px 24px
Lockup at 120px 120px

Do

  • ▹ Use the supplied SVG / PNG files as-is.
  • ▹ Pick the on-dark / on-light variant to match the background.
  • ▹ Use a mono version on busy photos or single-ink print.
  • ▹ Give it room to breathe and keep it above minimum size.

Don’t

Don’t stretch
Don’t rotate
Don’t recolour
Don’t add shadows

Also: don’t flatten the faces to one colour, place the colour logo on a low-contrast background, or rebuild the wordmark in another font.

Templates

Ready-to-send documents.

Letterhead & invoice

One template for letters, brochures and invoices. Open it and “Print → Save as PDF”.

Preview ↗ ↓ .html
Everything in one file

Got everything you need?

Grab the full kit — logos, colour, type spec, web fonts and templates.

Download brand pack .zip · 2306 KB

logos · colours · type spec · web fonts · templates · README + license

Typefaces are licensed under the SIL Open Font License. The Rolocode name and marks are © Rolocode — use them to reference or link to us; don’t modify the marks or imply partnership. Questions? [email protected]

Copied