code-anything.com
Log inStart free

Brand

The code-anything.com logo.

The Aperture: two brackets closed around the anything held between the code. Every version of it, in vector and PNG, with the geometry, the colour and the few rules that keep it recognisable.

Primary

Start here

Three lockups cover almost every use. Each one is shown on the ground it is made for — that, and nothing else, is how you tell whether you have the right file.

Primary lockupThe default. Mark plus wordmark, on white or any pale ground.SVGPNG 1024
Primary lockup, reversedThe same lockup with a white wordmark, for near-black and dark UI.SVGPNG 1024
Lockup on the gradientWhite logo baked onto an Aurora field. For slides, social cards and anywhere a flat panel would look thin.SVGPNG 1024

The mark carries its own gradient tile, so it never needs a reversed version — on light and on dark it is the same file. Only the wordmark changes colour, and only the one-colour variants drop the gradient altogether.

Variations

Every version of the logo

Pick by ground, not by taste. A full-colour mark wants a plain light or dark panel; a one-colour asset is what goes on the gradient, on a photograph, or through a single-colour print.

The markThe Aperture on its own. Avatars, favicons, anywhere the name is already nearby.SVGPNG 64PNG 128PNG 256PNG 512PNG 1024
The mark, on darkThe same file as the card before it. The tile is its own background, so there is no reversed mark to get wrong — and each PNG is rasterised at its target size, never downscaled from the big one.SVG
Mark, one colourSolid ink tile with the glyph knocked out to the paper. For single-colour print, stamps and embossing.SVGPNG 512
Glyph, whiteBrackets and dot with no tile, on the gradient or on a photograph dark enough to hold it.SVGPNG 512
Glyph, inkThe same shape in one colour for light and mid grounds: watermarks, stationery, line art.SVGPNG 512
App iconHome screens, app listings, PWA manifests. Square, rounded by the platform.PNG 192PNG 512
App icon, maskableFull-bleed, with the padding Android needs before it crops the icon to its own shape.PNG 512
Stacked lockupMark above the wordmark, for square holes: badges, avatars with a name, event slides.SVGPNG 1024
Stacked lockup, reversedThe same square arrangement with a white wordmark, for dark grounds.SVGPNG 1024
Lockup, one colour whiteHorizontal, no gradient at all. This is the one for the brand gradient, for photos and for dark merchandise.SVGPNG 1024
Lockup, one colour inkHorizontal in a single ink, for one-colour printing and for pale grounds that the gradient would fight.SVGPNG 1024
code-anything.com
WordmarkThe name alone. Only where the mark already appears close by — a footer, a sponsor row under a logo.SVGPNG 1024
code-anything.com
Wordmark, reversedSame rule, white, for dark grounds.SVGPNG 1024

Construction

What the mark is built on

A 64-unit rounded square with a corner radius of 14, a 1.5-wide hairline inset 0.75 inside its edge, two brackets stroked 5 units with round caps, and a dot of radius 4.6 dead centre. Nothing in it is arbitrary, which is why redrawing it by eye never quite lands.

6429rx 14stroke 5r 4.6

Minimum size

Below this the brackets close up and the dot disappears into them. Both figures are shown here at their real pixel size — this is not an illustration of the limit, it is the limit.

24 px mark204 px lockup

Clear space

Keep a margin of at least half the mark’s width on every side. Nothing goes inside the hatched area — not type, not a rule, not another logo.

Colour

The Aurora gradient

Three stops on a 135-degree diagonal, and one ink. The same three run through the mark, the buttons and the gradient headings across this site.

Amber#F2793DThe first stop — top left of the tile.
Magenta#C64BA6The midpoint, and the site's solid accent.
Blue#3E6FE0The last stop — bottom right of the tile.
Ink#1D1B16The wordmark on light, and every one-colour asset.
css
/* the Aurora gradient — 135 degrees, three stops */
background: linear-gradient(135deg, #F2793D 0%, #C64BA6 50%, #3E6FE0 100%);

Typeface

Bricolage Grotesque

The wordmark is Bricolage Grotesque Bold, a free open-source grotesk; body text on this site is Inter. The downloadable lockups carry the wordmark as outlines, so they open correctly on a machine with neither font installed. Every hex above is plain selectable text — click one and it selects whole.

Usage

Please don’t

Four things that turn a recognisable mark into an approximate one. Each card shows the mistake, not a description of it.

Don’t: Recolour it. The gradient is the mark; a flat brand colour is a different logo.
Don’t: Rotate, flip or skew it. The brackets read as brackets only when they are level.
Don’t: Add a shadow, a glow or an outline. The tile already has its own edge.
Don’t: Drop it straight onto a busy picture. Put it on a plain panel first, or use the one-colour white version.
  • Reach for the vector first. One SVG covers every size; a PNG is for the places that still cannot take one.
  • Take the variant that matches the BACKGROUND, not the one that matches your slide theme. That is the whole reason each preview above stands on a different ground.
  • Scale it proportionally. The mark is a square and the lockup has one fixed aspect ratio; anything else is a stretch.
  • You may use the logo to refer to code-anything.com — in an article, a talk, a comparison, an integration listing. Not as your own product’s mark.
  • Do not rebuild the brackets, the dot or the wordmark by hand. Every file you need is on this page; if one is missing, ask.

The rest

Two last things

Writing the name

Write code-anything.com: all lower case, hyphenated, with the domain. Not Code Anything, not CodeAnything, not code anything. In running prose after the first mention, code-anything on its own is fine. The mark is called the Aperture and the gradient is called Aurora.

Another format

Need an EPS, a one-colour version in a specific spot colour, a particular pixel size, or the mark cleared for a printed piece? Email hello@code-anything.com and say what it is for — we will cut the file rather than have you redraw it.