App design guidelines

Merchants move between your app and Ostorya's own apps all day. These rules keep the desktop feeling like one product.

Layout#

• No page background. Keep html and body transparent: the merchant's wallpaper shows through.
• Content sits on frosted glass cards (radius 22px, a light top-to-bottom gradient, backdrop-filter: blur()). When theme.reduceGlass is true, make the cards solid.
• Never put filter on an element that uses backdrop-filter: it removes the blur.
• Don't add your own title bar or close button: the desktop has them. Use setTitle().
• On phones (under 768px) your app is full screen above the dock bar: design for 360px wide.

Color, mode and language#

• Use theme.accent for your primary buttons and highlights, not a fixed brand color.
• Support light and dark (theme.appearance). Don't set color-scheme on your root differently from the desktop.
• Use theme.locale for your texts; for ar switch to dir="rtl". Write numbers with Western digits.

Behavior#

• Errors and confirmations go to the desktop toasts (notify, notifyError), not inline red boxes.
• No fake data and no buttons that do nothing. If a part isn't built yet, say so.
• Never use a native <select>: build a custom dropdown that matches the glass style.
• Use the dock badge for things that need the merchant (unread conversations, failed ads), and clear it when handled.