Orange
#FF8D00
The heading rule, every subhead, the timeline markers, and the orange confetti. The deck's only accent.
Official Orange is #F79225
Everything below is measured off iOi Young Makers in the Docks.pdf, the ten-page deck sent to schools on 28 July 2026. Colours are sampled from the file, not matched by eye. Font names come out of the PDF, not from looking at the letters. Set a document up from the first three sections; read the fourth before you change anything.
Nine colours are in use. One of them, the orange, carries every piece of emphasis in the deck; the other seven palette colours appear only as confetti, cropping off the page edges. Four of the nine do not match the official hexes in DESIGN.md §2.2, and the reason is in Against the design system: the supplied confetti PNGs themselves ship at these values.
#FF8D00
The heading rule, every subhead, the timeline markers, and the orange confetti. The deck's only accent.
#EF4124
Confetti, and the small bullet icons on pages 2 and 8.
#00B6E5
Confetti only. This is the blue in the supplied PNGs.
#00B3DF
Drawn as vector, twice: the two quote rules on page 9. Both blues appear on that page at once.
#FFCB05
Confetti only.
#00AF87
Confetti only.
#6660B0
Confetti only. The largest single share of coloured pixel in the deck.
#F9BEC9
Confetti only.
#0EA5E9
The three card icons on page 3, and nothing else. Not an iOi colour: it is the default blue of a stock icon set.
| Swatch | Share | Used for | Against the system |
|---|---|---|---|
| #FFFFFF | 74.4% | The ground of every page. Never a colour ground, never a photograph behind text. | Agrees |
| #000000 | 0.79% | Every heading and every primary paragraph on pages 2 to 10. | Agrees |
| #111111 | 0.16% | The cover title and cover subtitle only. A near-black, not the same value as the interior. | Undefined |
| #828282 | 0.14% | Secondary text and nothing else: card bodies, the two quotes, the back-page strapline, the run-on half of a bullet. | Agrees, exactly |
| #F1F1F1 | 0.05% | The timeline rail on page 4, 4.5 pt thick. | Undefined |
| #EEF0F3 | 0.09% | The hairline border of the bordered cards on pages 3 and 6. | Undefined |
The whole deck is white plus one orange. Every palette colour other than orange appears only in confetti, which is cropped off the page edges and never touches the content. If you are designing a flyer, that is the rule to carry: the page is white, the type is black, one thing is orange, and the colour lives at the edges.
Two families. Futura LT Pro sets everything on pages 2 to 10, in Book and Heavy plus their obliques. Futura Round appears only on the cover and the back-page contact list. Futura LT Pro is not in ioi-design-system/Fonts/, which holds Futura Round alone; see Against the design system before you commit to it.
| Role | Size | Face | Colour | Where |
|---|---|---|---|---|
| Cover title | 75.5 pt | Futura Round Demi | #111111 | Cover |
| Back-page hero | 72.0 pt | Futura LT Pro Heavy | #000000 | Page 10 |
| Page title | 39.8 pt | Futura LT Pro Heavy | #000000 | Pages 2, 4, 6, 8, 9 |
| Page title, wide | 42.8 to 43.9 pt | Futura LT Pro Heavy | #000000 | Pages 3, 5, 7 |
| Cover subtitle | 32.8 pt | Futura Round Book | #111111 | Cover |
| Contact list | 28.0 pt | Futura Round Demi | #000000 | Page 10 |
| Card title | 27.3 pt | Futura LT Pro Heavy | #000000 | Page 3 |
| Orange subhead | 27.0 pt | Futura LT Pro Heavy | #FF8D00 | Pages 5, 6, 7, 9 |
| Strapline | 27.0 pt | Futura LT Pro Book | #828282 | Page 10 |
| Bullet lead-in | 20.2 to 21.4 pt | Futura LT Pro Heavy | #000000 | Pages 2, 8 |
| Quote attribution | 20.2 pt | Futura LT Pro Heavy Oblique | #000000 | Page 9 |
| Pull quote | 19.5 pt | Futura LT Pro Book Oblique | #828282 | Page 9 |
| Body | 18.0 to 19.1 pt | Futura LT Pro Book | #000000 | Pages 2, 5, 6, 7 |
| Card body | 18.3 to 19.9 pt | Futura LT Pro Book | #828282 | Page 3 |
Page title 39.8, subhead 27.0, body 18.3. That is 2.18 : 1.48 : 1. Every size in the deck sits on that spine, and the small variations (18.0, 18.3, 18.5, 18.6, 19.0, 19.1) are Canva autofitting a text box rather than a step in the scale. Carry the ratio to a new page size, not the point values.
Baseline to baseline, measured across six pages: 1.75 to 1.90. Half-page text runs looser (1.87 to 1.89) than columns and cards (1.75 to 1.76). This is a long way from the ~1.4 the design system asks for, and it is the single thing that makes the pages read as calm.
Half-page body runs 63 to 82 characters a line, cards 24 to 47, timeline labels 22 to 35. One page breaks it: the full-width bullets on page 8 run 99 to 113 characters, roughly double a comfortable measure, and it is the page that reads worst.
Left-ranged, ragged right, on seven of ten pages. Centred on the three cards page, the timeline and the back page. No justification and no all-caps anywhere. Every heading is Title Case With Every Word Capitalised, prepositions included, with one page inconsistent.
There is no grid switched on. The orange rule that starts each page sits at 13.1, 67.5, 81.0, 89.6 or 90.0 pt from the left depending on the page, and the title begins 17 to 24 pt to its right. If you want one number: 81 pt is the modal rule position, 5.6% of page width, and 67.5 pt is used on both photo-split pages. Everything else is placed by eye.
| Template | Pages | How it is built |
|---|---|---|
| Split cover | 1 | Logo top-left, 184.6 × 75.6 pt at (44.1, 33.3). Title baseline at y 211, subtitle at y 461. Line-art doodle 212.8 × 251.1 pt at (613.6, 505.7). Photograph 956.6 pt wide from x 662.1, full bleed top to bottom, cropped off the right edge. |
| Text and inset photo | 2, 6 | Rule and title upper-left. Body or two cards below. Inset photograph 607.5 × 393.8 pt on page 2; two cards 607.4 × 290.2 pt with a 45.1 pt gutter on page 6. Confetti at four corners. |
| Three cards | 3 | Title at y 185. Three cards 439.3 × 357.4 pt, gutter 36.4 pt, spanning x 13.1 to 1403.7. Icon, then title, then centred body. Six confetti shapes. |
| Timeline | 4 | Title at y 77. Rail 4.5 pt in #F1F1F1 from x 89.6 to 1349.6 at y 477, so 87.5% of page width. Four markers 27 × 27 pt, white fill, 9 pt #FF8D00 stroke, at 327.6 pt pitch. Labels alternate above and below the rail. |
| Text and full-bleed photo | 5, 7 | Rule at (67.5, 67.5), 6.8 × 94.1 pt. Title at y 72, orange subhead at y 208, body to a 690 pt right edge. Photograph from x 748.1, full bleed, cropped off the right. |
| Centred close | 10 | Hero title centred at y 219, strapline at y 344, doodle top-right 356.2 × 252.0 pt, four icon-and-label contact lines from y 467 at 39 pt pitch. |
Five or six shapes a page, each 134 to 398 pt across, which is 9% to 28% of page width. Every one is positioned with a negative coordinate so it crops off the canvas: they frame, they never fill. The centre of every page is clear. Three arrangements repeat across the deck, one shared by pages 2, 6 and 10, one by pages 3 and 8, one by pages 4 and 9.
The shapes are the supplied PNGs, inserted. Their pixel colours match ioi-design-system/Confetti/*.png exactly, so nothing was redrawn. That is the design system followed correctly and it should not be changed.
A solid #FF8D00 bar, 6.8 pt wide by 47 pt tall, sitting at the left margin with the title starting 17 to 24 pt to its right, top-aligned with the cap line. On the two pages with a 42.8 pt title the bar doubles to 94.1 pt and hangs below the baseline.
Futura LT Pro Heavy, 27 pt, #FF8D00, set 40 to 60 pt below the page title and above the body. It does the work the design system expects a highlighted keyword to do, but as a separate line instead.
Hairline #EEF0F3 border, small corner radius, no fill, no shadow, generous inner padding. Page 3 stacks an icon, a 27.3 pt black title and centred #828282 body. Page 6 drops the icon and leads with an orange subhead over left-ranged black body.
A coloured glyph 13 to 27 pt tall in the left margin, then a Heavy lead-in and a Book run-on on the same line. On page 2 the run-on stays black; on page 8 it drops to #828282, which is what makes that page's very long lines survive.
A pale rail with four ringed markers and labels alternating above and below. The numbering is written into the heading text (“1. Co-Design”) rather than into the marker, so the markers are identical empty rings.
A 4.5 × 97.2 pt #00B3DF rule down the left, the quotation in Futura LT Pro Book Oblique 19.5 pt at #828282, then an attribution in Heavy Oblique 20.2 pt black, opened with a dash. Two of them stacked, under one orange subhead.
Colour wordmark top-left, a two-line title, a three-line subtitle, a line-art doodle in the white space, and a photograph filling the right 54% of the page top to bottom. No confetti. No date and no symbol, which the reference deck both carry.
Everything centred: a 72 pt hero, a 27 pt grey strapline, a doodle top-right, and four icon-and-label contact lines in Futura Round Demi. No logo, no footer, no charity number, and no page number anywhere in the deck.
| What | How it is done |
|---|---|
| Kind | Real activity photography throughout, seven images. No stock illustration standing in for an activity, no generated imagery, no icon doing a photograph's job. |
| Treatment | Two only. Full-bleed crop hard to a page edge (pages 1, 5, 7) and inset rectangle with a small corner radius (pages 2, 6). Page 9 carries one soft organic mask on a 360 pt square. |
| People | Faces shown and uncropped. The cover is two children looking straight at the camera; everything else is candid and mid-activity. Adults appear in three photographs, always alongside children and always doing the activity rather than supervising it. |
| What is never done | No filter, no duotone, no colour overlay, and no text set over a photograph anywhere in the deck. |
| Doodles | Line-art in the palette colours on pages 1, 7 and 10, sitting in white space beside the text, never over the photograph. Same family as the reference deck's cover doodle. |
| What | Measured |
|---|---|
| Where | Page 1 only. Pages 2 to 10 carry no logo, no symbol, no footer and no page number. |
| Size | 184.6 × 75.6 pt, which is 12.8% of page width and 9.3% of page height. |
| Position | Top-left at (44.1, 33.3). |
| Colourway | The colour dot wordmark: black lettering with palette-coloured dots and diacritics. |
| Clear space | 44.1 pt to the left edge (0.58 of logo height), 33.3 pt to the top (0.44), 102 pt down to the title cap line (1.35). The design system states no clear-space figure, so this is measured practice rather than a rule. |
| Habit | Figure | What it looks like |
|---|---|---|
| Headline length | 2 to 5 words | 9 to 31 characters. None is a sentence, none carries a full stop, none is a question. |
| Headline casing | Title Case | Every word capitalised, prepositions included. One heading alone lower-cases a preposition, so the habit is not applied consistently. |
| Sentence length | median 18 | Mean 19.7 words across 23 prose sentences, range 8 to 39. House style asks 15 to 20 on average, so the median lands and five sentences run long. |
| Numbers | figures | “20 years”, “8 core global competencies”, “100 Imagination Boxes”, “2-hour”, “Aged 10”. Page 4 writes “4 weekly” where page 6 writes “four weekly”; house style makes page 6 right. |
| Words for people | no “kids” | “children” three times, “pupils” twice, “families” five, “parents” three, “carers” once. House style is met. |
| Learning or education | 3 and 5 | “learning” five times, “education” three. Two of the three are “higher education”, which is correct. The third, “play-based STEAM education”, is our own activity and house style says say learning. |
| Ampersands | 3 headings | Used in headings only, never in body copy. |
| Spelling | one slip | “A Structured Program Journey” on page 4, US spelling, against the cover's own “programme”. |
| Quotation marks | mixed | Straight single quotes on page 7, a curly apostrophe inside straight doubles on page 9. |
| Unknowns | 1 on the page | “TBC in September (weekend)” is printed on page 4 rather than left as space. |
Compared against ioi-design-system/DESIGN.md, the four official guideline PDFs, the reference deck Playing for a Fairer Future, and every PNG in Confetti/ and Logos/. Each row says which document is the authority. Nothing in DESIGN.md has been changed: this reports on it.
| What | The proposal | The system | Which is right, and the fix |
|---|---|---|---|
| Typeface, pages 2 to 10 | Futura LT Pro Book and Heavy, plus both obliques. | §3: Futura Round Book and Demi, “no third typefaces”, Verdana the only fallback. | The system is out of date. The reference deck that §5 itself cites uses the identical pair, and the design system ships only Book and Demi, so the Heavy headings in both decks cannot be set from the files we hold. §3 should name Futura LT Pro Book and Heavy as the presentation face and keep Futura Round as the identity face. Fonts/ holds only Futura Round and needs the LT Pro files or a note saying where they come from. |
| Accent orange | #FF8D00 for the rule, every subhead and the timeline markers. | §2.2 official Orange #F79225, Pantone 151 C. | The system has a gap. Confetti/Circle Orange.png and Rectangle Orange.png are themselves solid #FF8D00, and §5 tells designers to place those files unaltered. Following §5 and §2.2 together puts two oranges twelve units apart on one page. §2.2 needs a line recording the asset value and a decision: reissue the PNGs at #F79225, or admit #FF8D00 as the screen orange. |
| Confetti blue, green, purple | #00B6E5, #00AF87, #6660B0. | §2.2 official #00B3DF, #00AB8A, #6462AB. | The system has a gap, same cause. The supplied PNGs carry these values. Page 9 shows the consequence: the confetti blue and the official blue both appear on it. Yellow, red and pink match exactly, so it is four of eight, not all of them. |
| Confetti file names | Not used in this deck. | §5 lists Circle Grey.png and Rectangle Grey.png. |
The system is wrong. Both files sample #CFC9BC, which §2.2 names Sand. Official Grey is #828282 and no confetti file carries it. Relabel them Sand in §5, or rename the files. |
| Leading | 1.75 to 1.90, measured on six pages. | §3 type-scale table: “generous line spacing (~1.4)”. | The system is out of date. Nothing in either deck is near 1.4, and the looser setting is what makes the pages calm. §3 should say 1.75 to 1.9 for presentation and long-form body. |
| One keyword highlighted per headline | Never done. Headings are solid black; the accent is a separate orange subhead below. | §2.4 and §12 both instruct it. | The system is out of date. Neither deck does it once. The device suits campaign and social work with a single line of copy, not a document with a heading hierarchy. §2.4 should scope the rule rather than be ignored. |
| Cover title weight | Futura Round Demi at 75.5 pt. | §3: Book for large-scale headlines, Demi for small titles and key areas of text. | The proposal is wrong. The reference deck sets its cover in Futura Round Book at 99 pt. Rule and practice agree against the proposal: Book, and larger. |
| Card icons, page 3 | #0EA5E9, a stock icon-set blue. | §10.4: only the official hexes. | The proposal is wrong. Off-palette on any reading, and close enough to two iOi blues to read as an error. Recolour to whichever blue the orange question settles on. |
| Cover symbol and date | Neither. | §5: the symbol as a small colour endorsement, bottom-left of a cover. | The proposal is wrong. The reference deck carries a colour iOi symbol bottom-left beside a date. It is cheap to add and it is the one place a reader meets the mark. |
| British English | “A Structured Program Journey”, page 4. | §9, house writing style. | The proposal is wrong. The cover already writes “programme”. Fix the heading. |
| Learning, not education | “play-based STEAM education”, page 2. | §9: say learning, not education, for our activities. | The proposal is wrong on that one phrase. “higher education” elsewhere is correct, because that is not our activity. |
| Numbers one to nine | “4 weekly” on page 4, “four weekly” on page 6. | §9: spell one to nine, figures for 10 and above. | The proposal is wrong on page 4. Page 6 is right, and the two contradict each other three pages apart. |
| Logo colourway on an external document | Colour dot wordmark on the cover. | §4: black or white by default; the colour version is “for internal brand materials”. | Genuinely undefined. Both decks put the colour version on the cover of a document that goes out. Practice is settled, the rule reads the other way, and nobody has reconciled them. §4 should say which colourway a partner-facing cover takes. |
| Logo clear space | About 0.5 of logo height on the near edges. | No figure exists anywhere in the system. | Genuinely undefined. The system gives a 3x separation rule for logo against symbol and nothing for the logo against a page edge. §4 should carry a number. |
| Footer and charity number | Neither deck carries one. | charity-details.md: default footer is the charity number, for “document footers, flyers, decks”. |
Genuinely undefined. Whether a deck is exempt has never been decided. It matters for the flyers, so decide it there. |
| Named contact | Back page names a person and their individual mailbox. | charity-details.md names the organisation inbox as canonical. |
Genuinely undefined. The canonical-inbox rule is written for footers, and the workspace rule against personal addresses is written for published pages. A PDF emailed to a named school is neither, and a proposal needs somebody to reply to. |
| Cover ink | #111111 for the cover title and subtitle, #000000 everywhere else. | §2.1 gives Black as #000000. | Genuinely undefined, and probably unintended. Nothing turns on it, but pick one value for the flyers. |
| What | Why it is right | System |
|---|---|---|
| Confetti placed, not drawn | The placed image colours match the supplied PNGs exactly, so nothing was regenerated. Cropped off the corners, mixed circles and rounded rectangles, varied sizes and rotations, centre clear. | §5 |
| White ground plus palette highlights | 74% of the deck is white. Colour appears at the edges and in one accent, never as a ground. | §2.4 |
| #828282 for secondary text | Used for card bodies, quotes, straplines and bullet run-ons, and for nothing else. The official grey, exactly. | §2.1 |
| Real activity photography | Seven real photographs, no illustration standing in for an activity, no generated imagery. | §7, §10.1 |
| No all-caps blocks | Not one, anywhere in the deck. | §10.6 |
| “children”, not “kids” | Three uses of children, none of kids. | §9 |
| Type kept big | Nothing below 18 pt on an 810 pt page. | §3 |
ioi-design-system/Fonts/, and no record says where they are licensed from or who holds the licence.