Skip to content

Figma Breakdown — "Jordan Ellis · New hire · Full-time · Desktop (end-to-end)"

File: Preboarding + Onboarding (Worker Activation) Node: 576:13854 (section) Figma link: https://www.figma.com/design/A1hLPUqd8stYyulPzQHbBq/Preboarding---Onboarding--Worker-Activation-?node-id=576-13854 Canvas size: 37120 × 2310 px — this is not a single screen, it's a full end-to-end flow section containing 25 numbered screens (Desktop, 1440×900 each), laid out left-right in sequence, plus a few supporting artifacts (flow connectors, per-screen annotations, 3 alternate "unselected" states, and a flow-summary card).

This doc is a structural/content extraction meant as input to an architect/spec-to-code agent — not a pixel-level design spec. Pull exact colors/spacing per component from get_design_context on the individual screen node IDs below when you get to implementation.

1. Flow map

One persona (Jordan Ellis, Marketing Associate, new hire) moving through pre-boarding via a conversational agent ("Nova"), ending on their Day-1 homepage.

# Screen name Node ID Purpose
1 Email Invite — Magic Link 605:13473 Out-of-flow: the email that kicks off the journey
2 Magic-link sign-in 576:13855 Passwordless auth landing / verifying
3 Greeted by name 576:13886 Welcome + sets expectations (6 steps, ~15 min, start date)
4 Your plan overview 576:13913 Task list / progress overview
5 Meet Your Agent 576:13965 Offer to customize the agent (name/look/voice)
6 Name your agent 576:13996 Rename agent or keep default
7 Choose a look 576:14020 Pick agent avatar
8 Choose a voice 576:14058 Pick agent voice/language
9 Nice to meet you 576:14103 Confirms agent identity, transitions to tasks
10 Confirm your details 576:14129 Confirm profile pulled from signed offer
11 Policies & NDA — read 576:14167 NDA summary before signing
12 Policies & NDA — sign 576:14199 E-signature capture
13 Upload your ID 576:14224 I-9 document upload
14 Direct deposit 576:14247 Bank details (masked) confirmation
15 Preferred name for ID badge 576:14279 Badge/profile display name + live preview
16 Choose your laptop 576:14305 Equipment selection (MacBook Pro vs ThinkPad)
17 T-shirt size 576:14337 Swag sizing
18 Accommodations 576:14366 Optional accessibility/ergonomic requests
19 Background check — hand-off 576:14411 Hands off to Checkr, last task
20 Background check — resumed 576:14437 Returns after check clears
21 You did it, Jordan! 576:14462 All 6 steps complete milestone
22 Meet your manager 576:14489 Manager note (Priya Anand) while waiting for Day 1
23 Welcome to Day 1 576:14516 Transition: guest → employee
24 Day 1 homepage 576:14537 Landing homepage with first-week task list

Supporting artifacts in the same section: - 607:13532 — flow-summary-card: a written summary of "what happened / what's next / what's in the background" (useful as your PRD-style acceptance criteria — see §5). - 654:24430, 654:24551, 654:24659 — "State=Unselected" variants of screens 8 (Choose a voice), 16 (Choose your laptop), 17 (T-shirt size) — i.e. the empty/default state before the user picks an option. - 24× flow-arrow connectors and 24× annotation nodes (one per numbered screen) — designer notes layered above the canvas, not app content.

2. Recurring components (design-system inventory)

These names repeat across nearly every screen — treat them as your component boundaries when translating to code:

  • chat-glass-panel — a translucent side panel present on every screen (left side, 440×828) containing the conversational agent thread: nova-chat-header, nova-agent-message, nova-chat-input. This is the persistent "Nova chat" shell wrapping the whole flow.
  • canvas — the main content stage (936×772) to the right of the chat panel. Present on every screen. Internal structure is consistent:
  • stageLabel — small eyebrow/step label
  • title — page heading
  • subtitle — supporting line
  • contentStack — the screen-specific body content (varies per screen, see §4)
  • cta / cta-ghost / ctaGhost — primary and secondary action buttons, consistently at the bottom
  • card / card-hero / card-offer / card-name / card-looks / card-identity / card-msg — bordered content cards used for informational or interactive blocks inside contentStack.
  • chip — small pill/badge, used for status labels (Now, Up next, Waiting, Ready, Selected) and for option toggles (name/look/voice picker chips).
  • taskRow — list row pattern (icon/status + label + chip) used on the plan-overview screen (#4).
  • voiceRow / nameRow — row pattern for voice options: avatar/play button + name + locale + sample line.
  • tile — square selectable option card (used in "Choose a look").
  • Generic Frame — many mid-flow screens (10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24) use unnamed/generic Frame wrappers around label+value pairs, list items, or option cards rather than the more descriptively-named components from screens 2–9. This suggests the later screens may be less "componentized" in Figma than the earlier ones — worth confirming actual styles via get_design_context per screen rather than relying on names alone.
  • while-you-wait — callout box used once (screen 20) for a "status while waiting" message.
  • emailCard — the email client chrome used only on screen 1 (avatar, sender meta, subject, body, CTA, footer disclaimer).
  • Icon leaves — most icons are unnamed ("") glyph nodes inside 44×44 icon frames; treat as icon-component slots to fill with your icon set, not literal Figma vectors (confirm via get_design_context/download_assets per screen when implementing).

3. Colors & tokens

Pulled via Figma variable definitions bound to this node (these are the actual design tokens, not just visually-sampled hex values):

Token Value Likely usage
color/brand/primary/500 #6b40bf Primary CTA fill, brand accent
color/brand/primary/600 #5320b7 Primary CTA hover/pressed, links
color/text/link-hover #5320b7 Link hover state
color/surface/brand-subtle #6b40bf0d (~5% opacity) Subtle brand-tinted surfaces (e.g. selected chip/tile background)
color/text/primary #1e1e1e Headings, primary body text
color/text/secondary #6b6b6b Supporting text
color/text/tertiary #6f6f6f De-emphasized text (very close to secondary)
color/text/placeholder #9ca3af Input placeholder text
color/text/inverse #ffffff Text on dark/brand fills
color/icon/muted #6b7280 Default icon color
color/background/surface #ffffff Card/panel background
color/background/app #f8f8f8 Page/app background
color/border/subtle #e5e5e5 Card/divider borders
elevation/card drop-shadow 0,2,8,0 #0000000F Card elevation

Note: a couple of entries were namespaced under Nova Design System/… (color/brand/primary/600, color/neutral/0 = #ffffff) — these look like the same tokens re-exposed from a shared "Nova Design System" library, so brand-primary-600 and white are confirmed consistent across both namespaces.

No dedicated typography variables came back in this query — the stageLabel / title / subtitle naming pattern strongly implies 3 consistent text styles (eyebrow, heading, supporting) reused on every screen; confirm exact font/size/weight via get_design_context on one screen (e.g. node 576:13855) since it returns text styles inline.

4. Per-screen structure & content

Each screen shares the same shell: chat-glass-panel (Nova chat thread, left) + canvas (main content, right, with stageLabel → title → subtitle → contentStack → cta/cta-ghost). Below is the screen-specific contentStack content and any deviation from the shell.

Not part of the chat shell (it's an email, rendered as emailCard). - Sender: avatar "M", "Meridian People Ops", hello@meridian.com · to jordan.ellis@gmail.com - Subject: "Welcome to Meridian, Jordan — start your pre-boarding" - Body: "Hi Jordan, Priya approved your pre-boarding plan — everything is ready for you. Tap the button below to open your private pre-boarding space and meet Nova, your onboarding agent. No password needed: this secure link is yours alone." - CTA: "Start your pre-boarding →" - Footer: "Link expires in 14 days · Sent automatically when your plan was approved"

Three sequential status cards (icon + copy), implying this screen represents 3 states/moments in one frame: 1. "We emailed you a secure link" / "jordan.ellis@gmail.com · one tap, no password" 2. "This link verifies it's you" / "Your offer email is your identity, nothing to remember, nothing to set up." 3. "Signing you in…" / "Verifying your secure link and opening your private pre-boarding space." - CTA: "Continue"

3 — Greeted by name (576:13886)

  • card-hero: "Hi Jordan." / "Welcome to Meridian." / "I'm Nova, I'll be your guide from now until your first day. Let's get you ready, one step at a time."
  • stats row (3 stats): "6 · quick steps", "~15 min · today", "July 7 · your first day"

  • Cta

    "Let's begin →"

4 — Your plan overview (576:13913)

  • listHeader: "Your 6 steps" / "0 of 6 done · ~15 min"
  • 6× taskRow (label + status chip):
  • Confirm your details — Now
  • Review & sign policies — Up next
  • Upload your ID — Up next
  • Choose your laptop — Up next
  • Set up direct deposit — Up next
  • Background check — Waiting

  • Cta

    "Start with the first →"

5 — Meet Your Agent (576:13965)

  • card-offer: avatar "…", "Want to make me yours?" / "Give your agent a name, a look and a voice, or keep me as Nova. Totally up to you. Takes about a minute." + 3 preview chips: Name, Look, Voice
  • Note: "You can change any of this later in Settings."

  • Cta

    "Yes, let's" · Ghost CTA: "Keep as Nova"

6 — Name your agent (576:13996)

  • card-name: label "WHAT SHOULD YOU CALL ME?", text input pre-filled "Nova", helper "Most people keep Nova, or pick a name of their own. You can rename me anytime."
  • Quick-pick chips: "Keep Nova", "Suggest one"

  • Cta

    "Continue"

7 — Choose a look (576:14020)

  • card-looks: 5× tile (avatar options), first marked "Selected", others placeholder-labeled "Text" (i.e. undefined copy in this mock — flag for content review)
  • Helper: "Pick a look, you can always change it later."

  • Cta

    "Use this" · Ghost CTA: "Show more"

8 — Choose a voice (576:14058) — and its 654:24430 "Unselected" variant (identical content, different selection state)

4× voiceRow (play button + name + locale + sample line), including localized sample copy: - Maya · US English · "Hi Jordan, I'm Nova. Let's get you ready for day one." - Amara · British English · same line - Léa · French (FR) · "« Bonjour Jordan, je suis Nova. Préparons votre premier jour. »" - Mateo · Spanish (MX) · "«Hola Jordan, soy Nova. Preparemos tu primer día.»" - CTA: "Continue" - Implementation note: this is the one screen in the flow with real i18n content — worth checking whether voice-sample strings need actual translation/localization infra or are static per-voice.

9 — Nice to meet you (576:14103)

  • card-identity: avatar "…", meta "Nova" / "Maya's voice · US English", chip "Ready"
  • card-msg: "Nice to meet you." / "I'm Nova, in Maya's voice. I'll be right here whenever you need me, let's get your tasks done."

  • Cta

    "Start my tasks →"

10 — Confirm your details (576:14129)

Read-only profile confirmation, label/value pairs: - Name: Jordan Ellis - Role: Marketing Associate - Team: Marketing · reports to Priya Anand - Start date: July 7, 2026 - Location: Chicago (hybrid) - Disclaimer: "Pulled from your signed offer, nothing is shared until you confirm." - CTA: "Yes, that's right →" · Ghost CTA: "Something's off"

11 — Policies & NDA — read (576:14167)

  • Doc header: "Confidentiality & IP Agreement" / "Employee handbook · Marketing sees unreleased campaigns, so this one matters" / "~4 min read"
  • "WHAT YOU'RE AGREEING TO" — 3 bullet points:
  • Keep unreleased campaign and client work inside Meridian
  • Work you create on the job belongs to Meridian
  • Applies during employment and after you leave

  • Cta

    "Continue to sign →"

12 — Policies & NDA — sign (576:14199)

  • "SIGN HERE" — signature capture area ("Draw or type your signature"), context line "Jordan Ellis · Marketing Associate" / "Confidentiality & IP Agreement"
  • Disclaimer: "You read the full agreement on the last step, signing completes it."

  • Cta

    "Agree & sign"

13 — Upload your ID (576:14224)

  • Drop-zone: "Drag your ID here" / "or browse from your files — a driver's licence or passport both work"
  • Disclaimer: "For I-9 verification, I'll figure out the document type automatically."

  • Cta

    "Upload file" · Ghost CTA: "Use camera"

14 — Direct deposit (576:14247)

Masked bank details, label/value pairs: - Account holder: Jordan Ellis - Routing number: •••• 0021 - Account number: •••• 4487 - Account type: Checking - Disclaimer: "Everything's encrypted, this goes straight to payroll, nowhere else." - CTA: "Set up direct deposit →"

15 — Preferred name for ID badge (576:14279)

  • Label "NAME ON YOUR ID BADGE", editable field pre-filled "Jordan Ellis", helper "I've got your legal name, change it if you go by something else."
  • Live badge preview: "Jordan Ellis" / "Marketing · Meridian" — caption "Live preview of your badge & profile"

  • Cta

    "Looks good →"

16 — Choose your laptop (576:14305) — and 654:24551 "Unselected" variant

Two equipment option cards: - MacBook Pro — "14-inch · M-series" (marked "Selected" in default state) - ThinkPad — "X1 Carbon" - Disclaimer: "Either is ready to ship to your home before Day 1." - CTA: "Confirm choice"

17 — T-shirt size (576:14337) — and 654:24659 "Unselected" variant

  • Label "PICK YOUR SIZE" — size options: XS, S, M, L, XL, XXL, XXXL, plus "Request a different size"
  • Disclaimer: "There's some Meridian swag waiting on your desk."

  • Cta

    "That's my size"

18 — Accommodations (576:14366)

Optional multi-select list: - Adaptive / ergonomic keyboard - Braille keyboard or display - Screen reader software - Screen magnifier - Height-adjustable desk - Larger or second monitor - Something else… - Disclaimer: "Completely optional, and private — this only goes to IT setup." - CTA: "Save & continue →" - Note: has 2× nova-agent-message (only screen with two agent chat bubbles instead of one) — possibly a multi-turn chat moment worth checking in the actual file.

19 — Background check — hand-off (576:14411)

  • "Background check" / "Via Checkr · about 5 minutes", tag "Last task"
  • Disclaimer: "I'll track it and let you know when it's done, you won't need to check back."

  • Cta

    "Continue with Checkr →" · Ghost CTA: "Why Checkr?"

20 — Background check — resumed (576:14437)

  • "Background check complete" / "Via Checkr, finished while you were away", status "Verified"
  • "That was the last task. Nice work."

  • Cta

    "See what's next →"

  • while-you-wait callout: "While you wait" / "Everything else is done. The check usually clears in 1-2 days; Nova will ping you the moment it does."

21 — You did it, Jordan! (576:14462)

  • "All 6 steps complete" / "Everything's set for July 7, nothing left to do before Day 1."
  • A row of 6 unlabeled Frame items (likely 6 checkmarks/step icons, one per completed task)

  • Cta

    "Go to your homepage →" · Ghost CTA: "Explore while you wait"

22 — Meet your manager (576:14489)

  • Manager card: initials "PA", "Priya Anand" / "Your manager · Marketing"
  • Quote: "Hi Jordan, so glad you're joining the team. Can't wait to work with you. Ping me anytime before Day 1."
  • Context: "You're done early — while you wait for Day 1, your manager left you a note."

  • Cta

    "Say hi back" · Ghost CTA: "Maybe later"

23 — Welcome to Day 1 (576:14516)

  • "You're officially a Meridian employee" / "Everything you set up is right here, nothing to redo."
  • Carry-over summary: "… Nova · Maya's voice · your plan, all carried over"

  • Cta

    "Open my workspace →"

24 — Day 1 homepage (576:14537)

Task-list style homepage, 3 rows: - "Set up your laptop & accounts" / "IT is expecting you" — tag "First task" - "Meet your team" / "3 intros from Priya" — tag "Today" - "Your first-week goals" / "Set with your manager" — tag "Later" - Agent note: "… I've teed up your IT setup and a couple of intros, take them in any order." - CTA: "Start first task →"

5. Flow-summary card (607:13532)

A designer-authored recap sitting off to the side of the flow — genuinely useful as acceptance-criteria language for an architect/PRD:

  • What just happened: "From magic-link email to Day-1 ready: identity confirmed, agent customized, policies signed, documents filed, screening consented — one guided conversation."
  • What happens next: "Waiting for Day 1 — guest access converts automatically to a full employee account, and the homepage takes over."
  • In the background: "Background check runs at Checkr · laptop ships · badge prints with preferred name · payroll + benefits configured · HR Ops and Priya notified."

This implies at least these backend integrations/side effects to account for in the implementation plan: Checkr (background check), a shipping/fulfillment step for equipment, a badge-printing system, payroll/benefits provisioning, and notifications to HR Ops + the hiring manager. It also implies an account-state model (guest → full employee, converting automatically on the start date).

6. Notes for the architect agent

  • Persistent shell: every screen = chat-glass-panel (agent conversation, static across the flow) + canvas (step-specific content). This strongly suggests a layout/route pattern where the chat panel is a persistent layout component and each numbered screen is a routed "step" that only swaps canvas contents — good candidate for a step-machine/wizard pattern.
  • State variants exist for 3 steps (voice, laptop, T-shirt size) with an explicit "Unselected" default state before user picks — build these as real selectable/toggle states, not static screens.
  • Later screens (10–24) lean on generic Frame naming rather than descriptive component names — don't trust structure/styling assumptions from names alone for those; pull get_design_context per screen when you get to implementation.
  • Copy gaps flagged: screen 7 ("Choose a look") has placeholder "Text" labels on 4 of 5 tiles — real copy is missing in the design and should be confirmed with design/product before spec'ing.
  • i18n surface: screen 8 (voice picker) is the only screen with non-English sample copy (French, Spanish) — confirm whether this is static per-voice-option content or implies broader localization requirements.
  • Colors/tokens above came from Figma's bound variables (not visual sampling) — safe to map directly to your design-token layer.

7. Screenshots

Readable per-screen screenshots (exported via Claude Desktop's Figma connector) are checked into screenshots/ alongside this file:

File Screens
01_email-invite-magic-link.png 1 — Email Invite — Magic Link
03-04_greeted-by-name_plan-overview.png 3, 4 — Greeted by name; Your plan overview
11_policies-nda-read.png 11 — Policies & NDA — read
13-14_upload-id_direct-deposit.png 13, 14 — Upload your ID; Direct deposit
19-20_background-check-handoff_resumed.png 19, 20 — Background check, hand-off; resumed
21-22_you-did-it_meet-your-manager.png 21, 22 — You did it, Jordan!; Meet your manager
23-24_welcome-day1_day1-homepage.png 23, 24 — Welcome to Day 1; Day 1 homepage

Not yet captured: screens 2, 5–10, 12, 15–18 (sign-in, agent customization, confirm details, laptop/T-shirt/accommodations, doc signing). Pull those the same way if/when needed — see §1's node ID table for the exact node to screenshot.