Ragheeb Designs Inc. builds web and mobile products that are well-designed from the ground up. Every project ships with a structured design system behind it, so the product looks consistent and is easy to build on as it grows.
Every design decision traces back to our brand foundation — the logo, color system, and typography scale that define Ragheeb Designs.
Body Large — The quick brown fox jumps.
18px · RegularBody — The quick brown fox jumps over the lazy dog.
16px · RegularBody Small — Supporting text and descriptions.
14px · RegularEvery color, size, and spacing value in the product is stored in one place and given a name. When you want to change something — say, the brand color or the button style — you change it once and it updates everywhere automatically. No hunting through hundreds of files.
Think of this as the paint swatches. Every color, spacing value, and border radius is defined once and given a name.
// Defined once, used everywhere "blue": { "500": "#1A5CFF", "600": "#0047E6" }, "space": { "4": "16px" }
Here we say "the primary button color is blue-500." Dark mode just swaps these roles. The components themselves never need to know.
/* Light mode */ --action-primary: var(--blue-500); /* Dark mode: swap here only */ .dark { --surface-bg: var(--slate-900); }
Buttons, forms, and cards just reference the named roles. Change the role once and every button in the product updates instantly.
// Button just uses the name primary: [ 'bg-[var(--action-primary)]', 'text-white', 'hover:opacity-90', ]
Developers don't have to guess what color or spacing to use. The system makes those decisions for them, so they can focus on shipping.
Every screen in the product uses the same values. No more buttons that are slightly different shades of blue on different pages.
Want to change the brand color? Update it in one place and it flows through the entire product automatically. No manual find and replace.
Production-ready, accessible components built with CVA. Each component consumes semantic tokens so they adapt to any theme automatically.
Must be at least 8 characters
This field is auto-assigned.
See how the design system powers production interfaces. This fintech dashboard widget is built entirely from design tokens.
A few things we've shipped. Different industries, same attention to detail.
Loyalty program, mobile ordering, and rewards tracking for a local coffee shop. Customers earn points, staff see orders in real time.
Patient portal for a family medicine clinic. Appointment booking, visit history, and secure messaging with the care team.
Training and recovery tracking app built for serious athletes. Workout logging, performance trends, and breathing exercises.
Charity platform built for Ramadan fundraising campaigns. Donors can give to multiple causes in a single checkout.
Portfolio management platform with real-time data visualization. Built for clarity in a space where confusing UX costs people money.
Have something in mind? Let's figure out what it should look like and build it.
Start a ProjectLoyalty apps, ordering systems, and booking tools for shops, cafes, and clinics that want to give customers a proper experience.
Patient apps, training tools, and mental health products designed around real user needs, not just what's easy to build.
Dashboards, pension platforms, and financial products where clarity actually matters and confusing UX has real consequences.
Charity platforms and community products where the design has to earn trust fast and make it easy for people to take action.
Whether you need a mobile app, a web platform, or a design system for your product team, let's talk about what you're building.