Button
Every verb on a page. One primary per screen; secondary, outline, ghost and quiet for the rest; danger only for a verb that destroys something; tint for a soft call.
How a screen looks here, and why
The style of every product built from this kit is decided in its design tokens and its shared parts. This page puts both in one place, in plain words, for a person designing a new screen: what each colour, size and part is for, the patterns the screens follow, and the decisions that stand. Everything shown is drawn from the tokens and the real parts, so it changes when they do.
See the page in light or dark.
Colour
Colour is chosen by its role, never by its value. Each colour has a name that says what it is for, a screen uses that name, and the value follows the theme. Every colour is shown here in light and in dark, read from the design tokens themselves, so this page cannot show a value the product does not paint.
Grounds and lines
Three grounds stack: the page, a card on it, and a well inside a card. Lines are hairlines; they separate things and never decorate.
ColourLightDark
The page
--page-bg#ffffff#000000A card or panel
--canvas#ffffff#161618Lines and card edges
--hairlinergba(0,0,0,.07)rgba(255,255,255,.08)A softer line inside a card
--hairline-softrgba(0,0,0,.05)rgba(255,255,255,.06)A well inside a card
--nested-bg#f5f5f7#161618The edge of a well
--nested-border#e8e8ed#2c2c2eQuoted text or code
--snippet-bg#f5f5f7#161618--fillsame as nested-bgsame as nested-bg--fill-2same as nested-bordersame as nested-border--raised#ffffff#1c1c1e--card#ffffff#232326--glassrgba(255,255,255,.78)rgba(0,0,0,.7)--scrimrgba(0,0,0,.24)rgba(0,0,0,.24)--canvas-aurora-hues330 205 160 265 40330 205 160 265 40--knob#ffffff#ffffffText
Two inks for reading and two for quiet text such as dates, hints and counts. All four read at 4.5 to 1 or better on each of the three grounds, in both themes.
ColourLightDark
Headings and body text
--ink#1d1d1f#f5f5f7Secondary text
--ink-2#424245#d1d1d6Quiet text
--muted#6e6e73#98989fThe quietest text
--muted-2#6e6e73#98989fThe accent
One colour for what a person can do and where they are: a link, the primary button, the current page, the focus ring. It is used sparingly so it keeps its meaning.
ColourLightDark
What a person can do, and where they are
--accent#1d1d1f#f5f5f7The accent under the pointer
--accent-hover#000000#ffffffThe ground of a chosen row
--accent-tintrgba(29,29,31,.06)rgba(245,245,247,.08)A stronger chosen ground
--accent-tint-2rgba(29,29,31,.10)rgba(245,245,247,.14)An accent control not usable yet
--accent-disabled#e8e8ed#2c2c2eA soft accent panel
--accent-wash#f5f5f7#1c1c1eAccent text on an accent ground
--accent-deep#1d1d1f#f5f5f7Text on the accent
--on-accent#ffffff#1d1d1fQuiet text on the accent
--on-accent-quiet#bbbbbc#626263--highlight#f2b036#f2b036--on-highlight#1d1d1f#1d1d1fAgree, question, disagree
What a person or a source says about something, never the product’s judgement of the person. Each has a fill, a ground and a text colour; resting is the state with no stance.
ColourLightDark
Agree
--colour-agree#1d1d1f#f5f5f7--colour-agree-bgink at 8%ink at 8%--on-colour-agree#ffffff#1d1d1fQuestion
--colour-questionsame as highlightsame as highlight--colour-question-bgink at 8%ink at 8%Disagree
--colour-disagree#424245#d1d1d6--colour-disagree-bgink at 8%ink at 8%--on-colour-disagree#ffffff#1d1d1f--colour-agree-ink#1d1d1f#f5f5f7--colour-question-ink#424245#d1d1d6--colour-disagree-ink#424245#d1d1d6Resting
--colour-resting#7c7c7f#919194--colour-resting-ink#47474a#c9c9ccNotice
Something to know before acting. Not an error, and never a warning about the person.
ColourLightDark
Notice ground
--notice-bg#f5f5f7#161618Notice edge
--notice-borderrgba(0,0,0,.07)rgba(255,255,255,.08)Notice text
--notice-ink#424245#d1d1d6Danger
Only for an action that destroys something, or is armed to. It is not disagree: danger is about what the product is about to do, disagree about an opinion.
ColourLightDark
Danger ground
--danger-soft-bgink at 8%ink at 8%Danger edge
--danger-border#424245#d1d1d6Controls
The edges and fills of fields and quiet controls, from the faintest border to a chosen option.
ColourLightDark
--border-subtlergba(0,0,0,.07)rgba(255,255,255,.08)A field’s border
--border-inputrgba(0,0,0,.16)rgba(255,255,255,.2)--border-hoverrgba(0,0,0,.16)rgba(255,255,255,.2)--border-quietrgba(0,0,0,.16)rgba(255,255,255,.2)--swatch-fallback#c4c4c4#4f5854--control-disabled-bg#e8e8ed#2c2c2eA chosen option
--control-selected-bg#ffffff#2c2c2e--ink-soft#424245#d1d1d6--label-quiet#6e6e73#98989fCallouts
Grounds for a person’s own message in a conversation, and for inline information or approval.
ColourLightDark
A person’s own message
--bubble-user-bg#f5f5f7#161618--callout-info-bg#f5f5f7#1c1c1e--callout-approve-bg#f5f5f7#1c1c1e--callout-approve-ink#1d1d1f#f5f5f7Steering
Quiet grounds for a suggestion of what to read or do next.
ColourLightDark
--steer-bg#f5f5f7#161618--steer-borderrgba(0,0,0,.16)rgba(255,255,255,.2)--steer-eyebrow#6e6e73#98989f--panel-warm-bg#f5f5f7#161618--panel-warm-hover#e8e8ed#2c2c2e--cta-dark-hover#303033#404043Charts
Series start from the accent and step away from it; a range band is the accent at low strength.
ColourLightDark
--chart-band-lineink at 18% over canvasink at 18% over canvas--chart-series-1#1d1d1f#f5f5f7--chart-series-2#424245#d1d1d6--chart-series-3#aeaeb2#636366--chart-series-4#c7c7cc#48484aRecords and changes
The state of a record over time, the level of a source, and what a change added or removed.
ColourLightDark
--hairline-inkrgba(0,0,0,.16)rgba(255,255,255,.2)--status-current#1d1d1f#f5f5f7--status-draftsame as highlightsame as highlight--status-historical#6e6e71#9f9fa2--status-obsolete#424245#d1d1d6--tier-canonicalsame as accentsame as accent--tier-countrysame as ink-2same as ink-2--tier-raw#9a9a9dsame as muted-2Added
--diff-add-bgink at 8%ink at 8%--diff-add-ink#1d1d1f#f5f5f7Removed
--diff-del-bgink at 8%ink at 8%--diff-del-ink#424245#d1d1d6Document kinds
The library’s colours for the kind of a document.
ColourLightDark
--lib-science#1d1d1f#f5f5f7--lib-transcript#5b5b5e#a5a5a8Type
One family for every line, titles to labels: the system’s own sans, with Onest where a system has none. No serif. Sizes come from one scale; there is no size between two steps. Titles are bold and set tighter as they grow, and reading text stops at about 70 characters a line.
TitlesOrganisation, in one place
--sansTextEverything a person reads and presses
--sans- The day, set in order
- The day, set in order
- The day, set in order
- The day, set in order
- The day, set in order
- The day, set in order
- The day, set in order
- The day, set in order
- This week
- The day, set in order
- The day, set in order
- The day, set in order
Spacing
One step of 4 pixels, and every space a whole or half number of steps, so changing the step moves every space at once. Space inside a card is smaller than the space between cards, so what belongs together reads as one thing; the sections of a page stand 64 to 80 pixels apart.
- 70ch The longest line of reading text
--measure - 920px A page made for reading
--shell-read - 1160px The widest a page’s column grows
--shell
Corners and elevation
What you press is a pill. A box is rounded, more as it grows: 16 pixels for a row or a field, 24 for a card, 28 for a dialog, 32 for a big panel. Shadows are soft and few: a card barely lifts, and whatever floats lifts more. In dark the shadows are deeper, because a pale edge would not show.
Light
- A card, barely lifted
- Whatever floats: a menu, a sheet, a dialog
- The chosen option of a segmented control
- A count pill on the bar
Dark
- A card, barely lifted
- Whatever floats: a menu, a sheet, a dialog
- The chosen option of a segmented control
- A count pill on the bar
Building blocks
Every shared part a screen is built from, with a picture and when to reach for it. Start a new screen from these. If a screen needs something none of them does, that is worth raising as a new block, not drawing a local copy: two versions of one part drift apart. Each picture is the real part with sample words; to try one, open the Design elements tab.
Actions and choices
What a person presses or picks. One primary action per screen; everything else steps back.
Switch
Turns one setting on or off at once, with no save button after it.
Checkbox
An independent yes or no in a list or a form; the mixed state for a parent whose children are partly chosen.
Segmented control
Picks one of two to five fixed options, such as which list a page shows.
Tab bar
Switches between the views of one page, with a count or a dot where something waits.
Stepper
Shows where a person is in a short, fixed sequence of steps.
Selectable card
An option a person picks when a label alone cannot describe it.
Quick reply chips
One-press answers inside a conversation.
Choices
A question with a few answers inside a conversation, one or several, or a live poll.
Multi-select
Several answers from a list of described options, then one press to commit.
Ordered list
A person puts a short list in their own order and commits it.
Confirmation card
Asks for a yes inside a flow, before a step with consequences.
Fields
Where a person types or chooses. A label is always visible; a hint and an error sit under the field, in words.
Text field
The default one-line field: a visible label, a hint, and an error a screen reader announces.
Textarea field
The same for more than a line: a note, a reason, a message.
Input and textarea
The bare box, for a surface that owns its own label and layout, such as a chat composer.
Select
Picks one value from a list the product knows: a field on a form, or a filter over a list.
Floating-label fields
Compact forms: the label sits in the box and moves up once there is a value. Text, a longer text, one choice or several.
Single-cell capture
One short answer in a conversation, such as a code or a name.
Long-form capture
A longer answer in a conversation, with save and discard.
Document upload
Adds one or more files, and says why a file was refused.
Event picker
Links a record to events, and asks before unlinking one.
Organisation picker
Links a record to organisations with a role, or adds a new one without leaving the form.
Containers and overlays
What holds content on the page, and what comes over it. Prefer the page; open something over it only when the task is short.
Card
Groups one record or one block of content. A card says these things belong together; it is not decoration.
Dialog
Takes the whole focus for a short task. Use it rarely; a page or a side sheet is usually kinder.
It opens over this page, as it would in a product.
Confirm dialog
The extra warning before an important, destructive or hard-to-reverse action: what will happen, and what cannot be undone.
It opens over this page, as it would in a product.
Drawer
A record’s detail or an edit panel from the right, beside the work.
It opens over this page, as it would in a product.
Side sheet
Details, a form or filters beside the page, while the page stays in view.
Toast
A short note that something happened, which leaves by itself. Never the only place a failure is said.
It appears at the top right and leaves by itself.
Inline note
A note in the flow, next to what it is about: information, success, a warning or an error.
Transparency banner
At the head of a filtered view, saying what the reader sees and what is left out.
Shape notice
Says a page works better on a bigger screen, instead of leaving a person to wonder whether something is missing.
Status and marks
Small marks that say what something is. A colour never speaks alone: every mark carries a word or a glyph too.
Status pill
A record’s state at a glance, readable without colour.
Badge
A short category, stance or tier on a record or a heading.
Chip
Tags and short labels inside a row. The assistant’s tone marks work an assistant did, so it never passes for a person’s.
Count pill
How many things wait behind a menu entry, a tab or a row.
Grade badge
An assessed certainty, and visibly “not assessed” where there is none.
Area mark
Which area a row comes from, as a small coloured mark with its name.
Avatar
A person or an assistant. An assistant is always marked as one.
Language pips
Which language versions of a text exist, and whether each is current.
Citation chip
Ties a claim to the source it came from. A person’s own documents are numbered apart.
Reading and evidence
For text a person reads, checks and answers. What the material says is kept apart from what anyone thinks of it.
Claim check card
Lays a statement beside the material and says whether the material supports it, points elsewhere, or says nothing.
Quoted note
A person’s words attached to a quoted passage of a document that may change under them.
Reaction bar
A person’s own response to an item: interesting, a question, or not interesting.
Diff card
What changed between two versions, inline or side by side.
Chapter rail
The chapters of a long document a person works through over time, with how far they are in each.
Harvest checklist
Beside a conversation: what it has gathered so far. Read-only, never a form.
Record list
A searchable list of records, where a row opens its detail.
Register list
An editorial register: quiet rows with a title and an arrow, each opening its record.
Role lens
Lets a reviewer look at a page as another role would see it.
Figures and charts
Numbers a person can trust: every chart has its exact figures beside or under it, and a reading nobody measured is never drawn as a line.
Series chart
A named quantity over regular periods, where the exact figures matter as much as the shape.
Forecast chart
A balance running down: what was measured, solid, and what each rate would make of it, dashed.
Burn chart
What was used each day against an allowance, split over a few named destinations.
Measurement chart
Two or more readings of the same quantity: the shape of the series, and every reading in a table under it.
Value strip
Exactly one reading, beside the range it was measured against. One reading is never a chart.
Figures panel
Figures from several sources read together as one set, each able to say how it was worked out.
Waiting and the mark
A wait is drawn as the product’s own mark, and always with words: what is happening, and that there is nothing to do.
Orbit loader
Every wait, drawn as the mark itself rather than beside it.
Brand loader
A first load that takes a moment, with a short line of words.
Opening records
Records opening in the background, so a person knows the list is on its way.
Brand icon
The mark on its own at a small size: the top of the menu, an app icon.
Logo lockup
Wherever the product signs its name, from 12 to 64 px; the dot becomes the loader while something loads.
The frame
What every signed-in page shares: the menu on the left, the area’s own pages beside it, the page header with Capture, and the quick menu in the corner.
Shell frame
The layout of every signed-in page: the menu, the area’s pages, the page itself and its foot.
Section rail
The main menu: a few standing sections, each with a second level; pins; and the account, theme and language at its foot. On a phone it folds behind one Menu button.
Area menu
An area’s own pages, in a column beside the page. A page not open yet is drawn with its reason, never left out.
Page header
The top of every page: the title, the page’s own controls, and Capture on the right, so the black button means the same thing everywhere.
Quick menu
The round button in the bottom corner: the few things a person reaches for from anywhere. Notepad and Capture by default.
Capture
One place to put a passing thought, from the header’s button, the quick menu or the C key. Only a yes from the host empties it.
It opens over this page, as it would in a product.
Assistant overlay
The assistant, called from anywhere by a key, without a chat panel taking space on every page.
It opens over this page, as it would in a product.
Account menu
The person’s name, their settings and sign-out, at the foot of the menu.
Theme toggle
Light or dark, at the foot of the menu. The choice holds on every page from the first paint.
Language switcher
The language, wherever a person can change it.
Zoom-out menu
In a list’s header: the way up to the rituals that review it. A ritual not open yet says so.
Panel tabs
Two pages dropped on each other become one panel with tabs.
Reflect page
The landing page of a section that gathers several parts: its rituals, a vision, the last reflection, and its rooms.
Settings screen
The one settings screen: the account’s own rows, and the rows each part of the product adds.
Sign-in card
The sign-in of a product nobody joins from outside. A member and a stranger see the same words.
Top bar
A product without the side menu: the mark, its sections along the top, and its actions on the right.
Footers
The page’s foot; the shell footer carries one standing statement under everything a product shows.
Mail and documents
What leaves the screen. Mail and printed documents share one frame and one standing statement, and compute nothing of their own.
Mail frame and button
The outside of every mail, and the one pressable link a mail carries.
Check-in mail
The periodic invitation to a person with something running, in their own language.
Outreach mail
A one-off request to an author for a full text, saying what happens and what does not.
Daily digest
Once a day to the administrator, every figure worked out by the same code the screens use, even on a quiet day.
Alert mail
One event the team acts on, as it happens: the event, what is true now, and the next move.
Document sheet
The outside of every document a person saves, prints or hands to someone who will never sign in.
Parts with nothing to picture
They draw nothing themselves, and every product needs them.
- Theme at first paint
- Sets light or dark before the page is drawn, so a dark device never flashes a light frame.
- Theme follow
- Keeps every page, including sign-in and full-screen flows, in the theme the person chose or their device asks for.
- Locale provider
- Gives each part of the product its words in the person’s language, and reports any word left untranslated.
- Render mail and render document
- Turn a mail or a document into the file that is sent or saved.
- Text
- Sets a run of text on the type scale, for a surface that is not one of the blocks above.
Patterns
How the blocks go together. These were settled screen by screen while the products were being designed; a new screen follows them unless it has a reason that is written down.
The frame of every page
- The menu runs down the left: the product’s mark at the top, a few standing sections, each opening its own second level beside it, then the pages a person pinned, and at the foot the theme, the language and their account. A section a person cannot use yet is still drawn, locked or marked coming soon.
- An area’s own pages sit in a column between the menu and the page, so the menu only has to name the area. The column folds to a narrow strip when a person wants the room.
- The page header opens every page: the title on the left, the page’s own controls beside it, and Capture, the black button, on the right of every header, so it means the same thing everywhere. The C key opens the same Capture.
- The quick menu is the round button in the bottom-right corner: a few things a person reaches for from anywhere. A page keeps room below its last line, so the button never covers it.
- Feedback is a slim tab in the middle of the right edge, as wide as the page’s own margin, so it never sits over a control.
On a phone
- Below about 600 pixels wide the menu folds away behind one Menu button at the top left, and the page gets the whole width less its margin. The bar the button sits in scrolls away with the page, because pages pin their own headings to the top.
- The button opens the whole menu as a sheet from the left, over the page: the area’s own pages first, then every section with its second level, then the pins, then the account, language and theme. Every place is two presses away.
- The sheet closes on Escape, its own close button, a press on the page beside it, or a page chosen. Focus moves into the sheet when it opens and back to the button when it closes. When a page is chosen, focus goes where the new page puts it.
- A page two sections both offer, such as closing the day, is listed under both. It is one destination.
- Nothing scrolls sideways: the page reflows. A menu of pages or sections wraps onto another row rather than scrolling, so every entry stays in sight. Only a wide table, or a row of tabs drawn on one line, scrolls inside its own frame, never the page, and fades at the side where more of it is hidden.
Titles at a phone’s width
A title keeps at least 160 pixels beside Capture, and a title with a subtitle at least 240, so the subtitle reads as a line rather than a narrow column. Where it needs more, Capture moves under it. In practice, on a phone, most headers put Capture under the title, and no title takes more than two lines in any of the three languages. Short titles stay on one line everywhere.
A control does what it shows
- A control is drawn only where the product can keep what it does. Where it cannot, the control is not drawn; a tick that records a fact is drawn as that fact and cannot be pressed.
- A press waits for its answer. Only a yes clears a box; a no keeps what the person typed and says it did not save. Nothing looks saved that was not.
- On a list, a refusal stays on the row it happened on until that row is acted on. A press somewhere else never erases it.
- An important, destructive or hard-to-reverse action asks first, and says what will happen, what goes with it and whether it can be had back. The ask names both answers: the act by its own verb, never “OK”, “Yes” or “Confirm”, in the danger colour only where something is destroyed; and a keep answer that says what it keeps. Keeping comes first, focus opens on the question and never on the act, and Escape keeps.
- Work an assistant did is marked as the assistant’s wherever it shows, and is named for what it produces, never “Ask AI”. A change it proposes waits for a person to accept, adjust or reject it.
The states every screen has
Design these before the full screen is polished: a person meets them more often than the happy path. Each is honest first and short second, and none of them apologises for the product.
StateSayNever
EmptyWhat will appear here, what makes it appear, and the one action if there is one.“Oops”, or “nothing to see here”.
WaitingWhat is happening now, that there is nothing to do, and what it will say if it stops.A spinner with no words, or a made-up percentage.
FailedWhat failed in the reader’s terms, whether their work is safe, and what happens next.An error code alone, or “unknown error” with no next step.
Budget spentThat a spending limit is reached, when it resets only where it truly does, that it is money and not a judgement, and what still works.Implying the question was the problem, or calling a refusal a budget when it is not one.
Capability offWhich parts still work, that nothing is broken, and that nobody is being notified.Pretending the capability is thinking.
No verdictThat no rating was given, in so many words.A neutral default, or an invented rating.
Wrong deviceWhat a bigger screen does better, and that the page exists and works.Hiding it, or a dead end.
Coming soonThe part, drawn where it will be, with the reason it is not open yet.Leaving it out, so a person wonders whether it exists.
A wait is drawn with the product’s own mark and a sentence, never a bare spinner. A cell with no value says so in a word, never with a dash or a blank.
Light, dark and the keyboard
- Both themes are designed, not derived. A page is drawn in the person’s chosen theme, or their device’s, from the very first paint, and every page follows it, including sign-in and full-screen flows.
- Every control can be reached by keyboard and shows a solid two-pixel ring in the accent when it has focus. Escape closes whatever opened last.
- A colour never carries meaning alone: a state also has a word or a glyph.
- Every device runs everything. A layout adapts to a phone; a feature never disappears on one.
Decisions that stand
Settled by the owner. They are not reopened by a new screen, and a drawing that disagrees with one of them loses.
- The drawings lead. Screens were copied from the product drawings as drawn, not reinterpreted; this page now keeps what they settled.
- One set of tokens for every product. Colour, the type scale, spacing, corners and shadows are shared; a product sets its typefaces, its mark and its own area colours.
- The public front page keeps its own look. A landing page and the app may look different; the front page is held to its own drawing, inside the same tokens.
- On a phone the menu folds away behind one button at the top and opens over the page with the area’s own menu inside it, so every section is two presses away.
- The feedback tab sits in the middle of the right edge. The quick menu keeps the bottom-right corner.
- The six steps of the money ladder keep their order. A goal can be lifted and placed anywhere; a step has no grip, and the page says so once, where the grips are.
- Nothing is drawn absent. What cannot be used yet is shown with “coming soon”; a section a person has no access to is shown locked, not hidden.
- Important, destructive or hard-to-reverse actions always carry an extra warning.
- A refused press stays on its own row until that row is acted on.
- The assistant is present when it is needed and quiet otherwise. Its work is always told apart from a person’s, every change it proposes can be accepted, adjusted or rejected, and reflection always leads somewhere real.
- What a person captures stays their own until they choose to take it further.
Where Laife differs
Laife is the showcase product built from these parts. It takes everything on this page as it is, and sets only what is its own:
- Its mark. Its own word and dot, drawn by the logo lockup and the brand icon; the app icons and the browser icon come from the same geometry.
- Its area marks. Health in the ink, Wealth at 55% of it and Work at 30%, in light and in dark; no area has a hue. The default ships none: an area mark takes the shade its product passes.
- Its loader’s beat: 3.35 seconds a turn, where the default is 3.
- Its quick menu starts with Notepad and Capture.
- Its words. Dutch first, then English and Portuguese, written natively in its own tone of voice. Every block on this page takes its words from the product that uses it.
- Its front page, which keeps its own look inside the same tokens.