Design systems, motion and type tuned until the page feels inevitable.
Introducing · RAIN Design Studio
RDS Engine
The RAIN Design Studio Engine.
Stunning.Fast.Reliable.
The recipe
We tasted every modern framework, every library, every tool. Then we did the hardest thing in design: we left most of it out. What remains is a precise portion of each — like seasoning a chef’s plate. The right amount lifts everything. One pinch too many ruins the taste.
Static-first HTML, zero JavaScript by default, images cut to the pixel.
Typed code, tested flows, monitored releases. Boring in production — on purpose.
Built to rank on Google and to be quoted by ChatGPT, Claude, Gemini and Perplexity.
Page speed · RDS Engine
Proof, not promises.
Big type, motion, gradients — and still green across the board. This is the RDS Engine measured by Google Lighthouse on this very site.
96Performance
96Accessibility
100Best Practices
100SEO
3/3Agentic Browsing
- First Contentful Paint
- 1.5 s
- Largest Contentful Paint
- 2.5 s
- Total Blocking Time
- 0 ms
- Cumulative Layout Shift
- 0
- Speed Index
- 3.2 s
Google Lighthouse · studio.mrzakaria.com — homepage · October 2, 2026
01 · Front-end
Ships nothing the visitor doesn’t need.
The front-end layer starts from plain, static HTML and adds interactivity only where a human will feel it. Motion is a seasoning, not a sauce: one signature move per section, never a library tax on every page.
0 KBJavaScript shipped by default per page
106Static pages on this site, built in ~5 s
Astro
Static-first framework with islands architecture.
Pages ship as HTML with zero JavaScript by default; only interactive islands hydrate. That is how content sites stay fast on a mid-range phone.
TypeScript
Typed JavaScript across components, content and build.
Content schemas fail the build instead of failing in production — a missing field never reaches a visitor.
Design tokens
One source of truth for colour, type, spacing and motion.
Light and dark themes, brand palettes and new pages stay consistent without hand-tuning.
Tailwind CSS & modern CSS
Utility layer plus native container queries, :has() and color-mix().
Less custom CSS to maintain, fewer layout bugs, smaller stylesheets.
Vue & React islands
Component frameworks, used only where state lives.
Dashboards, configurators and calculators get real app behaviour without turning the whole site into an SPA.
Framer Motion & GSAP
Animation engines for scroll, layout and micro-interactions.
Transform- and opacity-only motion, measured on Safari and Chrome, paused off-screen.
Image pipeline (Sharp)
Build-time resizing to AVIF/WebP with exact dimensions.
The heaviest part of most pages, cut by default — and no layout shift.
View Transitions & prefetch
Native page transitions and hover-prefetch.
The next page is usually cached before the click lands; navigation feels app-like on a static site.
02 · Back-end
The part nobody sees. The part everything depends on.
When a project needs accounts, payments, documents or real-time data, the Engine switches to a back-end built for long life: typed APIs, queues for anything slow, and data models that outlive the first version.
154Screens in RIVER ERP, one design system
965PHPUnit test files guarding RIVER’s logic
Laravel & PHP
Mature application framework for business logic.
Auth, queues, jobs, mail and policies out of the box — the stack behind RIVER ERP’s 23 modules and 154 screens.
Node.js
JavaScript runtime for APIs, tooling and real-time services.
One language from browser to server where it fits; the build and content pipeline of every Astro site.
PostgreSQL · MySQL · MariaDB
Relational databases chosen per project.
Transactions and constraints keep money, stock and invoices correct — not just “eventually”.
Redis & queues
In-memory cache and background job processing.
Slow work (PDFs, e-mails, imports, AI calls) leaves the request path, so screens stay instant.
REST & OpenAPI
Documented, versioned APIs with a written spec.
Mobile apps, partners and integrations plug in without guesswork; webhooks for everything that changes.
WebSockets
Live updates pushed from server to screen.
Dashboards, POS and kitchen displays refresh the moment data changes — no reload button.
Auth & security
Role-based access, 2FA, audit logs, signed licences.
Every change is attributable; every role sees only what it should.
One codebase, every screen
The same web app packaged as PWA, iOS/Android (Capacitor) and desktop (Tauri).
Clients get mobile and desktop apps without paying for three separate codebases.
03 · Search & AI visibility
Found by people. Quoted by machines.
A beautiful site nobody finds is a brochure in a drawer. The Engine treats search as architecture, not decoration: keywords decide the page map before a single pixel is drawn, and every page is written to be the answer an AI assistant quotes.
30International market pages from one research pass
1Schema graph per page, one entity everywhere
Semrush keyword research
Volume, difficulty, CPC and intent per market (UK, EU, US, Canada, Gulf).
Goal: pick the searches real buyers type and that we can realistically win — then map one page to each intent, no cannibalisation.
Keyword → page map
Every target query owns exactly one URL, one H1 and one answer.
Clear signals for Google; clear citations for AI answer engines.
Content collections
Typed Markdown content that generates pages, hubs, sitemaps and feeds.
Hundreds of landing pages stay consistent, internally linked and impossible to forget.
JSON-LD knowledge graph
One schema.org @graph per page: Organization, Service, Article, FAQ, Breadcrumbs.
Search engines and LLMs resolve the studio as a single entity with clear facts.
llms.txt & llms-full.txt
A machine-readable map and full-text corpus of the site.
Goal: make ChatGPT, Claude, Gemini and Perplexity quote accurate facts instead of guessing.
hreflang, sitemaps & canonicals
Language and market signals, crawl maps and one canonical per page.
The right page shows in the right country — London sees London, Dubai sees Dubai.
Generated share cards
A 1200×630 Open Graph image rendered for every page at build time.
Every link shared on LinkedIn, WhatsApp or X looks designed — automatically.
Search Console & Analytics
Impressions, clicks, queries and conversions per page.
Goal: measure what ranks and converts, then rewrite or expand — the loop never stops.
04 · Reliability
Boring in production. On purpose.
Speed means nothing if Tuesday’s release breaks checkout. The Engine wraps every project in the same safety net: types, tests, budgets and monitoring, so going fast never means going blind.
3Browser engines every critical flow is tested on
60 fpsMeasured on WebKit (Safari) after our hero rework
Playwright
End-to-end tests that click through real browsers — Chromium, WebKit and Firefox.
Sign-up, checkout and booking flows are proven on Safari before a client ever sees them.
Vitest & PHPUnit
Unit and integration tests for front-end and back-end logic.
Totals, taxes and permissions are verified by code, not by hope.
Lighthouse budgets
Performance, accessibility and SEO scores enforced in CI.
A slow image or missing alt text fails the build instead of shipping.
GitHub Actions
Automated build, test and deploy on every change.
The same checks run every time; releases are repeatable, not heroic.
Sentry
Real-time error and performance monitoring in production.
We usually know about a problem before the client’s customer does.
Cloudflare & edge hosting
Global CDN, TLS, caching and DDoS protection.
Static pages served from the edge, near every visitor, with nothing to hack on the origin.
05 · AI, with a human in charge
A team of models. One head chef.
The Engine puts frontier and open models to work where they are genuinely better — research, drafting, code review, data extraction — and keeps a senior human accountable for every decision that ships.
18AI providers supported in RIVER ERP
15Agents on the writers’ room, one editor
Claude · GPT · Gemini
Frontier models through their APIs, chosen per task.
Long-form reasoning, code and multimodal work each go to the model that does them best.
Open models (Llama, Mistral, Qwen…)
Self-hostable models, run locally when data must stay private.
Sensitive documents never leave the client’s server.
AI inside products
Assistants, document extraction, summaries and voice — wired into real data.
RIVER ERP supports 18 AI providers with a PII-redaction mode.
Human sign-off
Every brief, fact and release approved by MrZaKaRiA.
AI makes the studio faster; it never makes the final call.
The seasoning rule
What we left out
matters just as much.
- Page builders that ship 2 MB of CSS for one button
- A JavaScript framework on pages that only need to be read
- Plugin stacks nobody can update without breaking the site
- Autoplaying hero videos that cost the first five seconds
- Cookie-wall trackers that know more than the client does
- Animations that run on the main thread and stutter on Safari
Tech specs
RDS Engine
- Rendering
- Static-first HTML · islands for interactivity · SSR when data demands it
- Languages
- TypeScript · JavaScript · PHP · SQL · Python for data & AI tooling
- Front-end
- Astro · Vue · React · Tailwind CSS · Framer Motion · GSAP · View Transitions
- Back-end
- Laravel · Node.js · REST & OpenAPI · WebSockets · queues & jobs
- Data
- PostgreSQL · MySQL · MariaDB · Redis
- Apps
- PWA · iOS & Android (Capacitor) · macOS, Windows & Linux (Tauri)
- Search & GEO
- Semrush research · keyword→page map · JSON-LD graph · hreflang · llms.txt · OG cards
- Quality
- Playwright (Chromium, WebKit, Firefox) · Vitest · PHPUnit · Lighthouse budgets
- Operations
- GitHub Actions · Cloudflare edge · Sentry monitoring
- AI
- Claude · GPT · Gemini · open models (Llama, Mistral, Qwen) · human sign-off
- Languages served
- English · French · Arabic
RDS Engine — questions
The RDS Engine (RAIN Design Studio Engine) is the studio’s curated technology stack and delivery method: a selected set of front-end, back-end, search, quality and AI tools — Astro, TypeScript, Laravel, Node.js, PostgreSQL, Redis, Playwright, Sentry, JSON-LD and more — combined so every project ships stunning, fast and reliable.
No. It is how RAIN Design Studio builds: the tools, defaults, budgets and checks applied to every website, SaaS product or ERP the studio ships. Clients own the resulting code.
Because no single framework is best at everything. Content sites need static HTML and zero JavaScript; dashboards need state and real-time data; ERPs need transactions and queues. The Engine picks the right portion of each tool and leaves the rest out.
Keyword research in Semrush decides the page map first. Each target query gets one page with one answer, a JSON-LD knowledge graph, hreflang for its market, an llms.txt entry and a generated share card. Search Console and Analytics close the loop.
Yes. Critical flows are tested on Chromium, WebKit (Safari) and Firefox with Playwright, and motion is limited to GPU-friendly transforms that are measured on Safari before release.
And one more thing…
It’s already running
on 17 projects.
RAIN Store · RIVER ERP · ERPStore · Enterprise CRM · GoldERP · WaveTicket · PrintMyCheque · Pods · Certificate Registry · Origin Ξlement — and more.