Stepper Component  ·  Prototype

Style:
Stakeholder Review

Interactive Demo

Rebrand · Core Blue
5 | Step 1 of 5 Saving…

Step

Interactive Vertical Stepper

5 Steps · Rebrand
Active Step Content
Saving…

3-Step Vertical Variant

Static preview

Mobile Breakpoint

375px viewport — collapses to dropdown
Spec reference — open state
Live interactive demo — collapsible, fully interactive

Conditional Flow

Internal branching · step-level conditions

Step 1 sets the top-level path. Within each path, certain steps contain internal conditions — a selection inside that step immediately spawns additional steps (shown in purple) into the flow before you advance.

Saving…

Live Branch Map

Select a path to see internal branches

No path selected yet. Choose a request type in Step 1 to populate this map.

Step Dot States

Default variant (icon)
Incomplete
(not reachable via click)
Partly complete
(hover → pencil)
Current
Numeral variant
1
Incomplete
2
Current
Complete

Connector Line States

Incomplete
Complete

Anatomy

① Step dot – Indicates step status (incomplete / current / complete)
② Connector line – Visually links steps; color reflects progress
③ Step label – Text below dot; bold when current

Color Tokens

Color tokens referenced · 🌈 Other/Core Blue & global/text variants

#0061F4
🌈 Other / Core Blue
--blue-primary
Current & complete dot · complete connector
#281805
global / text / text_on_light
--gray-900
Current step label · primary text
#FFFFFF
global / text / text_on_dark
--white
Numeral inside blue dot · surface
#E0E0E0
color / 🌈-neutral / neutral-150
--gray-200
Incomplete connector · incomplete dot border
#ABABAB
Sequoia / neutral-300
--gray-400
Incomplete label · placeholder / inactive text
#6B6B6B
Sequoia / neutral-500
--gray-600
Complete step label · secondary text
#F2F2F2
Sequoia / neutral-50
--gray-100
Page background · section surfaces

Color by Stepper State

StateDotConnectorLabel
Current
1
#0061F4
#E0E0E0
#281805 bold
Complete
#0061F4
#0061F4
#6B6B6B
Incomplete
3
bg:#FFF · #E0E0E0
#E0E0E0
#ABABAB
Partly Complete
#0061F4
split
#281805 bold
▶ CSS Variable Definitions 
:root {
  /* Brand */
  --blue-primary: #0061f4;   /* 🌈 Other/Core Blue */

  /* Text */
  --gray-900:     #281805;   /* global/text/text_on_light */
  --gray-600:     #6b6b6b;
  --gray-400:     #ababab;
  --white:        #ffffff;   /* global/text/text_on_dark */

  /* Surfaces & Connectors */
  --gray-200:     #e0e0e0;   /* color/🌈-neutral/neutral-150 */
  --gray-100:     #f2f2f2;

  /* Geometry */
  --dot-size:        32px;
  --dot-size-sm:     24px;
  --line-thickness:   4px;
}

Black Style Reference

Figma token: color / 🌈-neutral / warm-black-850  ·  hex #281805

Rebrand vs Black — dot states at a glance

Rebrand style · Core Blue #0061F4
2
Current — solid blue, white numeral
Complete — solid blue, white ✓
Partly complete — solid blue, white dash
4
Incomplete — outlined gray, gray numeral
Connector — blue (done) / gray (ahead)
Black style · warm-black-850 #281805
Current — outlined ring + center dot, no numeral
Complete — solid dark, white ✓
Partly complete — solid dark, white dash
4
Incomplete — same as Rebrand (outlined gray)
Connector — dark (done) / gray (ahead)
Key Figma token difference: The Black theme replaces --blue-primary (#0061F4) with warm-black-850 (#281805) for all active/complete dot fills and connector lines. The Current dot also switches from a solid fill to an outlined ring + center dot pattern. Label colors remain #281805 in both styles.

Step Count Variants

Static preview