1 Tokens
Source: apps/notefriends/brand/tokens.css (.notefriends-brand). Values shown are live, so they follow the token editor.
Type
--nf-font-ui Little notes, big thoughts. Haskoy for buttons and chrome.
--nf-font-label SPACE GROTESK LABELS 0123456789
--nf-font-reading Georgia for reading text, in the note itself.
Instrument Serif A little room to think
Stroke, radius, focus
--nf-stroke--nf-radius--nf-focus2 Token editor
Edits apply to this whole page at once and are kept in this browser. Copy the result back into apps/notefriends/brand/tokens.css (or paste it to the agent). Note colours below are per look, applied to the reading samples in sections 4 and 5.
Brand tokens --nf-*
Look --note-*
3 Shell controls
Source: components.css and notes.css. Markup copied from index.html, account-ui.js, my-notes-ui.js, block-menu.js. Hover and focus states need the pointer or Tab; use the keyboard to see them.
Buttons
button, .primary, .danger, .icon-button, .action-icon, :disabled. Hover, focus-visible: use the pointer or Tab.
Select, text input, link row
.notefriends-brand select, .link-row, .template-shelf.
Import / export disclosure (open)
details.export-menu, .export-options. Open with the open attribute.
Import / export
Notice, dialog, message line
.notice, dialog.notice (non-modal here), #message[data-kind] (the app's one id-styled message line).
You’re viewing a shared note. You can’t edit it.
Sharing uploads a copy and makes a link anyone can read. Continue?
That link has expired. Ask the owner for a new one.
Skip link (visible state)
.skip from packages/design/base.css; it slides in on focus, shown here in place. The real one is the first Tab stop on this page.
Topbar: signed out and signed in
.topbar, .wordmark, .account.
Toolbar
.toolbar, .save-line, .file-actions.
Import / export
Appearance panel and looks
.appearance-panel, .looks, .look, .look-preview. One look checked, one disabled; swatches are built from appearance.js.
Look
Saved with the note, so everyone who opens it sees the same look.
Crumbs
.pane-label.crumbs.
My notes list
.my-notes-head, .my-notes-list, .my-note-open[aria-current], .my-note-move, .my-note-delete, .project-open, .project-actions, .account-menu.
My notes
People list row
.people-list with a role select.
- sam@example.com · can view
- alex@example.com · can edit
Block menu
.nf-menu, .nf-menu-item, .is-active, [aria-disabled], .nf-menu-back, .nf-menu-hint, .nf-menu-keys. In the app it floats (position: fixed); here it sits in the flow.
4 In-note editing controls
Source: components.css / notes.css rules scoped to #preview, reading --note-*. The whole sample is one #preview.reading-surface.prose; change the Look to restyle it. Progress, timeline and calendar are rendered by the real renderNote with editable: true.
.nf-gutter, [data-compact])[data-edit][data-editing]), and a plain editable oneThis paragraph can be edited in place; hover shows a text cursor.
This paragraph is being edited: the outline takes no space.
[data-pending][data-shape]).nf-table-tools, .nf-table-menu)| Day | Plan |
|---|---|
| Saturday | Walk by the water |
.nf-status-btn, .nf-status-menu, .nf-add-card).nf-prog-tools, .nf-w-btn, .nf-w-input, .nf-tl-tools). Quiet until hover or focus; disabled buttons shown..nf-w-btn, .nf-w-primary).nf-cal-add-day, .nf-cal-add, .nf-event-edit).nf-pop). In the app it floats; here it sits in the flow..nf-invalid)This progress list has a line it can't read. Use the block menu to delete it, then add a new one.
- Project tasks
- Reading goal
5 Every block
Source: render-note.js, styled by reading.css. "Every block" is built from INSERT_TYPES in block-ops.js with the exact Markdown the Add a block menu inserts, so a new block type appears here on its own. "Variants" covers the other states each block can be in. Editable renders as the app's editor does (editable: true). View switchers on boards, calendars, cards, charts and galleries work.
6 Brand assets
Source: apps/notefriends/brand/*.svg. The 114 icons and symbols live in brand/icons/ with their own contact sheet.