Use it

Web (CSS variables)	tokens.css	`<link rel="stylesheet" href="https://rett-europe.github.io/brand/v0.1.0/rett-forum/tokens.css">`
Tailwind preset	tailwind.js	`presets: [require('./vendor/rett-forum-tailwind.js')]`
Email (flat hex, px)	email.json	`https://rett-europe.github.io/brand/v0.1.0/rett-forum/email.json`
Fonts	fonts.json
Everything	rett-forum.zip	Tokens, logos (SVG + PNG), fonts, templates, guidelines

Pin a version (/v0.1.0/) in anything you ship. /latest/ always moves to the newest release.

Colour

Brand palette

--color-rse-blue#3042a0

vs white 8,7:1 · vs black 2,4:1

RSE dark blue (logo hands and wordmark)

--color-rse-yellow#f9c815

vs white 1,6:1 · vs black 13,3:1

RSE yellow (logo stars and 'rse')

--color-rse-light-blue#71b6f2

vs white 2,2:1 · vs black 9,7:1

RSE light blue

--color-forum-blue-50#eef1f9

vs white 1,1:1 · vs black 18,6:1

--color-forum-blue-100#d5dcf2

vs white 1,4:1 · vs black 15,3:1

--color-forum-blue-300#8fa3dd

vs white 2,5:1 · vs black 8,5:1

--color-forum-blue-500#3f5fc0

vs white 5,8:1 · vs black 3,6:1

--color-forum-blue-700#163a9c

vs white 9,9:1 · vs black 2,1:1

Rett Blue — primary

--color-forum-blue-900#0d2366

vs white 14,5:1 · vs black 1,4:1

--color-forum-purple-50#f7f1f9

vs white 1,1:1 · vs black 18,9:1

--color-forum-purple-100#eee3f3

vs white 1,2:1 · vs black 16,9:1

--color-forum-purple-300#cdaedb

vs white 2,0:1 · vs black 10,7:1

--color-forum-purple-500#a66cbe

vs white 3,8:1 · vs black 5,5:1

--color-forum-purple-700#8642a0

vs white 6,4:1 · vs black 3,3:1

Forum Purple — secondary

--color-forum-purple-900#4e2260

vs white 12,2:1 · vs black 1,7:1

--color-forum-neutral-100#e6e8ef

vs white 1,2:1 · vs black 17,2:1

--color-forum-neutral-300#c4c6d2

vs white 1,7:1 · vs black 12,4:1

--color-forum-neutral-500#6a6c7e

vs white 5,2:1 · vs black 4,1:1

--color-forum-neutral-700#3b3d4e

vs white 10,7:1 · vs black 2,0:1

--color-forum-neutral-ink#1b1d2b

vs white 16,7:1 · vs black 1,3:1

--color-forum-neutral-paper#f6f7fa

vs white 1,1:1 · vs black 19,6:1

--color-forum-pink#e8669f

vs white 3,1:1 · vs black 6,8:1

Mark accent — logo, rules, dots, data highlights only. Never text on white (3,1:1).

--color-forum-mark-start#3a3fa6

vs white 8,6:1 · vs black 2,4:1

Mark gradient, 0%

--color-forum-mark-mid#8642a0

vs white 6,4:1 · vs black 3,3:1

Mark gradient, 55%

--color-forum-mark-end#e8669f

vs white 3,1:1 · vs black 6,8:1

Mark gradient, 100%

Semantic (use these in UI)

--color-brand-primary#163a9c

vs white 9,9:1 · vs black 2,1:1

--color-brand-primary-strong#0d2366

vs white 14,5:1 · vs black 1,4:1

Hover/pressed state and dark backgrounds

--color-brand-secondary#8642a0

vs white 6,4:1 · vs black 3,3:1

--color-brand-accent#e8669f

vs white 3,1:1 · vs black 6,8:1

--color-brand-on-primary#ffffff

vs white 1,0:1 · vs black 21,0:1

--color-text-default#1b1d2b

vs white 16,7:1 · vs black 1,3:1

--color-text-heading#1b1d2b

vs white 16,7:1 · vs black 1,3:1

--color-text-muted#6a6c7e

vs white 5,2:1 · vs black 4,1:1

--color-text-inverse#ffffff

vs white 1,0:1 · vs black 21,0:1

--color-text-link#163a9c

vs white 9,9:1 · vs black 2,1:1

--color-text-link-hover#8642a0

vs white 6,4:1 · vs black 3,3:1

--color-surface-default#ffffff

vs white 1,0:1 · vs black 21,0:1

--color-surface-subtle#f6f7fa

vs white 1,1:1 · vs black 19,6:1

--color-surface-muted#eef1f9

vs white 1,1:1 · vs black 18,6:1

--color-surface-inverse#1b1d2b

vs white 16,7:1 · vs black 1,3:1

--color-surface-brand#163a9c

vs white 9,9:1 · vs black 2,1:1

--color-border-default#e6e8ef

vs white 1,2:1 · vs black 17,2:1

--color-border-strong#c4c6d2

vs white 1,7:1 · vs black 12,4:1

--color-border-focus#163a9c

vs white 9,9:1 · vs black 2,1:1

Core neutrals and status

--color-white#ffffff

vs white 1,0:1 · vs black 21,0:1

--color-black#000000

vs white 21,0:1 · vs black 1,0:1

--color-neutral-50#f7f7f8

vs white 1,1:1 · vs black 19,6:1

--color-neutral-100#edeef0

vs white 1,2:1 · vs black 18,1:1

--color-neutral-200#dcdde1

vs white 1,4:1 · vs black 15,5:1

--color-neutral-300#c2c4cb

vs white 1,7:1 · vs black 12,1:1

--color-neutral-400#9a9da8

vs white 2,7:1 · vs black 7,8:1

--color-neutral-500#737784

vs white 4,5:1 · vs black 4,7:1

--color-neutral-600#575a66

vs white 6,9:1 · vs black 3,1:1

--color-neutral-700#41444e

vs white 9,7:1 · vs black 2,2:1

--color-neutral-800#2b2d35

vs white 13,7:1 · vs black 1,5:1

--color-neutral-900#1a1b21

vs white 17,2:1 · vs black 1,2:1

--color-status-success#1e7f4f

vs white 5,0:1 · vs black 4,2:1

--color-status-warning#b25e09

vs white 4,7:1 · vs black 4,5:1

--color-status-danger#c0362c

vs white 5,5:1 · vs black 3,8:1

--color-status-info#1f64c4

vs white 5,7:1 · vs black 3,7:1

Shape and elevation

Radius

--radius-none0px

--radius-sm4px

--radius-md8px

--radius-lg12px

--radius-xl16px

Typography

Family	Role	Licence
Montserrat	headings, display, eyebrows	SIL Open Font License 1.1	source
Figtree	body text, UI, captions	SIL Open Font License 1.1	source

--font-family-sans

The quick brown fox jumps over the lazy dog

--font-family-heading

The quick brown fox jumps over the lazy dog

--font-family-body

The quick brown fox jumps over the lazy dog

--font-family-mono

The quick brown fox jumps over the lazy dog

Size scale

--font-size-xs
0.75rem

Rett Forum

--font-size-sm
0.875rem

Rett Forum

--font-size-base
1.0625rem

Rett Forum

--font-size-lg
1.1875rem

Rett Forum

--font-size-xl
1.375rem

Rett Forum

--font-size-2xl
1.5rem

Rett Forum

--font-size-3xl
2rem

Rett Forum

--font-size-4xl
2.75rem

Rett Forum

--font-size-5xl
4rem

Rett Forum

Logos

rett-forum-stacked-color
stacked · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rett-forum-stacked-mono-dark
stacked · mono-dark
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rett-forum-stacked-mono-light
stacked · mono-light
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

Guidelines

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

Role	Token	Hex	Contrast on white
Rett Blue: primary	`--color-forum-blue-700`	`#163A9C`	9,9:1
Forum Purple: secondary	`--color-forum-purple-700`	`#8642A0`	6,4:1
Ink: body text	`--color-forum-neutral-ink`	`#1B1D2B`
Neutral 500: secondary text	`--color-forum-neutral-500`	`#6A6C7E`	5,2:1
Pink: mark accent	`--color-forum-pink`	`#E8669F`	3,1:1

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

Style	Font	Size / line height
Display	Montserrat 800	64/68
H1	Montserrat 800	44/48
H2	Montserrat 600	32/38
H3	Montserrat 600	22/28
Eyebrow	Montserrat 600, uppercase, +14% tracking	13
Body L	Figtree 400	19/30
Body	Figtree 400	17/26
Small / caption	Figtree 500	14 / 12

Both fonts are SIL Open Font License. Load them from Google Fonts (see fonts.json).

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

File	Use
`rett-forum-stacked-color`	Default, on white or light backgrounds.
`rett-forum-stacked-mono-dark`	Single colour (black) for print and fax.
`rett-forum-stacked-mono-light`	White, on Blue 700 or photography.

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.

Source

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