Shipping across Egypt & UAE — free on larger orders Warranty on every part — up to 12 months Cash on delivery available
Design System v1.0

Design System

Colours, type, spacing and every component with its states — rendered straight from the live CSS.

01 — Colour tokens

Red never exceeds ~10% of a screen. No red body text on black (headings & accents only). All text meets WCAG AA.

--red-600
#D7141A
Primary CTAs, prices, active states

--red-700
#B00F14
Button hover / pressed

--red-50
#FDECEC
Alert & badge backgrounds

--black-900
#0E0E10
Header, footer, dark sections

--black-800
#1A1A1D
Dark cards

--black-700
#2B2B30
Borders on dark

--gray-500
#6B6B73
Secondary text

--gray-200
#E4E4E7
Borders on light

--gray-100
#F4F4F5
Light section backgrounds

--white
#FFFFFF
Main background

--success
#16A34A
In stock, fits your car

--warning
#F59E0B
Low stock

02 — Typography

Cairo (AR) • Rajdhani + Inter (EN) • JetBrains Mono (codes)

Display 64/36Automatic

H1 48/30Heading one

H2 36/26Section heading

H3 24/20Sub heading

H4 20/18Card title

Body L 18/16Every part is tested before it leaves us.

Body 16/15Body copy with 1.6 line height in English.

Small 14/13Labels and notes

Mono6HP19 • DQ200 • 0B5 927 156 E

03 — Spacing, radius & depth

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128
radius 8 / 14 / 20 / full — shadow 1 / 2 / 3 — dark glow

04 — Buttons

primary • secondary • ghost • whatsapp • loading • disabled • sizes S/M/L
Arrow link

05 — Inputs

Please enter a valid phone number.

Phone with country code
Quantity stepper

06 — Badges & status

New Imported Reprogrammed -15% Best seller New arrival ATCVTDCTZFFT
In stock Only 1 left Out of stock Fits your Toyota Camry 2016 Check fitment 6HP19 (18)
Information notice
  • Clear error message in both languages

07 — Components

product card • category card • vehicle finder (sidebar) • skeleton
Valve Bodies4
Can't find your car? Ask us
tabs • accordion • empty state • toast
Accordion question

The answer lives here.

Empty state

Every empty state offers a way out: request the part or WhatsApp.

Added to cart
Something went wrong

08 — Icons

09 — Motion

hover 150ms • UI 250ms • reveal 400–600ms • cubic-bezier(.2,.8,.2,1) • stagger 60ms • prefers-reduced-motion respected

Need help?