# Rekaz — Design System > Canonical design context for **Rekaz**, an Arabic-first, RTL-first SaaS platform for service businesses (bookings, subscriptions, payments, CRM). This is the design-systems-tab companion to the engineering rules in `DESIGN.md` (the canonical source). The full engineering spec lives in `DESIGN.md` (in the original codebase, mirrored here in spirit). This folder is a designer-facing surface: tokens, fonts, brand assets, preview cards, and a UI kit for prototyping. --- ## Sources - **Brand assets (uploaded):** `uploads/Asset 159@4x.png` (square mark), `uploads/Asset 156@4x.png` (logo lockup with Arabic wordmark `ركاز`). - **Design rules (pasted):** the full `DESIGN.md` spec was provided as project notes. Key sections referenced throughout: §0 non-negotiables, §3 color, §4 typography, §6 components, §13 RTL. - **Codebase:** none attached directly. Component patterns are reconstructed from `DESIGN.md`'s reference paths (e.g. `src/islands/product/ui/table/`, `src/components/shared/responsive-dialog`). The user is encouraged to import the live codebase to fill in true component implementations. --- ## What is Rekaz? Rekaz (`ركاز`) is a SaaS platform for service businesses in the Arab market — bookings, memberships, subscriptions, payments, and CRM, all in one. The product is **Arabic-first**: every screen is drafted in Arabic, then rendered to English. The host is ASP.NET Core (Razor) with React islands; new dashboard work lands in React. **Audience:** service-business owners and operators (gyms, clinics, salons, studios, consultants). They live in their dashboard daily — tables, forms, invoices, schedules. The voice is calm and operational, not cheerful. --- ## Content fundamentals Rekaz copy is **calm, action-oriented, and warm**. Numbers are primary UI; words clarify them. - **Arabic-first.** Always draft in Arabic, then translate to English. The Arabic version is canonical — if the two ever drift, Arabic is right. - **You / your**, never we / us. First-person plural is reserved for onboarding coaching: - en: *"We'll remind your clients 24 hours before."* - ar: «سنُذكّر عملاءك قبل الموعد بـ ٢٤ ساعة.» - **Buttons are verbs.** "Add member" / `أضف عضوًا`. Never "New membership form". Arabic CTAs use **imperative singular masculine**: `أضف`, `احفظ`, `ألغِ`, `تابع`. - **Sentence case in English.** "Add member", not "Add Member". Arabic has no casing — keep it natural. - **No exclamation marks in product UI.** Ever. No "Awesome!" / "Let's go!" / "Great job!". - **No emoji** in product UI. Use Lucide icons. - **No transliterations** when a clean Arabic term exists. Don't say "إيميل" if `بريد إلكتروني` works. - **Numbers are framed, not buried.** The big number on a KPI card is the headline; everything else is supporting context. - **Hide the currency symbol on zero-priced rows** — render "Free" / `مجاني` on its own. ### Voice samples | Context | English | Arabic | | ------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------ | | Empty (bookings) | No bookings yet. Add one, or share your booking link with your clients. | لا توجد حجوزات بعد. أضف حجزًا، أو شارك رابط الحجز مع عملائك. | | Success toast | Member added. | تمت إضافة العضو. | | Destructive confirm | Cancel this booking? Your client will be notified. | هل تريد إلغاء هذا الحجز؟ سيتم إبلاغ العميل. | | Payment error | Payment failed. Try a different card or contact your bank. | فشل الدفع. جرّب بطاقة أخرى أو تواصل مع البنك. | | Nudge | 3 invoices are overdue. | ٣ فواتير متأخرة. | --- ## Visual foundations ### Color vibe — warm neutral, with coral as a non-button accent Rekaz looks **warm and near-neutral** — never cool. Think paper, parchment, soft sand — not slate or steel. The single brand accent is **coral** (`#f17265`), used sparingly and **never on buttons**. The mental ratio on a typical dashboard is **~90% neutral · ~9% black (primary CTA + body type) · ~1% coral**. - **Primary buttons are black** (`hsl(0 0% 8%)`, ~`#141414`). Save, Add, Confirm — all black. - **Secondary buttons are white** with a 1px neutral border. Cancel, Filter, dismiss. - **No coral / orange buttons.** Coral is reserved for: the brand mark, active nav state (text + 2px trailing bar), KPI delta highlight, focal chart series, empty-state illustration accents. **It is never a button background.** - **Never substitute Tailwind's `slate-*` or `zinc-*`** (cool grays). Always warm grays. - **Light theme only.** Dark mode is not designed yet — don't fake it. ### Type — one family, Arabic + Latin **IBM Plex Sans Arabic** is the only typeface. It carries both Arabic and Latin runs in one family (no Latin-fallback drift). Weights in use: 300 (rare display), 400 (body), 500 (UI labels), 600 (headings), 700 (display). Skip 100, 200, 800. - **Body default = 16px** (`--fs-text-md`). shadcn's 14px default is too small for Rekaz; we override. - **Tracking is forbidden on Arabic** — `letter-spacing` breaks ligatures. Apply `tracking-tight` only to Latin display text ≥ 30px. - **Latin digits** in product UI (1, 2, 3). Arabic-Indic digits (٣) only in marketing flourishes. - **Mixed bidi:** wrap the minority run with `` or ``. - **Tabular numerals** on every numeric column (`font-variant-numeric: tabular-nums`). ### Backgrounds, imagery, decoration - **No full-bleed photography in product UI.** Surfaces are flat warm-neutral fills (`--bg`, `--bg-1`, `--bg-2`). - **Brand gradient** (peach → coral → red, 135°, `--rekaz-gradient-diag`) is reserved for: the mark, hero/onboarding backdrops, and launch banners. **Never** as a card fill in product UI. - **No multi-color stock illustrations.** Empty-state illustrations are outlined Lucide-style (1.75 stroke), or single-color brand SVGs at ~64px. - **No textures, grain, or repeating patterns.** The system reads as clean and flat. - **Imagery vibe (when used in marketing):** warm, editorial, daylight, real businesses (a salon owner at her counter, a gym booking screen on a phone). Never cold stock. ### Spacing 4px base. Rhythm: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64. - **Page rhythm:** 16 / 24 / 32. - **Intra-component density:** 4 / 8 / 12. - **Marketing sections:** 64 / 96. ### Borders, radii, shadows - **Radius:** 12px (`--radius`) is the system default. Buttons/inputs computed at 10px (slightly tighter inside cards). Section heroes: 24px. Pills: full. - **Don't mix radii within one composition.** A 12px card with a 4px-radius inner button is wrong. - **Cards use fill + border + shadow together** — never any single one alone. That triple is the Rekaz card tell. - **Shadow scale:** xs (chips at rest) · sm (cards, default) · md (menus, popovers) · lg (modals). - **No inner shadows on inputs** — they're flat-filled with a 1px border. - **`--shadow-brand`** (coral glow) is hover-only on the rare accent CTA. Never resting. ### Motion - **Easing:** `--ease-out` for enter, `--ease-in-out` for move. **No bounce. No elastic.** - **Durations:** 140ms (hover/toggle), 220ms (menus/drawers), 360ms (modals/route changes). - **Default transition is fade.** Slides only on drawers/toasts (from screen edge). Zoom only for hero loaders. - **Respect `prefers-reduced-motion`** — cross-fade only at 100ms. ### Interaction states - **Hover (black CTA):** background → `hsl(0 0% 15%)`. **No scale.** - **Hover (coral CTA):** background → `--rekaz-hover` (#dc4444), with `--shadow-brand` glow. - **Hover (neutral):** background → `--accent` (warm gray tint). - **Pressed:** even darker color. **Never a scale transform.** Rekaz does not "squish" on press. - **Focus:** shadcn ring (3px outer, 2px offset) — don't override. - **Disabled:** 50% opacity, `not-allowed`, events ignored. - **Selected (nav):** coral text + 2px coral bar on `inset-inline-end`. **No fill.** ### Transparency & blur - **Blur is forbidden** on dialog overlays. The overlay is a flat warm-black at 48% (`--overlay`). - Glass / frosted effects are not part of the system. If you reach for one, push back. ### Layout rules - Sidebar 240px expanded, 64px collapsed. - Dialogs cap at `max-w-2xl`. Wider is "you should be a page". - Tables: ~48px row height, no zebra, hover bg = `--accent`. - Forms: single column by default; two columns only on `md+` for short paired fields (≤20 char each). --- ## Iconography **Lucide is the icon system.** Single source. Outline style, geometric, friendly. - **Stroke:** `strokeWidth={1.75}` — slightly heavier than Lucide's default to read at smaller Arabic-line-height contexts. - **Color:** `currentColor` — always inherits. - **Sizes:** 16px (inline with body) · 20px (UI default in buttons / nav) · 24px (empty states, feature callouts). Use Tailwind's `tw:size-4 / size-5 / size-6`. - **Directional icons flip in RTL** (arrows, chevrons, back). Apply `tw:rtl:-scale-x-100` or wrap with a `.rtl-flip` class. - **Object icons (calendar, user, credit-card) do NOT flip** — they read identically in either direction. - **No emoji** in product UI. - **No unicode-as-icons** (no `⋯`, `→`, `★` — use Lucide's `MoreHorizontal`, `ArrowRight`, `Star`). - **Missing glyph?** Check Tabler (same visual language, larger set) before commissioning. If you must draw one, match Lucide: 24-unit grid, 1.75 stroke, rounded joins + caps. In this folder, Lucide is **CDN-linked** (`unpkg.com/lucide@latest`) for the UI kit and preview cards. In production, `lucide-react` is installed. The brand mark (`assets/rekaz-mark.png`) and full lockup (`assets/rekaz-logo.png`) are bitmap exports of the SVG mark. The mark is a coral-gradient softened-square containing a stylized white "S" / open-book glyph — the visual root the product is built on. **Never recolor or stretch the mark.** --- ## Index | File / folder | What it contains | | ------------------------ | ------------------------------------------------------------------------------------------------------ | | `README.md` | (this file) — overview, content & visual foundations, iconography, manifest | | `colors_and_type.css` | All design tokens — semantic (shadcn-mapped), raw scales, type sizes, spacing, radii, shadows, motion | | `assets/` | Brand assets — `rekaz-mark.png`, `rekaz-logo.png` | | `preview/` | Design-system preview cards (Type, Colors, Spacing, Components, Brand) shown in the Design System tab | | `ui_kits/dashboard/` | RTL Arabic dashboard UI kit — clickable prototype + JSX components (Sidebar, KPICard, Table, Dialog…) | | `SKILL.md` | Agent-skill manifest — read this when invoking the skill in another project | ### Where to start 1. Read this README and skim `colors_and_type.css`. 2. Open `ui_kits/dashboard/index.html` to see the system in motion. 3. For component-level rules (shadcn-specific Tailwind details, accessibility, anti-patterns) consult the original `DESIGN.md` in the codebase. --- ## Caveats / open items - **Codebase not attached.** All component patterns are reconstructed from the `DESIGN.md` rules. UI kit components are simplified visual recreations, not lifts of the actual code. - **Fonts via Google Fonts CDN.** IBM Plex Sans Arabic is loaded via `fonts.googleapis.com`. If the production codebase ships self-hosted font files, those should be copied into `fonts/` and the `@import` in `colors_and_type.css` swapped for `@font-face` rules. - **Brand-asset SVG.** Only PNG exports were uploaded. An SVG version of the mark would let the design system render the logo crisply at any size and recolor it programmatically. - **No additional product surfaces** (mobile app, marketing website, docs) were attached, so only the dashboard UI kit is built.