# iOi / TinkerTub — Design System (DESIGN.md)

> Institute of Imagination (iOi) brand system for use with Claude Design and other AI design tools.
> Drop this file in as the project's design system. It defines colour, type, logo & symbol usage,
> brand devices, imagery, voice, writing style, and the things to **never** do.
>
> **Source of truth:** the official *Institute of Imagination Identity & Brand Guidelines*,
> the *iOi Colours* spec (RGB/CMYK/Pantone), and the *iOi House Writing Style*. Where the Canva
> Brand Kit differs from the official spec, **the official values win** (see §2.3).
> TinkerTub-specific styling (§6) is a product expression built on top of this core system.

---

## 1. Brand at a glance

The Institute of Imagination is a children's charity that helps children learn through play and
tinkering. The identity is deliberately **simple and flexible**: black & white at its core, with a
**rich, playful colour palette** and bold photography layered on top. Personality is **warm,
curious, participant-led** — never corporate, never cluttered.

Two hero brand assets:
- **The logo** — the *institute of imagination* wordmark.
- **The symbol** — the *iOi* mark (a square monogram). It reads the same from every angle and can be
  **broken apart into its component shapes** as playful "confetti".

**TinkerTub** is iOi's at-home activity kit (screen-free making for children aged 5+ with a grown-up).
It expresses this system with a green ground, a white arch, an eye-in-magnifying-glass mascot, and
confetti shapes.

---

## 2. Colour

### 2.1 Core colours
Black and white are the core colours for all identity applications — this keeps the brand clean and
lets colour and photography do the talking. **Grey** is for secondary information (e.g. captions, fine print).

| Token | Name | HEX | RGB | Use |
|---|---|---|---|---|
| `--white` | White | `#FFFFFF` | 255·255·255 | Primary background; reversed text |
| `--black` | Black | `#000000` | 0·0·0 | Logo/symbol default; text; linework |
| `--grey` | Grey | `#828282` | 130·130·130 | Secondary text, captions, fine print |

### 2.2 Colour palette (highlights & backgrounds)
"Any colour goes," but for core brand materials use the iOi palette for highlights and backgrounds.
Values are the **official** RGB (hex) with Pantone for print.

| Token | Name | HEX | RGB | CMYK | Pantone |
|---|---|---|---|---|---|
| `--yellow` | Yellow | `#FFCB05` | 255·203·5 | 0·20·100·0 | 116 C |
| `--blue` | Blue | `#00B3DF` | 0·179·223 | 89·0·9·0 | 306 C |
| `--red` | Red | `#EF4124` | 239·65·36 | 0·90·100·0 | Warm Red C |
| `--green` | Green | `#00AB8A` | 0·171·138 | 95·0·62·0 | 3268 C |
| `--purple` | Purple | `#6462AB` | 100·98·171 | 70·70·0·0 | 2665 C |
| `--orange` | Orange | `#F79225` | 247·146·37 | 0·50·100·0 | 151 C |
| `--pink` | Pink | `#F9BEC9` | 249·190·201 | 0·31·8·0 | 699 C |
| `--sand` | Sand | `#CFC9BC` | 207·201·188 | 10·10·18·10 | 7534 C |
| `--charcoal` | Charcoal | `#877C78` | 135·124·120 | 40·40·40·20 | 408 C |

> Naming note: official **Charcoal** = warm taupe `#877C78`; official **Grey** = `#828282`.
> They are different colours — don't swap them.

### 2.3 Canva Brand Kit alignment (fix these)
The Canva Brand Kit currently holds slightly-off values. Update Canva to the official hexes above so
print and digital match. Differences:

| Colour | Canva (current) | Official (use this) |
|---|---|---|
| Yellow | `#FFCD00` | `#FFCB05` |
| Blue | `#16AFDF` | `#00B3DF` |
| Red | `#E43313` | `#EF4124` |
| Green | `#00A281` | `#00AB8A` |
| Purple | `#675DA3` | `#6462AB` |
| Orange | `#F1900A` | `#F79225` |
| Pink | `#F7C5D2` | `#F9BEC9` |
| Sand | `#D5CFC2` | `#CFC9BC` |
| Charcoal | `#8F8079` | `#877C78` |
| Grey | `#828282` | `#828282` ✓ |

### 2.4 Usage
- Default to **black/white + one or more palette colours** for highlights and backgrounds.
- Use **one accent as the keyword highlight** per headline — not a rainbow of words.
- Full multi-colour belongs in the **symbol / confetti**, not in running text.
- Body text: grey `#828282` or black on white; white on a colour ground. Keep strong contrast.

---

## 3. Typography

**Brand typeface: Futura Round** — "the Institute of Imagination's voice." Files in `/Fonts/`.

| Weight | File | Official use |
|---|---|---|
| **Futura Round Book** | `Fonts/FuturaRound-Book.otf` | **Large-scale headlines AND body copy** |
| **Futura Round Demi** | `Fonts/FuturaRound-Demi.otf` | **Small titles and key areas of text** (emphasis) |

- General rule: **keep type sizes nice and big** — clarity and legibility first.
- **Fallback (official):** when Futura Round isn't available (e.g. internal comms, email),
  use **Verdana** — Regular and Bold. Do not substitute other display fonts.
- Use Futura Round only for brand materials; no third typefaces.

### Type scale (relative guide — scale up per format)
| Level | Weight | Notes |
|---|---|---|
| Display / H1 | Book, large | Short and punchy; highlight one keyword in an accent colour |
| Section title / H2 | Demi | Small titles, labels, key text |
| Body | Book | Generous line spacing (~1.4); big enough to read easily |
| Caption / legal | Book or Demi, small | Charity no., disclaimers — grey `#828282` |

---

## 4. Logo & symbol

Assets in `/Logos/` and `/Confetti/`. Each official logo is supplied as `.eps` (CMYK & RGB) in
black, white and colour.

### The logo (wordmark — *institute of imagination*)
- Can appear in any colour, but **by default black or white**.
- **Left-aligned by default**; may be centred in small spaces or on promo items (t-shirts, bags).
- A **colour-palette version** (coloured dots) exists for internal brand materials that want a little colour.

### The symbol (the *iOi* mark)
- Any colour, but **by default black or white**.
- Best placed **as large as possible, centred**; equally good as a small endorsement when the logo leads.
- It's **the same from every angle** — make the most of it.
- A **colour-palette version** exists (this is the colourful iOi monogram) for internal/brand materials.

### Logo + symbol relationship
- **No fixed lock-up** of logo and symbol.
- When both appear on the same side/page at similar size, keep them apart: **minimum distance = 3×**
  (where x is the height of the symbol's units). If in doubt, just use the logo.

### Logo files
| File | Use |
|---|---|
| `Logos/iOi Logo Black.png`, `Logos/iOi Logo black_RGB.png`, `Logos/iOi_Logo_Black _Transparent.png.png` | Black logo on light backgrounds |
| `Logos/White logo.png` | White logo on colour/dark/photo backgrounds |
| `Logos/iOi_Logo_Colour_RGB copy 2.png.png` | Colour symbol/monogram (internal/brand materials) |
| `Logos/iOi_Wordmark_RGB_Transparent.png` | Wordmark lock-up |
| `Confetti/iOi_Word mark_White.png` | White wordmark on colour/photo |

### Don't
- ❌ Recolour outside the rules, stretch, rotate (beyond the symbol's natural symmetry), or add effects.
- ❌ Rebuild the logo/symbol — use the supplied files.

---

## 5. Brand devices & motifs

### Confetti (the symbol's component parts) — USE THE SUPPLIED IMAGE FILES
Confetti = the **iOi symbol broken into its component shapes**: solid **circles** and **rounded
rectangles** in the palette colours. Officially sanctioned for "strategic statement pieces" and
playful, public-facing work.

> ⚠️ **CRITICAL for AI design tools:** Confetti must be placed using the **actual PNG files in
> `/Confetti/`. Do NOT invent, redraw, approximate, or generate new confetti shapes.** The real
> shapes have specific rounded-rectangle geometry and exact brand colours; regenerated shapes look
> off-brand. Treat confetti as **images to insert**, never as shapes to draw.

**Confetti files** (`/Confetti/`) — flat shapes on transparent background:
- Circles: `Circle Blue.png`, `Circle Green.png`, `Circle Grey.png`, `Circle Orange.png`,
  `Circle Pink.png.png`, `Circle Purple.png`, `Circle Red.png`, `Circle Yellow.png`
- Rounded rectangles: `Rectangle Blue.png` … `Rectangle Yellow.png` (same 8 colours)
- `iOi_Word mark_White.png` — white wordmark for use on colour/photo grounds

**How to place them** (reference: `Presentation example/Playing for a Fairer Future.pdf`):
- Position confetti at the **page edges and corners, partially bleeding off-canvas** — they peek in to
  frame the content; they do **not** fill the middle.
- Use a **few** shapes, mixing circles and rectangles in **different palette colours**, at varied
  sizes and rotations (the rounded rectangles are often tilted).
- Keep the centre clear for text and photos. Restraint and rhythm, never a busy scatter.

**In HTML, an artifact or anything else that cannot link a local file.** The rule above still holds:
you may not redraw them. Embed the actual PNG as a base64 `data:` URI in an `<img>`, positioned with
CSS and rotated with `transform`. The whole set costs about 2 KB per rectangle and 12 KB per circle
once downsampled to 520px, so there is no size argument for redrawing. Added 1 September 2026, after
confetti was redrawn as SVG for the Young Makers flyer and came out as pill shapes.

**Placement rules.** Added 1 September 2026 (Liber), from the Young Makers flyer.

- **The copy sets its own measure. The confetti moves around it, never the other way.** Never
  shorten a line, cap a text block or reflow a paragraph to make room for a shape. If a shape cannot
  find a home without pushing text, move the shape, shrink it, or take it out. This is the rule that
  governs the others: everything below is about where a shape may go once the text has taken the
  space it needs.
- **Show at least 30% of every shape.** Below that it stops reading as a circle or a rectangle and
  reads as a smudge at the edge of the page. 30% is what the reference deck itself does: its most
  cropped shape is about that. If a shape has to go below 30% to fit, **take it out rather than
  shrink it**. The usual range is 40% to 70%, and one shape fully visible is fine.
- **Never let a shape sit under text, and leave at least 5mm clear around the text block.** The
  reliable way is to cap the text measure so there is a clear column beside it, not to nudge shapes
  until they look right.
- **Distance scales with size.** The bigger the shape, the further it sits from the text. Small
  shapes may come close. A large shape near the text crowds it even when it does not touch.
- **No repeated colours in one composition.** One shape per colour. Five to seven shapes suits a
  page; the reference deck uses five.
- **Red does not sit on an orange ground.** Both are warm and the shape goes muddy. Leave it out
  rather than dull it.

**The rotation trap, and why placement must be measured.** A rotation about the centre pulls a
tilted rectangle back out of frame, so a shape positioned to straddle an edge *before* rotating can
end up showing almost nothing after. On the Young Makers flyer this produced two rectangles at 5% to
14% and one at **0%**, which nobody noticed for several rounds because a missing shape looks like a
design choice. **Measure the rendered result**: clip the rotated shape against the page and check the
area. Do not judge it by the offsets you typed.

**The geometry, measured off the supplied files**, recorded here only so a wrong shape can be spotted
in review. It is not permission to draw one.

| | Measured |
|---|---|
| Rectangle aspect | 2.80 : 1 |
| Rectangle corner radius | 6.7% of the short side. Slightly rounded corners, **not** a pill or a stadium |
| Circle | a true circle |

A fully rounded end (radius = half the short side) is the single most common way a redrawn rectangle
goes wrong, and it is the tell that the shape was generated rather than placed.

### Other devices
- **The symbol** — a large central graphic, or a small colour endorsement (e.g. bottom-left of a cover).
- **Bold photography** over white or colour grounds; simple **line-art doodles** may overlap a photo
  edge (see the presentation cover).

---

## 6. TinkerTub product expression

TinkerTub builds on the core system with these recurring elements (reference:
`TinkerTub/Booklet_draft 1.pdf.pdf`):
- **Green ground** (`#00AB8A`) as the signature background.
- **White arch** panel framing the hero graphic/wordmark (booklet cover).
- **Eye-in-magnifying-glass mascot** with little confetti "rays" — curiosity symbol.
- **"TinkerTub" wordmark** in Futura Round with "by institute of imagination" beneath.
- Confetti circles as oversized soft background shapes holding badges (curiosity / creativity / teamwork).

---

## 7. Imagery

- **Use real product photography**, never illustrations standing in for the kit/activities.
  Approved hero photos:
  - `TinkerTub/DSC_0138.jpg` — full kit + activity outputs on **white**.
  - `TinkerTub/DSC_0141.jpg` — branded tubs on **iOi green**.
- Style: bright, clean, real children's making and creations; white or brand-colour seamless grounds.
- Activity references (Jitter Bot, Sun Printing, Geo Garden) are in the booklet PDF.

---

## 8. Voice & tone

iOi brand values to write by: **Collaborative · Inter-disciplinary · Ideas-driven · Playful · Participant-led.**

- **Playful** — emojis, pictures, jokes; don't take ourselves too seriously (esp. social).
  *Exception:* answering customer questions → always **clear and direct**.
- **Participant-led** — ask questions, invite sharing/debate; give ideas to start with, don't dictate.
- **Ideas-driven** — content that gets people thinking.
- **Collaborative** — genuinely ask for input and feedback; start conversations.

Child-first phrasing sets the tone: *"There's no wrong way to do it!"*, *"what could you imagine together?"*

---

## 9. House writing style (official)

**Naming**
- We are **the Institute of Imagination** in a sentence — the *t* of "the" is always lower case.
- Use **iOi** only *after* first referring to us in full: e.g. "At the Institute of Imagination (iOi)…"

**Words**
- Say **children**, not "kids" (except Google Adwords keywords).
- Say **learning**, not "education", for our activities.
- If space allows, say **parents and carers**, not just "parents".
- Use personal pronouns — **"we"** and **"you"** — for inclusivity and openness.

**Formatting**
- Dates: *Wednesday 7 November 2019* / *Wed 7 Nov* / *7 Nov*.
- Times: *10am*, *10am – 4pm*, *10–11am*. Prices: *£65*, *£65.75*.
- Numbers: ages always figures. In a sentence, spell out **one–nine**, use figures for **10+**
  (social media may use figures throughout if short on space).
- Phone: international audiences *+(44)207 494 9153*; UK-only *0207 494 9153*.

**Plain English**
- Avoid jargon; explain uncommon terms/acronyms (e.g. spell out STEAM on first use).
- Average sentence length **15–20 words**; generally **one idea per sentence**.
- Test: *would you say it out loud, to a real person?*
- Always know **who** you're writing for and **why** before you start — nothing is written for "everyone".

---

## 10. Anti-patterns (what makes a design *off-brand* — avoid)

From rejected drafts:
1. ❌ **Fake AI/cartoon illustrations** in place of real product/activity photos.
2. ❌ **Generating or redrawing confetti** instead of placing the supplied `/Confetti/` PNG files (§5).
3. ❌ **Clutter** — scattered confetti/badges with no breathing room. Keep generous white space.
4. ❌ **Off-palette / off-font** — only the official hexes (§2) and Futura Round (Verdana fallback).
5. ❌ **Generic template** look — must carry iOi personality (symbol, confetti, photography, big clear type).
6. ❌ Logo/symbol misuse, ALL-CAPS blocks, or many keywords highlighted in many colours.

---

## 11. Asset inventory (connected folder)

```
/Fonts/FuturaRound-Book.otf            ← large headlines + body
/Fonts/FuturaRound-Demi.otf            ← small titles / key text
/Logos/                                ← logo & wordmark (black, white, colour, transparent)
/Confetti/                             ← confetti shapes (8 colours) + white wordmark
/TinkerTub/DSC_0138.jpg                ← hero photo: kit on white
/TinkerTub/DSC_0141.jpg                ← hero photo: tubs on green
/TinkerTub/Booklet_draft 1.pdf.pdf     ← layout / confetti / activity reference
/Presentation example/                 ← reference deck: edge-confetti framing + split cover
/Brand guidelines/                     ← official identity, colours, items PDFs
/Writing style/                        ← official house writing style
/charity-details.md                    ← org details + ready-to-paste footer boilerplate
```
> "Bad sloppy versions/" = rejected experiments. Reference for what to avoid, not for reuse.

---

## 12. Quick brief for Claude Design

When generating an iOi / TinkerTub design, instruct it to:
- Type in **Futura Round** — **Book** for big headlines & body, **Demi** for small titles (Verdana fallback).
- Base on **black/white + palette colours**; for TinkerTub use the **green ground + white arch + mascot**.
- Highlight **one keyword per headline** in an accent colour.
- Use **real TinkerTub photos**, never illustrations.
- Place confetti using the **actual `/Confetti/` PNG files (never generate shapes)** — frame from the
  **page edges/corners**, a few shapes, sparingly.
- Write **warm, plain-English, participant-led** copy: "children" not "kids", "we/you", give ideas not orders.