First screen
Two verbs that describe the whole firm.
“نؤسس بثقة، ونحمي بدقة” (we establish with confidence, we protect with precision) covers both halves of the practice in five words. Bronze highlights the key words, and a gavel in the background sets the context without a word of explanation.
- Headline
- IBM Plex Sans Arabic, 60px
- Direction
- Right to left
- Highlight
- Bronze on key words
Navigation
Five links, read right to left.
The whole navigation mirrors for Arabic: the logo sits on the right, links read right to left, and the language switch moves to the far left. Services opens a menu of practice areas so the header stays at five links.
- Links
- 5
- Layout
- Fully mirrored for Arabic
- Practice areas
- Inside Services
Typography
One Arabic family, used with discipline.
Everything is set in IBM Plex Sans Arabic, a modern Arabic sans with real weights, rather than a decorative script. Hierarchy comes from size and weight alone: 60px headlines, 46px section titles, 16px body.
- Family
- IBM Plex Sans Arabic
- Headlines
- 60px, weight 600
- Body
- 16px, line height 1.5
Color
Navy for authority, bronze for value.
The page lives in deep legal navy, layered in four shades for depth. Bronze appears only on the action button and highlighted words, so it reads as weight and value rather than decoration.
Midnight50%Legal navy27%Royal14%Deep5%Light grey3%
- Navy family
- 95% of surfaces
- Bronze
- Actions and highlights
- Button
- Bronze pill, 57px
Page structure
Services, vision, proof, answers.
The page moves from specialised services to the firm’s legal vision, then articles that show expertise, partners and client reviews, and ends with the questions companies actually ask. Credibility is built in layers.
- Sections
- 10
Calls to action
One action, repeated without variation.
تواصل معنا (Contact us) is the only primary action, in the same bronze pill wherever it appears. A law firm doesn’t need five different asks; it needs one clear door.
- Primary
- تواصل معنا
- Size
- 149 × 57px
- Shape
- Pill, 50px radius
Mobile
The headline gets bigger relative to the screen.
On a phone the headline stays at 46px, so it takes most of the first screen width and keeps its authority. The menu centres under the logo where both thumbs can reach it.
- Headline
- 46px
- Menu
- Centred, 41px target
- Action
- Under the headline