K07 · Building blocks

Elements

Buttons

Anatomy: [icon 16] 8 [label] 8 [icon 16] · height S 32 / M 44px / L 52 · pill radius · one primary per viewport.

default hover focus-visible active disabled loading Primary Start free Start free Start free Start free Start free Working… Secondary Take the tour Take the tour Take the tour Take the tour Take the tour Working… Tertiary Import Import Import Import Import Working… Ghost Cancel Cancel Cancel Cancel Cancel Working… Destructive Delete theme Delete theme Delete theme Delete theme Delete theme Working…

Small Medium Large → Publish▾ ⚙ Link button →

✓ Do Pair one primary with a lower-commitment secondary: “Start free” + “Take the 2-min tour”.

✕ Don’t Use magenta for destructive actions, tags or decoration. Magenta means “next step”.

Inputs

Work email Did you mean ? Password Weak: add a number or symbol

One-time code 4 8 1 Sent to maya@acme.io · Resend in 0:24

Workspace URL · error roadnote.app/ ✕ “acme” is taken. Try “acme-product”. Role Search · disabled

Selection & range

Disabled option

Seats8 × $29 = $232/mo

Filter chips

Drop a CSV to importor browse files · max 20 MB · columns mapped on the next step

Momentum & status marks

Δ +38% · 90 days Δ −4.2% · Q2 v2.14 Shipped 3 days ago NEW Pro plan MK JB +4 IR Maya · PM 3 ⌘K

Requests this month82 / 100 ! 18 left · resets Oct 1

Step progress ✓ 2 3

Skeleton

Anatomy & spacing · primary button

Every element spec follows this format: parts, measurements, tokens.

1816 · 8 · label · 8 · 1618 44px Start free→

1 · container: pill radius, bg --action, hover --action-hover
2 · icon: 16 px, 1.5 stroke, optional, leading or trailing
3 · label: Instrument Sans 600, 13 / 15 / 17 px, sentence case, verb first
4 · focus ring: 2 px --action at 2 px offset, never removed
target: ≥ 44 × 44 px (S buttons get a 44 px hit area)
i18n: no fixed width; tolerates +35% label length

Text input · all states

default Workspace name Acme Product Shown in your public roadmap URL

hover Workspace name Acme Product

focus-visible Workspace name Acme Product|

error Workspace name a ✕ Use at least 2 characters

success Workspace name Acme Product ✓ roadnote.app/acme-product is free

disabled Workspace name Acme Product Only owners can rename

loading Workspace name Checking… Checking availability

Combobox & date picker

Account ↑↓ to move · Enter to pick · Esc to close

September 2026

Mo Tu We Th Fr Sa Su

Today is outlined. Arrow keys move by day in production.

Tooltip placements

Merge (M) top

right Merge (M)

bottom Merge (M)

Merge (M) left

Show on hover after 400 ms and on focus immediately; dismiss with Esc (WCAG 1.4.13). Never put the only copy of information in a tooltip.