Design system
MeIRL proves you’re a person. Everything below exists to make that feel human — warm, plain-spoken, calm — in a category whose visual language defaults to cold crypto-tech.
Principles
01
Privacy you can see
Never claim privacy in copy alone — show it structurally. Every disclosure moment renders both sides: what they learn, and what they never see. The never-see side is always visible and always longer.
02
One tap, one breath
The proof moment is the product’s signature interaction. It gets a brief, calm ceremony — a single breath of animation, never a spinner, never a form. Everything else stays out of the way.
03
Human warmth over machine cold
Warm paper, ink brown, organic radii, a serif with personality, spring motion. Technical depth hides behind progressive disclosure — except pseudonyms, deliberately shown as machine strings to make unlinkability tangible.
04
The badge is the brand
One verified-human mark, drawn once, reused everywhere — including inside other companies’ products, where the sheet keeps MeIRL’s identity so the network stays visible.
05
Plain words, honest states
Claims are sentences a person would say, not attributes. Buttons say what happens next. Nothing pretends to be more certain than the system actually is.
Color
Warm paper and ink brown carry the surface. Terracotta drives action, sage marks the verified state, and a muted taupe is reserved entirely for what stays private. Every text token clears WCAG AA — 4.5:1 for normal text — on every background it is used on. Two of them did not, and were darkened to reach it: ink-faint from #978a79 (3.11:1 on paper) to #70665a (4.54:1 at its worst, on ember-soft), and private from #8b7f70 (3.30:1 on private-soft) to #73695d (4.53:1 there). Both are the lightest values that clear the bar everywhere they appear, so the palette gives up as little warmth as the requirement allows. The cost is real and worth knowing: ink-faint now sits closer to ink-soft than it did, because contrast is a function of luminance and there is no way to raise one without spending the other.
These numbers are measured, not asserted — but by hand, not by a test. The automated suite cannot check them: it renders into jsdom, which loads no stylesheet, so these colors never actually apply. A browser-based check lands with phase 2.
paper
App background
surface
Cards
ink
Primary text
ink-soft
Secondary text
ink-faint
Tertiary text
line
Hairlines
ember
Primary action
ember-soft
Action wash
verified
Verified state
verified-soft
Verified wash
honey
Highlight
private
Never-shared
Typography
Fraunces · display
Warm, slightly wonky serif — the anti-crypto typeface
Prove you’re a person
Instrument Sans · body
Humanist, quiet, legible at every size
Verify your identity once, then prove you’re a real person anywhere on the internet.
Spline Sans Mono · technical
Used only for pseudonyms and machine detail — mono is a signal, not decoration
sf_9x2m-k41t-u8de
The two marks
There are exactly two marks in the system, and they share a colour and a check. That shared part is the family resemblance — this actor is accountable to MeIRL. The shape is what tells you which kind: a heart for the person, a sparkle for their software. Both travel into other companies’ products unchanged, so a person learns them once and reads them everywhere.
Verified human
A real person, proving it themselves, right now. A sage heart with a check cut out of it. This is also the MeIRL logo — the mark and the brand are the same thing on purpose.
The check is load-bearing, not decoration: a bare heart is a like button almost everywhere this mark has to travel. Software never wears it, no matter who it works for.
Agent for a verified human
Software acting under a delegation from someone who has proved they’re a person. Same sage, same check — someone real is accountable for it — in the shape that says you aren’t talking to them.
A sparkle already means software nearly everywhere, so this arrives pre-understood on a service that has never heard of MeIRL.
Shape carries the whole distinction
- Shared — sage and a check: this actor is accountable to MeIRL
- Different — lobed against pointed, which survives greyscale and cropping intact
One cue instead of four is the cost of keeping this simple. It’s a strong cue — but nothing may soften it, and nothing else in the system gets a sage checked shape.
Sharing the colour also means an agent no longer sits lighter than a person. That hierarchy moved to the row.
Size ramp · 20 / 28 / 44 (72 above)
20px is the floor. Below it the check inside the sparkle fades to a notch — the two still separate on silhouette, which is what matters, but the sparkle stops reading as checked. Clear space is half the mark’s width on every side.
On an account
The mark sits with the name, at the same size a verification tick would. An agent gets its own row rather than a modifier on the person’s — it’s a separate actor, not a state of them.
Garry T.
Verified human
Member since March 2026
Garry’s buying agent
Acting for a verified human
Delegated 2 August · expires 9 August
On an interaction
Every action carries the mark of whoever actually took it. In a mixed feed the agent’s rows deliberately sit quieter than the person’s — that hierarchy is the disclaimer doing its work before anyone reads a word.
Joined the on-sale queue
Garry’s agent · acting for a verified human
Reserved 1 General Admission · $149
Garry’s agent · acting for a verified human
Confirmed the purchase
Garry T. · verified human
Left a review
Garry T. · verified human
Reviews need the person — no delegation covers this.
Inside someone else’s brand
The marks keep their own colour on a host’s surface, the same way the proof sheet does. A service restyling them to match its palette would break the one property that makes them worth adopting: they mean the same thing on every service, or they mean nothing.
One caveat, stated here because a host shouldn’t have to discover it: sage on a deep background measures 2.7:1, under the 3:1 WCAG asks of a meaningful graphic. So on a dark or saturated surface the mark goes on a paper plate — it keeps its colour and brings its own background. Sage is the mark; the fix is a background, never a lighter green. A text label beside it works too, since the meaning then travels in words.
Solstice Festival · queue
The rules
Always
- Put the agent mark wherever the human mark would have gone, the moment software is the one acting.
- Keep the scope one tap away. A mark with no way to see what the agent can do is a claim, not a disclosure.
- Name the agent after its person — “Garry’s agent” — so accountability stays legible without exposing anyone.
Never
- Show the human mark for an agent, however faithfully it acts for someone. That mark has one meaning and it isn’t shareable.
- Show the agent mark for software with no verified principal. That’s an unaccountable bot, and it gets no mark at all — the absence is the signal.
- Recolour, rotate, or restyle either mark, or round the sparkle’s points toward the heart’s lobes. Shape is the only thing telling them apart.
- Give anything else in the system a sage checked shape, or let an agent inherit a claim its person hasn’t proved.
Components
Button
Chip
VerifiedBadge — the human mark, and the brand
AgentBadge — the same sage and check, a different shape
plated — for saturated and dark surfaces
AgentAttribution — the disclaimer that travels with it
Garry’s buying agent
Acting for a verified humanPhase 3 · not yet builtA verified person set this agent up and answers for it. They didn’t do this themselves, and it can only do what’s listed here.
On Solstice Festival, it can
- Hold a place in the on-sale queue
- Buy one General Admission ticket, up to $200
It can never
- Buy a second ticket, or buy again later
- Resell, transfer, or refund anything
- Post, review, or message anyone as Garry
- Prove any claim Garry hasn’t already proved
- Touch any other service Garry is on
- Act at all after 9 August
How anyone can check this
The delegation is signed by the person’s credential, so Solstice Festival can verify offline that a verified person authorised this agent — without learning which person.
Everything the agent does is attributed to the agent, not to the person. If it causes harm, inside a dispute, the custodians and the panel together can reach the person accountable for it; Solstice Festival still never sees who they are.
They can revoke it at any moment, and it stops working everywhere at once. It expires on its own on 9 August 2026.
dlg_sf_3k9p-2m41
DisclosurePanel — privacy you can see
Solstice learns
- I’m a real person, and new here
- I’m over 18
They never see
- Your name
- Your face or photo
- Your date of birth
- Your address
- Your documents
- Your other accounts
- Your activity anywhere else
ServiceIdentityCard
Kindling
Dating
They see you as
kn_44rq-p0zh-wm2c
This identity works only here. No other service can match it to you.
VerifyStepper — where you are in enrollment
Step 3 of 6Confirm it’s you
- Choose a root — done
- Read the document — done
- Confirm it’s you
- Check the registry
- Seal the evidence
- Hold the credential
VendorCard — one door into the network
CapturedFields — read, then sealed
- Full nameGarry Tan
- Date of birth•• ••• ••••
- Document numberP4•••••821
- NationalityUnited States
- Expires
- Portrait photo
- Full nameGarry Tan — gone from the vendor
- Date of birth•• ••• •••• — gone from the vendor
- Document numberP4•••••821 — gone from the vendor
- NationalityUnited States — gone from the vendor
- Expires9 August 2031 — gone from the vendor
- Portrait photoRead from the chip — gone from the vendor
WitnessRing — three of five, and one of them is us
3 / 5
3 needed
- Cascadia Witness Co-opPortland, Oregonresponded
- Universidade de CoimbraCoimbra, Portugalresponded
- Norrsken FoundationStockholm, Swedenresponded
- Kōkua Digital TrustHonolulu, Hawai‘iwaiting
- MeIRLusOne signature of fivewaiting
PartyLedger — privacy you can see, during enrollment
Who holds what, right now
Watch the middle column fill up and then empty. Watch the last one stay as it is.
You
On your device, behind your passkey
- Your document, in your hand
Meridian Verify
The identity vendor doing the checking
- Full name
- Date of birth
- Document number
- Nationality
- Expires
- Portrait photo
Held in the clear only while the check runs.
MeIRL & the registry
The clearinghouse — and, on this path, also the validator
Nothing yet.
ProofSheet — the signature interaction
Four stages in one breath: preview, passkey, proving, bloom. It keeps MeIRL’s paper identity wherever it appears, so the network is recognizable inside any partner’s product.
Motion
Two easings, nothing linear. --ease-spring for entrances and the bloom, --ease-settle for everything else. All of it collapses to instant states underprefers-reduced-motion.
sheet-up
The sheet arriving
fade-rise
Content settling in
bloom + bloom-ring
The proof moment
shred
The working copy being struck out
shimmer
A document being read
pulse-soft
Waiting on a person or a witness