WebWorks brand guide.
The official WebWorks brand assets. Use the files here — please don't reconstruct, recolor, or rebuild the mark from scratch.
Which file do I use?
Common needs paired with the right file. If you're not sure, the SVG is always safe.
| Need | File | |
|---|---|---|
| Headline logo on a website, slide, or email | Horizontal logo, 1600px PNG | Download |
| Browser tab favicon | favicon.ico (multi-res) | Download |
| iOS apple-touch-icon | 180×180 PNG | Download |
| Android home-screen / PWA (192px) | 192×192 PNG | Download |
| App icon / PWA (512px) | 512×512 PNG | Download |
| Social profile picture | 400×400 PNG avatar | Download |
| Discord / large profile picture | 1024×1024 PNG avatar | Download |
| Anywhere SVG is supported (sharpest at any size) | Horizontal logo SVG | Download |
Logo variants.
Four variants cover the common cases: light backgrounds, dark backgrounds, mark only, and a square avatar layout.
Icons & favicons.
Square mark, transparent background, in the sizes web and OS platforms expect. Use 192/512 for PWAs, 180 for the
iOS apple-touch-icon, and the multi-res favicon.ico for browser tabs.
SVG sources.
For designers who want to edit, place, or rescale the marks themselves. Open these in Inkscape, Figma, or any vector editor.
Usage guidelines.
Always scale uniformly so the aspect ratio is preserved.
Use the gradient mark and near-black wordmark as designed. The dark-mode SVG is the only sanctioned recolor.
Leave at least ~8% of the logo height (roughly the height of a single tile in the mark) on every side, free of other type or graphics.
The horizontal logo reads well down to about 120 px wide on screen. Below that, prefer the mark alone.
Use the light-background logo on white or pale fills; switch to the dark variant on dark fills. Avoid placing the gradient mark on patterned or photographic backgrounds without a solid plate behind it.
Color & type.
The marks are the only sanctioned form of the color and wordmark — but here's the spec for editorial uses (headlines, decks, pull-quotes) that pull from the same palette.
- Light · #fcd4a3
- Mid · #f7941e
- Dark · #d47708
#0c0a09 Near-black; the only wordmark color.webworks
Fraunces — web set in regular (wght 400), works set in bold (wght 700).
Fraunces for headings.
DM Sans for everything else, from body copy to buttons.
Text is near-black or warm grey. Orange is for buttons, link underlines and the mark, never for text. JetBrains Mono is for code and file names only.
Press & partner inquiries.
Need something not listed here — an alternate format, a high-resolution variant, or written permission for a specific use? Reach out and we'll get you what you need.
Contact WebWorks