Patterns
Pattern · Record
The parts of a record page between the title and the details rail: what's owed next, the overview, the records it relates to, and a placement's own sections.
Page parts
Patterns · Record
Record
The parts of a record page between the title and the details rail: what's owed next, the overview, the records it relates to, and a placement's own sections.
Next strip
Above a live record's Activity: the one task owed first, who owns it and when it's due. With nothing planned it offers Add task. Flo's waiting changes about the record list below it.
Next
Send Maya's CV to Sara Lund
Joseph A.
Today
+2 more
Complete
Next
Chase Halcyon for interview feedback
Sara Lund
13 Oct
Complete
Next
Nothing planned
Add task
Built from: Button (outline, small), the Due cell from Task row. States: due today with more open · overdue, due date in danger text · nothing planned.
Record overview
The first tab of a company, contact or job. Title, a strip of highlights, the tabs, then the related records that matter most and recent activity. Every field lives in the details rail on the right.
H
Halcyon Bank
Client
halcyonbank.com · Financial services · London
Open jobs
3
Placements
7
Fee this year
£148,500
Owner
JA
Joseph A.
Last contact
Yesterday
Next meeting
Thu 10:00
Overview
Jobs
3
People
5
Activity
Files
Open jobs
View all
Senior Data Engineer
Sara Lund
Interviewing
6 candidates
Risk Analyst
Sara Lund
Sourcing
2 candidates
Head of Platform
Marc Ellis
Offer out
1 candidate
Recent activity
Sara Lund replied
Yesterday 16:20
Happy with the shortlist. Can we see Maya and Priya on Thursday?
Client meeting booked
Mon 09:12
Quarterly review with Sara Lund and Marc Ellis, Thu 10:00
Details
Domain
halcyonbank.com
Industry
Fintech
Banking
Headcount
1,200
Location
London
Fee
18% of base
Terms
Add terms
People
SL
Sara Lund
Head of Talent
ME
Marc Ellis
CTO
Built from: Record title, Metric tile, Tabs (line), Related records section, Activity timeline (compact), details rail (Field types editors, Record chip).
Related records section
The records that belong to this one, as a titled section: the title (with a count for jobs), one quiet Add on the right, then a read-only grid or a short list. Past rows fold under a disclosure; an empty section is one line.
Contacts
Add contact
Name
Job title
Warmth
Email or phone
SL
Sara Lund
Main contact
Head of Talent
Champion
sara.lund@halcyonbank.com
ME
Marc Ellis
CTO
Warm
+44 20 7946 0958
AK
Anika Kaur
Talent Partner
New
anika.kaur@halcyonbank.com
1 past contact
Daniel Price
Target pursuits
Add to target list
No pursuits yet.
Jobs · 5
H
Senior Data Engineer
Open
H
Risk Analyst
Briefing
H
Head of Platform
On hold
Show all 5
Built from: Button (quiet), Table (read-only grid, 36px rows), Record chip (plain in the first column), Badge, Empty line. Lists show three, then Show all.
Placement sections
A placement's page adds three sections after its details: aftercare check-ins, who gets credit for the fee, and the invoice. Each has its title and at most one action on the right.
Aftercare
Day 1
1 Sep
All good
Call with Maya Chen · logged by Joseph A.
First week
5 Sep
Concern raised
Message with Sara Lund · logged by Joseph A.
Onboarding laptop arrived late; Sara is on it.
Midpoint
Due 13 Oct
Log check-in
End of probation
1 Dec
Log check-in
Fee credit
Edit split
JA
Joseph A.
60%
SL
Sara Lund
40%
Invoice
Mark paid
Status
Issued
Number
NT-2026-041
Amount
£17,100
Issued
2 Sep 2026
Due
30 Oct 2026
Paid
Empty
Built from: section title row, Button (outline), Badge for outcomes and invoice state, Record chip for consultants, the details rail row (112px label) for invoice fields. Check-in, split and End placement open a Modal dialog.
Forms and dialogs
Patterns · Record
Forms and dialogs
Making a record, merging two into one, and filling a company from its website. Each is a dialog: title, what will happen, the fields, then Cancel and one primary on the right.
Create record form
The name first, focused, in a field whose placeholder is "Untitled job". Then only the fields a new record needs, with the smaller set marked: required ones, or optional ones when most are required. The primary names the record: Save job, Create placement. Command Enter saves, Escape cancels.
New job
Senior Data Engineer
Consultant
JA
Joseph A.
Company
*
H
Halcyon Bank
Salary
85,000
95,000
GBP
a year
a month
Fee %
18
Hiring manager
Set hiring manager…
Cancel
esc
Save job
⌘↵
Create placement
Maya Chen · Senior Data Engineer at Halcyon Bank. Confirm the facts; nothing is created until you do.
Start date
3 Nov 2026
Guarantee
3
Days
Weeks
Months
Ends 3 Feb 2027.
Agreed salary
95,000
GBP
a year
a month
Fee
17,100
In GBP, the salary's currency. The invoice starts at this amount.
Billing contact
Optional
Choose a contact…
Cancel
esc
Create placement
⌘↵
Built from: Modal dialog (560px), Form (Field, label 12/16/500; mark the smaller set: a red asterisk on required fields in a mostly optional form like New job, "Optional" on the few optional fields in a mostly required form like Create placement), Input, Field types pickers, Segmented control, Date picker, the record form footer (Cancel and the named primary with their shortcuts).
Merge dialog
Pick the record to keep, pick between values the two disagree on, see what the kept record will hold, then Merge. A toast offers Undo.
Merge 2 companies
Halcyon Bank plc's contacts, targets, jobs and activity move to Halcyon Bank. You can undo this.
Record to keep
Halcyon Bank
halcyonbank.com
Halcyon Bank plc
None
Name
Halcyon Bank
Website
halcyonbank.com
LinkedIn
linkedin.com/company/halcyon-bank
Industry
Banking
Founded
1987
Do not contact
No
Cancel
Merge 2 companies
Built from: Modal dialog (confirm, 560px), Radio group (card items), a description list for the preview, Toast with Undo. People add a pick for each field the two disagree on. Merge is level 1: it can be undone, so the dialog only chooses what survives.
Enrichment dialog
Look the company up by its website, show each proposed value with a checkbox and what it replaces, then fill what's ticked. Each lookup spends a credit, so it runs once per open.
Fill from website
What The Companies API has for halcyonbank.com. Tick what to keep.
Description
Retail and commercial bank serving the UK and Ireland.
Industry
Banking
replaces: Financial services
LinkedIn
linkedin.com/company/halcyon-bank
Founded
1987
HQ city
London
Same as now
Employees
Check this
201–500
replaces: 1,001–5,000
Fetched just now
Refresh
Cancel
Fill 4 fields
When the lookups run out
Company lookups are used up until 1 Nov 2026.
Add the details by hand for now.
Built from: Modal dialog (560px), Checkbox, Badge (warning), Section message, Spinner while it looks, Button (quiet, small) for Refresh, Toast on fill.
Pattern · Onboarding and access
How people get in and get going: sign-in, two-step verification, invitations, the Get started checklist, connected accounts, the lookup meter and the sandbox clock.
Pattern · Reports
The Dashboard: three fixed views over one load, read-only, for a chosen period and scope. A number changes where its record is edited, and every number that can list its records links to them.