Rett Forum: brand guidelines

Rett Forum is the RSE event brand. It extends the RSE master brand. The current identity is the 2026 "Clinical Clarity" system. A future rebrand will ship as a new major version, so materials pinned to an older version keep working.

Rett blue leads, purple supports. Pink and the gradient stay with the mark. Montserrat for headings, Figtree for everything you read.

Colour

Each colour has a full 900 to 50 scale (see the swatches above).

• Text: Ink on white or Paper. Use Neutral 500 for secondary text.
• Links and actions: Blue 700. On hover, shift to Purple 700.
• Surfaces: White, Paper (#F6F7FA) and Blue 50. Use Blue 700 for full-bleed hero bands.
• Pink: never use it for text on white (3,1:1). Use it for rules, dots and data highlights only.
• Mark gradient: #3A3FA6 → #8642A0 → #E8669F (0%, 55%, 100%). Use it only in the logo and logo-derived graphics.

Typography

Both fonts are SIL Open Font License. On the web, load them from Google Fonts (see fonts.json). For the desktop, install the TTFs in fonts/ (they're also in the brand zip).

Components

These are taken from the source design system.

• Buttons: pill shape (--radius-full), Figtree 600, 15 px.
  • Primary: Blue 700 background with white text; on hover, Blue 900.
  • Secondary: 1,5 px Blue 700 outline with Blue 700 text; on hover, a Blue 50 fill.
  • Text: Blue 700 and underlined; on hover, Purple 700.
  • On Blue 700 bands, the primary button is white with blue text, and the secondary button has a white outline.
• Tags: pill shape, Figtree 600, 13 px. Use a tinted fill with dark text: Blue 50/Blue 700, Purple 100/Purple 900 or Neutral 100/Neutral 700. A "live" tag has a pink dot and a Neutral 300 outline.
• Cards: white, 12 px radius (--radius-lg), 1 px light border. Eyebrow in Montserrat 600 11 px, Purple 700, +14% tracking.
• Inputs: 8 px radius (--radius-md), 1,5 px Neutral 300 border, 16 px text.

Logo

• The current logo includes "EUROPEAN EDITION 2026".
• TODO: these SVGs were derived automatically from source/Rett Forum_v5.ai (gradients reconstructed from the PDF content). They look correct, but please replace them with real Illustrator exports (File > Export > Export As > SVG, type outlined) when convenient.
• No horizontal or symbol-only versions exist yet.

Templates

These are in templates/ and in the brand zip.

Deck:

• Add slides with Home > New Slide and pick a "Rett Forum ·" layout.
• Title keeps Rett Blue 700 (#163A9C); Title navy uses Blue 900 (#0D2366), matching the Speaker heading and Section background. Both use subtly offset circular rings; the other layouts keep their original artwork.
• The original Agenda remains available. Four alternatives follow its sample: Agenda timeline (five time markers), Agenda tiles (four sessions with format/speaker lines), Agenda split day (large day label on navy and four sessions), and Agenda two days (two columns, four sessions each). Their times, session titles and day labels are editable placeholders, available on new slides as well as the samples. Duplicate a slide for a longer programme.
• Speaker and Content + image have circular picture placeholders. Click the picture icon inside the placeholder to insert a photo, then use Picture Format > Crop to adjust its position. Use Title only for an uncropped chart or rectangular image instead of inserting it into the circular photo slot.
• Sample order: Title (1), Title navy (2), Agenda (3), timeline (4), tiles (5), split day (6), two days (7), Section (8), Speaker (9), Content + image (10), Numbers (11), Quote (12), Closing (13).
• Fonts are embedded, so the deck looks right everywhere. To edit text with the correct fonts, install the TTFs in fonts/.
• New slides don't show a slide number automatically. Use Insert > Slide Number to add it.

Badges and certificates: use the maker.

1. Open rett-forum-badge-maker.html in Edge or Chrome. Use the copy in templates/ after a git pull, the one in the brand zip, or the hosted copy at …/latest/rett-forum/rett-forum-badge-maker.html. It opens with sample people, so you can try it straight away.
2. Click Paste from Excel, copy the rows (with or without the header row) and paste them in. The maker recognises columns such as First name, Last name, Full name, Organisation, Country and Role. You can also type into the table, import a CSV, or export the list as a CSV.
3. Role sets the colour bar: Family (gradient), Speaker (purple), Delegate (blue) or Organiser (ink). Values such as "parent", "faculty" or "staff" are mapped automatically. Days and QR are optional; leave them empty to hide them.
4. Untick anyone you don't want to print.
5. Pick Badges (A6, one per page, or A4 with 4 per sheet to cut) or Certificates (A4 landscape), and fill in the event and signatory details for the certificates.
6. Click Print / Save as PDF. In the print dialog, keep Margins: Default and Scale: 100.

Long names shrink to fit automatically. The list is saved only in your browser on this computer and is never uploaded; Clear list removes it.

Print files:

• The PDFs are RGB, and print shops convert them to CMYK. Ask for a proof on the roll-up, because the blues and the pink shift the most.
• Check each printer's bleed and safe-area requirements before sending.

Regenerate

The templates are generated from code and data; don't edit the files by hand.

1. Edit the event details (dates, venue, signatories, CME credits) in templates/data/event.json. These are the defaults the maker opens with; templates/data/sample-people.csv holds its sample people.
2. Run npm run templates, or npm run templates -- --only pptx, --only maker or --only print.

For presentation changes, run node --test build/templates/rett-forum/pptx.test.mjs to check generated layouts, editable placeholders and circular geometry. The source is build/templates/rett-forum/pptx.mjs; regenerate and commit the LFS deck together with it. Render changes in PowerPoint and check picture insertion before publishing.

Attendee lists are personal data. Never commit them to the repo. Keep real lists and the PDFs you print outside the repo.

Source

source/Rett Forum Design System.html is the original design system page. Open it in a browser to see the components.