Pages are sheets.
A page sits on the page it lives in. You can always see where you are, and one step back.
Layers.
Notey’s UI identity: the Layers direction in Full stop’s colours. Pages are sheets that sit on the page they live in. White sheets on a soft grey desk, ink for text, and one orange dot that always means “this one”.
Pages are sheets.
One dot means this one.
Everything else makes space.
DecidedLayers’ structure and depth. Full stop’s colours and the orange dot. Light and dark. Notey’s copy, unchanged.
Still openThe typeface (Funnel recommended; try all three with the switch, bottom right), the desk tone, the icon style, and the mark.
01
Principles.
Five rules that decide everything else. When something new needs designing, start here.
One dot means this one.
Orange marks the current thing: your workspace, the page you’re on, what you just added, where you’re typing. Nothing else is orange.
Make space.
When something arrives, the rest moves aside. Nothing pops in; things grow into place.
Depth, not decoration.
Three levels of depth do the work lines and ornaments would. No gradients, glow or glass.
The words lead.
Short sentences that end with a full stop. Interface text stays small, plain and in Notey’s own words.
02
Colour.
White sheets on a soft grey desk, ink for text, and orange only for “this one”. Each swatch shows light on the left and dark on the right.
#EEEEF0#0D0D0F
DeskThe ground everything sits on
#F5F5F6#1E1E21
PanelBoard columns, switches, fields inside a sheet
#FFFFFF#17171A
SheetPages, cards, menus, Mini view
#E6E6E9#2A2A2E
LineOnly where depth can’t separate
#141416#F3F3F4
InkText, primary buttons, done
#67676C#A3A3A8
Ink 2Secondary text, descriptions
#A1A1A6#6C6C72
Ink 3Hints, counts, dates, placeholders
#FF5C00#FF6B1A
Full stop“This one”. Never more than one per list or level
#FFEEE4#3A1F10
Full stop tintFocus halo, the current status chip
#C8323F#F0606B
DangerDelete and errors only, always with words
Orange marks
- the workspace you’re in
- the page you’re on
- the view you’re looking at
- what you just added
- where you’re typing: caret and focus
- the end of a headline, on the website
Orange never marks
- errors or warnings (that’s Danger, with words)
- large areas or backgrounds
- decoration or illustration
- more than one thing in the same list
- body text or links
03
Type.
One family. Big and tight for headlines, small and plain for the interface. Shown in Funnel; try the other two with the switch at the bottom right.
- Display76 / 0.98 · tight · website headlines
- Make space for what’s on your mind.
- Title44 / 1.04 · tight · sections
- Tasks that stay in view.
- Page title32 / 1.1 · in the app
- Things to make happen
- Heading20 / 1.3 · 600 · inside pages
- Good things to come back to
- Body15 / 1.55 · 400 · reading
- Create private task lists and paste screenshots into tasks. Open Mini view to keep a list in a smaller window.
- Interface13.5 / 1.4 · 500
- Search anything · Board · List · Add task · New page
- Small12 / 1.4 · 500 · Ink 3
- Oct 27 · 5 cards · Saving… · Mini view
Headline weight follows the typeface: 700 for Rethink Sans, 600 for Host Grotesk, 650 for Funnel Display. Everything else uses 400 to 600.
04
Depth and shape.
Three steps of depth, and soft corners that get smaller as things get smaller. Depth replaces lines.
Anatomy of a stackA card, inside a board, inside a workspace
My little cornerWorkspace
My little corner
Things to make happenBoard
Things to make happen
Plan the summer gardenCard
Plan the summer garden
- Status
- In the making
- Date
- Oct 27
- Each parent sits 24 px higher and 4.5% narrower than the sheet in front of it.
- The visible edge carries the parent’s name and type. Clicking it goes back.
- Show two parents at most. Deeper pages keep their full path in the breadcrumb.
- Parents fade their content; only the front sheet is readable.
CornersCircles for people, checks and the dot
05
Motion.
Two movements carry the identity: things make space for what arrives, and pages slide over the page they live in.
One thing at a timeMini view
+
My little cornerWorkspace
My little corner
- A little inspiration
- Things to make happen
- One thing at a time
Things to make happenBoard
Things to make happen
A little progress, one idea at a time.
Plan the summer gardenCard
Plan the summer garden
- Status
- In the making
- Date
- Oct 27
160 msHover and press
280 msSwitches, menus, ticks
700 msMaking space
800 msOpening a sheet
0 msEverything, when someone asks for reduced motion
06
Components.
The pieces the app is built from, each following the five principles. Labels are Notey’s real interface words.
Buttons
Fields
Search anything⌘ K
What else is on your mind?
To-dos
Find a home for my notes
Put the weekend plan on paper
Leave some space for doing nothing
Done · just added · open
Status tags
IdeasIn the makingMade it happen
Oct 26In the makingJ
Views
TableBoardCalendarTimelineChart
One database, five views. The current one is a lifted sheet with the dot.
Sidebar
- A little inspiration
- Things to make happen
- One thing at a time
- New page
Workspaces
MS+
Your workspace is ink with the dot. Others are sheets.
Cards
A weekend somewhere new
Plan the summer garden
Our favourite recipes
Block menu
07
In the app.
The page you’re on is a sheet resting on its workspace. Orange shows where you are: workspace, page, view, and the caret.
A board, with a list open in Mini viewThings to make happen
My little cornerWorkspace
My little corner / Things to make happen
Things to make happen
A little progress, one idea at a time.
BoardList
Ideas 2
A weekend somewhere new
Make a little reading nook
In the making 2
Plan the summer garden
Our favourite recipes
Made it happen 1
A home for all these ideas
One thing at a timeMini view
Find a home for my notes
Put the weekend plan on paper
Make time for that little side project
Leave some space for doing nothing
A document, while adding a blockA little inspiration
My little cornerWorkspace
My little corner / A little inspirationSaving…
A little inspiration
A place to catch the thoughts I don’t want to lose.
Start small. Leave a little room to grow.
Good things to come back to
- The book a friend couldn’t stop talking about
- An idea that arrived on the way home
- That recipe on a very small scrap of paper
/
08
On the website.
The opening shows Notey’s pages stacking. Further down, Full stop’s list presents the to-dos, as its own sheet rising over the desk.
noteyMake yourself at home
Make space for what’s on your mind.
Your notes, projects and everyday plans.
Together in one workspace.
My little cornerWorkspace
My little corner
- A little inspiration
- Things to make happen
- One thing at a time
Things to make happenBoard
Things to make happen
A little progress, one idea at a time.
Ideas
A weekend somewhere new
Make a little reading nook
In the making
Plan the summer garden
Our favourite recipes
Made it happen
A home for all these ideas
Plan the summer gardenCard
Plan the summer garden
- Status
- In the making
- Date
- Oct 27
- Assigned
- J
What else is on your mind?
Tasks that stay in view.
Create private task lists and paste screenshots into tasks. Open Mini view to keep a list in a smaller window.
One thing at a timeMini view
+
Something on your mind?
There’s a little space for it here.
Already have a space? Sign in09
Do and don’t.
Short enough to remember. When in doubt, take something away.
✓Do
- Put anything that opens on a sheet: pages, cards, Mini view, menus.
- Let space and depth separate things.
- Keep orange for the current thing: one per list or level.
- End website headlines with an orange full stop.
- Use Notey’s own words, short and plain.
✕Don’t
- Use orange for errors, large areas or decoration.
- Add lines or ornaments to separate things.
- Stack more than two parents.
- Use gradients, glow, glass or grain.
- Use AI-sounding words like “calm”, “seamless” or “effortless”.
10
Still open.
Four decisions before this becomes the brand book, then the work moves into the real app and website.
Typeface
Rethink Sans came with Layers, Host Grotesk with Full stop, and Funnel is your favourite. Funnel’s full stop is round like the dot (Host Grotesk’s is square), and it has the most character at large sizes.
Recommended: Funnel. This page opens in it
Desk tone
Neutral grey (used here) keeps the orange clean. Layers’ cooler blue-grey felt more “app”.
Recommended: neutral
Icons
Notey already uses Font Awesome. Keep it, and pick the weight that matches the typeface’s stroke: regular for all three candidates.
Recommended: Font Awesome, regular
The mark
Yours to design. Worth knowing: the current “n.” already ends with a full stop.
With you
1 · DecideThe four open points above.
2 · The appTokens into the app’s styles, then the sidebar, pages, board and Mini view as sheets.
3 · The websiteThe stacking opening, the to-do list section and the closing, with Notey’s current copy.
4 · Brand bookBuilt from this definition, in the house format.
Definition 0.1 · Comes from round 2 of ui-identity-exploration.html: Layers, in Full stop’s colours.