Use it

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

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

Colour

Brand palette

--color-rettx-purple-50#f3eaf7

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

Tinted backgrounds, chips

--color-rettx-purple-300#b584c7

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

Soft purple: supporting text, gradient end

--color-rettx-purple-500#914daa

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

Wordmark 'rett' (sampled from the logo artwork)

--color-rettx-purple-600#7f3f98

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

Background of the reverse (inverted) logo artwork

--color-rettx-purple-700#6e3a85

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

Hover, dense backgrounds

--color-rettx-purple-900#4f2a66

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

Headlines on light backgrounds

--color-rettx-pink-50#fde6f1

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

Pink tint

--color-rettx-pink-200#f8a5cb

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

Soft pink

--color-rettx-pink-300#e87cd9

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

X gradient start (orchid), shared by every colourway

--color-rettx-pink-400#e967c1

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

--color-rettx-pink-500#ed3385

vs white 3,9:1 · vs black 5,4:1

Brand pink

--color-rettx-pink-600#ee2a7b

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

End of the pink X

--color-rettx-yellow#ffff00

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

End of the warm X (logo only, never for UI)

--color-rettx-cyan#46ffff

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

End of the cool X (logo only, never for UI)

--color-rettx-warm-yellow#f8d24a

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

Warm accent for UI: optimism, events, awareness

--color-rettx-warm-pink#f2a0c2

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

--color-rettx-warm-tint#fdf4da

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

--color-rettx-cool-cyan#6dd3f0

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

Cool accent for UI: clinical, data, research

--color-rettx-cool-violet#b59be0

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

--color-rettx-cool-tint#e7f2fb

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

--color-rettx-indigo#4e4bbf

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

Deep blue-violet

--color-rettx-product-1#435bd0

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

Royal blue (rettxweb --color-1)

--color-rettx-product-2#6b9cd1

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

Sky blue (rettxweb --color-2)

--color-rettx-product-3#a3d5e0

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

Mint (rettxweb --color-3)

--color-rettx-product-4#f0c2a8

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

Peach (rettxweb --color-4)

--color-rettx-product-5#f45d7b

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

Coral (rettxweb --color-5)

--color-rettx-product-1-light#e8edfc

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

--color-rettx-product-2-light#e3f2fd

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

--color-rettx-product-3-light#e8f7fa

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

--color-rettx-product-4-light#fdf1ea

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

--color-rettx-product-5-light#fde8ec

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

--color-rettx-red-dark#d6336c

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

--color-rettx-red-medium#f45d7b

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

--color-rettx-red-light#f8a5aa

vs white 1,9:1 · vs black 11,0:1

--color-rettx-green-dark#3a8d6f

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

--color-rettx-green-medium#55bfa0

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

--color-rettx-green-light#a1e6cf

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

--color-rettx-amber-dark#e6a67a

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

--color-rettx-amber-medium#f0c2a8

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

--color-rettx-amber-light#f7d3b8

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

--color-rettx-amber-lightest#fff3cd

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

--color-rettx-grey-50#fafafa

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

--color-rettx-grey-100#f1f1f1

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

App background

--color-rettx-grey-150#ececec

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

--color-rettx-grey-200#e0e0e0

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

Hairline borders

--color-rettx-grey-300#c0bfbf

vs white 1,8:1 · vs black 11,4:1

Placeholder text, strong borders

--color-rettx-grey-400#9aa3af

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

--color-rettx-grey-500#757575

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

Secondary text

--color-rettx-grey-700#424242

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

--color-rettx-grey-900#333333

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

Body text

--color-rettx-grey-ink#212121

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

h3/h4 headings

Semantic (use these in UI)

--color-brand-primary#914daa

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

Main brand colour: buttons, links, key UI

--color-brand-primary-strong#6e3a85

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

Hover/pressed state and dark backgrounds

--color-brand-secondary#e87cd9

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

Supporting brand colour

--color-brand-accent#ed3385

vs white 3,9:1 · vs black 5,4: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#333333

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

--color-text-heading#4f2a66

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

--color-text-muted#757575

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

--color-text-inverse#ffffff

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

--color-text-link#914daa

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

--color-text-link-hover#6e3a85

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

--color-surface-default#ffffff

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

--color-surface-subtle#fafafa

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

--color-surface-muted#f1f1f1

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

App background

--color-surface-inverse#1a1b21

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

--color-surface-brand#914daa

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

--color-surface-tint#f3eaf7

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

--color-border-default#e0e0e0

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

--color-border-strong#c0bfbf

vs white 1,8:1 · vs black 11,4:1

--color-border-focus#914daa

vs white 5,5:1 · vs black 3,8: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#3a8d6f

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

--color-status-warning#b25e09

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

--color-status-danger#d6336c

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

--color-status-info#1f64c4

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

Gradients

--gradient-x-pink

The X, pink colourway (default). Exact logo stops.

--gradient-x-warm

The X, warm colourway. Exact logo stops.

--gradient-x-cool

The X, cool colourway. Exact logo stops.

--gradient-purple

Marketing default: decks, hero backgrounds

--gradient-product

Product app top navigation

--gradient-cta

Product primary button (pill)

--gradient-pink

Soft pink background for accent moments. Not the X: use x-pink to reproduce the mark.

--gradient-warm

Soft warm background: optimism, events, awareness

--gradient-cool

Soft cool background: clinical, data, research

Shape and elevation

Radius

--radius-none0px

--radius-sm4px

--radius-md8px

--radius-lg12px

Modals, containers, landing cards

--radius-xl15px

Patient cards and product cards

--radius-2xl20px

Shadow

--shadow-xs0px 1px 2px 0px #0000000F

--shadow-sm0px 2px 4px 0px #0000001A

Cards

--shadow-md0px 4px 10px 0px #00000026

Primary CTA

--shadow-lg0px 4px 20px 0px #0000001A

Modals, card containers

--shadow-xl0px 12px 32px 0px #4F2A662E

--shadow-glow-pink0px 0px 0px 4px #ED388C2E

Focus ring

Typography

Family	Role	Licence
Chillax	everything: display, headings, body and UI	ITF Free Font License, not verified for redistribution. The OTFs are archived in source/design-system/fonts (Git LFS) for reference only; they are not published or included in the zip.	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

rettX

--font-size-sm
0.875rem

rettX

--font-size-base
1rem

rettX

--font-size-lg
1.125rem

rettX

--font-size-xl
1.25rem

rettX

--font-size-2xl
1.5rem

rettX

--font-size-3xl
2rem

rettX

--font-size-4xl
2.5rem

rettX

--font-size-5xl
4rem

rettX

Logos

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

rettx-horizontal-cool-color
horizontal · cool · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rettx-horizontal-cool-reverse-color
horizontal · cool-reverse · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rettx-horizontal-reverse-color
horizontal · reverse · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rettx-horizontal-tagline-color
horizontal · tagline · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rettx-horizontal-tagline-cool-color
horizontal · tagline-cool · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rettx-horizontal-tagline-reverse-color
horizontal · tagline-reverse · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rettx-horizontal-tagline-warm-color
horizontal · tagline-warm · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rettx-horizontal-warm-color
horizontal · warm · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rettx-horizontal-warm-reverse-color
horizontal · warm-reverse · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

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

rettx-symbol-cool-color
symbol · cool · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

rettx-symbol-warm-color
symbol · warm · color
SVG · PNG 256 · PNG 512 · PNG 1024 · PNG 2048

Guidelines

rettX: brand guidelines

rettX is the RSE product brand for the rettX app and website. Write the name as rettX: lower-case "rett" and a capital X, including at the start of a sentence.

These guidelines merge the original logo artwork with the earlier rettX Design System pack (built from the rettxweb repo). The pack is archived unchanged in source/design-system/ for reference.

Voice

Tagline (locked): "Unveiling hope for Rett Syndrome." Do not rephrase or translate it.
Warm, plain and hopeful, never clinical or alarmist. "You" means the caregiver.
Use sentence case for headings, buttons and labels. No emoji; use exclamation marks rarely.
Leave room for about 30% text expansion in translations, and design layouts that also work right-to-left.

Colour

Role	Token	Hex	Contrast on white
Primary: wordmark purple	`--color-rettx-purple-500`	`#914DAA`	5,5:1
Inverted-logo background	`--color-rettx-purple-600`	`#7F3F98`	6,8:1
Primary strong / hover	`--color-rettx-purple-700`	`#6E3A85`	8,1:1
Headings (h1, h2)	`--color-rettx-purple-900`	`#4F2A66`	11,3:1
Body text	`--color-rettx-grey-900`	`#333333`	12,6:1
Brand pink	`--color-rettx-pink-500`	`#ED3385`	3,9:1
Indigo	`--color-rettx-indigo`	`#4E4BBF`	6,8:1
Warm accent	`--color-rettx-warm-yellow`	`#F8D24A`	1,5:1
Cool accent	`--color-rettx-cool-cyan`	`#6DD3F0`	1,7:1

Purple, indigo and the greys are safe for text. Use pink only for large display type (at least 24 px, or 19 px bold), icons and highlights.
Warm and cool accents are for fills, illustrations and gradients only, never for text on white.
--color-rettx-yellow (#FFFF00) and --color-rettx-cyan (#46FFFF) are the exact X gradient ends in the logo artwork. Use them only inside the logo, never in UI.
The product palette (--color-rettx-product-1 to -5, plus -light variants) and the status colours (red, green, amber) match src/styles-colors.scss in rettxweb. Use them for charts, categories and app states.
The semantic tokens (--color-brand-primary, --color-text-heading, --color-surface-tint, …) are what components should normally use.

Surfaces

The brand has two surfaces:

Light (default): white or --color-surface-subtle background, purple 900 headings and grey 900 body text.
Brand: a full-bleed purple (--color-rettx-purple-600) or a purple gradient, with white text and the reverse logo. Use it for heroes, onboarding and campaign moments, not for dense product UI.

Gradients

Token	Use
`--gradient-purple`	Default marketing gradient: heroes and brand panels.
`--gradient-product`	Product top navigation.
`--gradient-cta`	Primary call-to-action buttons.
`--gradient-pink`	Accent, used sparingly.
`--gradient-warm`	Optimism: events, awareness days, family stories.
`--gradient-cool`	Clinical: data, research, health information.
`--gradient-x-pink`, `-x-warm`, `-x-cool`	The exact logo X gradients (left to right). For brand illustration that echoes the X; not for UI backgrounds.

Open question: the design system pack does not say whether purple or product is the canonical brand gradient. Until decided, use purple for marketing and product/cta inside the app.

Colourways

The X comes in three colourways: pink (default, no suffix), warm (ends in yellow) and cool (ends in cyan). Use the pink one unless a campaign or context calls for warm (optimism, events) or cool (clinical, research).

Typography

Chillax (Indian Type Foundry, free from Fontshare) is used for everything: display, headings, body and UI.

The font files are not published, because the licence has not been checked for redistribution. Load the font from Fontshare (see fonts.json) or install it locally. The OTFs in source/design-system/fonts/ are for reference only.
Product UI uses weights 300–600. Keep 700 for full-bleed brand moments and 200 (extralight) for large display type only.

Role	Weight	Size	Line height	Notes
Display	600	`clamp(2.5rem, 5vw, 4rem)`	1,1	letter-spacing `tight`
h1	600	32 px (`3xl`)	1,25	purple 900
h2	500	24 px (`2xl`)	1,25	purple 900
h3	500	20 px (`xl`)	1,25	`ink` (`#212121`)
h4	500	18 px (`lg`)	1,5	`ink`
Subtitle / tagline	500	18 px (`lg`)	1,5	purple 500
Body	400	16 px (`base`)	1,5	grey 900
Body small	400	14 px (`sm`)	1,5	grey 500
Caption	400	12 px (`xs`)	1,5	grey 500, letter-spacing `wide`
Eyebrow	600	12 px (`xs`)	1,5	uppercase, letter-spacing `eyebrow` (0,12em), purple 500

Shape, elevation and motion

Radius: cards use --radius-xl (15 px) with --shadow-sm; buttons and chips use --radius-full (pill).
The design system pack named its radii one step lower. Mapping: pack xs = sm (4 px), sm = md (8 px), md = lg (12 px), lg = xl (15 px), xl = 2xl (20 px), pill = full.
Shadows: sm for cards, md for CTAs, lg for modals, glow-pink for focus rings.
Primary CTA: pill shape, --gradient-cta, white text, --shadow-md; on hover scale to 1,05 over --motion-duration-base.
Motion: use --motion-easing-standard by default and decelerate for elements entering the screen. bounce is reserved for rare celebratory moments.

Icons

Use Material Symbols Outlined first, then Font Awesome 6 (Bootstrap Icons only where already in use). Do not hand-draw SVG icons.

Logo

File	Use
`rettx-horizontal-color`	Default (pink X), on white or light backgrounds.
`rettx-horizontal-reverse-color`	White "rett" on purple or dark backgrounds.
`rettx-horizontal-warm-color`, `-cool-color`	Warm and cool colourways, on light backgrounds.
`rettx-horizontal-warm-reverse-color`, `-cool-reverse-color`	Warm and cool colourways on dark backgrounds.
`rettx-horizontal-tagline-*`	With the tagline underneath.
`rettx-symbol-color`, `-warm-color`, `-cool-color`	The X on its own: app icons, avatars, favicons.

TODO: rettx-symbol-* and rettx-horizontal-*-reverse-color (warm/cool) were derived from the horizontal SVGs: wordmark paths removed and the viewBox cropped, or the wordmark fill changed to white. Replace them with proper exports from source/rettX.ai when possible.
TODO: all tagline logos contain live text in Chillax rather than outlines. They only render correctly where Chillax is installed, and the generated PNGs use a fallback font. Re-export them from source/rettX.ai with Type > Create Outlines and replace the SVGs.
No mono versions exist yet.

Decisions taken when merging the design system pack

Purple: the pack used #8B4EA6; the logo artwork is #914DAA. The logo value is kept, and #7F3F98 (sampled from the inverted logo) is purple 600.
X gradients: the pack "softened" the warm and cool ends to #F8D24A and #6DD3F0. These are kept as UI accents (warm-yellow, cool-cyan), but the x-* gradients and the logos use the exact artwork stops.
Not adopted from rettxweb: the message-centre and landing-page palettes (for example indigo-deep #291B6C), which are page-specific.