NoteyBrand bookCover
Notey
Brand bookNovember 202601 / 28
Notey

Contents

Ten chapters, one sheet at a time.

02 / 28

Introduction

Logo

Colour

Typography

Structure

Motion

Voice

Components

Applications

Downloads

Introduction

Notey

What Notey is, in the words it uses itself.

03 / 28

Make space for what’s on your mind.

Notey is a workspace for documents, boards and everyday to-dos. Pages hold pages, so whatever you’re working on has a place, and room to grow.

DocumentsWrite, with history and comments.
Boards and databasesOne database, five views: table, board, calendar, timeline and chart.
To-dosPrivate task lists, and Mini view to keep one in a smaller window.
Introduction

Layers

The idea behind everything that follows.

04 / 28

Sheets on a desk.

  1. Pages are sheets on a desk. The page you’re on is lifted; everything else rests.
  2. Ink for words. Two inks for text, a third only for shapes.
  3. Teal only for done, focus and the caret. Never for buttons, backgrounds or where you are.
  4. Structure, not colour, shows where you are. The open page is a raised sheet.
  5. Edges only when nested. A page inside another shows its parent’s edge.
Logo

The mark

A folder holding a folder, drawn as the n of notey.

05 / 28

The folder is where things are kept. Its edge says there are pages behind it. The folder inside says pages hold pages. Together they draw the n that opens the name, with square corners like its letters and one round shoulder.

Drawn once in scripts/build-brand.py; every file and the shapes in the app come from that drawing.

Logo

Drawn as an n

Proportions taken from the n in “notey”.

06 / 28
The markThe n in “notey”
Shape, width ÷ height1.150.96
Each leg26% of the width31%
Opening68% of the height75%
Top bar ÷ leg1.080.8
Folder92 × 80 on a 120 grid, square corners, shoulder 42
Opening44 × 54, square corner, shoulder 20
Edge13 above, 5 clear of the folder, cut square; half that inside
Logo

Tones and sizes

Solid when small, layered when there is room.

07 / 28
16
24
32
64
120
220 · layered
16
24
32
64
120
220 · layered
Solid · under 220 pxOne colour. The edge inside is cut out. The app rail, headers, the opening screen, icons.
Layered · 220 px and upGrey edges. The brand book, print, large type.
The folder · 24 px and belowA folder holding a folder, no edges. Tabs and favicons.
Logo

The logo

The name always comes first.

08 / 28
notey, then the markThe name, then the mark
The mark above noteyThe mark above the name
notey, then the mark, on darkOn dark, solid

Like a signature, the name leads and the mark closes it. Never put the mark before the name.

Logo

Clear space

Room around the logo, and how small it can go.

09 / 28

Keep a clear space as tall as the n around the logo. Nothing else enters it.

Logo, smallest96 px wide
Mark with edges, smallest32 px
Below 24 pxThe folder alone
Layered edgesFrom 220 px
Logo

Don’t

A few ways the logo breaks.

10 / 28
Put the mark before the name
Use grey edges below 220 px
Colour the mark teal, or any other colour
Stretch or squash it
Add shadows or effects
Turn it
Colour

Palette

Light first; dark is its mirror.

11 / 28
Desk#E8EBEE · #0F1113What the pages rest on
Panel#F2F4F6 · #20242AGrouped areas, columns
Sheet#FFFFFF · #181B1FPages, cards, menus
Line#E1E5E9 · #2A2F35Hairlines
Edge#D9DEE3 · #30363DEdges of pages behind
Ink#121417 · #F1F3F5All text, the mark
Ink 2#5F6670 · #A6ADB5Secondary text
Ink 3#8A9199 · #6B737CShapes only, layered edges
Teal#0F9F97 · #2EC4B6Done, focus, the caret
Teal text#0B6E68 · #6FDCD2Links inside writing
Danger#C8323F · #F0606BDeleting and errors
Colour

Teal

One accent, kept for a few jobs.

12 / 28

Teal marks what’s done, where you’re typing and what has focus. Links inside writing use the darker teal text.

Find a home for my notes

Put the weekend plan on paper

What else is on your mind?

Never for buttons, backgrounds or showing where you are.

ColourOn sheetOn darkFor
Ink18.515.5All text
Ink 25.87.6Text
Ink 33.23.6Shapes only
Teal3.38.0Marks only
Teal text6.110.6Links
Danger5.35.4On sheets
Typography

Rethink Sans

One typeface for the interface and for documents.

13 / 28

Aa

Room to think. Space to do. 400

Room to think. Space to do. 500

Room to think. Space to do. 600

Room to think. Space to do. 700

Room to think. Space to do. 800

Only code is monospace. The name is Rethink Sans ExtraBold, tracked −0.06 em, drawn as outlines.

Typography

Scale

Whole sizes, tight headlines, easy reading.

14 / 28
Display72 / 0.98 · 700 · website headlines
Make space for what’s on your mind.
Title44 / 1.04 · 700 · sections
Tasks that stay in view.
Page title32 / 1.1 · 700 · in the app
Things to make happen
Heading20 / 1.3 · 600
Good things to come back to
Body15 / 1.55 · documents 15 / 1.7
Create private task lists and paste screenshots into tasks.
Interface13 / 1.4 · 500
Search anything · Board · Add task · New page
Small12 / 1.4 · 500 · Ink 2
Oct 27 · 5 cards · Saving…
Structure

Depth

Three heights: resting, raised and floating.

15 / 28
RestingCards on a board, rows in a list. No shadow.
RaisedThe open page in the sidebar, secondary buttons, workspaces.
FloatingThe page itself, menus, modals, the card panel.
Structure

Pages inside pages

Edges appear only when a page is inside another.

16 / 28
Plan the summer gardenIn the making · Oct 27

When a card opens from a board, the board stays behind it as an edge. In lists, a chevron says there are pages inside instead.

Motion

Timing

Quick for switches, slower for space.

17 / 28
120msSwitchToggles, tabs
160msFastHover, press
280msBaseChecks, menus
700msSpaceRows growing in and out
800msSheetSheets lifting

Easing: cubic-bezier(.65, 0, .2, 1). With reduced motion, everything arrives in place.

Motion

Opening

Once per session, the folder gains its layers.

18 / 28

The folder arrives, its edge rises behind it, and the folder inside opens. Then the workspace appears.

Voice

How Notey speaks

Short, warm and plain.

19 / 28

Make space for what’s on your mind.

Room to think. Space to do.

Something on your mind? There’s a little space for it here.

A little progress, every day.

You’re offline. Notey needs a connection to load and save your pages.

  1. Say what happens. Plain words, one idea at a time.
  2. One title, one line under it. No taglines around the edges.
  3. Warm, not cute. “A little” is fine; exclamation marks are not.
Voice

Words

What we say, and what we leave out.

20 / 28

We say

space · page · place · a little · together · make · keep · come back to

We don’t say

calm · seamless · effortless · elevate · empower · unlock · supercharge · delightful · journey · revolutionary

Components

Controls

The pieces people press and type into.

21 / 28

Buttons

Create your space Take a little look Move to trash

Buttons, fields and sidebar rows share small corners, 4. Cards are 10, panels 14, sheets 20: the bigger the surface, the rounder.

Fields

What else is on your mind?

Search anything ⌘ K

To-dos and status

Find a home for my notes

Leave some space for doing nothing

IdeasIn the makingMade it happen

Components

Navigation

Where you are is a raised sheet.

22 / 28

Workspaces

🦊✦☀️+

Yours has an ink outline and a marker beside it.

Sidebar

👋 A little room to think💡 Notes & ideas☑️ This week

Views

TableBoardCalendarTimelineChart

Applications

The app

Sheets on a desk, light and dark.

23 / 28
The app in lightThe app in dark
Applications

Phone

The same sheet, with a thin desk around it.

24 / 28
The app on a phone
Applications

Website

Pages stacking, then a sheet rising over the desk.

25 / 28
The website
Applications

Sign-in

The form on a sheet, a stack of pages beside it.

26 / 28
Sign inCreate account
Applications

Email and icons

A sheet on the desk, and the mark on ink.

27 / 28
Downloads

Files

Everything in public/brand/layers, made by one script.

28 / 28
Mark, solidnotey-mark.svgMark, solid, on darknotey-mark-dark.svgMark, layerednotey-mark-layered.svgMark, layered, on darknotey-mark-layered-dark.svgMark, one colournotey-mark-mono.svgThe folder, small sizesnotey-folder.svgLogonotey-logo.svgLogo on darknotey-logo-dark.svgLogo, layerednotey-logo-layered.svgLogo, stackednotey-logo-stacked-layered.svgThe namenotey-wordmark.svgApp iconnotey-app-icon.svgApp icon, 512notey-icon-512.pngMaskable, 512notey-icon-maskable-512.pngFaviconnotey-favicon.svgEmail logo, 2×notey-logo-email.png