Patterns
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.
Sign-in, two-step and invites
Patterns · Onboarding, auth and billing
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.
Sign-in and entry page
Built from: Entry page (32px app icon, 320px column, legal footer) · Entry header · Button lg · Field · Input · Input OTP · Field separator. Also holds the clock page, MFA and invitations.
Continue to Ascern
Sign in or join your agency with your work email.
Continue with Google
Continue with Microsoft
or
Work email
you@agency.com
Continue with email
You agree to Skillflo's
Terms
and
Privacy Policy
© 2026 Skillflo
Privacy
Terms
Subprocessors
Support
Check your email
We sent a six-digit code to maya@northbridge.co
4
8
2
0
Continue
Resend code in 42s
Use a different email
© 2026 Skillflo
Privacy
Terms
Subprocessors
Support
Your device's clock and our server disagree.
Check your date and time settings, then reload.
Reload
© 2026 Skillflo
Privacy
Terms
Subprocessors
Support
· Every entry page is one 320px column under the 32px app icon (green tile, radius 7, white mark), not the full lockup; the heading carries the name. Title 16/20/600, one line under it, then the form. The legal footer sits at the bottom.
· Buttons are the large size (36px) and full width. One primary.
· Providers first, then "or", then email. A code fills in six slots and submits itself on the sixth digit.
· Resend waits 60 seconds and counts down. Errors sit under the field and say what to do.
· Pages that stop someone (clock, refused invitation) say what happened and give one way out.
· Screen readers: the code field is labelled "Six-digit code"; the page title is the h1.
Two-step verification
Built from: Entry page · Input OTP · Button · Field · Alert · Dialog. Set up, backup codes, sign-in code and the step-up check before a sensitive change.
Set up two-step verification
Northbridge Talent asks every member to use an authenticator app. Scan the code, then enter the six digits it shows.
Can't scan it? Enter this key instead:
JBSW Y3DP EHPK 3PXP
JBSW Y3DP EHPK 3PXP
Turn on two-step verification
Sign out
Save these backup codes somewhere safe. Each one works once if you lose your authenticator. You won't see them again.
k7d2m-q9x4p
r3vh8-w2n6c
p5tb1-z8ky3
m9qf4-h6rd2
c2wx7-n4jv8
t6gp3-x1mb9
y8ck5-d3qz7
h4nr2-v9fw6
b1zt8-k5pm4
w7dj6-r2cx3
Copied
Download
I've saved my codes
Enter your authenticator code
Your account uses two-step verification. Enter the six digits your authenticator app shows.
3
1
9
6
0
2
That code didn't work. Enter the current code from your authenticator app.
Verify
Use a backup code instead
Sign out
Confirm it's you
Enter the code from your authenticator app to carry on.
Confirm
· Set up shows the QR code, the key in groups of four for typing, then the code field. Backup codes come once, right after the first authenticator is verified.
· Backup codes: ten, monospace, two columns. Copy turns to Copied with a check; Download saves a .txt. The primary is "I've saved my codes".
· A wrong code turns every slot red and says how to fix it. Five wrong backup codes lock for 15 minutes, and the message says so.
· Step-up asks again before a sensitive change, in a dialog over the page. No authenticator: the dialog emails a fresh code instead.
Invite members
Built from: Dialog lg · Field set · Input · Select · Icon button · Button · Item · Badge · Entry page. Settings › Members, then the invitation link.
Invite teammates
Each invitation works only for the exact email you enter. Nobody joins Northbridge Talent just by having the same domain.
Email and role
*
sam.okafor@northbridge.co
Consultant
priya.shah@northbridge.co
Manager
priya.shah@northbridge.co is already a member.
lena.hart@northbridge.co
Consultant
Add another
Type or paste several emails, separated by commas, spaces or new lines.
Primary team
Technology desk
Everyone in this batch joins this team. You can move people later.
2 ready
Cancel
Create invites
· One row per address: email, role (Admin, Manager or Consultant), remove. A comma, space or new line finishes an address and starts a new row, as a mail To field does.
· A row's problem shows after the person leaves the field, never while typing: invalid, already a member, or already in the list.
· The footer counts what is ready to send. Create invites is the one primary.
· Next, a dialog lists each link with Copy, in a read-only field so a blocked clipboard never loses it. Links expire after 7 days.
· Pending invitations sit in their own table under Members, with Resend and Revoke.
Join Northbridge Talent
Priya Shah invited you to join the team.
N
Northbridge Talent
app.ascern.io/northbridge
Consultant
Your name
Sam Okafor
Joining as sam.okafor@northbridge.co
Join Northbridge Talent
Not now
This invitation is for another email
You're signed in as sam@gmail.com. Use the address the invitation was sent to.
Sign in with another email
Back to Ascern
· The join page names who invited them, shows the agency and the role, and asks only for a name.
· It says which email they are joining as, under the field.
· A refused link says why in the title: not available, expired, withdrawn, another email, or email not confirmed. Then one way out.
· Already a member: the title says so and the button opens the agency.
Checklist, connections, usage and sandbox
Onboarding checklist
Built from: Card · Button (primary, outline, quiet) · Icon button · Menu (Import). Get started, at the top of Today.
Get started
2 of 6 done
Setup guide
2 done
Connect Echo
Connect Echo
Finding people…
Gmail · reading mail since March · Calendar · 214 events read
Import your jobs, clients and candidates
Import
or
drop any files on Flo
Invite your team
Invite teammates
Hide done
Connect Gmail
Connected · Open Inbox
Connect your Google or Outlook calendar
Connected · Open Meetings
Finish setup · 2 of 6 done
After ×, until every step is done.
· Steps in order: Gmail, calendar, Echo, review the people found, import, invite. Only an Owner sees invite.
· The first step not done gets the grey fill and the only primary button. Every other step uses outline.
· Done steps fold into one "2 done" line; unfolded, each still links to where it lives.
· While Ascern is still reading a connection, the step says "Finding people…" and what it is reading. It waits on Ascern, not on the member.
· × hides the card; it comes back as one outline button. The card goes away once every step is done.
Connect account
Built from: Radio group · Button · Hint · Item (media, title, badge, description, actions) · Alert dialog. The Inbox before Gmail, and Account › Connections.
Gmail isn't connected
The Inbox holds your Gmail threads with your Candidates and Contacts. Everything else stays in Gmail.
What Ascern reads
Contact creation
Sent and received
People you've emailed either way, and people you've met.
Sent
People you've sent emails to, and people you've met.
None
Nobody from your mail.
You approve each person Ascern finds on People we found.
Connect Gmail
Connect Outlook
Setup guide
Gmail
Connected
Connected as maya@northbridge.co · 3 Oct 2026
Disconnect
Google Calendar
Synced
Connected as mchen@gmail.com · 3 Oct 2026
Your Ascern sign-in is maya@northbridge.co. That's fine if you meant to connect this account.
Sync now
Switch account
Disconnect
Echo
Needs attention
Connected as maya@northbridge.co · 1 Oct 2026
Reconnect
Disconnect
· Before connecting: one line on what lands in Ascern, what it reads behind a hint, then the one choice that matters (who becomes a contact), then Connect.
· A provider that isn't built yet shows disabled with a "Coming soon" hint.
· One row per connection: icon tile, name, status pill, who it is connected as and since when, then actions. Disconnect is always last and quiet.
· An account other than the sign-in email gets a plain note, not a warning. Switch account connects the new one before it offers to remove the old.
· Disconnect asks first and says what is kept and what is deleted.
Usage meter
Built from: Field (title, description) · Progress bar · Alert (warning). Settings › General, company lookups. Admins only; Skillflo pays, so there is nothing to buy.
Company lookups
240 of 500 used in the last 30 days. Each new company with a website, and each Fill from website, uses one.
Company lookups
412 of 500 used in the last 30 days. Each new company with a website, and each Fill from website, uses one.
Company lookups are running low: 88 left.
The oldest come back on 22 Oct.
Company lookups
500 of 500 used in the last 30 days. Each new company with a website, and each Fill from website, uses one.
Company lookups are used up until 22 Oct.
New companies still save. Their details wait for the next lookup or for someone to type them.
· Say the count in words first ("240 of 500 used"), then the bar. The bar is 6px, grey until 80 percent.
· From 80 percent the bar and an alert turn warning: how many are left and the day the oldest come back.
· Used up stays a warning, not an error: nothing breaks, and the alert says what still works.
Sandbox clock controls
Built from: Page header · Button · Switch · Badge (warning) · Alert dialog. Settings › Sandbox, for sandbox agencies only. Owners and Admins reach it from the Sandbox badge.
Sandbox
Story time
Day 3, 14:20,
212 of 540 events delivered.
Play next hour
Play next day
Play to end
Real time
Reset
Played 48 events, carrying on…
Checkpoints
Play to day-1-briefing
the client briefing approved into its Job
Play to day-4-offer
offer threads tagged, a voice log filed
Play to day-10-placed
the accepted offer and its voice log filed
Sandbox
In the sidebar on every screen. Folded rail: an 8px warning dot.
Reset the sandbox?
Every record, conversation, meeting and Flo card in this agency is deleted, and the story starts again from day 0.
Cancel
Reset
· The clock line comes first: story time and how many events are delivered. Before a reset it says "Reset the sandbox to start the story."
· Step controls are buttons in order of size: hour, day, to end. Real time turns them off while it runs. A long play reports progress as it goes.
· Reset is the soft danger button and always asks first. Checkpoints jump to a named point and say what it shows.
Pattern · Meetings
The composites on Meetings and a meeting's page: where the calendar sits, how one meeting opens, and what happens before and after the call. Each is built from shared components; the colour of a meeting is its type.
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.