Colour · RSX Design

RSX red

The colour of the full-colour symbol, taken from the identity files. One value, with no tints, shades or alternatives.

Red marks the symbol, the current state and the one thing to look at. It is never a page background, never a large fill in an interface, and never the colour of a sentence. Signage and warning graphics are the exception: there a red field is the message, and type on it is set in ink.

Brand and interface

Brand colours

--rsx-red and the reproduction values are identity: what the marks are printed and drawn in. They do not change with a theme, and they do not carry meaning in an interface.

Interface colours

--background, --foreground, --accent and the rest are roles. They say what a colour is doing (surface, text, signal) and are redefined by a surface: .surface-ink flips every one of them. --accent has the same value as RSX red today; style the mark with --rsx-red and a state with --accent, so either can change without the other.

Neutrals

Paper surface

The default. RSX reads light: a warm off-white page with ink type and hairline rules.

Paper
Page background.
Surface
A raised panel, where one is needed at all.
Ink
Headings and body text.
Muted
Running text and leads.
Renders as #444442 on paper
Muted, dim
Labels, captions and metadata.
Renders as #6c6c6a on paper
Rule
Hairlines between rows and blocks.
Renders as #d9d8d4 on paper
Rule, mid
Outer edges, control borders, the header rule.
Renders as #c7c6c2 on paper

Ink surface

The deliberate exception: headers, footers and closing bands on the main site, and code. Applied with the .surface-ink class, which flips every token below it.

Ink
Band background.
Surface
A panel on an ink band.
Surface, raised
A panel on that panel.
Paper
Headings and body text.
Muted
Running text.
Renders as #b2b2ae on ink
Muted, dim
Labels and metadata.
Renders as #7f7f7c on ink
Rule
Hairlines.
Renders as #2b2b2a on ink
Rule, mid
Outer edges and control borders.
Renders as #3d3d3c on ink

Interaction

The accent and its states. Identical on both surfaces.

Accent
Current page, active state, link hover, focus ring.
Accent, hover
A filled accent control under the pointer.
Accent, dim
A selected row or a highlighted line. Never a fill behind text the accent also sets.
Renders as #f5e1dd on paper
Rule, hover
The border of a bordered element under the pointer.
Renders as #f8b5b2 on paper

Status

RSX has no green, amber or blue. A status is a word and a marker shape; the accent adds emphasis. These tokens are aliases of the ones above, not new colours.

Open
Public testing
Not open yet
Failed

Status tokens, what each resolves to, its marker and when to use it
Token	Resolves to	Marker	Example label	Use
`--status-active`	`--accent`	Filled square	Open	Running, available, succeeded.
`--status-partial`	`--accent`	Hollow square	Public testing	Usable but changing, degraded, in progress.
`--status-inactive`	`--muted-dim`	Filled square	Not open yet	Closed, paused, not started.
`--status-error`	`--accent`	Cross	Failed	An error. Always stated in words, never by colour alone.

--status-active
Resolves to
--accent
Marker
Filled square
Example label
Open
Use
Running, available, succeeded.
--status-partial
Resolves to
--accent
Marker
Hollow square
Example label
Public testing
Use
Usable but changing, degraded, in progress.
--status-inactive
Resolves to
--muted-dim
Marker
Filled square
Example label
Not open yet
Use
Closed, paused, not started.
--status-error
Resolves to
--accent
Marker
Cross
Example label
Failed
Use
An error. Always stated in words, never by colour alone.

The labels are the main site’s service statuses; an interface uses its own words for its own states. What it may not do is let the colour or the marker carry the state without the word.

Contrast

Every text pairing RSX uses, with its WCAG 2.2 contrast ratio. Translucent text is composited onto its surface first. AA asks 4.5:1 for text and 3:1 for large text (24px, or 19px bold) and for interface parts.

Aa
The quick brown fox
Label
Ink on Paper
16.86:1
Passes AAA
Headings and body text.
Aa
The quick brown fox
Label
Muted on Paper
8.79:1
Passes AAA
Running text and leads.
Aa
The quick brown fox
Label
Muted, dim on Paper
4.74:1
Passes AA
Labels, captions, metadata.
Aa
The quick brown fox
Label
RSX red on Paper
3.10:1
AA for large text only
Eyebrows, references, the current page, link text.
Accepted exception. Below AA for small text. RSX uses it for short mono labels and links by choice; it never sets a sentence.
Aa
The quick brown fox
Label
Paper on Ink
17.82:1
Passes AAA
Text on an ink band.
Aa
The quick brown fox
Label
Muted on Ink
9.31:1
Passes AAA
Running text on ink.
Aa
The quick brown fox
Label
Muted, dim on Ink
4.93:1
Passes AA
Labels on ink.
Aa
The quick brown fox
Label
RSX red on Ink
5.74:1
Passes AA
Accent text on ink. Where red text is fully legible.
Aa
The quick brown fox
Label
Ink on RSX red
5.43:1
Passes AA
Type on a red field: signage, warning blocks.
Aa
The quick brown fox
Label
Paper on RSX red
3.10:1
AA for large text only
Selected text; the hover state of a solid button.
Accepted exception. Below AA for small text. Limited to transient states (selection, hover) whose resting state passes.

The two exceptions are decisions, not oversights, and they are the only two. Any other pairing below AA is a defect. Interface parts (borders that identify a control, focus rings) need 3:1 against what is next to them: the focus ring is the accent at 3.10:1 on paper and 5.74:1 on ink.

Usage

Principles

Identity

Colour (current)

Permitted

Paper page, ink type, one red marker for the current item.

Announcements

Follow along.

Permitted

An ink band closing a paper page, with paper type and a red label.

Warning

Permitted

A red field for signage, with ink type. Never in interface chrome.

Your files are stored at the edge and served from their own domain.

Prohibited

Red as a page or panel background in an interface.

OnlineDegraded

Prohibited

Colours outside the palette for status: green for success, amber for warning.

Prohibited

Several reds, or red competing with a second accent, on one screen.

Reproduction

Pure values for the 'black' and 'white' identity files: print, embroidery, third-party platforms that flatten colour. Not interface tokens.

Black
Single-colour reproduction on light media.
White
Single-colour reproduction on dark media.