Ostorya design system

A merchant opens the Store, Ads Manager, WhatsApp and your app side by side, all day. When your app uses the same cards, sizes and colors, it feels like part of Ostorya and merchants trust it. This guide is the reference Ostorya's own apps follow: the same tokens, the same components, the same rules. Apps that follow it pass review faster.

Principles#

• The wallpaper shows through. No page background. Content sits on frosted glass cards that float over the merchant's wallpaper. Nothing sits bare on the wallpaper: toolbars, filters and buttons go on a glass bar too.
• The merchant picks the color. Primary buttons, switches and highlights use the desktop accent, which follows the wallpaper or the merchant's pick. Statuses never do.
• Calm and compact. Small type (14px body, 13px controls), soft tones, one line per list row. Sellers read hundreds of orders a day.
• Every action has an icon and a word. Buttons, tabs, menu items and filters carry an icon, so they read at a glance in any language.
• Honest. No fake numbers, no buttons that do nothing. If something isn't ready, the screen says so.
• Phone first, three languages. 360px wide works, Arabic is right to left, French and English fit.

Start in two minutes#

The Ostorya UI kit is one CSS file with the tokens and components below. No framework and no build step: it works with React, Vue, Svelte or plain HTML. Every class starts with o- and every variable with --o-, so it never clashes with your own styles.

<!doctype html>
<html lang="en" data-theme="light">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" />
    <link rel="stylesheet" href="https://dev.ostorya.com/ostorya-ui.css" />
  </head>
  <body class="o-app">
    <!-- your app -->
  </body>
</html>

Then follow the desktop's theme with App Bridge. The desktop sends the theme when your app opens and again whenever the merchant changes it:

import { createAppBridge } from "https://dev.ostorya.com/app-bridge/v1.mjs";

// Follow the desktop: light/dark, Reduce glass, the merchant's accent and language.
const bridge = createAppBridge("https://ostorya.com", {
  theme: (t) => {
    const root = document.documentElement;
    root.dataset.theme = t.appearance;                 // "light" | "dark"
    root.classList.toggle("reduce-glass", t.reduceGlass);
    root.style.setProperty("--o-accent", t.accent);    // buttons, switches, highlights
    root.lang = t.locale ?? "en";
    root.dir = t.locale === "ar" ? "rtl" : "ltr";
  },
});

In this section#