Quern
Join the beta
Design system

One language, two places.

The app and this site share one set of colours, type, space, corners and motion. This page draws itself from the site’s own tokens file, so what you see here is what every page uses.

Colour

One accent. Everything else is quiet.

Every colour token, read live from the tokens file. Each tile shows the colour in the theme you’re on, with its Night and Mist values beneath.

Type

Five voices, each with one job.

A serif for display, a grotesk for headings, a clean sans for reading, a mono for small labels and a hand for the odd aside.

DisplayNewsreader · 500--text-hero

Notes you’ll use.

HeadingSpace Grotesk · 500--text-h2

Seven things to know.

BodyGeist · 400--text-lede --text-body --text-small

Share a reel, a video, a PDF, a link or a voice note. Get a note you’ll actually use.

Then ask everything you’ve saved, with an AI that shows its sources. Every answer points back to the notes it came from.

Free during the beta. Android 7.0 or newer.

Eyebrow and labelGeist 500 · Geist Mono--text-eyebrow
The short versionSTAYS ON YOUR PHONEREEL · 0:48
HandCaveat · 600for asides only

a little note in the margin

Space and corners

A 4 px rhythm, soft corners.

Spacing steps up from the app’s 4 px base. Every corner is rounded: cards, tiles and pills.

1
2
3
4
5
6
8
12
16
24
Content width
Reading width
Side gutter · phone
Header height
Panel--radius-panel
Card--radius-card
Tile--radius-tile
Pill--radius-pill
Motion

Arrive gently. Leave quickly.

Things arrive on the enter curve and leave on the faster exit curve. Ambient motion stops when your device asks for less.

EnterFast out of the gate, a long soft landing.
ExitA slow start, then gone: to leave.
AI NOTEHampi, three days
DevelopBlur to sharp, the way a note arrives.
BreathThe orb, once every .
DriftThe ground’s glow, one slow pass every .
PressPressed things shrink to , then spring back.
Components

The parts every page is built from.

Live and working. Hover them, tap them, tab through them with a keyboard.

Join the betaSee how it worksSmall
Buttons.btn .btn-hot · .btn-ghost · .btn--sm
Reel · 0:48PDF · 12 pagesFrom Instagram
Pill.pill
Where your data livesWhat stays. What travels.
Eyebrow over a heading.eyebrow · .h2
Locked notes stay locked.Never sent to any AI.
Card.card glass with a lit edge
FROM YOUTUBEFilter coffee at home
Paper.paper the app’s own surface

Share a reel from Instagram, YouTube, WhatsApp or any app.

Tabs.tab arrow keys move between them
Shows where every line came from.
Segmented switch.seg data-action
Frosted, lit along its edge
Glass.glass for what floats

A locked note is on your phone.

Term.term hover or focus for the meaning
Do I need an account?

No. Start as a guest; continue with Google to keep your notes on every phone.

Which phones?

Android 7.0 or newer. iPhone is on the way. For adults, 18 and over.

Questionsdetails · summary no script needed
Icons

Every icon in the set.

Read straight from the site’s icon sprite, so this grid always matches what the pages use. Line icons in the ink’s colour; the spark, the AI’s mark, is the one drawn filled.

The icon set isn’t here yet. This grid fills itself when it lands.

The brand

The quern, seen from above.

A softly domed sage millstone, its paper eye up and to the left, a dark pin off centre, so it also reads as a Q.

  • The stonesage, lit from the top left
  • The eyepaper, the same in both themes
  • The pinthe deepest sage; the tail of the Q
  • Its squarekeep other things outside it
16
24
32
48
72
104
Quernon the ground
Quernon paper

The word is Newsreader 500 beside the mark. The mark carries no AI spark: the spark lives only inside the app, on what the AI made.