كارما للمقاولات · Design System v0.1
Liquid Luxury
Depth, light, calm and precision — tokens and components shared by every page, in Arabic (RTL) and English (LTR).
Color
Every text/background pair used in the UI passes WCAG 2.2 AA. Colors marked AA text are safe for text on white.
-
--color-deep#0A2540 Deep ocean navy — headings, dark sections, footer AA text -
--color-primary#0E6BA8 Primary blue — buttons, links AA text -
--color-aqua#1FB6C9 Aqua accent — highlights, icons, hover (decorative / on dark) AA text -
--color-aqua-ink#0B7F8E Aqua for text on light backgrounds (AA) AA text -
--color-lagoon#7FDBE6 Light lagoon — gradients, accents on dark -
--color-sand#E9DCC6 Warm sand — luxury warmth, dividers -
--color-gold#C8A15A Gold — badges, lines, numbers (sparingly) -
--color-gold-ink#8C6A2C Gold for text on light backgrounds (AA) AA text -
--color-mist#F4F8FA Alternate section background -
--color-text#1C2B39 Body text AA text -
--color-muted#5B6B7A Secondary text (AA on white & mist) AA text -
--color-success#1E9E6A Success state AA text -
--color-error#D64545 Error state AA text -
--color-whatsapp#1DA851 WhatsApp actions AA text
--gradient-signature--gradient-buttonCaustic texture · screen blendTypography
Arabic: Readex Pro (display) + IBM Plex Sans Arabic (text), line-height 1.8 / 1.3, never letter-spaced. English: Manrope (display & text) + Fraunces italic accents, line-height 1.65 / 1.12. Fluid sizes with clamp(); fonts self-hosted WOFF2 subsets.
نصنع لك واحة الهدوء والرفاهية
We craft the oasis of calm
نصنع لك واحة الهدوء والرفاهية
We craft the oasis of calm
نصنع لك واحة الهدوء والرفاهية
We craft the oasis of calm
نصنع لك واحة الهدوء والرفاهية
We craft the oasis of calm
نصنع لك واحة الهدوء والرفاهية
We craft the oasis of calm
نصنع لك واحة الهدوء والرفاهية
We craft the oasis of calm
نصنع لك واحة الهدوء والرفاهية
We craft the oasis of calm
Space & shape
8px system. Containers 1280px (wide 1440px). Section padding 64–160px, fluid.
8162432486496128160--r-sm 12pxinputs, small--r-md 20pxcards--r-lg 32pxlarge media--r-pillbuttons, chips--shadow-sm--shadow-md--shadow-lg--shadow-glowButtons
Min height 48px (52px default). Primary has a shine sweep on hover and a ripple on press. Directional icons mirror in RTL.
.btn--primary
اطلب عرض سعر مجاني
اطلب عرض سعر مجاني
اطلب عرض سعر مجاني
اطلب عرض سعر مجاني
اطلب عرض سعر مجاني
Form fields
Floating labels, inline validation, 52px height, RTL-correct. Phone/email fields stay LTR inside Arabic forms.
كما تحب أن نناديك
من فضلك أدخل رقم هاتف صحيح.
تم التحقق
Badges, chips & toasts
Cards
Hover lifts 6px with a soft blue shadow and an aqua edge glow. Whole card is one click target.
-
التصميم والاستشارات
تصميم ثنائي وثلاثي الأبعاد، معاينة الموقع، واختيار الحجم والشكل بما يناسب ميزانيتك.
اعرف المزيد -
إنشاء حمامات السباحة
حفر وهيكل خرساني مسلح وعزل محكم، بتنفيذ هندسي دقيق يضمن متانة تدوم لعقود.
اعرف المزيد -
التزموا بالجدول الزمني بالحرف، وكان المهندس يرسل لنا صور التقدم كل أسبوع. النتيجة أجمل من التصميم نفسه.
يستغرق المسبح السكني المتوسط عادةً من 8 إلى 12 أسبوعًا من بدء الحفر حتى التسليم، وتختلف المدة حسب الحجم ونظام المسبح والتشطيبات. نسلّمك جدولًا زمنيًا مكتوبًا قبل البدء ونرسل لك تقرير تقدم أسبوعيًا.
Icons
One line set on a 24px grid, 1.6 stroke, round caps. Arrows & chevrons mirror in RTL; logos, play buttons and numbers never do.
Motion
Slow and restrained. All motion is disabled under prefers-reduced-motion, and nothing animates the LCP image's loading.
--easecubic-bezier(.22, 1, .36, 1)all transitions--dur-1 / 2 / 3200 / 450 / 800mscolor · hover lift · reveals[data-reveal]fade-up 28px + blur 6px → sharp, 900ms, 80ms staggersection content.wave-mask"water rising" elliptical clip reveal, 1.4seditorial imagesHero causticsWebGL, half-resolution, starts after page load, pauses off-screenhero only.causticsstatic texture, 40s drift, screen blenddark bands, footerRipple700ms ink from the press pointall buttons