/
01Core Idea

Send it to your own inbox in two taps.

mailself turns the iOS Share Sheet into a shortcut to your own email address.

02Positioning

For the email you already send yourself.

02.1Market Position

mailself is an iPhone application for people who already use their inbox to save links or other relevant information for later. It turns emailing yourself into a Share Sheet action.

02.2Points of Difference
  • The Safari link is already selected.
  • Your verified email address is already set.
  • There is no email to compose or recipient to choose.
  • One tap starts the send. Undo remains available for five seconds before the send is released.
03Audience

For people who already send themselves links.

03.1Audience Summary

Tech-affine users who use their inbox to keep important information they want to come back to later.

03.2Usage Context

The link is already found. The destination is already known: the inbox. mailself removes the compose step in between.

03.3Market
  • Primary: United States
  • Platform: iPhone
  • Product language: English
04Brand Identity

The language stays as direct as the send.

mailself names the action, the destination and the current state. It does not turn a small task into a bigger story.

04.1Wordmark and symbol

The symbol is four filled circles on one centre, each carrying the same opacity.

mailself
WordmarkGeist 300 / 500 · 0.92 · 0.45
Symbol4 · 0.28
How the wordmark is set
mailself
52
mailself
24
mailself
16
TypefaceGeist
Upper lineGeist 300
Lower lineGeist 500
CaseLowercase throughout
Line height0.92
Letter-spacing0 / fitted to equal width
Line length4 and 4 characters
Opacity1 and 0.45
One line, where the stack does not fit
mailself
24 / 500

Letter-spacing −0.035em, the second word at 0.45 opacity. Secondary setting for narrow surfaces; the stacked lock stays the primary one. Where letter-spacing is set on centred text, a matching negative right margin cancels the trailing space behind the last letter.

How the symbol is built
Canvas100 × 100 units
ShapeFilled circle
Layers4
Centre50 / 50
Radii46 · 34 · 22 · 11
Radius step12 · 12 · 11
Outer size92 of 100
Clear space4 on every side
Opacity per layer0.28
Four tones from one value
ZoneLayersEffective
Outer ring10.280
Second ring20.482
Third ring30.627
Centre40.731
In the tile
Share Sheet · 60 pt
Settings · 29 pt

Both tiles show the symbol at 57 percent of the tile edge. The corner mask comes from iOS, not from the asset.

One value, four tones.
The ring versions of the mark carried a three-unit stroke, and stroke is the first thing to break when the tile gets smaller. Filled layers have no stroke: the mark gets smaller, not thinner. One opacity also holds the four steps in proportion. Change it and all four move together.
Limits

Below 29 pt

Not drawn and not judged. The tested sizes are the two above.

60 pt · 29 pt

Mid-tone grounds

At 0.28 the outer layer barely separates from a mid-tone ground. The mark needs a tile there, and the tile colour is open.

Four layers

The ceiling. Beyond four, the inner steps merge at small sizes.

04.2Say what happens.
Recipient
To me
Primary action
Send to me
Sending
Sending
Recovery
Undo
Success
Sent
Limit
No sends left
Cancel
Cancel
05Interface System

The interface follows the send.

Idle, Sending, Sent and Limit Reached are the four product states. Color, type, motion and components show which state is active.

–
Color tokens
–
Type steps
–
Components
–
Motion tokens
–
Product states
–
Sections
05.1Action and success share the primary accent. The send limit gets its own status color.
Surfaces
surface.base
#0E1014
Content background, app base surface
surface.raised
#16181D
Second surface, cards, sidebar
surface.card
#1E2127
Raised surface, pressed state
Text
ink.strong
#F4F1EA
Primary text, primary button surface
ink.soft
#A8A39A
Secondary text, body copy
ink.mute
#6B6862
Markers, labels, meta
Lines
line.hair
#2A2D33
Hairline, divider
line.hair-strong
#3A3E46
Strong hairline, dashed placeholders
Accent
accent
#D6E84A
Brand accent, success surface
accent.press
#B5C625
Accent pressed
sign
#D6E84A
Symbol, mailself and noteself
Status
status.halt
#E8B85A
Limit surface, concept marker
status.halt-press
#C49737
Limit pressed
Sidebar
sb.bg
#16181D
Sidebar background
sb.ink
#F4F1EA
Sidebar text
sb.label
#6B6862
Group label, muted
sb.num
#6B6862
Section number
sb.hover
#1E2127
Hover surface
sb.active-bg
#1E2127
Active surface
sb.active-ink
#D6E84A
Active text
Motion
TokenRoleValue
dur.tapPress feedback, meter step120ms
dur.bleedState surface changes320ms
dur.liftSheet enters400ms
dur.undoUndo window5000ms
ease.standardState changecubic-bezier(.4,0,.2,1)
ease.decelEnter, settlecubic-bezier(.16,1,.3,1)
05.2The link, destination and action stay easy to scan.
Section
Send to me
clamp 28–52 / 600
Statement
One tap starts the send.
24 / 400
Lede
The interface follows the send.
20 / 400
Sub-Heading
Points of Difference
20 / 600
Body
The link is already selected.
16 / 400
Small
Usage limit not final.
14 / 400
Wordmark
mailself
16 / 700
Marker
Sends this month
12 / 400 0.2em
Micro
n / max
12 / 400 0.08em
Spacing comes from the 4px grid.
4
8
12
16
24
32
40
64
96
Radius follows the size of the surface.
8 · Tile
14 · Row
22 · Card
28 · Button
44 · Device
05.3Motion starts with the send and stops when the next state is clear.
ms-lift
dur.lift 400ms · ease.decel
ms-bleed
dur.bleed 320ms · ease.standard
ms-tick
dur.tap 120ms · 60ms stagger
ms-drain
dur.undo 5000ms · linear
05.4Each state shows only what the user can still do.
Default
Hover
Pressed
Focus
Disabled
Meter · Idle
Meter · Sending
Meter · Limit
05.5Color · Shared

Color · Shared

ink.voidSurface — base#0E1014
ink.surfaceSurface — card#16181D
ink.raisedSurface — pressed#1E2127
ink.hairlineRule, divider#2A2D33
bone.100Primary text, primary button fill#F4F1EA
bone.60Secondary text#A8A39A
bone.40Tertiary, mono caption#6B6862
accent.jadeBrand accent · success state#D6E84A
accent.jade.pressedAccent · pressed#B5C625
06aProduct Applications

mailself happens in the Share Sheet.

The Safari link is already selected and the destination is already known. The user only needs to send, undo or cancel.

The four product states
01 · IdleReady
9:41
URL
stratechery.com
Aggregation Theory · A Framework for Understanding
To john.doe@example.com
Sends this monthn / max

Mail this
to yourself.

Send to me→
02 · Sending0.4 – 1.2 s
9:41
URL
stratechery.com
Aggregation Theory · A Framework for Understanding
To john.doe@example.com

Going to
your inbox.

In flight↗
03 · Sent≤ 1.5 s
9:41
URL
stratechery.com → john.doe@example.com
Aggregation Theory · A Framework for Understanding

Sent.

It's in your inbox in a few seconds. This sheet closes itself.
Undo 5 s
04 · Limit reachedNo sends left
9:41
URL
stratechery.com
Aggregation Theory · A Framework for Understanding
Sends this month0 / max

Out of
sends.

Resets at the end of the month.
mailself · Unlimited Upgrade
07Technology

Native on iPhone. Sent from the server.

Client
LanguageSwift
UI frameworkSwiftUI
PlatformiOS 16.2+
Entry pointNative iOS Share Extension
Server
SendingServer-side
RecipientVerified personal email address only
Undo windowFive seconds before release
Main appSetup and email verification