# RoloMob — Brand Resources

The single source of truth for the RoloMob identity: logo, colour, and
typography. RoloMob is a mobile game studio that designs, builds and ships
addictive games for iOS and Android (App Store + Google Play). Use these assets
for **anything brand-facing**: store listings, email, documents, slide decks,
social, swag. Not strictly tied to the website; the website just happens to use
the same design system.

> Everything here is generated from one canonical script and standardised on the
> **brand palette** (bright orange + green). Do not hand-edit the SVG/PNG
> variants. Change the spec, then regenerate (see "Generating the assets" below).

---

## Folder map

```
brand/
├─ logo/
│  ├─ rolomob-mark.svg                      ← the symbol only (full colour)
│  ├─ rolomob-mark-mono-white.svg           ← single-ink, for dark/photo bg
│  ├─ rolomob-mark-mono-black.svg           ← single-ink, for light/print bg
│  ├─ rolomob-wordmark-on-dark.svg          ← "rolomob" wordmark, light ink
│  ├─ rolomob-wordmark-on-light.svg         ← "rolomob" wordmark, dark ink
│  ├─ rolomob-lockup-horizontal-on-dark.svg ← mark + wordmark, side by side
│  ├─ rolomob-lockup-horizontal-on-light.svg
│  ├─ rolomob-lockup-stacked-on-dark.svg    ← mark over wordmark (square-ish)
│  ├─ rolomob-lockup-stacked-on-light.svg
│  ├─ rolomob-icon.svg                       ← rounded app/avatar tile
│  ├─ favicon.svg                             ← browser favicon (same as icon)
│  └─ png/                                    ← raster exports (transparent)
├─ color/
│  ├─ palette.svg / palette.png               ← swatch sheet
│  └─ palette.md                              ← tokens + usage
├─ type/
│  └─ typography.md                           ← fonts + scale
├─ templates/
│  ├─ email-signature.html                    ← copy-paste email signature
│  └─ letterhead.html                         ← document / invoice / brochure header
└─ source/
   └─ rolomob-logo-source.ai                 ← original Illustrator artwork
```

**SVG is the master.** It's infinitely scalable and works in Illustrator,
InDesign, Figma, web, and email. Reach for the PNGs (`logo/png/`) only when a
tool can't take SVG. Need a size that isn't there? Open the SVG and export it.

---

## The mark

The mark is a modern-pixel "mob": a cute pixel invader-creature (a friendly
space-invader monster). It is built from **one pixel grid** (13 columns x 10
rows): two little ears on top, two bracket-shaped eyes (knocked-out gaps), and
zigzag invader feet. The body is filled with the brand gradient and the eyes are
transparent gaps. It is not a triangle and it has no tonal faces.

| Element     | Treatment                                  |
|-------------|--------------------------------------------|
| Body        | Brand gradient (flame to gold to green)    |
| Eyes        | Transparent knocked-out gaps               |
| Ears + feet | Same pixel body, part of the single grid   |

It reads correctly on **both light and dark** backgrounds. On busy photos or
single-ink contexts, use the **mono** versions.

## Clear space & minimum size

- **Clear space:** keep padding around the logo of at least the height of one
  pixel cell of the mark (≈ the cap-height of the wordmark). The SVGs already
  include a comfortable margin in their viewBox.
- **Minimum size:** mark ≥ 24 px; horizontal lockup ≥ 120 px wide. Below that,
  prefer the mark alone or the favicon/icon.

## Don'ts

- Don't recolour the body outside the palette, or knock the gradient back to one
  flat colour (use the provided mono files instead).
- Don't stretch, rotate, add drop shadows/outer glows, or place the colour logo
  on a low-contrast background.
- Don't fill in the eye gaps or redraw the pixel grid by hand. Regenerate from
  the script instead.
- Don't rebuild the wordmark in a different font. It's **Space Grotesk 600,
  tracking −1.75%, lowercase**, with the Space Grotesk font embedded in the
  wordmark SVGs.

---

## Quick pick

| I need…                                  | Use                                            |
|------------------------------------------|------------------------------------------------|
| App icon / avatar / favicon              | `logo/rolomob-icon.svg`                       |
| Email signature                          | `templates/email-signature.html`              |
| Invoice / letter / brochure header       | `templates/letterhead.html`                    |
| Logo on a dark slide                     | `…-lockup-horizontal-on-dark.svg`              |
| Logo on a white document                 | `…-lockup-horizontal-on-light.svg`             |
| Stamp / fax / single-colour print        | `logo/rolomob-mark-mono-black.svg`            |
| Colours for a designer                   | `color/palette.md` + `color/palette.svg`       |

---

## Generating the assets

All logo variants are generated from a **single source of truth**: the script
`scripts/build-brand-logos.mjs`. Regenerate the whole system with:

```
npm run brand:logos
```

It emits the mark, mono white/black, wordmark on dark/light, horizontal +
stacked lockups on dark/light, the rounded app icon, favicon, WhatsApp social
assets, and the colour swatch sheet. Do not hand-edit the output files: change
the script and re-run. (The old `scripts/build-social.mjs` was folded into
`scripts/build-brand-logos.mjs` and no longer exists.)

See [`color/palette.md`](color/palette.md) and [`type/typography.md`](type/typography.md)
for the full design tokens.
