Moeid Lawyers Group website

 Design artistry meets legal technology: a visual showcase by the Karzaan team

About the project:
The Moeid Lawyers Group website is living proof that “visual beauty and technical efficiency can be in perfect harmony”. Designed as a specialist reference for legal articles and a database of laws, the platform takes a fresh approach to UI/UX and raises the bar for web design in Iran.

Distinctive visual features

1. Design philosophy: “credibility through beauty”

  • A skeuomorphic legal theme: leather, gold-embossed and paper elements that convey the authenticity of the legal profession
  • A premium color palette: #0A2647 (royal blue) combined with #C69749 (gold) and #FDF0D1 (cream) as the brand’s base colors
  • Refined typography:
    • Headings: Vazir FD in Bold
    • Body text: Estedad FD at 1.26rem with a line height of 1.8
  • Layered shadows: depth created with 0 4px 30px rgba(10, 38, 71, 0.12) shadows

2. Signature design elements

  • A 3D navigation bar: with a floating effect on hover
  • Article cards: gold borders with an inset shadow
  • Custom icons: inspired by symbols of Roman law
  • A lawyer portrait slider: a museum-gallery effect with backdrop-filter: blur(12px)

Advanced technical architecture

Area

Technologies

Visual benefits

UI design

Figma + Auto-layout

Pixel-perfect consistency

Front end

Tailwind CSS 3.3 + GSAP

60fps animations

Back end

Yii2 (PHP)

Instant component rendering

Database

MongoDB

Management of unstructured content

Server

Node.js + V8 Engine

Optimized JavaScript execution

Visual content management system (Visual CMS)

A flexible architecture with MongoDB:

Visual management features:
1. An advanced editor:

  • Adjusting shadows and borders directly in the editor
  • Live preview of animations

2. A legal image management system:

  • Smart tagging of images of laws
  • Automatic cropping to the golden ratio (1.618)

Visual and technical optimizations

1. Advanced CSS techniques

2. Purposeful animations:

  • Parallax scrolling with translate3d and scale3d
  • Scroll-driven transitions using the Intersection Observer API

3. Image optimization:

  • Automatic conversion to WebP with transparency
  • Progressive loading with the blur-up technique

The project’s visual achievements

Metric

Result

Lighthouse score

98 (Performance), 100 (Accessibility)

User engagement

75% longer time on page

Bounce rate

65% lower than the old version

User feedback

4.9/5 from 320+ reviews

Conclusion: a new standard for specialist platforms

The Moeid Lawyers Group website proves that aesthetics and specialist functionality can be perfected together in a legal platform. The project’s key achievements:

  • A new UI standard: inspired by traditional legal elements and turning them into digital ones
  • A visual content management system: the first legal CMS that lets editors adjust aesthetic parameters
  • A narrative user experience: guiding users along a story-like path with purposeful animations

“At Karzaan, we believe aesthetics is not just arranging colors but a language for talking with users. The Moeid project is proof of that philosophy.”

To learn more about website design and its process, read these articles on the Karzaan blog: