msg — design system

Palette

Six families: paper, ink, sky, forest, lantern, surface.

Paper & ink

--paper#f7f1e3

--paper-warm#fbf6e8

--paper-deep#ece3cc

--ink#2d2a24

--ink-soft#524c3f

--ink-faint#8a826f

Sky

--sky-haze#e6eef3

--sky#c8dde9

--sky-deep#88b1cd

Forest

--moss#b8c79a

--forest#6e8b5b

--forest-deep#4d6a3e

Lantern

--gold#e6c073

--sunset#e3a47a

--terracotta#c87b5d

Typography

Three families. Each has one job.

Newsreader

Display · headings · pull quotes

'Newsreader', serif

Every participant is a URL.

Schibsted Grotesk

Body · UI · captions

'Schibsted Grotesk', sans-serif

A fresh humanist grotesque, picked for its warmth and the way its terminals don't read as cold or technical. Reads well at 16–18px for long-form prose.

IBM Plex Mono

Code · kickers · metadata

'IBM Plex Mono', monospace

POST /inbox HTTP/1.1
Content-Type: application/msg+json
Msg-Signature: ed25519 base64...

Type scale

Display drops sharply; body floats around 17px.

h1 / display

A url is identity.

h2 / section

How it works

h3 / sub

POST to send

h4 / label

subsection label

lede / 1.18rem

Genuine origin authentication, no central infrastructure.

body / 17px

Receivers return 2xx only after durably storing the verified message.

caption / 0.9rem

a messaging protocol

Components

The handful of building blocks the site repeats.

Buttons

primary action ghost / secondary

Cards

1

Numbered card

Used in the "How it works" three-up. Italic numeral in terracotta, Newsreader title.

α

Variant title

The same shell with any leading mark — useful when steps aren't ordinal.

Code blocks

// goldmark + chroma render this server-side
res, err := msg.Attempt(ctx, msg.AttemptInputs{
    Sender:    "https://alice.example/inbox",
    Recipient: "https://bob.example/inbox",
    KeyID:     "k1",
    MsgID:     msg.NewRandomID(),
    Payload:   payload,
})

Pull quote / why-block

If you want to receive a message at alice.example/inbox and know it really came from bob.example/inbox, this is the simplest thing that works.

Link list

A featured link — with descriptive trailing prose
Another item — borders separate, terracotta on hover
Third — Newsreader for the link itself, body face for the rest

Prose elements (as used in /spec)

A subsection heading

A paragraph of body text with an inline link, some inline code, and an italic emphasis.

List item one
List item two with a monospace token
List item three

A blockquote sits in moss with a small ornament.

Tables follow:

Field	Type	Notes
`v`	integer	protocol version
`sender`	string	canonical URL
`id`	string	≤ 256 bytes

CSS tokens

Every visible decision lives in a custom property in style.css.

/* paper + ink */
--paper:        #f7f1e3;
--paper-warm:   #fbf6e8;
--paper-deep:   #ece3cc;
--ink:          #2d2a24;
--ink-soft:     #524c3f;
--ink-faint:    #8a826f;

/* sky */
--sky-haze:     #e6eef3;
--sky:          #c8dde9;
--sky-deep:     #88b1cd;

/* forest */
--moss:         #b8c79a;
--forest:       #6e8b5b;
--forest-deep:  #4d6a3e;

/* lantern */
--gold:         #e6c073;
--sunset:       #e3a47a;
--terracotta:   #c87b5d;

/* surface */
--line:         rgba(45, 42, 36, 0.10);
--line-soft:    rgba(45, 42, 36, 0.06);
--radius:       14px;
--radius-lg:    22px;