Concept · 2026
Shariah advocacy, stated without theatre.
Al-Hadi & Partners is a concept chambers site for a boutique Shariah litigation and Islamic family law practice in Kuala Lumpur and Kuantan. One page in Malay, four practice areas, and an intake that never pretends a first message is a retainer.
Visit the page (opens in a new tab)- Client
- Al-Hadi & Partners — concept
- Sector
- Shariah litigation & family law
- Market
- Kuala Lumpur & Kuantan
- Scope
- Single page, no backend
Four areas, then the protocol.
A visitor arrives with one matter in mind. The practice cards name it in plain terms, and the process section answers the next question: what actually happens after I write?
4
Practice areas, each linked to intake
2
Chambers — Kuala Lumpur and Kuantan
~10 KB
Vanilla JavaScript, no framework
The first message is not a retainer.
A chambers site has to look certain without promising an outcome.
Someone arriving at a Shariah practice is rarely browsing. They are looking for a calm answer to a difficult question: does this firm handle my matter, and what happens if I write to them? The page answers in that order — practice areas, then process, then a short pre-screening. The copy stays in formal Malay with English practice-area labels, the way Malaysian legal writing actually reads.
Four cards that do the sorting.
Hadhanah, fasakh and khuluk, harta sepencarian, faraid and hibah. Each card carries a category into the form, so the visitor never has to translate their matter into a dropdown.
Process before persuasion.
Three litigation steps sit beside a counsel profile. It sets expectations about documents, hearings and fees without a single guarantee.
Compliance kept in view.
Bar Council advertising guidance, the Legal Profession Act 1976, the PDPA and both chamber addresses are part of the page — not buried in a PDF.
A pre-screening, not a case.
Five fields, inline errors and a mock reference. The confirmation says plainly that no lawyer-client relationship exists yet.
Nothing leaves the page.
The intake is deliberately a demonstration. The reference is generated in the browser, and no field is stored, transmitted or shared — which is the only honest way to show a form for a firm that does not exist.
- Storage
- No cookies, no analytics
- Requests
- Static files only, no API
- Documents
- No uploads, no client files
- Keyboard
- Real labels, visible focus, Esc to close
180 KB
Initial payload, uncompressed
~295 lines
Of vanilla JavaScript, in total
8
Breakpoints, 1120 down to 380 px
A serious page, lightly built.
No framework, no bundler and no server-side anything. The restraint is the point.
$ ~180 KB initial payload
HTML, CSS, JS, fonts and hero image
Markup
One page, semantic sections.
Landmarks, labelled sections and a skip link carry the structure. The sticky header, scrollspy and mobile drawer all work from the same markup.
Script
Ten kilobytes, written by hand.
Drawer focus return, scroll reveals, scrollspy, five-field validation and the success swap. Reduced motion is respected throughout.
Media
AVIF and WebP, with dimensions.
The hero loads with
fetchpriority="high"; the
counsel portrait below the fold is lazy-loaded. Nothing shifts.
Type
Cormorant, Jakarta Sans and JetBrains Mono.
Three self-hosted variable WOFF2 families, preloaded from the same origin. No third-party font request leaves the page.
Design
Racing green, gold and ivory.
British racing green for weight, hunter surfaces for blocks, burnished gold for emphasis and ivory for text. Fluid type from 380 px up.
Schema
A real LegalService record.
JSON-LD names both chambers and the practice areas, with Open Graph, Twitter cards, a canonical URL, robots and a sitemap.
Note — Al-Hadi & Partners is a fictional practice. The lawyers, case reference, addresses and opening hours are made-up demo content. This is an independent portfolio concept, not a real chambers, and nothing on the demo page is legal advice.
Next concept
Nova Clinic
Need a site that earns trust before the first call?
Professional services sell on confidence. A calm, precise page can do more than a glossy one — and it can be small enough to load before doubt sets in.