The Coder mark, exactly as built.

Logo

Full colour on dark is the default. The one-colour marks are for places that only allow one ink.

Clear spaceKeep a quarter of the tile's width empty on every side. Nothing else enters the dashed box.

643216

Smallest size16 pixels. Below that, use nothing. The kit has ready PNGs at 16, 32, 48 and 64.

Wordmark

The tile next to CODER in Archivo ExtraBold. Use it where the name has to be read, the mark alone everywhere else.

SVGPNGSVG on ink

SVGPNGSVG on white

Avatars

Telegram crops every avatar to a circle, so this is how people meet the brand. One avatar, one coloured badge per product. Pick a row to see it large.

• CoderMain accountSVGPNG 1024
• SignalsLaunch and momentum alertsSVGPNG 1024
• Buy botBuy posts in token groupsSVGPNG 1024
• PaymentsSubscriptions and invoicesSVGPNG 1024
• X alertsTracked accounts on XSVGPNG 1024
• Support chatAnswers from the docsSVGPNG 1024
• AirdropHolder distributionsSVGPNG 1024
• LivestreamsLive token streamsSVGPNG 1024

The tile fills 58% of a 1024 canvas. The badge sits on its lower right corner.

Colour

Ink carries the page, amber carries the brand, green means it is live. The widths below are roughly how much of each to use. Click a colour to copy it.

Type

Two families. Archivo speaks, JetBrains Mono counts. Both are free on Google Fonts.

Banners

Ready headers for X and for link previews, plus the Telegram chat background.

Telegram chat background: SVGPNG 1440 × 2560

Rules

The mark works because it never changes. Four ways to use it, four ways people break it.

Do this

Never this

And never draw the logo or its lettering with an image generator. It gets the glyph wrong every time. Use the files.

Badge maker

A new product or channel gets the standard avatar with its own badge. Type up to four characters, pick a colour, download the SVG. The letters are saved as outlines, so the file needs no font.

The mark, as source

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g transform="translate(0 0) scale(1.0)">
<defs><linearGradient id="mg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFAB55"/><stop offset="1" stop-color="#FF8A1F"/></linearGradient></defs>
<rect x="6" y="6" width="88" height="88" rx="22" fill="url(#mg)"/>
<g fill="none" stroke="#fff" stroke-width="8.5" stroke-linecap="round" stroke-linejoin="round">
<polyline points="36,35 21,50 36,65"/><polyline points="64,35 79,50 64,65"/><line x1="55.5" y1="29" x2="44.5" y2="71"/>
</g></g></svg>