Portfolio

VII

Serein,A place to put your thoughts so you can get them back.

Client
Serein, Lorenzo Scardicchio's own
Year
2026
Made
Brand and wordmark · Website, withserein.com · iOS app and Serein for Mac
Status
Live at withserein.com

Your thoughts, always with you. Capture freely. Retrieve effortlessly. Never lose a good thought again.

Read more

Project overview

Serein

Serein is a personal capture system for iOS. Press the Action Button (or type, or share) and your words are recorded, transcribed on this iPhone, and saved as ordinary files in your own iCloud Drive. No server, no account, no API key.

A serein is the fine, almost invisible rain that falls in clear sky after sunset in tropical climates: a 14th-century French word, from the Latin serenus. The wordmark is the word in lower case, soft and rounded, with generous tracking; the mark two forms like hills or waves; the colours are an ocean horizon at blue hour, deep navy water under a lighter sky. The site at withserein.com is the same navy and a warm white, set in Inter at its lightest weights, with a field of stars behind the hero.

1
Tap to start talking: the phone's Action Button, the Watch, the Mac
3
Verbs: speak, keep, ask
0
Servers, accounts or API keys behind a capture
14
The century the word is from
  • Deep navy the dark site#0C1A2E
  • Warm white the light site#FAFAF8
  • Blue accent, dark#6E9ECF
  • Medium blue accent, light#3B6FA0
  • Soft sky the horizon#7DADD4
  • Horizon pink first light#D4BFC8
  • Water light the surface#B8D4E8
Colour
+

Serein

Colour

The site's two grounds, deep navy and warm white, with its blue accents (src/components/SereinWebsite.tsx), and the colours the brand references drew from the ocean horizon: deep navy, medium blue, soft sky, horizon pink, water light.

Inter

Headings · 200

Your thoughts, always with you

Inter

Text · 300

Capture freely. Retrieve effortlessly. Never lose a good thought again.

Type
+

Serein

Type

Inter, at extralight and light weights, for everything on the site (layout.tsx loads it; the census found 200 and 300 on the home page).

Three phones on a warm white ground, each showing an ocean horizon at dusk: the first with the word serein, the second with a recording level and a stop button, the third with a microphone button.
The app
+

Serein

The app

Three screens of the phone app as the brand references set them: the wordmark on the ocean at blue hour, the recording indicator, and the one button to talk.

withserein.com, page by pageYour thoughts, always with you.
+

Design note

withserein.com, page by page

Your thoughts, always with you. Capture freely. Retrieve effortlessly. Never lose a good thought again. The home page opens on a field of stars, then tells the story on the scroll ("Gone before you kept it.") and offers the prompts a life might ask, each with what Serein would say back.

The Product page of withserein.com: Speak, Keep, Ask, one after another, on the navy ground.
Product"Capture is the beginning, not the destination." Speak, keep, ask: "One tap.
+

Design note

Product

"Capture is the beginning, not the destination." Speak, keep, ask: "One tap. Start talking." Press the button on your phone, Apple Watch, or Mac. Start talking. That's it. No app to open, no note to title, no folder to choose. "Your captures are in safekeeping." "Ask a question. Hear your own answer."

The Manifesto page of withserein.com: the text in three columns.
ManifestoWe live in a world where the more connected we are, the more scattered we become.
+

Design note

Manifesto

We live in a world where the more connected we are, the more scattered we become. The more technology promises to help us, the less time we have to think at all. Serein offers a different path. We believe technology should listen more than it speaks. We believe your data should belong to you. The goal isn't engagement; it's helping you become more yourself, then getting out of the way.

Three screens of the app on an ocean ground.
The wordmark over the ocean horizon.
The mark in sky blue.
The mark in gold.
A page of the brand guidelines: the supporting palette, eight swatches from pale grey through blues, tan, coral and rust to sage.
The wordmark in black on white.
Serein's own brand files (the SereinLife/serein repository, assets/brand): the app screens, the horizon, the mark in its colours, a page of the brand guidelines, the wordmark.

“We believe technology should listen more than it speaks.”

From the manifesto on withserein.com
Serein's app icon: two rounded white forms, like hills, on a black rounded square.
The mark and the app iconThe mark: two soft forms, hills or waves, one rising behind the other, in white on black for the app icon and in sky blue, gold, green and grey in the brand's set.
+

Design note

The mark and the app icon

The mark: two soft forms, hills or waves, one rising behind the other, in white on black for the app icon and in sky blue, gold, green and grey in the brand's set. The app records with the iPhone's Action Button, transcribes on the phone and keeps every capture as ordinary files in iCloud Drive; Serein for Mac sits beside it.

The Blog page of withserein.com: a list of essays on a warm white ground.
BlogEssays on the site's blog, set on the warm white: On curiosity, On simplicity, The great mystery, Name the state, Sensitivity is intelligence, and more.
On a phoneThe home page and the blog on a phone, the navy and the warm white.
The serein wordmark over a photograph of the sea at dusk, the water deep blue under a paler sky.
The horizonThe ocean horizon at blue hour the brand is drawn from: deep navy water gradating into a lighter sky, a little pink at the upper right, light on the water.
+

Design note

The horizon

The ocean horizon at blue hour the brand is drawn from: deep navy water gradating into a lighter sky, a little pink at the upper right, light on the water. The references call it tonalist: soft atmospheric gradients, ambiguous edges, colours that bleed into each other.

Live at withserein.com

See it for yourself.

Visit withserein.comStart a project with Qwarter

Next project

The Room