Brand

The mark

The mark is a phone whose corner peels back like a patch: the product in one object. The patch goes on the thing you're weaning off. It is drawn once, in two colors, with a hairline. The peel casts two translucent indigo shadows: a soft one on the patch itself, and a drop onto the page that shows on light grounds and melts into dark ones by itself. The drawing never changes with the theme; only what's around it does.

Lockups

Social Patch

Social Patch

Social Patch

Social Patch

Typography

The wordmark is Outfit 600 with −0.01em tracking: the same face as parent company deebeo's wordmark, one weight lighter, title case for the product name. It always takes the theme's text color, like any other type.

Everything else, in the app and on this site, is set in the device's own interface font: SF Pro on iPhone and Mac, Segoe UI on Windows, Roboto on Android. Body text is 17px, 18px on larger screens, with 1.65 line spacing, and a line stops at about 68 characters.

Color

Two layers. The mark's colors belong to the drawing and never change. The site palette is what the pages are painted with, and it has a light face and a dark face: the site follows your device's setting, or the Theme menu in the footer.

The mark's colors

• patch cyan #0090CF: 3.56:1 on white and 4.24:1 on this site's dark page, so the silhouette clears the 3:1 graphics need on both
• deep indigo #1E2166: the hairline, peel and earpiece slot, reading against the cyan at 4.02:1; translucent, it is also the flap's shadows

The mark's hairline and peel never sit on the ground alone. They read against the patch cyan, on every surface. That is what lets one drawing go anywhere.

The site palette

Each face shows its colors as the site draws them, and every value comes from the site's stylesheet when the page is built. Ratios are against the face's page color, except the button's, which is its label on its fill. Text and links need 4.5:1, and control edges 3:1. Dividers and accents are decorative and need none. Links stay underlined, so color is never the only cue.

The app is painted with the same two faces, so a screen and a page match in either theme. The one difference is the accent: the app's buttons are near-black in light and light gray in dark, and outside the mark the brand colors appear only on the site.

How to use it

• The mark never changes. No recoloring, no theme variants, no stretching, no added effects (the flap's shadow is part of the drawing, not a style to remove or restyle). If a surface can't take it cleanly, use the one-color version.
• Keep clear space of at least ¼ of the mark's height on every side.
• One drawing at every size. The hairline reads clearly from about 48px and simply fades below that as it drops under a pixel. Nothing is ever swapped.
• Soft cyan #79C9F5 is the dark theme's accent, for links, buttons and focus rings, and is never text or a button fill on light. Indigo carries them in light mode.
• No gradients, no tints of the brand colors, no new colors. The one non-solid ink is the flap's shadow, translucent deep indigo, baked into the mark. If something needs a color that is not here, add it here first.

Assets

Every other asset (avatar tiles, lockup PNGs for signatures and docs, the app icon set and favicons) is generated from the same drawing.