Using the rg3li design system

1. Read README.md first. It documents the brand, content voice (Arabic + English), full visual foundations (color, type, spacing, radii, shadows, motion), iconography rules, and known caveats.
2. Pull tokens from colors_and_type.css — drop it in with <link rel="stylesheet" href="…/colors_and_type.css">. It exposes:
   • Brand --color-primary-{50..900} (cobalt) and --color-surface-{50..950} (slate) ramps.
   • Semantic --color-success/danger/warning-* ramps and four-role role tokens (--bg-app, --fg-1..4, --border-1, --ring-primary, --shadow-sm).
   • .dark class flips the role tokens for dark theme.
   • Inter (LTR) + Cairo (RTL) loaded from Bunny Fonts.
   • Helper classes: .ds-page-title, .ds-card-title, .ds-stat-number, .ds-overline, .ds-mono, etc.
3. Use the icon set in assets/icons.jsx. Hand-baked Heroicons-style strokes (24×24, 2 px round). Don't import Lucide / FA / Tabler — coherence depends on this one stroke discipline. If you need a glyph that isn't there, add a new path with the same stroke style.
4. Look at preview/ for component recipes — buttons, badges, cards, forms, sidebar, table — each is a self-contained HTML demo with the right colors, paddings, and RTL behavior already wired.
5. For full screens, lift from ui_kits/admin-dashboard/. It has the AppShell (sidebar + top header), Dashboard, Coupons, Customers, Login, all in EN + AR. Components export themselves to window (AppShell, Card, StatCard, Button, Badge, Field, RgIcon, etc.) and are loaded via <script type="text/babel">.

Hard rules (lifted from the codebase)

• Cards are always: white, 1 px slate-200 border, 12 px radius, single soft shadow-sm. Header is px-5 py-4, body is p-5.
• One shadow. No shadow-md/lg/xl, no glow, no inner shadow.
• One transition. 0.15 s cubic-bezier(.4, 0, .2, 1). No bounces or springs.
• No gradients anywhere except the auth-screen background (#4f7bff → #2f4cb8).
• No backdrop blur, no glassmorphism. Modals dim with rgba(0,0,0,0.5).
• Hover is color-only — never scale, translate, or shadow-on-hover.
• Use logical CSS (border-e, inset-inline-start, text-start) so RTL flips correctly.
• Body text 14 px (sm) or 16 px (base). Page H1 is 24 px bold. Card title is 20 px semibold. Overline / table thead is 12 px uppercase wider-tracked.
• Saturated semantic colors are reserved for destructive primary buttons. Everything else uses *-100 background + *-700/800 text.
• Emoji are data, not decoration. Only ★ / 🔥 / 👍 / 👎 are blessed.

Voice

• Arabic uses verbal nouns for action labels (إضافة, تعديل, حذف, حفظ) — buttons read as labels, not commands. Direct second-person imperative for hints (اتركه فارغاً…).
• English is plain SaaS — Title Case nav, sentence case body, bare-verb buttons (Save, Cancel, Delete).
• No taglines, no exclamations, no playful microcopy. This is a back office.

What's not covered

The companion rg3li mobile app is referenced as a git submodule in the source repo but is not accessible. If you need to design app-side screens, ask the user to make mmmmm80881-bit/rg3li_app readable, then extend this kit.