Applications

Templates for the things we make every week

Each template is a standalone HTML file at its exact size, in brand-system/templates/. Open one, replace the sample text, and export. Every template uses the same type, colours and logo files as the rest of the brand.

Social share image Instagram post and story Event poster Slides Certificate Email Name badge

How to export

The templates are built in pixels, so a screenshot at 1x gives the exact size and 2x gives a sharp version for print or high-density screens.

1. Open and edit

Open the template file in Chrome. Edit the text in the HTML. Text with a dotted underline is sample copy: replace or check it before anything goes out.

2. Isolate one frame

Add ?frame=2&export=1 to the address. The page then shows only that frame at the top-left corner, without notes, guides or sample underlines.

3. Save

Print, Save as PDF, margins none, background graphics on (each template sets its own page size). Or screenshot: DevTools, device toolbar at the frame's size, DPR 1 or 2, then Capture screenshot.

Programme, Level 2aOpen
Event, Level 1Open
PhotoOpen

Social share image

File
og-image.html
Size
1200 × 630 px, three variants
Use
Link previews for programme and event pages (og:image), LinkedIn, X and WhatsApp
Export
Screenshot each frame at 1x (PNG or JPG under 1 MB)
✓Do
  • Use the level that matches the programme
  • Keep text inside the 72px margin
  • Keep the headline under about 60 characters
✕Don't
  • Put the crimson logo on a level or photo
  • Add a third line of details
  • Use stock photos
Post, Level 1Open
Post, photo and paperOpen
StoryOpen

Instagram post and story

Files
instagram-post.html, instagram-story.html
Size
Post 1080 × 1080 px; story 1080 × 1920 px
Use
Event announcements: what, where and when. Everything else goes in the caption.
Export
Screenshot at 1x (Instagram resizes anything larger)
✓Do
  • Keep story text out of the top and bottom 250px (the striped guides)
  • Use real photos from our events
  • Caption photos bottom-left on the 24px edge
✕Don't
  • Centre the layout
  • Use tracked capitals for labels
  • Repeat the logo as decoration
A3 portraitOpen

Event poster

File
event-poster.html
Size
A3 portrait, 297 × 420 mm, built at 1123 × 1587 px
Use
Campus noticeboards, venues and co-working spaces
Export
Print to PDF at A3, margins none, background graphics on. For a print shop, ask for 3 mm bleed.
✓Do
  • Lead with the topic, in Baskerville
  • Keep When / Where / Cost on one ruled line
  • Add a QR code in the dashed box
✕Don't
  • Set headlines in bold
  • Add a second accent colour
  • Use photos without the subject's permission
1 Title, Level 1Open
2 Section, crimsonOpen
3 Content, paperOpen
4 PhotoOpen
5 ClosingOpen

Slides

File
slides.html
Size
1920 × 1080 px (16:9), five slide types
Use
Reading groups, talks, course sessions
Export
Print to PDF for a deck (one slide per page), or screenshot each slide and place it full-bleed in Google Slides, Keynote or PowerPoint
✓Do
  • One idea per slide; three bullets at most
  • Use crimson for section dividers only
  • Number slides in the footer
✕Don't
  • Put text over the busy part of a photo
  • Fill paper slides with body text
  • Invent figures for a chart
A4 landscapeOpen

Certificate of completion

File
certificate.html
Size
A4 landscape, 297 × 210 mm, built at 1123 × 794 px
Use
Course completion (Technical AI Safety shown, sample name)
Export
Print to PDF at A4 landscape, margins none, background graphics on. Long names shrink to fit.
✓Do
  • Match the band to the programme's level
  • Sign by hand or with a scanned signature
  • Give each certificate a number
✕Don't
  • Make seals or rosettes from the symbol
  • Add ornamental borders
  • Centre the whole page
Email signatureOpen
Newsletter headerOpen

Email signature and newsletter header

File
email-signature.html
Size
600 px wide; header 600 × 200 px
Use
Team signatures; the top of every newsletter
Export
Copy the rendered signature into your mail app, or paste the HTML from the box on the template page. Host horizontal.png and use its full https address.
✓Do
  • Keep tables and inline styles
  • Fall back to Georgia and Arial
  • Use the PNG logo at 32px tall
✕Don't
  • Use SVG logos in email
  • Add quotes, banners or social icons
  • Set the name in bold
ParticipantOpen
Long nameOpen

Name badge

File
name-badge.html
Size
900 × 1200 px (3:4), prints at 75 × 100 mm
Use
Lanyard badges for cohorts and events (Level 2a band shown)
Export
Print to PDF, then impose on A4 at your print shop, or screenshot at 2x
✓Do
  • Make the name the largest thing
  • Leave the punch slot clear
  • Use the name people go by
✕Don't
  • Print crimson on a dark band
  • Truncate long names; let them shrink
  • Add titles or honorifics unless asked