# STWOF Logo Guidelines

Brand · Logo guidelines

The logo for **Set The World On Fire**, built on one mark: a solid tile split by two leaning slots into **interlocking hooks**. Engineered **monochrome-first**, kinetic by design, and legible from a 16px favicon to a billboard.

This is the machine-readable mirror of the published page at https://stwof.com/brand/logo. Every asset below is an absolute URL — fetch or hotlink it directly; do not construct paths by hand.

## Contents

1. [Downloads](#1-download-the-logos) — every approved file, as a URL
2. [The mark](#2-the-mark)
3. [Construction](#3-built-on-a-120-unit-grid)
4. [Clear space & size](#4-room-to-breathe-a-legible-floor)
5. [Variations & lockups](#5-one-mark-a-tight-set-of-forms)
6. [Misuse](#6-six-things-never-to-do)
7. [Approved colors](#7-monochrome-first-one-spark)
8. [Wordmark typeface](#8-set-in-poppins)
9. [In use](#9-the-mark-applied)

---

## 1. Download the logos.

Anchor: `#downloads` · TOC label: Downloads

Every approved treatment of the mark, ready to use. **SVG** scales cleanly to any size for print and web; **PNG** ships transparent at **1024px** and **256px**. Grab a single file, or the full set bundled as SVG or PNG.

### The mark — 18 static files

Every URL in this table is fetchable as-is. "Ground" is the background the variant is drawn for.

| Variant | Intent | Ground | Color | SVG | PNG 1024 | PNG 256 |
| --- | --- | --- | --- | --- | --- | --- |
| Solid White | Positive on dark | Dark | #F2F2F2 | https://stwof.com/logo-downloads/stwof-mark-solid-white.svg | https://stwof.com/logo-downloads/stwof-mark-solid-white-1024.png | https://stwof.com/logo-downloads/stwof-mark-solid-white-256.png |
| Line White | Outline on dark | Dark | #F2F2F2 | https://stwof.com/logo-downloads/stwof-mark-line-white.svg | https://stwof.com/logo-downloads/stwof-mark-line-white-1024.png | https://stwof.com/logo-downloads/stwof-mark-line-white-256.png |
| Solid Black | Reversed on light | Light | #0C0C0C | https://stwof.com/logo-downloads/stwof-mark-solid-black.svg | https://stwof.com/logo-downloads/stwof-mark-solid-black-1024.png | https://stwof.com/logo-downloads/stwof-mark-solid-black-256.png |
| Line Black | Outline on light | Light | #0C0C0C | https://stwof.com/logo-downloads/stwof-mark-line-black.svg | https://stwof.com/logo-downloads/stwof-mark-line-black-1024.png | https://stwof.com/logo-downloads/stwof-mark-line-black-256.png |
| Solid Ember | The spark on dark | Dark | #DB262C | https://stwof.com/logo-downloads/stwof-mark-solid-ember.svg | https://stwof.com/logo-downloads/stwof-mark-solid-ember-1024.png | https://stwof.com/logo-downloads/stwof-mark-solid-ember-256.png |
| Line Ember | Outline on dark | Dark | #DB262C | https://stwof.com/logo-downloads/stwof-mark-line-ember.svg | https://stwof.com/logo-downloads/stwof-mark-line-ember-1024.png | https://stwof.com/logo-downloads/stwof-mark-line-ember-256.png |

### Lockups — generated, not downloadable

**There is no static file for any lockup.** The mark + wordmark lockups are built in the browser: the SVG is assembled at click time and the PNG is canvas-rastered from it, because the wordmark has to be measured in real Poppins metrics. Do not look for a lockup URL — none exists on the server.

If you need a lockup you must either use the page's download buttons or rebuild it from the mark SVG plus Poppins (metrics in [section 5](#5-one-mark-a-tight-set-of-forms)). The generated files are named:

- `stwof-lockup-<type>-<color>.svg`
- `stwof-lockup-<type>-<color>-<px>.png` where `<px>` is 1024 or 256

with `<type>` one of `horizontal`, `stacked`, `wordmark` and `<color>` one of `white`, `black`, `ember`.

### Packs

The pack buttons zip files client-side; the ZIPs are also not static assets and have no URL. Mark packs (`stwof-logos-svg.zip`, `stwof-logos-png.zip`) bundle the files already listed above — fetch those individually instead. Lockup packs (`stwof-lockups-svg.zip`, `stwof-lockups-png.zip`) bundle the generated lockups.

### Out in the world — photography

The full-bleed photo band on the page. 8 shots of the mark applied, served as WebP.

| Shot | File | URL |
| --- | --- | --- |
| dragon | `dragon.webp` | https://stwof.com/logo-wild/dragon.webp |
| website laptop | `website-laptop.webp` | https://stwof.com/logo-wild/website-laptop.webp |
| phone | `phone.webp` | https://stwof.com/logo-wild/phone.webp |
| subway billboard | `subway-billboard.webp` | https://stwof.com/logo-wild/subway-billboard.webp |
| business cards | `business-cards.webp` | https://stwof.com/logo-wild/business-cards.webp |
| apparel cap | `apparel-cap.webp` | https://stwof.com/logo-wild/apparel-cap.webp |
| tshort | `tshort.webp` | https://stwof.com/logo-wild/tshort.webp |
| book | `book.webp` | https://stwof.com/logo-wild/book.webp |

Note the file stem `tshort.webp` is spelled that way on disk (the apparel shot). Use it verbatim.

---

## 2. The mark.

Anchor: `#mark` · TOC label: The mark

A single solid tile, split by two straight slots cut on a forward **diagonal**. Where the slots pass, the form leaves two interlocking hooks that read as a positive, near-full **S**, leaning into motion without giving up any solidity. It needs no second color and already looks like an app icon.

**Anatomy**

- **Tile** — The soft squircle container, a generous 30-unit corner radius that ties the mark to the rounded brand language.
- **Upper hook** — Formed by the slot entering from the right; reaches across the top of the field.
- **Lower hook** — Mirrors it from the left, clasping shut against the upper hook through the middle.
- **Lean** — Both slots tilt on the same forward angle, the single gesture that turns a static S into momentum.

---

## 3. Built on a 120-unit grid.

Anchor: `#construction` · TOC label: Construction

The mark is drawn on a **120-unit grid**. The tile sits on an 8-unit inset with a 30-unit corner radius; the two slots run as parallel axes on a shared forward lean. Rebuild from these guides, never redraw freehand.

Figures on the page: "Mark on the 120-unit grid" and "Tile inset · radius · slot axes".

### The grid

| Property | Value |
| --- | --- |
| Drawing space | 120 × 120 units (`viewBox="0 0 120 120"`) |
| Hairline rules | every **12** units — 11 ticks at 0, 12, 24 … 120 |
| Major rules | every **24** units |
| Tile inset | **8** units on all four sides |
| Tile box | 104 × 104 units at (8, 8) |
| Corner radius | **30** units |
| Construction circle | r = 30 at (38, 38) |
| Slot axis · upper | (40, 50) → (112, 38) |
| Slot axis · lower | (8, 82) → (80, 70) |

### Master paths

The artwork is a masked rect, not outlines: the tile is filled white in a luminance mask and the two slots are stroked black through it, so the slots are true cut-outs.

| Element | Definition |
| --- | --- |
| Tile | `M38 8 L82 8 Q112 8 112 38 L112 82 Q112 112 82 112 L38 112 Q8 112 8 82 L8 38 Q8 8 38 8 Z` |
| Upper slot | `M124 36 L40 50` |
| Lower slot | `M-4 84 L80 70` |
| Slot stroke | width **12**, `stroke-linecap="butt"`, no fill |

Both slot paths deliberately overrun the 120-unit field (x = 124 and x = −4) so the cuts run clean off the tile edge.

---

## 4. Room to breathe. A legible floor.

Anchor: `#clearspace` · TOC label: Clear space & size

Protect the mark with breathing room and never let it fall below its legible floor. Clear space on all sides equals **X**, one quarter of the mark's height. The mark holds its read down to a **16px** favicon.

| Rule | Value |
| --- | --- |
| Clear space, all four sides | **X = ¼ of the mark's height** |
| Minimum size | **16px** (favicon floor) |
| Sizes demonstrated on the page | 64 · 48 · 32 · 24 · 16 (16 = min) |

Figure captions: "X = ¼ of mark height" and "The mark holds its read down to a 16px favicon".

---

## 5. One mark, a tight set of forms.

Anchor: `#variations` · TOC label: Variations & lockups

Use the **positive** mark by default; **reversed** on ink, **on ember** on red, and the **line** cut only where a hairline treatment is needed. Pair with the wordmark in the locked configurations below.

### Color modes shown on the page

| Treatment | Cut | Ground |
| --- | --- | --- |
| Positive | Solid | Dark |
| Reversed | Solid | Light |
| On ember | Solid | Ember |
| Line | Line | Dark |
| Line · reversed | Line | Light |
| Line · on ember | Line | Ember |

### Approved variants (the downloadable set)

| Variant | Intent | Color | Ground | File stem |
| --- | --- | --- | --- | --- |
| Solid White | Positive on dark | #F2F2F2 | Dark | `stwof-mark-solid-white` |
| Line White | Outline on dark | #F2F2F2 | Dark | `stwof-mark-line-white` |
| Solid Black | Reversed on light | #0C0C0C | Light | `stwof-mark-solid-black` |
| Line Black | Outline on light | #0C0C0C | Light | `stwof-mark-line-black` |
| Solid Ember | The spark on dark | #DB262C | Dark | `stwof-mark-solid-ember` |
| Line Ember | Outline on dark | #DB262C | Dark | `stwof-mark-line-ember` |

### Lockups

Locked configurations of mark + wordmark. Each is offered in 3 colorways: White (#F2F2F2), Black (#0C0C0C), Ember (#DB262C).

| Lockup | Composition | Wordmark | Weight | Font size | Letter-spacing | Mark → text gap | Cap height | Canvas |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Horizontal | Mark + STWOF | STWOF | 700 | 78 | 0 | 30 | — | W = 120 + 30 + text width · H = 120 |
| Stacked | Mark + full name | SET THE WORLD ON FIRE | 600 | 23 | 5 | 24 | 23 | W = max(120, text width) · H = 167 |
| Wordmark | Full wordmark | Set the World on Fire | 600 | 74 | -1 | 0 | — | W = text width · H = 96 |

Sizes are in the same units as the 120-unit mark, so a lockup is drawn with the mark at its native 120 × 120. The wordmark lockup carries no mark at all. Text is optically centered on the glyph box (cap height), not the em box.

The page also shows the standalone **Abbreviated** wordmark — "STWOF" with no mark.

---

## 6. Six things never to do.

Anchor: `#misuse` · TOC label: Misuse

The mark works because its geometry is fixed. Reproduce it only from the master artwork, in an approved color mode. Never do any of the following.

- **Don't rotate** or change the lean angle.
- **Don't stretch,** squash or distort.
- **Don't recolor** outside the approved palette.
- **Don't add** shadows, glows or effects.
- **Don't reduce** contrast or fade the mark.
- **Don't shrink** inside its clear space.

---

## 7. Monochrome-first. One spark.

Anchor: `#color` · TOC label: Approved colors

The mark is **monochrome-first**: it must hold in black and white before any color is applied. These are the only **approved colors** for the logo. **Ember Red** is the single accent, used with intent and never as a background wash.

| Color | Hex | Role | CSS variable |
| --- | --- | --- | --- |
| Ember Red | #DB262C | Primary accent | `--brand` |
| Ember Deep | #9E1A1F | Pressed · hover | `--brand-deep` |
| Void | #080808 | Primary ground | `--void` |
| Ink | #F2F2F2 | On-dark text · paper | `--ink` |

**Contrast**

| Pairing | Ratio | Grade |
| --- | --- | --- |
| On Void · Ink at 100% | 14.8 : 1 | AAA |
| On Ink · Void at 100% | 15.1 : 1 | AAA |

---

## 8. Set in Poppins.

Anchor: `#type` · TOC label: Wordmark typeface

The wordmark and lockups are set in **Poppins**, a geometric sans whose near-circular forms give the wordmark a confident, rounded weight that echoes the mark's soft tile. Use **Bold (700)** for the abbreviated **STWOF** wordmark and **SemiBold (600)** for the full name.

Poppins's near-circular geometric forms echo the mark's soft, rounded tile.

| Weight | Use |
| --- | --- |
| 600 · SemiBold | full name — "Set the World on Fire" |
| 700 · Bold | STWOF |

### The brand's three faces

| Typeface | CSS variable | Weights | Role |
| --- | --- | --- | --- |
| Poppins | `--font-display` | 600–700 | Display & headlines · wordmark. Tight tracking, set big. |
| Hanken Grotesk | `--font-body` | 400–600 | Body & UI copy. Set at 1.55–1.65 line-height. |
| JetBrains Mono | `--font-mono` | 400–500 | Labels, eyebrows, metadata. Uppercase, wide tracking. |

---

## 9. The mark, applied.

Anchor: `#applications` · TOC label: In use

The mark is the recognizable unit at small sizes: favicons, avatars, app tiles, stamps. Below, the approved color modes applied across the contexts the logo meets most. All social profiles use the mark as the avatar on an Ember field.

**Contexts shown**

- App icon · ink
- App icon · ember
- App icon · void
- Social avatar · circle
- Browser tab
- Business card

**Social surfaces mocked up**

Instagram profile · Facebook page · X.com profile · LinkedIn page · YouTube channel · TikTok profile.

Profile-grid tiles cycle the three grounds — void, ink, ember — in that rotation. Copy inside the mockups (follower counts, bios, post text) is illustrative, not brand copy.

Photography of the mark in real applications is listed with fetchable URLs in [section 1](#out-in-the-world--photography).

---

*This document mirrors https://stwof.com/brand/logo. Prose is transcribed from that page; asset URLs, variants, colors and typefaces are derived from the brand token source so they cannot drift.*