Find onboarding flow references by color and layout

Contents

• [Start with the flow, not the decoration](#start-with-the-flow-not-the-decoration)
• [Use color as a role system](#use-color-as-a-role-system)
• [A practical onboarding layout checklist](#a-practical-onboarding-layout-checklist)
• [Turn the references into a testable direction](#turn-the-references-into-a-testable-direction)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

For onboarding flow references, compare the examples by screen shape, visual hierarchy, and repeated color roles before copying any component. The useful starting set here is Paddle onboarding and Vellum AI, paired with a muted green palette that ranges from deep forest tones to softer sage accents.

Start with the flow, not the decoration

Use this quick review order for every reference:

1. Entry screen: What is the first action, and can a new user see it immediately?
2. Progress: Is the user moving through clear steps, or does each screen feel like a separate page?
3. Choice density: Does one screen ask for one decision, or several unrelated decisions at once?
4. Feedback: After an action, does the interface show what changed and what comes next?
5. Finish state: Is completion obvious, and does the user receive a useful next action?

Open the examples below and compare the first visible screen before borrowing a pattern. Paddle onboarding and Vellum AI have very different page proportions in the captured references, so they are useful for judging whether your own flow should feel compact and task-focused or more spacious and product-led.

Use color as a role system

The supplied palette points toward a restrained green direction rather than one single brand color. Treat the colors as roles:

• Primary action: choose one confident dark or mid green, such as #15502e or #14532d.
• Strong emphasis: use a deeper or more saturated tone, such as #233f2a or #254f1a, for selected states or important labels.
• Supporting action: reserve a brighter green, such as #1e6f30 or #2c7a4a, for secondary emphasis.
• Soft surfaces: use muted tones such as #556659, #4a5a4a, or #799c92 carefully, mainly where text remains easy to read.
• Small highlights: the lighter #2a966f can mark progress or confirmation without turning every element into an alert.

Do not use all twelve colors at equal strength. Pick one primary, one supporting color, one surface tone, and a neutral background. Check each step in grayscale too. If the selected state disappears without color, add a border, icon, label, or change in weight.

A practical onboarding layout checklist

For each screen, write down the following before designing:

• The single decision the visitor must make.
• The headline that explains why the decision matters.
• The main action and its location.
• The progress signal, such as a step label or completion indicator.
• The safe way to go back or skip.
• The message shown after success or validation.
• The smallest useful layout on a narrow viewport.

Favor a stable shell across steps: consistent header, content width, action placement, and spacing. Change the content inside that shell rather than making every step look unrelated. Keep secondary help close to the decision it explains, not in a separate paragraph far below the action.

Turn the references into a testable direction

Make two quick drafts. In the first, use a compact centered layout with one dominant action. In the second, use a wider layout with more explanation and a visible progress path. Put the same onboarding task in both versions and compare how quickly a new person can answer three questions: Where do I start? What is required? What happens next?

Then test the color roles independently from the layout. Keep the structure of the stronger draft, and try the dark green primary with the softer sage support tones. If a green button or status indicator is carrying meaning, pair it with text so the flow remains understandable without relying on color alone.

Use this in your AI agent

> Find captured onboarding flow references with compact or step-based layouts. Compare their visible structure, action placement, spacing, and observed color roles. Create a shortlist, explain which pattern fits a first-time user flow, and propose a four-color palette with primary action, supporting action, surface, and readable text roles. Do not invent details that are not visible in the references. Install Fudge for your AI agent

Use the references as a structure guide, then give each screen one job:

1. Welcome: explain the outcome and show one clear starting action.
2. Goal: ask what the user wants to accomplish, with a small set of choices.
3. Setup: collect only the information needed to personalize or continue.
4. Confirmation: summarize the choices and make corrections easy.
5. Next step: show the finished state and direct the user to the first useful action.

Keep the shell consistent across all five screens. Place the step indicator in the same location, keep the main action aligned consistently, and use the same content width. Borrow the compactness of a task-focused reference when the user already understands the product. Borrow the more spacious approach when the user needs context before making a choice.

Use the green palette sparingly: one primary action color, one selected-state color, and one quiet surface tone are usually enough. Add text labels to progress and validation states so the flow does not depend on color alone.

Score each candidate layout against the same checklist instead of choosing by appearance alone:

• Clarity: Can someone identify the next action in a few seconds?
• Focus: Does the screen ask for one decision or several?
• Progress: Can the person tell how much remains?
• Recovery: Can they go back, skip, or fix an answer without losing work?
• Fit: Does the layout stay readable on a narrow screen?
• Consistency: Do buttons, headings, fields, and messages keep the same positions and spacing from step to step?
• Meaning: Are selected, completed, warning, and disabled states distinguishable through more than color?

Give each category a simple 1-to-5 score for both drafts. If the wider layout wins only because it has more room for explanation, shorten the copy and retest it at the compact size. If the compact layout wins on speed but creates uncertainty, add a short explanation or a progress label rather than adding more visual elements. The best choice is the layout that makes the next decision easiest while preserving a clear path to completion.

Related questions

• Find portfolio homepage references by color and layout
• Login Page References by Color and Layout
• Find SaaS dashboard references by color and layout
• Ecommerce Product Page Design Examples for AI Coding Agents