MSPACEZDesign System v1.1
Downloads
Colour

Red is a signal.

Two locked brand colours — #F05C49 and #000000 — a warm neutral scale that lets them breathe, and three UI-only colours. Pairings are judged on accessibility and on visual quality: off-white on red is the preferred display pairing; black on red is kept for small, functional text.

Guideline

From guidelines/02-colour.md

Principle

Red is a signal; off-white is its partner.

Rule

Brand red #F05C49 and black #000000 never change. Display type on red: off-white preferred (white or black allowed). Body text on red: black only, short (≤ 25 words); never white/off-white body on red. Red text only at display size on off-white/white; red on black preferred for numerals. Red ≤ 10% of a surface except field/red modes (≤ 60% field; full red max 1 post in 6).

When to use

Every surface.

When not to use

—

Do
  • Use the pairing matrix (03) at real sizes
  • Keep one red event per surface
Don’t
  • “Text on red is always black” — replaced by the matrix
  • Tints of red as brand colours
  • Mixed red/black words in one headline

ExampleSee board Pairing matrix (03).

The board

Locked red and black, warm neutrals, tested colour pairing matrix by use, logo grounds, proportions by mode

Board 03 · Colour · 1760 × 3069
Open full size ↗
Loading board

The official board from the package, rendered live. Use “Open full size” for 1:1 detail on small screens.

Palette

Click any value to copy it. Locked colours never change between themes.

brand-red Locked RGB 240 92 73 LOCKED brand red. The one signal: marker, red field (≤ 60%), full-red campaign posts (≤ 1 in 6), numerals on black, active tab bar, error border. Never body text; never behind the logo.
brand-black Locked RGB 0 0 0 LOCKED brand black. All primary text, lines, info block, primary buttons, inverse surfaces.
white Support RGB 255 255 255 Digital and document ground; text on black.
paper Support RGB 247 245 242 Off-white / cream. Default warm ground for static graphics, end cards, stationery; the partner colour on brand red (display type, logo plates).
mist Support RGB 239 238 235 Sunken fills: inputs, table stripes, disabled, info panels. Never behind red.
line Support RGB 217 217 217 Hairlines and dividers (decorative, not a text colour).
silver Support RGB 166 166 166 Muted text on black and charcoal only (8.63 : 1 on black). Never on white.
gray Support RGB 107 107 107 Muted text on white/paper/mist: captions, meta, labels (5.33 : 1 on white).
graphite Support RGB 64 64 64 Secondary text: supporting copy, table text (10.37 : 1 on white).
charcoal Support RGB 28 28 28 Dark UI panels, video frames, hover of black buttons.
red-tint UI only RGB 253 236 233 UI only: selected row, booked slot, focus background. Derived from brand red; never in communication.
success UI only RGB 30 122 76 UI only: confirmed/available status text + icon. Never in brand communication.
warning UI only RGB 138 83 0 UI only: limited availability, pending. Never in brand communication.