Notr · design system

Notr

Voice/text project-tracking app — mobile-first, single dark theme, one accent color. Tokens → Primitives → Blocks → Screens: each layer is built only from the layer below it, so there's one place to fix when the UI changes. Every control on this page is the real bundle.css, the same file every screen recreation on the Flow tab uses — nothing here is redrawn separately. Built from the Notr design handoff (Notr.dc.html); the two darkest muted-gray text tokens are kept exact even though they read under WCAG's 4.5:1 floor at their actual size — see their usage notes below.

Tokens

color · type · spacing · radius · shadow

Color

background
#0f1115
Screen background, every screen.
surface
#171a20
Cards and rows.
surface-2
#1c2028
Inputs, inactive chips, secondary buttons.
border
#262a31
Default 1px border, virtually everywhere.
border-hover
#3a3f47
Hover/active border.
text-primary
#f2f2f2
Titles, headings, active labels.
text-secondary
#dfe1e6
Body copy on cards, transcripts.
text-muted
#6b7280
Eyebrows, timestamps. ~3.9:1 on background — kept exact per source, not promoted to primary content.
text-muted-mid
#8b9099
Sheet URLs, secondary meta. Same sub-4.5:1 note as text-muted.
text-muted-strong
#9099a3
Select/Cancel, inactive tabs, footer counts.
accent
oklch(0.65 .15 160)
The one accent. Primary actions and active state only.
accent-hover
oklch(0.7 .15 160)
Hover/press on any accent element.
accent-text
oklch(0.78 .15 160)
Accent label on dark ground: active chip, confirmed badge, links.
on-accent
#0f1115
Text/icons on a solid accent fill.
accent-tint
oklch(.65 .15 160 / .16)
Active chip / confirmed badge background.
accent-tint-border
oklch(.65 .15 160 / .4)
Paired with accent-tint.

Type — Manrope

screen-title / 26 / 800Notes
section-title / 18 / 700New note
body / 15 / 400Type a note…
snippet / 14 / 500340 records digitized, on track for Friday.
meta / 12 / 60009:12 · Lighthouse Retrofit
eyebrow / 12 / 600Transcript
button-label / 14 / 700Confirm all

Spacing

space-1
4px
space-2
8px
space-3
13px
space-4
16px
space-5
20px
space-6
28px

Radius & shadow

radius-sm
8px
radius-tag
10px
radius-md
12px
radius-lg
14px
radius-pill
20px
+
fab
0 8 20 / .4

Primitives

single-purpose atoms

The smallest reusable controls — each does exactly one job and composes into the Blocks below.

Button

Icon button / FAB

Chip

Tag pill / Badge

Lighthouse Retrofit Unassigned Pending Confirmed Rejected Voice note

Checkbox / Toggle switch

✓

Text field

Blocks

composed from primitives

Bigger, screen-facing pieces — each built only from the primitives above plus layout.

Card

Lighthouse Retrofit
sheets.google.com/d/1a2b3c…
Selected state

Tab bar

Bottom action bar

3 selected

Bottom sheet

Make decision
3 notes selected — choose a project
Lighthouse Retrofit ›

Audio player

2:14

Proposal card

Status
Pending
On track → Blocked
"crack found in beam 4, work paused"
Owner
Confirmed

Screens

8 screens · 10 states

Every screen, browsable on its own. For the paths and named alternatives between them, see the Flow tab.

9:41
Notes
Select⋯
All
Unassigned
Lighthouse
Last polled 2m agoPoll now
●
09:12Lighthouse
Task t‑056 due date needs to move a week…
yesterdayUnassigned
340 records digitized, on track for Friday…
+
Notes
Log
Projects
SCR-01Notes — defaultView in flow →
9:41
Notes
Cancel
All
Unassigned
✓
●
Task t‑056 due date needs to move…
340 records digitized, on track…
2 selectedAssign projectMake decision
SCR-01bNotes — multi-selectView in flow →
9:41
←New note
Type a note…
Project (optional)
Unassigned
Lighthouse
Save note
SCR-02New text noteView in flow →
9:41
←Voice note
Edit
09:12Lighthouse Retrofit
2:14
TRANSCRIPT
Task t‑056 due date needs to move a week, crack in beam 4 means work is paused…
SCR-03Note detailView in flow →
Make decision
2 notes selected — choose a project
Lighthouse Retrofit›
Q3 Roadmap›
SCR-04Project picker — bottom sheetView in flow →
9:41
←Review changes
2 notes → Lighthouse Retrofit
StatusPending
On track → Blocked
✓ ConfirmEdit×
OwnerConfirmed
1 pendingConfirm all
SCR-05Decision reviewView in flow →
9:41
Change log
Lighthouse2m ago
Status → Blocked
"crack found in beam 4"
Notes
Log
Projects
SCR-06Change logView in flow →
9:41
Projects
+
Lighthouse Retrofit
sheets.google.com/d/1a2b3c…
12 notesActive 2m ago
Notes
Log
Projects
SCR-07Projects — defaultView in flow →
9:41
←Add project
Project name
Google Sheet URL
Link project
SCR-07bAdd projectView in flow →
9:41
←Settings
CAPTURE
Plaud Note Pro · ConnectedDisconnect
NOTIFICATIONS
Push notifications
SCR-08SettingsView in flow →