Color

Merid's palette is one cool blue and a set of ink-tinted neutrals. The accent marks interaction and selection; neutrals carry everything else. Status colours appear as soft tints with strong text, never as large saturated fills.

Rules

Use the accent for things people can act on, and for the current selection. Do not use it for decoration or emphasis.
Separate regions with --mrd-tray before reaching for a border. When a border is needed it is 1px --mrd-line.
Build hierarchy with the three text tones — ink, body, muted — and weight, not with colour.
A page has at most one filled colour block.

Tokens

Accent

Token	Light	Dark	Role
`--mrd-accent`	`#3f63f5`	`#6b8aff`	Interactive elements, selection, focus
`--mrd-accent-hover`	`#3355e6`	`#8aa2ff`	Hover state of accent and links
`--mrd-accent-soft`	`#eef1ff`	`rgba(107,138,255,.14)`	Selected row, icon tile, info tint
`--mrd-accent-strong`	`#2c46b8`	`#a9bbff`	Text on accent-soft
`--mrd-on-accent`	`#ffffff`	`#ffffff`	Text on accent fill

Surfaces

Token	Light	Dark	Role
`--mrd-bg`	`#ffffff`	`#0b0d12`	Page background
`--mrd-surface`	`#ffffff`	`#12151c`	Cards on a tray, dialogs, inputs, menus
`--mrd-tray`	`#f5f6f8`	`#161a22`	Recessed sections, cards on page, hover
`--mrd-tray-2`	`#eceef2`	`#1d222c`	Track on a tray, shimmer
`--mrd-subtle`	`#fbfbfc`	`#10131a`	Table header, window bar, detail pane

Lines

Token	Light	Dark	Role
`--mrd-line`	`#e6e8ec`	`#262b35`	Every hairline
`--mrd-line-strong`	`#cfd4dc`	`#3a404c`	Dashed dropzone, switch-off border

Text

Token	Light	Dark	Role
`--mrd-ink`	`#0f1219`	`#eef0f4`	Headings, strong text
`--mrd-body`	`#535a67`	`#a3a9b5`	Body text
`--mrd-muted`	`#646b78`	`#858c98`	Meta, icons
`--mrd-placeholder`	`#6e7581`	`#7c8390`	Input placeholder

Status

Token	Light	Dark	Role
`--mrd-danger`	`#e5484d`	`#ff6369`	Invalid border, status dot
`--mrd-danger-solid`	`#c92a30`	`#c92a30`	Danger button fill (white text, AA)
`--mrd-danger-solid-hover`	`#b42318`	`#b42318`	Danger button hover
`--mrd-danger-soft`	`#fff0f0`	`rgba(229,72,77,.12)`	Error notice background
`--mrd-danger-strong`	`#b42318`	`#ff8a8e`	Error notice text
`--mrd-warning-soft`	`#fff8eb`	`rgba(245,166,35,.12)`	Warning notice background
`--mrd-warning-strong`	`#93580a`	`#f5c46b`	Warning notice text
`--mrd-success`	`#1f9d63`	`#3ecf8e`	Success icon or dot only
`--mrd-success-soft`	`#ecf8f1`	`rgba(62,207,142,.12)`	Success notice background
`--mrd-success-strong`	`#17744a`	`#7ee2b0`	Success notice text
`--mrd-control-off`	`#d7dbe2`	`#343a46`	Switch off track
`--mrd-tooltip-bg`	`#0f1219`	`#eef0f4`	Tooltip background
`--mrd-tooltip-fg`	`#ffffff`	`#0f1219`	Tooltip text

Contrast

Ratios below are measured against the page background (--mrd-bg) unless noted. The AA thresholds are 4.5:1 for normal text and 3:1 for large text and user-interface components.

Pair	Light	Dark	Use
ink on bg	18.74	17.03	Headings, strong text
body on bg	6.94	8.24	Body text
body on tray	6.42	7.39	Text on recessed sections
accent-strong on accent-soft	6.98	—	Selected items, info tints
danger / warning / success strong on soft	5.94 / 5.46 / 5.30	—	Notices
muted on bg	3.21	4.25	Meta text only
accent on bg	4.32	6.20	Links, focus ring, controls
on-accent on accent	4.32	3.13	Primary button label

Using colour in your own components

css

.notice {
  background: var(--mrd-warning-soft);
  color: var(--mrd-warning-strong);
  border-radius: var(--mrd-radius-lg);
}