noteyUI identity · Definition 0.2

Notey · UI identity · Definition 0.21 November 2026

Layers

Notey’s UI identity. Pages are sheets that sit on the page they live in. White sheets on a cool grey desk, ink for text, and one teal accent for what you act on.

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

In the making

Plan the summer garden

Made it happen

A home for all these ideas

Plan the summer gardenCard

Plan the summer garden

Status
In the making
Date
Oct 27

What changed from 0.1

Open 0.1
  1. Layers’ own colours and Rethink Sans are back: a cool grey desk and one teal accent.
  2. Colour no longer shows where you are. The lifted sheet does that. Teal marks only done, focus and the caret.
  3. Cards rest flat. Only the page and what floats above it cast a shadow.
  4. Edges only appear when you’re inside something: a subpage, or a card opened from a board.
  5. Contrast meets WCAG AA. Text uses only Ink and Ink 2; the lightest grey is for shapes, never words.
  6. Phone screens, where pages open as real sheets.
  7. Fewer tokens: four corner sizes and whole-number type sizes.
  8. The website shows more: the to-do list and five views of one database.
01

Principles

Five rules that decide everything else. When something new needs designing, start here.

1

Pages are sheets.

A page sits on the page it lives in. Open a card and it slides over its board.

2

Edges mean there’s more.

An edge above a page is where it lives. An edge under a card means pages inside. Never decoration.

3

Structure shows where you are.

The page you’re on is lifted; the rest is flat. Colour isn’t needed for that.

4

One accent, for what you act on.

Teal marks what’s done, where you’re typing and what has focus. Nothing else.

5

Make space.

New things grow into place and the rest moves aside. Notey’s own words do the talking.

02

Colour

White sheets on a cool grey desk, ink for text, and teal for what you act on. Each swatch shows light on the left and dark on the right.

#E8EBEE#0F1113
DeskThe ground everything sits on
#F2F4F6#20242A
PanelBoard columns, switches, inside a sheet
#FFFFFF#181B1F
SheetPages, cards, menus, Mini view
#D9DEE3#30363D
EdgeOutline of the sheets behind
#121417#F1F3F5
InkText, primary buttons, your workspace
#5F6670#A6ADB5
Ink 2Secondary text, dates, counts, hints
#8A9199#6B737C
Ink 3Shapes only: outlines, icons. Never words
#0F9F97#2EC4B6
TealDone, focus, the caret
#0B6E68#6FDCD2
Teal textLinks inside writing
#DCF2EF#0F2E2B
Teal tintFocus halo, selected text
#C8323F#F0606B
DangerDelete and errors, always with words
#E1E5E9#2A2F35
LineOnly where depth can’t separate

Teal marks

  • a ticked to-do, a finished status
  • the caret, where you’re typing
  • the focus ring
  • links inside writing (Teal text)

Teal never marks

  • where you are (the sheet does that)
  • buttons with words on them
  • backgrounds or large areas
  • decoration

Contrast, on white sheets

ColourLightDarkUse
Ink18.515.5All text
Ink 25.87.6Text, also on the desk
Ink 33.23.6Shapes only
Teal3.38.0Marks only
Teal text6.110.6Links
Danger5.35.4On sheets
03

Type

Rethink Sans for everything: big and tight for headlines, small and plain for the interface. Seven sizes, all whole numbers.

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 · 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 / 1.4 · 500
Search anything · Board · List · Add task · New page
Small12 / 1.4 · 500 · Ink 2
Oct 27 · 5 cards · Saving… · Mini view

Rethink Sans is friendly at large sizes and very clear at 13 px. Notey’s document font setting still lets people write in something else.

04

Depth and shape

Three steps of depth, and edges that only appear when there’s more behind or inside. Four corner sizes.

FlatEverything at rest: cards, fields, chips. White on grey or grey on white.
RaisedWhat’s selected: the page in the sidebar, the current view, secondary buttons.
FloatingThe page you’re on, and anything above it: menus, Mini view, a card being moved.

EdgesTwo kinds, both meaning “there’s more”

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
Above: where it lives. Each parent sits 24 px higher and 4.5% narrower, shows its name, and goes back when clicked. Two parents at most. Top-level pages show no edge at all.
A weekend somewhere new
Plan the summer garden
Our favourite recipes
Below: pages inside. A card with pages of its own shows a short stack under it. In lists, the same thing is a chevron: open it to go one level deeper.

CornersCircles for people and checks

20Sheets
14Panels, menus
10Cards, controls
6Chips
CirclePeople, checks
05

Motion

Going deeper slides. Moving sideways just switches. New things grow in and the rest makes space.

One thing at a timeMini view

    +

    Make space. A new task grows in at the top while the list moves down; it starts on grey and settles to white. A finished one is ticked, then closes up.
    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
    Go deeper. A subpage or card slides up over its parent, which shrinks back into an edge. Going back reverses it. Click a sheet to try.
    120 msMoving sideways: a quick switch
    160 msHover and press
    280 msTicks, menus, switches
    700 msMaking space
    800 msGoing deeper. Reduced motion: instant
    06

    Components

    The pieces the app is built from. Labels are Notey’s real interface words.

    Buttons

    Fields

    Search anything⌘ K
    What else is on your mind?

    A link inside writing looks like this.

    To-dos

    Find a home for my notes

    Put the weekend plan on paper

    Leave some space for doing nothing

    Status

    IdeasIn the makingMade it happen
    Oct 265 cardsJ

    Open, started, done. Only done is teal.

    Views

    TableBoardCalendarTimelineChart

    One database, five views. The current one is raised.

    Sidebar

    • A little inspiration
    • Things to make happen
    • One thing at a time
    • New page

    Workspaces

    MS+

    Yours is ink. Others are raised sheets.

    Cards

    A weekend somewhere new
    Plan the summer garden
    Our favourite recipes

    Block menu

    Type / to add

    TText

    H1Heading 1

    ☐To-do list

    •Bulleted list

    ”Quote

    ▦Table

    07

    In the app

    A top-level page floats on the desk with no edge. Open a card and it slides over its board, which becomes the edge above it.

    A board, with a list open in Mini viewTop level: no edge

    A card opened from the board, while adding a blockOne level deeper: the board becomes the edge

    08

    On a phone

    Where Layers feels most natural: pages and cards open as real sheets that slide up, and swipe down to go back.

    9:41
    MMy little corner
    Search anything

    Workspace

    • A little inspiration
    • Things to make happen
    • One thing at a time
    The workspace. A chevron means pages inside: tap to go deeper.
    9:41

    My little corner

    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
    A page. A full sheet over the workspace; columns scroll sideways.
    9:41
    Things to make happenBoard

    Plan the summer garden

    Status
    In the making
    Date
    Oct 27
    Assigned
    J

    What else is on your mind?

    A card. Slides up as a sheet; the board shrinks back into the edge above.
    09

    On the website

    The opening shows pages stacking. Then a sheet rises over the desk with the to-do list and five views of one database.

    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

      +

      One database, five views.

      Switch between table, board, calendar, timeline and chart views of the same project.

      Something on your mind?

      There’s a little space for it here.

      Already have a space? Sign in
      10

      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 the lifted sheet show where you are.
      • Keep cards flat; let edges mean there’s more.
      • Use teal only for done, focus and the caret.
      • Use Notey’s own words, short and plain.

      Don’t

      • Use teal for buttons, backgrounds or to show where you are.
      • Add lines or ornaments to separate things.
      • Show an edge on a top-level page, or more than two parents.
      • Put Ink 3 or teal text on the desk.
      • Use gradients, glow, glass or grain, or words like “calm”, “seamless”, “effortless”.
      11

      Still open

      Colour and type are decided in this version. Four smaller points remain before the brand book.

      Icons

      Notey already uses Font Awesome. Regular weight matches Rethink Sans at 13 px.

      Recommended: Font Awesome, regular

      Pictures

      The product is the illustration: sheets, boards and lists with real copy. No photos, no doodles.

      Recommended: none

      A real-content test

      Long documents, a crowded board, a small laptop and dark mode, before anything ships.

      Next, in the app

      The mark

      Yours to design. It will sit on a white sheet or the cool grey desk, beside Rethink Sans.

      With you

      Definition 0.2 · Earlier: 0.1, in Full stop’s colours · the exploration