Bubble.io Mini Course - [PART 1] Stripe Style Login
🎨 Want cleaner UI and better design in Bubble?
Bubble Design Lab gives you access to real projects, design walkthroughs, and direct feedback from Nick. Join now for just $39/month:
👉 https://www.skool.com/bubble-io/about
Stripe-Style Login Page in Bubble – Series Intro
In this intro video, we preview what you’ll be building in this mini-series: a beautiful, Stripe-inspired login experience built completely in Bubble. You’ll see the final result, understand the design goals, and learn how to prep your app with style variables, font selection, and button presets before starting.
What you’ll learn:
What you’ll build in the Stripe-style login mini-course
Key UI patterns: animated states, toggles, and clean spacing
How to set up your fonts, colours, and reusable button styles
Design-first thinking in Bubble to create clean, modern UIs
A full walkthrough of preparing your app’s styles and layout for fast building
Key moments:
00:00 – Previewing the Stripe-style login page UI
00:18 – Page features: toggles, animations, layout
00:40 – What’s included (and not) in this build
01:05 – Why this is a design-focused series
01:39 – Getting started: set up your styles tab
01:51 – Using the Inter font + primary colours
02:27 – Reviewing element styles and how to rename
03:00 – Setting up a “Primary” button preset
03:39 – Creating a “Secondary Transparent” button preset
04:25 – Box shadow settings and design polish
04:43 – What to expect in upcoming videos
04:51 – Community invite and where to get support