/ Magenta Design System

HotelMap × HelmsBriscoe · Instant Small Groups

Magenta.

A gallery-white, ink-on-paper system with a single magenta signal. One source of truth — tokens.css — drives the entire application: every colour, size, radius and type value is declared there exactly once. This page renders those same tokens live. Edit a token, the app and this page move together.

Gallery whiteNear-black inkMagenta #ca2c8b Mark Pro · Libre Franklin · Yantramanav0 radii1px hairlinesNo shadows8px grid

Colour

live swatches · toggle Light / Dark to compare

Accent — magenta (the one signal colour)

--accent

#ca2c8b / #e260aa

The live / next action. Used sparingly.

--accent-hover

#b3247a / #ea78b8

Rollover on the accent fill.

--accent-strong

#97206a / #f3a3ce

Links & inline edit text (legible).

--accent-tint

#fbeaf4 / #251a23

Selected wash, event-night cells.

Paper & ink — neutral greyscale

--bg-app

#ffffff / #100f11

The app canvas.

--surface

#ffffff / #1a181b

Cards, bars, panels.

--surface-sunken

#f7f7f8 / #211f24

Shaded rows, the left column.

--text-heading

#161412 / #f3f0ee

Headings & ink markers.

--text-body

#2b2926 / #cdcac4

Body text.

--text-muted

#6e6a62 / #948f89

Secondary / meta.

--text-faint

#9b968d / #6c6962

Faint labels, NO-FIT pins.

--border

ink @ ~12%

Every hairline rule & border.

Secondary & status

--secondary

#0095C8

Single-room path only (the entry choice).

--status-success

#1F9D6B

Confirmed / paid.

--status-warning

#E0892B

Caution / pending.

--status-danger

#D2493B

Cancellations & blockers only.

The whole palette derives from ~16 brand knobs at the top of tokens.css. To recolour the entire app, change --brand-accent and its ramp; to swap the type, change --brand-font-display / -body / -num. Nothing else moves.

Type

display / body / figures / code

Mark Pro

Display — marquee titles, hotel names, totals. Bold / Heavy.

Libre Franklin

Body — the entire UI. Franklin Gothic lineage.

123

Yantramanav

Figures, prices, codes, eyebrows & labels.

£0

IBM Plex Mono

Reference codes & tabular rates only.

t-displayMark Pro · 40 / 700

11 rooms · sleeps 19

t-title-1Mark Pro · 32 / 700

ABA Congress 2026

t-title-2Mark Pro · 24 / 700

Pick a hotel

t-title-320 / 600

Review dates

t-lead18 / 400

Nine hotels can host this group — choose one to lock in your price.

t-body16 / 400 / 1.5

Per-guest dates override the event default. Names are gathered after booking.

t-body-sm14 / 400

One bed. Sleeps 2.

t-label12 / 600 / .08em / UPPER

Official hotels

t-figureYantramanav · tnum

£3,080 — £4,840 · 24 nts

Space & Shape

8px baseline grid · square corners · hairlines

Spacing scale — multiples of the 8px unit

--space-4 4px · ½u — inline gaps

--space-8 8px · 1u — the baseline

--space-12 12px — control padding

--space-16 16px · 2u — group gaps

--space-24 24px · 3u — block padding / gutter

--space-32 32px · 4u — rail padding

--space-48 48px · 6u — section breaks

Shape rules

Radius — always 0

Every radius token (2xs → pill) resolves to 0. The system is square.

Border — 1px hairline

One weight everywhere: 1px solid var(--border). 2px ink rules mark major section heads.

Elevation — none

--shadow-card & --shadow-btn are none. Float = a 1px ring, never a blur.

Motion

restrained · purposeful · reduced-motion safe

Brand sting. On first load only (once per session), the HelmsBriscoe wordmark assembles letter-by-letter on black, settles, holds, then the veil dissolves to reveal the loaded front door behind.

Gantt entrance

Common Fate. Rows fade + rise in together on stage entry (55ms stagger), one-shot — never on edit-rebuilds.

State transitions

Hovers cross-fade fills/colours over .12–.15s. The summary panel minimises smoothly as the viewport narrows. All motion is gated behind prefers-reduced-motion; print & PDF show the static end-state.

Iconography

line-art beds · monochrome glyphs · no emoji

Bed pictograms — line-art, inherit ink via currentColor

Single · one bed

Double · two pillows

Twin · two beds

Generated by one shared helper — ISG.bedIcon(type, size) — so the configurator and gantt always match. Stroke 1.1, square joins softened only at the bed corners.

Glyph set — the only other decoration

→←↻✓✉⚠★✕·£

No emoji, ever. Status and meaning come from words + these monochrome glyphs, never from colour alone and never from a coloured pictograph.

Components

the real classes, rendered live

Buttons

Primary fills ink → magenta on hover. Cyan = the single-room path only.

Stepper

Chips

✓BreakfastParking

Square hairline controls. ON = ink fill, not accent.

Room row — with bed icon

Double rooms

One bed. Sleeps 2

Twin rooms

Two beds. Sleeps 2

Bed icon leads, text centre, stepper right. Hairline-separated, flat fill.

Section head & badge

Rooms

Official hotels

Numbered badges are ink (wayfinding). On a clickable header row, the badge flips to magenta on hover.

Slider

Walk radius8 min

020 min

1px track, square ink thumb → accent on grab.

Map pins & tags

£185 £228 No fit

Ink £-tag = fits. Magenta = selected. Dashed faint = no fit. Maps use CARTO Positron — white land, no clutter.

Gantt — stay interval

3NTS

Solid accent interval; drag handles each edge. Labels stay uniform — “3 NTS” at every width.

Who-pays chips

You Guest B'fast

Ink = you (booker). Outline = per-guest. No accent fill here.

Reconfigure link

Edit ↺

Mode toggle

One reconfigure link everywhere (magenta, underline on hover). Floating sun/moon toggles light ↔ dark; default is light.

Tokens

read live from tokens.css · click any value to copy

The complete fine print, pulled straight from the source of truth. Click a row to copy --token: value;, or “Copy block” to grab a whole layer. Changing a value here is changing the app — edit the matching block in app/tokens.css.