Blocks · UX States

The unsexy-but-essential surfaces

Every real app spends most of its life in one of these six states. Six variants per state — 36 ready-to-drop blocks for empty, loading, error, success, unauthorized, and offline conditions.

Empty states

When there's nothing to show — first run, no results, missing permissions. Give the user a path forward.

Basic empty

Icon + heading + supporting copy + primary CTA. Centered.

.state-frame.state-stack

No messages yet

When someone reaches out, their message will land here. Until then, take a breath.

Start a conversation

With illustration

CSS-painted illustrative scene + heading + CTA.

.state-empty-illu

Your dashboard is wide open

Connect a project to start streaming data. Setup takes about ninety seconds.

Connect a project Browse demos

No search results

"No results for {query}" + suggested searches as chips + try-different-keywords CTA.

.state-suggest-chips.lsd-chip

No results for “nebula physics”

Try one of these popular searches, or refine your keywords.

color tokens aurora timeline surfaces behaviours

Try different keywords

First-time onboarding

Three numbered steps + Get started CTA.

.state-steps.state-step

Welcome — three steps to your first deploy

1Pick a brand preset or import your tokens.
2Drop in blocks from the library and arrange your page.
3Export static HTML, or publish straight to a domain.

Get started

No permission

"You don't have access" + Request access CTA.

.state-icon--warn

You don't have access to this workspace

Ask the owner to invite you, or request access — they'll get a notification.

Request access Back to home

Coming soon

"Nothing here yet" + Get notified email signup.

.state-notify-form

Nothing here yet

This area is under construction. Drop your email and we'll ping you the moment it ships.

Loading states

The user is waiting. Tell them something is happening, and ideally how long it will take.

Centered spinner

SVG spinner with text below.

.state-spinner

Fetching your latest projects…

Skeleton list

Five skeleton rows with shimmer-sweep animation.

.state-sk-list.state-sk-row

Skeleton grid

Six skeleton cards with stagger animation.

.state-sk-grid.state-sk-card

Progress bar

Bar with % + supporting text.

.state-progress

Uploading photos

64 of 100 MB~12s left

You can keep working — we'll let you know when it's done.

Pulse dots

Three dots pulse-fade in sequence.

.state-dots

Thinking…

Galactic loader

Full-page LSD-flair loader with rotating galaxy + center pulse.

.state-galaxy

Composing your universe

Booting the runtime — packing tokens, surfaces, and aurora timelines.

Error states

Something failed. Tell the user what, why if it helps, and how to recover.

Generic error

Error icon + "Something went wrong" + Try again CTA.

.state-icon--error

Something went wrong

We hit an unexpected bump loading this page. Refresh, or try again in a moment.

Back to home

Inline 404

Small "Not found" inline state (not full page).

.state-frame

404

That widget can't be found

It may have been moved or deleted. Try refreshing the panel.

Network error

Offline icon + "No connection" + Retry CTA.

.state-icon--error

No internet connection

We can't reach our servers. Check your network and we'll try again.

Validation summary

Red-tinted card listing form errors.

.state-err-list

Please fix 3 issues before submitting

3 errors found

Email address is missing the @ symbol.
Password must be at least 12 characters.
You must accept the terms of service.

500 server error

Apologetic copy + Status page link.

.lsd-chip--error

500 · Internal

That's on us, not you

Our servers tripped over their own shoelaces. The team has been pinged automatically. Check our status page for live updates.

View status page

Rate limit

"Too many requests" + cooldown timer.

.state-timer

Slow down — too many requests

You've hit the rate limit. You can try again in:

00:42

Need higher limits? Contact support about a Pro plan.

Success states

Confirmation that the user's action landed. Make it feel earned.

Animated checkmark

Draw-in checkmark + "Done" + Continue CTA.

.state-check

Done

Your changes have been saved and synced across your devices.

Continue

Form submitted

"Message sent" + Send another CTA.

.state-icon--success

Message sent

Thanks for reaching out — we usually reply within one business day.

Back home

Payment confirmed

Order summary chips + receipt CTA.

.lsd-chip--success

Payment confirmed

Receipt #LSD-2026-04891 is on its way to your inbox.

Pro · annual $120.00 Visa ··4242

View receipt

Celebration

Confetti burst + headline + CTA.

.state-confetti-wrap

You shipped your first site! 🚀

It's live at your-site.lsd.app. Share it with the world — or keep tinkering.

Open site Share

Saved indicator

Small toast-style saved confirmation.

.state-toast

Saved · just now

File uploaded

File chip + Done CTA.

.state-file-chip

Upload complete

brand-tokens.lsd.json · 4.2 KB

Your tokens have been parsed and applied to the active workspace.

View tokens

Unauthorized states

Auth walls, expired sessions, locked accounts. The user can't pass — but make the next step obvious.

Sign in to continue

Email/password + social signin.

.state-signin-form.state-social

Sign in to continue

This area is for members. Sign in to keep going.

Premium feature

Upgrade CTA + feature list.

.state-feature-list

Pro feature

Aurora timelines need a Pro plan

You're on the Free tier. Upgrade to unlock:

Unlimited Aurora keyframe layers
Custom surface tier overrides
Priority static-export builds

Upgrade to Pro Compare plans

Session expired

"Session expired" + Sign in again CTA.

.state-icon--warn

Session expired

For your security, we signed you out after 24 hours of inactivity. Sign back in to pick up where you left off.

MFA required

Code input field + Resend code CTA.

.state-mfa

Enter your six-digit code

We sent a code to your authenticator app. It expires in 5 minutes.

Account suspended

Suspension notice + Contact support CTA.

.state-icon--error

Account suspended

This account has been suspended pending review. If you believe this is a mistake, contact support — we'll get back to you within one business day.

Contact support

Account locked

Locked after failed attempts + Reset password CTA.

.state-icon--warn

Account temporarily locked

Too many failed sign-in attempts. To protect your account, reset your password to unlock it.

Reset password Get help

Offline & network states

Connectivity is unreliable. Tell the user what's degraded and what still works.

You're offline

Basic offline + Retry CTA.

.state-icon--warn

You're offline

Check your network connection — we'll reconnect automatically when you're back.

Showing cached content

Cached badge + Reconnect CTA.

.lsd-chip--muted

Cached · 14 min ago

Showing your last-known view

You're offline, so we're displaying a snapshot from your last visit. Reconnect to refresh.

Sync pending

"3 changes will sync when online" + spinner chip.

.state-pending

3 changes saved locally

Your edits are safe on this device. They'll sync to the cloud as soon as you're back online.

Waiting for connection…

App update available

"New version available" + Reload CTA.

.lsd-chip--soft

v0.8 ready

A new version is available

Reload to get the latest blocks, motion presets, and bug fixes. Your unsaved work will be preserved.

Scheduled maintenance

ETA + Subscribe to updates.

.state-notify-form

Scheduled maintenance in progress

We're rolling out database upgrades. Expected back online by 21:00 UTC.

Degraded service

"Some features unavailable" + per-service status chips.

.state-status-chips

Running in degraded mode

Some features are temporarily unavailable. Core editing still works.

Editor & canvasOperational

Live previewDegraded

Cloud syncOutage

Static exportOperational

View status page

Basic empty

No messages yet

With illustration

Your dashboard is wide open

No search results

No results for “nebula physics”

First-time onboarding

Welcome — three steps to your first deploy

No permission

You don't have access to this workspace

Coming soon

Nothing here yet

Centered spinner

Skeleton list

Skeleton grid

Progress bar

Uploading photos

Pulse dots

Galactic loader

Composing your universe

Generic error

Something went wrong

Inline 404

That widget can't be found

Network error

No internet connection

Validation summary

Please fix 3 issues before submitting

3 errors found

500 server error

That's on us, not you

Rate limit

Slow down — too many requests

Animated checkmark

Done

Form submitted

Message sent

Payment confirmed

Payment confirmed

Celebration

You shipped your first site! 🚀

Saved indicator

File uploaded

Upload complete

Sign in to continue

Sign in to continue

Premium feature

Aurora timelines need a Pro plan

Session expired

Session expired

MFA required

Enter your six-digit code

Account suspended

Account suspended

Account locked

Account temporarily locked

You're offline

You're offline

Showing cached content

Showing your last-known view

Sync pending

3 changes saved locally

App update available

A new version is available

Scheduled maintenance

Scheduled maintenance in progress

Degraded service

Running in degraded mode

No messages yet

Your dashboard is wide open

No results for "nebula physics"

Welcome — three steps to your first deploy

You don't have access to this workspace

Nothing here yet

Uploading photos

Composing your universe

Something went wrong

That widget can't be found

No internet connection

Please fix 3 issues before submitting