Use it

Web (CSS variables)	tokens.css	`<link rel="stylesheet" href="https://rett-europe.github.io/brand/v0.1.0/rse/tokens.css">`
Tailwind preset	tailwind.js	`presets: [require('./vendor/rse-tailwind.js')]`
Email (flat hex, px)	email.json	`https://rett-europe.github.io/brand/v0.1.0/rse/email.json`
Fonts	fonts.json
Everything	rse.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

Semantic (use these in UI)

--color-brand-primary#3042a0

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

Main brand colour: buttons, links, key UI

--color-brand-primary-strong#000000

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

Hover/pressed state and dark backgrounds

--color-brand-secondary#71b6f2

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

Supporting brand colour

--color-brand-accent#f9c815

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

Highlights; use sparingly, never for body text

--color-brand-on-primary#ffffff

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

Text and icons on primary

--color-text-default#1a1b21

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

--color-text-heading#1a1b21

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

--color-text-muted#575a66

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

--color-text-inverse#ffffff

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

--color-text-link#3042a0

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

--color-text-link-hover#000000

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

--color-surface-default#ffffff

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

--color-surface-subtle#f7f7f8

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

--color-surface-muted#edeef0

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

--color-surface-inverse#1a1b21

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

--color-surface-brand#3042a0

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

--color-border-default#dcdde1

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

--color-border-strong#9a9da8

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

--color-border-focus#3042a0

vs white 8,7:1 · vs black 2,4: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
Segoe UI	body and headings (letters, documents, presentations)	Microsoft proprietary; ships with Windows and Office. Do not redistribute.	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 Syndrome Europe

--font-size-sm
0.875rem

Rett Syndrome Europe

--font-size-base
1rem

Rett Syndrome Europe

--font-size-lg
1.125rem

Rett Syndrome Europe

--font-size-xl
1.25rem

Rett Syndrome Europe

--font-size-2xl
1.5rem

Rett Syndrome Europe

--font-size-3xl
2rem

Rett Syndrome Europe

--font-size-4xl
2.75rem

Rett Syndrome Europe

--font-size-5xl
4rem

Rett Syndrome Europe

Logos

rse-horizontal-color
horizontal · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rse-horizontal-symbol-right-color
horizontal · symbol-right · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rse-symbol-color
symbol · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

Guidelines

Rett Syndrome Europe: brand guidelines

Rett Syndrome Europe (RSE) is the master brand. Other RSE brands, such as Rett Forum, extend it.

Colour

Role	Token	Hex	Contrast on white
Primary: dark blue (logo hands, wordmark)	`--color-rse-blue`	`#3042A0`	8,7:1
Accent: yellow (logo stars, "rse")	`--color-rse-yellow`	`#F9C815`	1,6:1
Secondary: light blue	`--color-rse-light-blue`	`#71B6F2`	2,2:1

Use dark blue for text, links, buttons and dark backgrounds.
Yellow and light blue are for highlights, shapes and backgrounds only. Never use them for text on white. Yellow text on dark blue works (5,5:1).
In UI code, use the semantic tokens (--color-brand-primary, --color-text-default, --color-surface-*) rather than the palette, so the code works across brands.

Typography

Segoe UI for everything, at 11 pt and justified in documents (from the original brand notes).
Segoe UI is a Microsoft system font. It is not redistributable, so it is not shipped here. On the web, the token stack falls back to the platform's system UI font.
TODO: confirm whether the RSE wordmark uses a different typeface, and whether a web font should replace Segoe UI for non-Windows readers.

Logo

File	Use
`rse-horizontal-color`	Default. Symbol on the left, "rse" and tagline on the right.
`rse-horizontal-symbol-right-color`	Alternative lockup with the symbol on the right.
`rse-symbol-color`	Symbol only (hands and stars): avatars, favicons, small spaces.

Keep clear space around the logo of at least the height of one star.
Do not recolour, stretch, rotate, add effects or place it on busy photography.
TODO: export mono-dark and mono-light versions of each layout from Illustrator (brands/rse/source/). Until then, use the colour logo on white or light backgrounds only.

Templates

The templates/ folder (included in rse.zip) contains:

rse-letter-template.dotx: Word letterhead.
rse-presentation-template.pptx: PowerPoint template.