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 stays with the mark; four named gradients, and no others. 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 or the Brand gradient for hero bands, and Deep for full-bleed backgrounds (see Gradients).
• 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 for the logo, the rings and the badge category bar only; see Gradients for the other three.

Gradients

Four named gradients, each a token with fixed stops and one fixed angle. Use these four and nothing else: don't blend other palette colours, reverse them or turn them.

Contrast, measured at the lightest and darkest point of each gradient (WCAG; 4,5:1 for body text, 3:1 for large text):

Rules:

• One angle per gradient. Deep and Wash run top to bottom at 178°, Brand and Mark left to right at 90°. Don't turn them to fit a layout; crop instead.
• Mark belongs to the logo. It draws the logo, the rings and the badge category bar. The badge category is the only text allowed on Mark: large, bold, white and centred, never on the pink end.
• The programme's back header band uses Brand, like any other header band. Deep is for whole surfaces, Brand for bands on a white page.
• One gradient per surface, with its text colour from the table. Pink accents (dots, rules) sit on Deep or on white, not on Brand.
• No gradients behind sponsor logos. Sponsors sit on Paper in white cards, as on the roll-up and the programme.
• Where a gradient can't be shown (some email clients, single-colour print), use its solid fallback.

Examples

Mark: the badge category bar, the rings on the navy title slide, the logo.

Deep: the roll-up and a LinkedIn card.

Brand: a slide header band and a web call-to-action band.

Wash: a web hero and a certificate.

Do and don't

• Don't put text on the pink end of Mark (white on pink is 3,1:1).
• Don't invent, reverse or re-angle gradients.
• Don't put gradients behind sponsor logos.
• Keep the rings as true circles: crop them, never stretch them.
• Avoid banding on large print (see below).
• Do use one gradient per surface, with its text colour.

Banding and print

A gradient only has as many colours as 8 bits allow between its stops. On screen, browsers smooth this out. In print, the shop's CMYK conversion can turn the flat steps into stripes on large formats. On a 2 m roll-up, Deep's widest step is about 38 mm, Brand's 18 mm and Mark's 14 mm. Wash is the most at risk: its two ends are so close that it has only 19 colours, with steps of up to about 143 mm.

• A4 and A3 are fine as they are.
• For A2 and larger, add ±1 level of noise over Deep and Wash (the PNGs in templates/gradients/ are already dithered this way), and ask for a printed proof before the full run, as for the roll-up.

In Office, email and code

• CSS and Tailwind: background: var(--gradient-forum-deep) or class="bg-forum-deep", from tokens.css and tailwind.js.
• Email: set the solid fallback as background-color and the gradient as background-image; clients that ignore gradients show the solid colour.
• PowerPoint: Title navy and Section have Deep as a native gradient background. The hidden last slide, Gradients, has Deep, Brand and Wash swatches: select one, click Format Painter, then click the shape to fill.
• Word: Word's own gradient fills can't match these. Insert a PNG from templates/gradients/ (Insert > Pictures), set Wrap Text > Behind Text and size it to the page: Deep and Wash come in A4 portrait and landscape, Brand as a 210 × 30 mm header band, and Deep in 1920 × 1080 for screens. Don't use Design > Page Color > Fill Effects > Gradient.

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 the Deep gradient, like the 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), then the hidden Gradients slide (14): copy its swatches with Format Painter. It doesn't show in the slide show.
• 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, Working Group or Association/Org (also Organisation, Association or Working Group name), Country, Category (or Role) and Working Group (a yes/no tick). You can also type into the table, import a CSV, or export the list as a CSV.

3. Category is printed in the gradient bar at the bottom of the badge: Expert, Patient Rep, Organizer or Industry, all in the same colours. Values such as "family" or "parent" (Patient Rep), "staff" or "volunteer" (Organizer), "sponsor" or "pharma" (Industry) and "speaker" or "doctor" (Expert) are mapped automatically.

4. Tick Working Group for the Working Group experts. Only they get the Working Group (SharePoint) QR code on the back.

5. In Badge back, enter the hotel Wi-Fi network and password, the programme link and, once the site exists, the Working Group SharePoint link. They are the same on every badge. Until the SharePoint link is filled in, the maker shows a warning and no badge gets that QR code. Long links (SharePoint sharing links often are) make dense QR codes, and the maker warns about them. Prefer a short permanent link, for example a rettforum.eu address that redirects to the SharePoint site: the QR is cleaner and the printed badges keep working if the SharePoint address changes.

6. Untick anyone you don't want to print.

7. 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.

8. For badges, choose Sides: fronts and backs, fronts only or backs only.

9. Click Print / Save as PDF. In the print dialog, keep Margins: Default and Scale: 100. For double-sided badges, turn on Print on both sides and choose Flip on long edge; on A4 sheets the backs are mirrored so each lands behind its front. Without a duplex printer, print Fronts only, put the sheets back in the tray, then print Backs only.

10. Export SVG downloads a zip with one SVG per badge side (lastname-firstname-front.svg and -back.svg, A6 size, text as outlines and vector QR codes) for a print shop or a design tool.

11. For a print shop, choose Paper: Print shop. Pages are 125 × 168 mm: the 105 × 148 mm badge plus 3 mm bleed (sangrado: the backgrounds run 3 mm past the cut line, so no white edge shows if the cut is slightly off) and crop marks (marcas de corte: thin lines in the corners outside the bleed, showing where to cut). Under What to send, pick either:

    • Template with placeholders. You get 3 pages: a front with <<FirstName>>, <<LastName>>, <<Organisation>>, <<Country>> and <<Category>>, the Standard back and the Working Group back. Download Excel gives rett-forum-badges.xlsx. Its Badges sheet has one row per badge, with columns named like the placeholders and a Back column saying which back goes behind each front. Its Notes column flags names that need shrinking or wrapping. The Instructions sheet gives the format, bleed, crop marks, fonts, sizes in pt, colours and positions. This is what a shop that merges the data itself needs.
    • Every badge, ready to print. Every badge comes with bleed and crop marks, using the Sides setting.

    Print / Save as PDF gives the PDF (choose Margins: None and Scale: 100). Export SVG gives the same pages as SVG files, plus the Excel file, in rett-forum-print-shop.zip.

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.
• Sponsors (roll-up and programme) are listed in templates/data/event.json (sponsors.platinum and sponsors.gold), with their logo files in templates/data/sponsors/. Use the sponsor's own file (SVG, or a PNG of at least 150 dpi at print size), trimmed to the artwork and never recoloured. The build sizes each tier's logos to the same visual area; scale corrects a logo that looks too light or too heavy, and width gives a very wide logo a wider card. The build warns when a PNG logo would print below 150 dpi.
• Programme sessions are in templates/data/programme.json, following the Forum calendar. Each day lists its sessions with a start, an end and a kind: plenary (Blue 900), shared for both tracks together (Blue 50), break (Neutral 100) or social (white with a pink bar). A parallel slot has workingGroups (Blue 100) and patientReps (Purple 100) instead of a kind, and a plenary with several talks lists them in talks. Meal sponsors are not shown. The back holds about 30 rows; the build warns if the programme no longer fits.

"I'm attending" social cards (templates/social/). Each size is laid out on its own rather than cropped, and keeps clear of the areas each platform crops or covers:

• The dates, city, website and organiser come from templates/data/event.json. The host city needs a map position in build/templates/rett-forum/social.mjs (CAPITALS); the build stops with a message if it is missing.
• The hashtag is social.hashtag in event.json. #RettForum2026 is a proposal, to be confirmed before the cards are shared; leave it empty to hide it.
• The map is drawn from Natural Earth land data (public domain), stored clipped to Europe in build/templates/rett-forum/assets/europe-land.json. No photography is used.
• Suggested post text: "I'm attending Rett Forum 2026, the European meeting point for families, clinicians and researchers working on Rett syndrome. See you in Madrid, 6–8 November! www.rettforum.eu", plus the hashtag once it is confirmed.

Regenerate

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

1. Edit the event details (dates, venue, sponsors, signatories, CME credits, badge back Wi-Fi and links, social hashtag) 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, --only print, --only social or --only gradients. Gradient stops and angles come from tokens/brand.json (gradient.forum); change them there, never in a template.

For badge maker changes, run node --test build/templates/rett-forum/maker.test.mjs (it needs Edge or Chrome). The source is in build/templates/rett-forum/maker/.

For social card changes, run node --test build/templates/rett-forum/social.test.mjs (it needs Edge or Chrome). It checks that every size fits its card, keeps text and logo out of each platform's crop zones, and draws the rings as true circles. The source is build/templates/rett-forum/social.mjs.

For presentation changes, run node --test build/templates/rett-forum/pptx.test.mjs to check generated layouts, editable placeholders, circular geometry and the gradient fills. 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.