Karma Pool · 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.
Form fields
Floating labels, inline validation, 52px height, RTL-correct. Phone/email fields stay LTR inside Arabic forms.
How should we address you?
Please enter a valid phone number.
Looks good
Badges, chips & toasts
Cards
Hover lifts 6px with a soft blue shadow and an aqua edge glow. Whole card is one click target.
-
Design & Consultation
2D/3D design, site survey, sizing and shape — planned around your budget.
Learn more -
Pool Construction
Excavation, reinforced concrete shell and full waterproofing — engineered to last for decades.
Learn more -
They kept to the timeline to the letter, and the engineer sent us progress photos every week. The result is even better than the render.
A typical residential pool takes 8–12 weeks from excavation to handover, depending on size, system and finishes. You get a written timeline before we start and a weekly progress report.
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