Pebble Accessible SAAS Signup Flow

Pebble

Pebble is a mental health SaaS concept designed as part of the UXCEL UX Design career path. The brief was to design an accessible sign-up and sign-in flow.

Approach

I built the project in three layers: foundations first (colour tokens, type scale, spacing, radius), then components (five variant sets covering inputs, buttons, labels, errors and checkboxes), then screens assembled from those components.

Key decisions

The palette centres on a desaturated sage green paired with a warm off-white ground. All text and interactive colours were checked against WCAG 2.1 AA (4.5:1 for text, 3:1 for UI elements).

Typography uses Inter throughout with a mobile-first scale; line heights follow WCAG 1.4.12 text spacing guidelines.

Components were built as Figma variant sets with a single-property naming convention to avoid sparse variant matrices.

Screens use instances exclusively, no detached overrides.

Outcome

Four screens (sign-in default, sign-in error, sign-up, success state), five component sets, a full token library, and a WCAG compliance reference ready to hand off.

Prototype

https://www.figma.com/proto/Lev4foP57QwAQgjPRJGngR/Accessible-Signup-Form-for-SaaS-Platform?page-id=9%3A60&node-id=11-33&viewport=144%2C387%2C0.04&t=ITsSGwzZIuzojDBH-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=11%3A33

Screens

Foundations

Accessibility

Components