Playful UI design examples

Bright, rounded and friendly interfaces with bold colour and soft shapes. Every screen is an original design by Made Good Designs with its HTML code and a DESIGN.md of colour, type and spacing tokens, so you (or your AI coding agent) can build from it directly. Free to copy and adapt. See also all 3266 UI screens and 27 multi-step flows.

PlatformAll Web Mobile

ScreensAll Sign-in & onboarding Dashboards Lists & data Shopping & payments Account & admin Messages & media Tools & AI Industries States & feedback Emails Staff & operations

ComponentsUI components

WebsitesWebsite templates Website sections

StyleAll Minimal Editorial Brutalist Luxury Playful Corporate Retro Monochrome

414 screens

Theme

Dashboard · web · playful

Dashboard · mobile · playful

Data table (customers) — web, playful (Tallyfold)

Data table · web · playful

Data table (customers) — mobile, playful (Tallyfold)

Data table · mobile · playful

Analytics report (charts) — web, playful (Tallyfold)

Analytics charts · web · playful

Analytics report (charts) — mobile, playful (Tallyfold)

Analytics charts · mobile · playful

Login / sign-in — web, playful (Fernway)

Login · web · playful

Login / sign-in — mobile, playful (Fernway)

Login · mobile · playful

Sign up · web · playful

Sign up · mobile · playful

Forgot password · web · playful

Forgot password · mobile · playful

Two-factor verification — web, playful (Fernway)

Two-factor code · web · playful

Two-factor verification — mobile, playful (Fernway)

Two-factor code · mobile · playful

Welcome · web · playful

Welcome · mobile · playful

Onboarding step (2 of 4) — web, playful (Fernway)

Onboarding step · web · playful

Onboarding step (2 of 4) — mobile, playful (Fernway)

Onboarding step · mobile · playful

Notification permission request — web, playful (Fernway)

Permissions request · web · playful

Notification permission request — mobile, playful (Fernway)

Permissions request · mobile · playful

App home (today) — web, playful (Steadyfit)

Home · web · playful

App home (today) — mobile, playful (Steadyfit)

Home · mobile · playful

Feed · web · playful

Feed · mobile · playful

Task list (My tasks) — web, playful (Fernway)

List view · web · playful

Task list (My tasks) — mobile, playful (Fernway)

List view · mobile · playful

Detail view · web · playful

Detail view · mobile · playful

Kanban board · web · playful

Kanban board · mobile · playful

Calendar (week view) — web, playful (Fernway)

Calendar · web · playful

Calendar (week view) — mobile, playful (Fernway)

Calendar · mobile · playful

File manager · web · playful

File manager · mobile · playful

Search results · web · playful

Search results · mobile · playful

Document editor with toolbar — web, playful (Fernway)

Editor toolbar · web · playful

Document editor with toolbar — mobile, playful (Fernway)

Editor toolbar · mobile · playful

AI chat assistant · web · playful

AI chat assistant · mobile · playful

Team chat inbox (conversations) — web, playful (Fernway)

Chat list · web · playful

Team chat inbox (conversations) — mobile, playful (Fernway)

Chat list · mobile · playful

Team chat channel thread — web, playful (Fernway)

Chat thread · web · playful

Team chat channel thread — mobile, playful (Fernway)

Chat thread · mobile · playful

Video call in progress — web, playful (Fernway)

Video call · web · playful

Video call in progress — mobile, playful (Fernway)

Video call · mobile · playful

Image viewer (lightbox) — web, playful (Fieldnote)

Image viewer · web · playful

Image viewer (lightbox) — mobile, playful (Fieldnote)

Image viewer · mobile · playful

Map view · web · playful

Explore map — mobile, playful (Fieldnote)

Map view · mobile · playful

Video player · web · playful

Video player · mobile · playful

Create photo post — web, playful (Fieldnote)

Create post · web · playful

Create photo post — mobile, playful (Fieldnote)

Create post · mobile · playful

Class schedule (browse and book) — web, playful (Steadyfit)

Class schedule · web · playful

Class schedule (browse and book) — mobile, playful (Steadyfit)

Class schedule · mobile · playful

Booking details · web · playful

Booking details · mobile · playful

Booking confirmation (class) — web, playful (Steadyfit)

Booking confirmed · web · playful

Booking confirmation (class) — mobile, playful (Steadyfit)

Booking confirmed · mobile · playful

Product detail page — web, playful (Juniper Supply)

Product detail · web · playful

Product detail page — mobile, playful (Juniper Supply)

Product detail · mobile · playful

Cart · web · playful

Cart · mobile · playful

Checkout · web · playful

Checkout · mobile · playful

Order confirmation · web · playful

Order confirmation · mobile · playful

Settings · web · playful

Settings · mobile · playful

Profile · web · playful

Profile · mobile · playful

Notifications center · web · playful

Notifications center · mobile · playful

Team members and invite — web, playful (Fernway)

Team members · web · playful

Team members and invite — mobile, playful (Fernway)

Team members · mobile · playful

Roles and permissions — web, playful (Fernway)

Roles permissions · web · playful

Roles and permissions — mobile, playful (Fernway)

Roles permissions · mobile · playful

Audit log · web · playful

Audit log · mobile · playful

API keys · web · playful

API keys · mobile · playful

Integrations · web · playful

Integrations · mobile · playful

Billing and plans settings — web, playful (Fernway)

Billing plans · web · playful

Billing and plans settings — mobile, playful (Fernway)

Billing plans · mobile · playful

Invoice · web · playful

Invoice · mobile · playful

Paywall / upgrade prompt — web, playful (Fernway)

Paywall upgrade · web · playful

Paywall / upgrade prompt — mobile, playful (Fernway)

Paywall upgrade · mobile · playful

Cancel subscription · web · playful

Cancel subscription · mobile · playful

Empty state (inbox zero) — web, playful (Fernway)

Empty state · web · playful

Empty state (inbox zero) — mobile, playful (Fernway)

Empty state · mobile · playful

404 page not found — web, playful (Fernway)

404 error · web · playful

404 page not found — mobile, playful (Fernway)

404 error · mobile · playful

Loading skeleton · web · playful

Loading skeleton · mobile · playful

Invites sent confirmation — web, playful (Fernway)

Success confirmation · Invite sent · web · playful

Password reset confirmation — web, playful (Fernway)

Success confirmation · Password reset · web · playful

Plan upgraded confirmation — web, playful (Fernway)

Success confirmation · Plan upgraded · web · playful

Subscription cancelled confirmation — web, playful (Fernway)

Success confirmation · Subscription cancelled · web · playful

Invites sent confirmation — mobile, playful (Fernway)

Success confirmation · Invite sent · mobile · playful

Password reset confirmation — mobile, playful (Fernway)

Success confirmation · Password reset · mobile · playful

Plan upgraded confirmation — mobile, playful (Fernway)

Success confirmation · Plan upgraded · mobile · playful

Subscription cancelled confirmation — mobile, playful (Fernway)

Success confirmation · Subscription cancelled · mobile · playful

AI generation workspace — web, playful (Lumen Desk)

AI workspace · web · playful

AI generation workspace — mobile, playful (Lumen Desk)

AI workspace · mobile · playful

AI model and assistant settings — web, playful (Lumen Desk)

AI settings · web · playful

AI model and assistant settings — mobile, playful (Lumen Desk)

AI settings · mobile · playful

Document version history and diff — web, playful (Fernway)

Version history · web · playful

Document version history and diff — mobile, playful (Fernway)

Version history · mobile · playful

Approval queue · web · playful

Approval queue · mobile · playful

Doctor directory (find a doctor) — web, playful (Harbourline Health)

Doctor directory · web · playful

Doctor directory (find a doctor) — mobile, playful (Harbourline Health)

Doctor directory · mobile · playful

After-visit summary (telehealth) — web, playful (Harbourline Health)

Telehealth visit · Visit summary · web · playful

Telehealth video call in progress — web, playful (Harbourline Health)

Telehealth visit · In call · web · playful

Telehealth waiting room (device check) — web, playful (Harbourline Health)

Telehealth visit · Waiting room · web · playful

After-visit summary (telehealth) — mobile, playful (Harbourline Health)

Telehealth visit · Visit summary · mobile · playful

Telehealth video call in progress — mobile, playful (Harbourline Health)

Telehealth visit · In call · mobile · playful

Telehealth waiting room (device check) — mobile, playful (Harbourline Health)

Telehealth visit · Waiting room · mobile · playful

Clinic / hospital homepage — web, playful (Harbourline Health)

Clinic home · web · playful

Clinic / hospital homepage — mobile, playful (Harbourline Health)

Clinic home · mobile · playful

Music player (now playing) — web, playful (Tidewell)

Music player · web · playful

Music player (now playing) — mobile, playful (Tidewell)

Music player · mobile · playful

Playlist / album detail — web, playful (Tidewell)

Playlist · web · playful

Playlist / album detail — mobile, playful (Tidewell)

Playlist · mobile · playful

Portfolio home · web · playful

Portfolio home · mobile · playful

Case study · web · playful

Case study · mobile · playful

Security vulnerabilities dashboard — web, playful (Wardline)

Security dashboard · web · playful

Security vulnerabilities dashboard — mobile, playful (Wardline)

Security dashboard · mobile · playful

Project tracker dashboard — web, playful (Fernway)

Project tracker · web · playful

Project tracker dashboard — mobile, playful (Fernway)

Project tracker · mobile · playful

Learning dashboard (LMS) — web, playful (Brightpath)

Course dashboard · web · playful

Learning dashboard (LMS) — mobile, playful (Brightpath)

Course dashboard · mobile · playful

Multi-step form wizard · web · playful

Multi-step form wizard · mobile · playful

Bank account opening welcome — web, playful (Mintwell)

Bank onboarding · Welcome · web · playful

Bank account ready (success) — web, playful (Mintwell)

Bank onboarding · Account ready · web · playful

Bank identity verification (KYC) step — web, playful (Mintwell)

Bank onboarding · Verify identity · web · playful

Bank account opening welcome — mobile, playful (Mintwell)

Bank onboarding · Welcome · mobile · playful

Bank account ready (success) — mobile, playful (Mintwell)

Bank onboarding · Account ready · mobile · playful

Bank identity verification (KYC) step — mobile, playful (Mintwell)

Bank onboarding · Verify identity · mobile · playful

Barcode / product scanner camera view — web, playful (Dewline)

Product scan · Camera · web · playful

Product scan result (ingredients and skin match) — web, playful (Dewline)

Product scan · Result · web · playful

Barcode / product scanner camera view — mobile, playful (Dewline)

Product scan · Camera · mobile · playful

Product scan result (ingredients and skin match) — mobile, playful (Dewline)

Product scan · Result · mobile · playful

Master–detail split view (docs list and detail pane) — web, playful (Fernway)

Split view (master-detail) · web · playful

Master–detail split view (docs list and detail pane) — mobile, playful (Fernway)

Split view (master-detail) · mobile · playful

Flow canvas editor (sitemap / onboarding diagram) — web, playful (Fernway)

Canvas editor · web · playful

Flow canvas editor (sitemap / onboarding diagram) — mobile, playful (Fernway)

Canvas editor · mobile · playful

Office floor plan (desk and room booking) — web, playful (Fernway)

Floor plan · web · playful

Office floor plan (desk and room booking) — mobile, playful (Fernway)

Floor plan · mobile · playful

Voice call in progress — web, playful (Fernway)

Voice call · web · playful

Voice call in progress — mobile, playful (Fernway)

Voice call · mobile · playful

Toast with undo (task deleted) — web, playful (Fernway)

Toast / snackbar with undo · web · playful

Toast with undo (task deleted) — mobile, playful (Fernway)

Toast / snackbar with undo · mobile · playful

Confirm delete dialog (destructive) — web, playful (Fernway)

Confirm dialog (destructive) · web · playful

Confirm delete dialog (destructive) — mobile, playful (Fernway)

Confirm dialog (destructive) · mobile · playful

Side drawer over a data table (record details) — web, playful (Tallyfold)

Side drawer · web · playful

Side drawer over a data table (record details) — mobile, playful (Tallyfold)

Side drawer · mobile · playful

Command palette (open) — web, playful (Fernway)

Command palette · web · playful

Command palette (open) — mobile, playful (Fernway)

Command palette · mobile · playful

Date range picker (open) — web, playful (Tallyfold)

Date range picker · web · playful

Date range picker (open) — mobile, playful (Tallyfold)

Date range picker · mobile · playful

Form with inline validation errors — web, playful (Fernway)

Form validation errors · web · playful

Form with inline validation errors — mobile, playful (Fernway)

Form validation errors · mobile · playful

Sign-in error · Account locked · web · playful

Sign-in error · Wrong password · web · playful

Two-factor error: code expired — web, playful (Fernway)

Sign-in error · Code expired · web · playful

Sign-in error · Account locked · mobile · playful

Sign-in error · Wrong password · mobile · playful

Two-factor error: code expired — mobile, playful (Fernway)

Sign-in error · Code expired · mobile · playful

Checkout: card declined — web, playful (Juniper Supply)

Card declined at checkout · web · playful

Checkout: card declined — mobile, playful (Juniper Supply)

Card declined at checkout · mobile · playful

Find a pro (home services directory) — web, playful (Handmere)

Find a pro (home services) · web · playful

Find a pro (home services directory) — mobile, playful (Handmere)

Find a pro (home services) · mobile · playful

Book a home-service visit · Details and arrival window · web · playful

Booking error: arrival window just taken — web, playful (Handmere)

Book a home-service visit · Arrival window just taken · web · playful

Book a home-service visit · Details and arrival window · mobile · playful

Booking error: arrival window just taken — mobile, playful (Handmere)

Book a home-service visit · Arrival window just taken · mobile · playful

Job done: pay, tip and rate — web, playful (Handmere)

Job tracker · Job done, pay and rate · web · playful

Job tracker · Pro on the way · web · playful

Job done: pay, tip and rate — mobile, playful (Handmere)

Job tracker · Job done, pay and rate · mobile · playful

Job tracker · Pro on the way · mobile · playful

Invoice email (paid) — web, playful (Fernway)

Account email · Invoice · web · playful

Magic link sign-in email — web, playful (Fernway)

Account email · Magic link sign-in · web · playful

Password reset email — web, playful (Fernway)

Account email · Password reset · web · playful

Verify email address email — web, playful (Fernway)

Account email · Verify email · web · playful

Account email · Welcome · web · playful

Invoice email (paid) — mobile, playful (Fernway)

Account email · Invoice · mobile · playful

Magic link sign-in email — mobile, playful (Fernway)

Account email · Magic link sign-in · mobile · playful

Password reset email — mobile, playful (Fernway)

Account email · Password reset · mobile · playful

Verify email address email — mobile, playful (Fernway)

Account email · Verify email · mobile · playful

Welcome email — mobile, playful (Fernway)

Account email · Welcome · mobile · playful

Order receipt email — web, playful (Juniper Supply)

Order email · Receipt · web · playful

Shipping update email — web, playful (Juniper Supply)

Order email · Shipping update · web · playful

Order receipt email — mobile, playful (Juniper Supply)

Order email · Receipt · mobile · playful

Shipping update email — mobile, playful (Juniper Supply)

Order email · Shipping update · mobile · playful

Shift scheduler · web · playful

Shift scheduler · mobile · playful

Leave calendar · web · playful

Leave calendar · mobile · playful

Manager review (approve or decline) — web, playful (Rosterline)

Time-off request · Manager review · web · playful

Request conflicts with staffing — web, playful (Rosterline)

Time-off request · Conflicts with staffing · web · playful

Request time off — web, playful (Rosterline)

Time-off request · Request · web · playful

Manager review (approve or decline) — mobile, playful (Rosterline)

Time-off request · Manager review · mobile · playful

Request conflicts with staffing — mobile, playful (Rosterline)

Time-off request · Conflicts with staffing · mobile · playful

Request time off — mobile, playful (Rosterline)

Time-off request · Request · mobile · playful

Multi-location operations dashboard · web · playful

Multi-location operations dashboard · mobile · playful

Low stock list — web, playful (Rosterline)

Inventory stock · Low stock · web · playful

Receive stock (delivery form) — web, playful (Rosterline)

Inventory stock · Receive stock · web · playful

Low stock list — mobile, playful (Rosterline)

Inventory stock · Low stock · mobile · playful

Receive stock (delivery form) — mobile, playful (Rosterline)

Inventory stock · Receive stock · mobile · playful

Savings goal with projection — web, playful (Mintwell)

Savings goal · web · playful

Savings goal with projection — mobile, playful (Mintwell)

Savings goal · mobile · playful

Onboarding carousel · web · playful

Onboarding carousel · mobile · playful

Hero · web · playful

Hero · mobile · playful

Navigation header with mega menu — web, playful (Patchbay)

Navigation header · web · playful

Navigation header with mega menu — mobile, playful (Patchbay)

Navigation header · mobile · playful

Feature grid · web · playful

Feature grid · mobile · playful

Bento feature grid — web, playful (Patchbay)

Bento features · web · playful

Bento feature grid — mobile, playful (Patchbay)

Bento features · mobile · playful

How it works steps — web, playful (Patchbay)

How it works · web · playful

How it works steps — mobile, playful (Patchbay)

How it works · mobile · playful

Logo cloud · web · playful

Logo cloud · mobile · playful

Stats band · web · playful

Stats band · mobile · playful

Testimonials · web · playful

Testimonials · mobile · playful

Pricing section — web, playful (Patchbay)

Pricing · web · playful

Pricing section — mobile, playful (Patchbay)

Pricing · mobile · playful

Comparison table · web · playful

Comparison table · mobile · playful

Scored comparison table · web · playful

Scored comparison table · mobile · playful

Integrations directory — web, playful (Patchbay)

Integrations grid · web · playful

Integrations directory — mobile, playful (Patchbay)

Integrations grid · mobile · playful

Security and trust · web · playful

Security and trust · mobile · playful

FAQ · web · playful

FAQ accordion — mobile, playful (Patchbay)

FAQ · mobile · playful

Call-to-action banner — web, playful (Patchbay)

CTA banner · web · playful

Call-to-action banner — mobile, playful (Patchbay)

CTA banner · mobile · playful

About page with team grid — web, playful (Patchbay)

About team · web · playful

About page with team grid — mobile, playful (Patchbay)

About team · mobile · playful

Careers open roles — web, playful (Patchbay)

Careers · web · playful

Careers open roles — mobile, playful (Patchbay)

Careers · mobile · playful

Blog index · web · playful

Blog index · mobile · playful

Changelog timeline — web, playful (Patchbay)

Changelog · web · playful

Changelog timeline — mobile, playful (Patchbay)

Changelog · mobile · playful

Contact sales form — web, playful (Patchbay)

Contact form · web · playful

Contact sales form — mobile, playful (Patchbay)

Contact form · mobile · playful

Footer · web · playful

Footer · mobile · playful

Restaurant website · Home page · web · playful

Restaurant website, Bento layout — web, playful (Olive & Ember)

Restaurant website · Bento · web · playful

Restaurant website · Home page · mobile · playful

Restaurant website, Bento layout — mobile, playful (Olive & Ember)

Restaurant website · Bento · mobile · playful

Agency website home page — web, playful (Quarry & Kite)

Agency website · web · playful

Agency website home page — mobile, playful (Quarry & Kite)

Agency website · mobile · playful

Architecture website home page — web, playful (Atelier Obra)

Architecture website · web · playful

Architecture website home page — mobile, playful (Atelier Obra)

Architecture website · mobile · playful

Wedding website home page — web, playful (Noor & Callum)

Wedding website · web · playful

Wedding website home page — mobile, playful (Noor & Callum)

Wedding website · mobile · playful

E-commerce website home page — web, playful (Juniper Supply)

Ecommerce website · web · playful

E-commerce website home page — mobile, playful (Juniper Supply)

Ecommerce website · mobile · playful

Coffee shop website · Home page · web · playful

Kiln & Crumb website, Bento layout — web, playful (Kiln & Crumb)

Coffee shop website · Bento · web · playful

Coffee shop website · Home page · mobile · playful

Kiln & Crumb website, Bento layout — mobile, playful (Kiln & Crumb)

Coffee shop website · Bento · mobile · playful

Salon website home page — web, playful (Studio Velour)

Salon website · web · playful

Salon website home page — mobile, playful (Studio Velour)

Salon website · mobile · playful

Real estate website · Home page · web · playful

Real estate website · Home page · mobile · playful

Construction company website home page — web, playful (Ironbark Builders)

Construction website · web · playful

Construction company website home page — mobile, playful (Ironbark Builders)

Construction website · mobile · playful

Law firm website home page — web, playful (Whitcombe Hale)

Law firm website · web · playful

Law firm website home page — mobile, playful (Whitcombe Hale)

Law firm website · mobile · playful

Dental practice website home page — web, playful (Fennick Dental)

Dental website · web · playful

Dental website, Bento layout — web, playful (Fennick Dental)

Dental website · Bento · web · playful

Dental practice website home page — mobile, playful (Fennick Dental)

Dental website · mobile · playful

Dental website, Bento layout — mobile, playful (Fennick Dental)

Dental website · Bento · mobile · playful

Gym website home page — web, playful (Ironyard Gym)

Gym website · web · playful

Gym website home page — mobile, playful (Ironyard Gym)

Gym website · mobile · playful

School website home page — web, playful (Alderbrook Academy)

School website · web · playful

School website home page — mobile, playful (Alderbrook Academy)

School website · mobile · playful

Nonprofit website home page — web, playful (Commonplate)

Nonprofit website · web · playful

Nonprofit website home page — mobile, playful (Commonplate)

Nonprofit website · mobile · playful

Travel website home page — web, playful (Driftmark Journeys)

Travel website · web · playful

Travel website home page — mobile, playful (Driftmark Journeys)

Travel website · mobile · playful

Hotel website home page — web, playful (Halcyon Quay)

Hotel website · web · playful

Hotel website home page — mobile, playful (Halcyon Quay)

Hotel website · mobile · playful

SaaS landing page home page — web, playful (Patchbay)

SaaS landing page · web · playful

SaaS landing page home page — mobile, playful (Patchbay)

SaaS landing page · mobile · playful

AI website home page — web, playful (Lumen Desk)

AI website · web · playful

AI website home page — mobile, playful (Lumen Desk)

AI website · mobile · playful

Medical practice website home page — web, playful (Marrowfield Medical)

Medical website · web · playful

Medical website, Bento layout — web, playful (Marrowfield Medical)

Medical website · Bento · web · playful

Medical practice website home page — mobile, playful (Marrowfield Medical)

Medical website · mobile · playful

Medical website, Bento layout — mobile, playful (Marrowfield Medical)

Medical website · Bento · mobile · playful

Cardiology practice website home page — web, playful (Quillon Heart)

Cardiology website · web · playful

Cardiology website, Bento layout — web, playful (Quillon Heart)

Cardiology website · Bento · web · playful

Cardiology practice website home page — mobile, playful (Quillon Heart)

Cardiology website · mobile · playful

Cardiology website, Bento layout — mobile, playful (Quillon Heart)

Cardiology website · Bento · mobile · playful

Dermatology clinic website home page — web, playful (Sorrel Lane Dermatology)

Dermatology website · web · playful

Dermatology website, Bento layout — web, playful (Sorrel Lane Dermatology)

Dermatology website · Bento · web · playful

Dermatology clinic website home page — mobile, playful (Sorrel Lane Dermatology)

Dermatology website · mobile · playful

Dermatology website, Bento layout — mobile, playful (Sorrel Lane Dermatology)

Dermatology website · Bento · mobile · playful

Therapist website home page — web, playful (Thistlewick Counselling)

Therapist website · web · playful

Thistlewick Counselling website, Bento layout — web, playful (Thistlewick Counselling)

Therapist website · Bento · web · playful

Therapist website home page — mobile, playful (Thistlewick Counselling)

Therapist website · mobile · playful

Thistlewick Counselling website, Bento layout — mobile, playful (Thistlewick Counselling)

Therapist website · Bento · mobile · playful

Physical therapy clinic website home page — web, playful (Kestrelgate Physio)

Physical therapy website · web · playful

Physical therapy website, Bento layout — web, playful (Kestrelgate Physio)

Physical therapy website · Bento · web · playful

Physical therapy clinic website home page — mobile, playful (Kestrelgate Physio)

Physical therapy website · mobile · playful

Physical therapy website, Bento layout — mobile, playful (Kestrelgate Physio)

Physical therapy website · Bento · mobile · playful

Veterinary practice website home page — web, playful (Bramblecote Vets)

Veterinary website · web · playful

Veterinary website, Bento layout — web, playful (Bramblecote Vets)

Veterinary website · Bento · web · playful

Veterinary practice website home page — mobile, playful (Bramblecote Vets)

Veterinary website · mobile · playful

Veterinary website, Bento layout — mobile, playful (Bramblecote Vets)

Veterinary website · Bento · mobile · playful

Financial advisor website home page — web, playful (Lindqvale Planning)

Financial advisor website · web · playful

Financial advisor website home page — mobile, playful (Lindqvale Planning)

Financial advisor website · mobile · playful

Cleaning service website home page — web, playful (Spruceway Cleaning)

Cleaning service website · web · playful

Cleaning service website home page — mobile, playful (Spruceway Cleaning)

Cleaning service website · mobile · playful

HVAC company website home page — web, playful (Northdraft Heating & Cooling)

HVAC website · web · playful

HVAC company website home page — mobile, playful (Northdraft Heating & Cooling)

HVAC website · mobile · playful

Cybersecurity website home page — web, playful (Wardline)

Cybersecurity website · web · playful

Cybersecurity website home page — mobile, playful (Wardline)

Cybersecurity website · mobile · playful

CRM landing page home page — web, playful (Pipeloom)

CRM landing page · web · playful

CRM landing page home page — mobile, playful (Pipeloom)

CRM landing page · mobile · playful

Coaching website home page — web, playful (Tallowmere Coaching)

Coaching website · web · playful

Coaching website home page — mobile, playful (Tallowmere Coaching)

Coaching website · mobile · playful

Pest control website home page — web, playful (Mothwell Pest Control)

Pest control website · web · playful

Pest control website home page — mobile, playful (Mothwell Pest Control)

Pest control website · mobile · playful

Solar company website home page — web, playful (Sunrake Solar)

Solar website · web · playful

Solar company website home page — mobile, playful (Sunrake Solar)

Solar website · mobile · playful

AI agent website home page — web, playful (Oarlock)

AI agent website · web · playful

AI agent website home page — mobile, playful (Oarlock)

AI agent website · mobile · playful

Preschool website home page — web, playful (Puddlewick Preschool)

Preschool website · web · playful

Preschool website home page — mobile, playful (Puddlewick Preschool)

Preschool website · mobile · playful

Apartment community website home page — web, playful (Cinderyard Residences)

Apartment website · web · playful

Cinderyard Residences website, Bento layout — web, playful (Cinderyard Residences)

Apartment website · Bento · web · playful

Apartment community website home page — mobile, playful (Cinderyard Residences)

Apartment website · mobile · playful

Cinderyard Residences website, Bento layout — mobile, playful (Cinderyard Residences)

Apartment website · Bento · mobile · playful

Pediatrics website home page — web, playful (Wrenfold Children's Clinic)

Pediatrics website · web · playful

Pediatrics website, Bento layout — web, playful (Wrenfold Children's Clinic)

Pediatrics website · Bento · web · playful

Pediatrics website home page — mobile, playful (Wrenfold Children's Clinic)

Pediatrics website · mobile · playful

Pediatrics website, Bento layout — mobile, playful (Wrenfold Children's Clinic)

Pediatrics website · Bento · mobile · playful

Orthodontics website home page — web, playful (Wraybrook Orthodontics)

Orthodontics website · web · playful

Orthodontics website, Bento layout — web, playful (Wraybrook Orthodontics)

Orthodontics website · Bento · web · playful

Orthodontics website home page — mobile, playful (Wraybrook Orthodontics)

Orthodontics website · mobile · playful

Orthodontics website, Bento layout — mobile, playful (Wraybrook Orthodontics)

Orthodontics website · Bento · mobile · playful

Fertility clinic website home page — web, playful (Moonfern Fertility)

Fertility clinic website · web · playful

Fertility website, Bento layout — web, playful (Moonfern Fertility)

Fertility clinic website · Bento · web · playful

Fertility clinic website home page — mobile, playful (Moonfern Fertility)

Fertility clinic website · mobile · playful

Fertility website, Bento layout — mobile, playful (Moonfern Fertility)

Fertility clinic website · Bento · mobile · playful

Hospital website, Bento layout — web, playful (Tarrowmere Community Hospital)

Hospital website · Bento · web · playful

Hospital website, Bento layout — mobile, playful (Tarrowmere Community Hospital)

Hospital website · Bento · mobile · playful

Wrenhollow Mental Health website, Bento layout — web, playful (Wrenhollow Mental Health)

Mental health website · Bento · web · playful

Wrenhollow Mental Health website, Bento layout — mobile, playful (Wrenhollow Mental Health)

Mental health website · Bento · mobile · playful

Optometry website, Bento layout — web, playful (Ollanby Eyecare)

Optometry website · Bento · web · playful

Optometry website, Bento layout — mobile, playful (Ollanby Eyecare)

Optometry website · Bento · mobile · playful

Pharmacy website, Bento layout — web, playful (Quenby Lane Pharmacy)

Pharmacy website · Bento · web · playful

Pharmacy website, Bento layout — mobile, playful (Quenby Lane Pharmacy)

Pharmacy website · Bento · mobile · playful

Thistlewood Home Sales website, Bento layout — web, playful (Thistlewood Home Sales)

Real estate agent website · Bento · web · playful

Thistlewood Home Sales website, Bento layout — mobile, playful (Thistlewood Home Sales)

Real estate agent website · Bento · mobile · playful

Draymark Property website, Bento layout — web, playful (Draymark Property)

Commercial real estate website · Bento · web · playful

Draymark Property website, Bento layout — mobile, playful (Draymark Property)

Commercial real estate website · Bento · mobile · playful

Fernlow Stays website, Bento layout — web, playful (Fernlow Stays)

Vacation rental website · Bento · web · playful

Fernlow Stays website, Bento layout — mobile, playful (Fernlow Stays)

Vacation rental website · Bento · mobile · playful

Corbel Ridge Homes website, Bento layout — web, playful (Corbel Ridge Homes)

Home builder website · Bento · web · playful

Corbel Ridge Homes website, Bento layout — mobile, playful (Corbel Ridge Homes)

Home builder website · Bento · mobile · playful

Bakery website, Bento layout — web, playful (Tallowmere Bakehouse)

Bakery website · Bento · web · playful

Bakery website, Bento layout — mobile, playful (Tallowmere Bakehouse)

Bakery website · Bento · mobile · playful

Pizzeria website, Bento layout — web, playful (Ferrowick Pizza)

Pizzeria website · Bento · web · playful

Pizzeria website, Bento layout — mobile, playful (Ferrowick Pizza)

Pizzeria website · Bento · mobile · playful

Food truck website, Bento layout — web, playful (Kettlewren Street Kitchen)

Food truck website · Bento · web · playful

Food truck website, Bento layout — mobile, playful (Kettlewren Street Kitchen)

Food truck website · Bento · mobile · playful

Tabs · web · playful

Tabs component — mobile, playful (Fernway)

Tabs · mobile · playful

Cards component — web, playful (Juniper Supply)

Cards · web · playful

Cards component — mobile, playful (Juniper Supply)

Cards · mobile · playful

Pagination component — web, playful (Fieldnote)

Pagination · web · playful

Pagination component — mobile, playful (Fieldnote)

Pagination · mobile · playful

Popover component — web, playful (Patchbay)

Popover · web · playful

Popover component — mobile, playful (Patchbay)

Popover · mobile · playful

Tooltip component — web, playful (Tallyfold)

Tooltip · web · playful

Tooltip component — mobile, playful (Tallyfold)

Tooltip · mobile · playful

Dropdown menu component — web, playful (Fernway)

Dropdown menu · web · playful

Dropdown menu component — mobile, playful (Fernway)

Dropdown menu · mobile · playful

Accordion component — web, playful (Steadyfit)

Accordion · web · playful

Accordion component — mobile, playful (Steadyfit)

Accordion · mobile · playful

Radio buttons component — web, playful (Mintwell)

Radio buttons · web · playful

Radio buttons component — mobile, playful (Mintwell)

Radio buttons · mobile · playful

Breadcrumbs component — web, playful (Juniper Supply)

Breadcrumbs · web · playful

Breadcrumbs component — mobile, playful (Juniper Supply)

Breadcrumbs · mobile · playful

Toggle switch component — web, playful (Fernway)

Toggle switch · web · playful

Toggle switch component — mobile, playful (Fernway)

Toggle switch · mobile · playful

Stepper component — web, playful (Mintwell)

Stepper · web · playful

Stepper component — mobile, playful (Mintwell)

Stepper · mobile · playful

Sidebar navigation component — web, playful (Wardline)

Sidebar navigation · web · playful

Sidebar navigation component — mobile, playful (Wardline)

Sidebar navigation · mobile · playful

Loading spinner component — web, playful (Lumen Desk)

Loading spinner · web · playful

Loading spinner component — mobile, playful (Lumen Desk)

Loading spinner · mobile · playful

Browse by pattern

App screens

Dashboard
Data table
Analytics charts
Login
Sign up
Forgot password
Two-factor code
Welcome
Onboarding step
Permissions request
Home
Feed
List view
Detail view
Kanban board
Calendar
File manager
Search results
Editor toolbar
AI chat assistant
Chat list
Chat thread
Video call
Image viewer
Map view
Video player
Create post
Class schedule
Booking details
Booking confirmed
Product detail
Cart
Checkout
Order confirmation
Settings
Profile
Notifications center
Team members
Roles permissions
Audit log
API keys
Integrations
Billing plans
Invoice
Paywall upgrade
Cancel subscription
Empty state
404 error
Loading skeleton
Success confirmation
AI workspace
AI settings
Version history
Approval queue
Doctor directory
Telehealth visit
Clinic home
Music player
Playlist
Portfolio home
Case study
Security dashboard
Project tracker
Course dashboard
Multi-step form wizard
Bank onboarding
Product scan
Split view (master-detail)
Canvas editor
Floor plan
Voice call
Toast / snackbar with undo
Confirm dialog (destructive)
Side drawer
Command palette
Date range picker
Form validation errors
Sign-in error
Card declined at checkout
Find a pro (home services)
Book a home-service visit
Job tracker
Account email
Order email
Shift scheduler
Leave calendar
Time-off request
Multi-location operations dashboard
Inventory stock
Savings goal
Onboarding carousel

UI components

Tabs
Cards
Pagination
Popover
Tooltip
Dropdown menu
Accordion
Radio buttons
Breadcrumbs
Toggle switch
Stepper
Sidebar navigation
Loading spinner

Website sections

Website templates

Browse by category, device and style

Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.

Playful UI design examples

Browse by pattern

Browse by category, device and style

Save to board