First screen
One promise, said at the size of a billboard.
The first screen is the brand red, a single 73px headline and two actions. The diagonal light rays point into the copy, so the eye lands on the message before anything else. Nothing competes with it: no carousel of offers, no stock photo.
- Headline
- Aptos Display, 73px, weight 780
- Line height
- 0.91, set tight for impact
- Actions
- 2, primary first
Navigation
A header that sorts visitors before they click.
The navigation names the audiences directly: Partner With Liqa, For Pet Owners, Products and Distribution. A brand manager and a cat owner each find their door in one glance. The header stays fixed, keeps the support line visible, and the language switch is one tap away.
- Behaviour
- Fixed, 74px tall
- Links
- 7 sections, 1 language switch
- Always visible
- Support line 920017323
Typography
Built to read the same in two scripts.
English runs on Aptos, with its Display cut for headlines. Arabic gets its own typeface rather than borrowing English letterforms, with more generous line height because Arabic needs it. Headlines are heavy and tight, body text is calm at 19px.
- English
- Aptos + Aptos Display
- Arabic
- Hacen Saudi Arabia
- Body
- 19px, line height 1.52
- Reading width
- ≈ 53 characters
Color
Red as the signature, ivory as the room it lives in.
The red appears in the hero, the header and a few anchor panels, about 13% of the page. Everything else sits on a warm ivory, which keeps product photography and partner logos clean. The darker red is reserved for depth and pressed states.
Ivory69%Liqa red13%White9%Deep red6%Sand3%
- Brand red
- 13% of the page
- Neutrals
- 81%
- Button contrast
- 8.4 : 1
Page structure
The page answers the questions in the order they’re asked.
Who are you, who is it for, how long have you done this, what do you carry, what makes you different, and how do we talk. The homepage is ten sections, and each one answers the question the previous one raises.
- Sections
- 10
Calls to action
Every action says exactly where it goes.
No “Learn more”. The buttons read View Product Categories, Discuss a Partnership, Explore Our Brands. Each label is a destination, so visitors know what happens before they press. All of them share one shape: a 52px pill.
- Size
- 52px tall, full pill
- Label
- 15px, weight 750
- Style
- One shape everywhere
Mobile
On a phone, the main action becomes the width of a thumb’s reach.
The primary button stretches to 320px, the full content width, so it can’t be missed or mis-tapped. The menu is a 48px target in the corner, and the language switch stays in the header.
- Primary button
- 320 × 52px
- Menu target
- 48 × 48px
- Header
- Fixed, 72px