Loading the page…
Dimensions, materials and availability on every product.
Made-to-order lead times shown before you choose.
Review your total before payment through Stripe.
The foundations of Fairyloop
A warm palette. A quiet rhythm. An interface with room to breathe — and a little character of its own.
Design system · Phase 01
The shared pieces of our future shop. Explore the components below; shopping and account features follow in later phases.
Interactive UI preview
Paper, forest and a hint of clay. Familiar textures, translated into colour.
Lora / Our expressive voice
For the small things.
And everything they hold.
Inter / Our everyday voice
Clear, comfortable and easy to read. Self-hosted typography, generous spacing and a consistent focus ring keep the essentials in reach.
Aa Bb Cc · 0123456789 · €125.00 (type sample)
Thoughtful defaults for actions, status and the details in between.
Visible focus. Comfortable touch targets. Honest pending and disabled states.
Dialogs and drawers share one accessible foundation. Try Tab, Shift+Tab and Escape.
Native disclosure elements work by keyboard and without JavaScript. Content remains in the natural reading order.
Reduced-motion preferences turn off decorative movement across the shared system.
Helpful labels, useful hints and errors that explain what to do next.
| Shared piece | Used for | State |
|---|---|---|
| Navigation | Finding your way | Ready |
| Form fields | Clear conversations | Ready |
| Product gallery | The collection | Phase 2 |
Tables keep their headers and captions. If space is tight, scroll inside the table — not the entire page.
No guessing. Every wait, change and interruption has a considered response.
A small success
Something needs a second look
Empty states offer a clear next step, without inventing products or activity.