#Assets

Artwork you can use in a game: the Gamesight marks, and a pack of 999 icons. Browse and search the icons at /assets/.

#The Gamesight marks

Two files, served from /brand/:

Use either mark wherever you need it. Both are restricted to three colours: blurple #5555f2, white, or black. Nothing else, ever. No gradients, no tints, no drop shadows, no outlines.

The monogram ships blurple and the wordmark ships white, so often you can use them as they are. For anything else there is one helper per permitted colour, and each works on either mark:

<img class="brand-blurple" src="/brand/gamesight-wordmark.svg" alt="Gamesight">
<img class="brand-white"   src="/brand/gamesight-monogram.svg" alt="Gamesight">
<img class="brand-black"   src="/brand/gamesight-monogram.svg" alt="Gamesight">

They recolour whatever the source is, so .brand-blurple on the already-blurple monogram is a harmless no-op. .brand-blurple produces an exact #5555f2 via an SVG colour matrix that nav.js puts on the page; the other two are plain CSS filters. If a page somehow has no nav.js, .brand-blurple degrades to no recolour rather than to a wrong colour.

Two things that will bite you:

• Don't recolour with mask-image. The monogram has no intrinsic size, so a CSS mask renders it clipped. Use <img> and the helpers above.
• Don't rotate, stretch, crop or re-space the marks. If you need the mark and the wordmark together, the site header already sets their relative sizing.

#The icon pack

999 line icons at /icons/, on gaming, arcade and esports themes. Plain SVG with no dependencies, free to use in any game in this repo.

<img src="/icons/999-zombie.svg" alt="" width="32" height="32">

Filenames are NNN-name.svg, numbered 001 to 999 in alphabetical order by name. Where several icons share a name they're numbered: bomb, bomb-2, bomb-3.

Find one by searching, not by browsing. /assets/ has a search box over every name, and clicking an icon copies its path.

The artwork is black, drawn for a light background. On the arcade's dark theme invert it:

.my-icon { filter: invert(1); }

Or, if you want it in your game's own colour, inline the SVG and set fill directly — they're small enough to paste into your markup.

Two notes on using them well:

• alt="" unless the icon is the only label. A decorative icon beside text that already says "Leaderboard" doesn't need announcing twice.
• They're line icons at one weight. Mixing them with a filled or a differently-weighted set looks like a mistake. Pick a lane.

See also: adding a game · achievements for achievement icons specifically