The dark version uses a near black page and keeps the same accent color. Friendly screens for when there is nothing to show or something breaks. Each part is a real component with variants and a clear next step.

What is included

• Empty states for no results, no data, offline and no access
• Error pages for 404, 500 and 503
• One main action on each
• An icon tile with soft rings
• Usage tips

Where to use it

Use it in any web app or dashboard.

Design notes

This empty states and error pages follows a simple rule: Real components save time because you change a property and the whole set updates. Rename the variants to match your design system and connect the colors to your own styles. It includes empty states for no results, no data, offline and no access, error pages for 404, 500 and 503, one main action on each, so you can start from a finished layout and change only what you need.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Fonts are free on Google Fonts, and every color can be changed from the fill panel. You also get an icon tile with soft rings and usage tips.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. The layers keep their auto layout, so you can edit text, colors and spacing. The text uses Plus Jakarta Sans and a few free Google Fonts. Install them first so the text looks the same.

Dark version

This listing is the dark version. The light version is listed separately.