# Rolocode — Brand Resources

The single source of truth for the Rolocode identity: logo, colour, and
typography. Use these assets for **anything brand-facing** — brochures, email,
documents, invoices, slide decks, social, swag. Not strictly tied to the
website; the website just happens to use the same design system.

> Everything here is standardised on the **website design-system palette**
> (violet → cyan). The original `.ai` exploration shipped several alternate
> colour schemes (teal/red, navy/blue, etc.); those are **not** the brand —
> ignore them and use what's in this folder.

---

## Folder map

```
brand/
├─ logo/
│  ├─ rolocode-mark.svg                      ← the symbol only (full colour)
│  ├─ rolocode-mark-mono-white.svg           ← single-ink, for dark/photo bg
│  ├─ rolocode-mark-mono-black.svg           ← single-ink, for light/print bg
│  ├─ rolocode-wordmark-on-dark.svg          ← "rolocode" wordmark, light ink
│  ├─ rolocode-wordmark-on-light.svg         ← "rolocode" wordmark, dark ink
│  ├─ rolocode-lockup-horizontal-on-dark.svg ← mark + wordmark, side by side
│  ├─ rolocode-lockup-horizontal-on-light.svg
│  ├─ rolocode-lockup-stacked-on-dark.svg    ← mark over wordmark (square-ish)
│  ├─ rolocode-lockup-stacked-on-light.svg
│  ├─ rolocode-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/
   └─ rolocode-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 Penrose-style impossible triangle that doubles as a "play" arrow —
forward motion, looping logic. Its 3D illusion depends on five tonal faces:

| Face            | Colour            |
|-----------------|-------------------|
| Top arm (lit)   | Cyan Bright `#67e8f9` |
| Lower swoosh    | Cyan `#22d3ee`        |
| Left arm        | Violet `#7c3aed`      |
| Inner accent    | Violet Bright `#a855f7` |
| Depth / shadow  | Elevated `#1c1c27`    |

It reads correctly on **both light and dark** backgrounds (the dark depth faces
give it structure either way). 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 the
  mark's top bar (≈ 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 faces outside the palette, or flatten them to one 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 rebuild the wordmark in a different font — it's **Space Grotesk 600,
  tracking −1.75%, lowercase**, already outlined to curves in the lockup files.

---

## Quick pick

| I need…                                  | Use                                            |
|------------------------------------------|------------------------------------------------|
| App icon / avatar / favicon              | `logo/rolocode-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/rolocode-mark-mono-black.svg`            |
| Colours for a designer                   | `color/palette.md` + `color/palette.svg`       |

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