Pebble Accessible SAAS Signup Flow

Honestly? It was a pleasure to review this project, because it's clear you started from the foundations rather than jumping straight into drawing screens. A token library with colors, typography and spacing is rare at this stage of learning. It's a great habit that pays off in team work.

The screens are clean and consistent. The hierarchy works, my eye naturally moved from the heading, through the fields, to the button. I also really like the decision to display the login error at the form level rather than on a specific field. That's correct practice aligned with OWASP, and it doesn't reveal whether an account exists.

The WCAG documentation is, for me, the standout feature of this project. Contrast checked, focus ring documented, tab order considered. I don't often see this even in more experienced work.

Overall, I see a genuinely mature, systems-driven approach to design here. Keep pushing forward with the next projects! 💪❤️

Hey Christopher,

You’ve put together a really interesting project. Kudos for the approach you took by starting with color tokens and building things from there. That kind of foundation usually makes a system easier to scale and maintain later on.

My favorite part is the color contrast table on the accessibility page. It has a great level of detail and it’s clearly structured, so it’s easy to understand how the colors perform across different combinations.

On that same page I also noticed the Error Identification section where you defined different error levels and their visual treatment. However, I didn’t notice those same patterns being used on the main screens. You did mark the required field indicator, but it’s not applied to the email field. Does that mean users could submit the form without entering an email?

A couple of smaller questions as well. On the sign-in screens there are two inputs labeled Email address, even though the second one is clearly meant for the password. It would probably be good to update that label so the intent is clearer.

I was also curious about the small circles at the end of the password inputs. What exactly do they represent? Are they meant to toggle password visibility, or do they serve another purpose?

I’d also be interested in hearing your reasoning for including a confirm password field instead of allowing users to enter the password just once.

One small visual nitpick as well: on the mockup screens the card with the content is slightly cut off. Since it’s being used as a cover image, it might be worth adjusting it so the full card is visible.

Awesome execution!

I love the clean and minimal look. Keeps users focus on the task at hand. The form validation screen is a nice touch as well. The only thing missing is a social sign up option with either Google, Facebook or Apple ID for an even seamless flow.

Great work Christopher. Love your detailed foundations! I noticed a circle next to the password, what would that mean?