Pebble — Accessible SaaS Signup Flow

Pebble is a concept SaaS platform built around the idea of helping users manage their wellbeing. The tagline "Ground yourself" anchors the brand voice. This project focused on designing its authentication flow: a sign-in and sign-up experience that balances a calm, refined visual identity with a rigorous commitment to accessibility.

The goal was to go beyond surface-level contrast compliance and build a signup flow that is genuinely usable for people navigating with keyboards, screen readers, or low vision, without sacrificing the clean aesthetic expected of a modern SaaS product.

Authentication forms are one of the most friction-prone touchpoints in any SaaS product. Users encounter them before they've experienced any product value, which means errors, confusion, or inaccessible interactions can end the relationship before it begins.

The specific challenges this project addressed:

Designing error states that communicate clearly without relying on colour alone

Ensuring keyboard navigation is logical and fully operable

Meeting WCAG 2.1 AA contrast standards across all interactive states

Building a password field that supports both security and usability

Creating a success state that reassures rather than overwhelms

Colour and contrast The palette centres on a deep forest green (#002848 and #00AD46 family) for primary actions, with a warm off-white background (#F7F5F2). All text and interactive combinations were tested against WCAG AA ratios: body copy, supporting text, placeholder text, and error text were each documented with their contrast scores. A known edge case (the focused border state at 3:1 contrast) is noted in the accessibility documentation with a recommended production fix.

Typography The type scale is set in Inter, using a mobile-first approach. The scale runs from a 10px caption through to a 100px display size, with specific tokens mapped for form headings (H2), body copy, labels, and error messages. Line height and letter spacing meet the WCAG 1.4.12 text spacing requirements, documented explicitly in the file.

Spacing A 4px base spacing system underpins all component padding and layout, ensuring consistent density across the form without making touch targets feel cramped.

Focus management All interactive elements have a visible, 2px solid focus ring in the brand green, satisfying WCAG 2.4.11 (Focus Appearance). Tab order follows a logical reading sequence — email → password → action → secondary link — and was documented alongside a visual tab order map in the Accessibility page.

Error handling Errors are communicated at three levels:

Field-level: Inline error messages appear below the affected input with a red border and an error icon, so colour is never the sole indicator

Form-level: On submission failure, an error summary appears above the form listing all issues

Required field marker: A visible asterisk is present, with screen-reader-accessible labelling

Error messages use plain, actionable language ("Please enter a valid email address") and are associated with their inputs via ARIA, so screen readers announce them without the user having to search.

Password field A show/hide toggle on the password field allows users to verify their input, addressing a common source of frustration. Toggling the visibility is keyboard-operable, and the field state change is communicated accessibly.

Error recovery On form submission failure, the focus is programmatically moved to the error summary at the top of the form. Error messages appear inline and as a summary block, following the "no dead ends" principle.

The flow covers four states:

Sign In — Default: Clean form with email and password fields, a "Forgot password?" link, and a Sign in CTA. A secondary path leads to account creation.

Sign In — Error: The email field highlights with an inline error message ("Incorrect email or password. Try again.") and a red border — no colour reliance, clear next action.

Sign Up — Default: Email, password, and confirm password fields, with a required Terms and Privacy Policy checkbox before account creation.

Sign Up — Success: A confirmation screen with a checkmark, "You're all set!" heading, and a "Get started" CTA — closing the loop and providing a clear path forward.

The Figma file includes:

Foundations: Full colour token library, Inter type scale, 4px spacing scale, border radius system

Accessibility: Contrast audit, focus state documentation, tab order map, error pattern reference, typography spacing specification

Components: Reusable form components (inputs, buttons, labels, error states, password field, checkbox)

Screens: Four annotated high-fidelity screens

Pebble demonstrates that accessible design and refined visual design are not in tension. By building the accessibility requirements into the design system foundations — rather than layering them on afterward — every screen meets WCAG 2.1 AA as a baseline, with clear documentation for the one known exception and its recommended fix.

The file is structured to hand off directly to a development team, with tokens, spacing, and accessibility annotations all in place.