Display Heading 1

Display Heading 2

Display Heading 3

Display Heading 4

Body paragraph — Inter at 16px with 1.55 line-height. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.

بسم الله الرحمن الرحيم — Arabic sample using Amiri.

## Buttons

Primary
Gold accent
Ghost
Large
Small

## Eyebrows + badges

Standard eyebrow
Gold eyebrow
Badge
Gold badge
Experimental

## Retention dial

92%Retention

+0.8% this week

## Feature cards

🧠

Card title

Card body text describing the feature in one or two sentences.

🎙️

Another card

With a different icon and copy.

✨

Third card

Hover me.

## Quote

“The retention prediction is uncanny — it surfaces the exact verse I was about to forget, every single day.”

Ahmed
Adult learner, Casablanca

## FAQ

Is HafizPrime really free?

Yes. No paywall, no ads.

Does it work offline?

Yes, after one download of ~500 MB.

## Form controls

## Divider

## Container widths

– `.hp-container` — max `80rem` (1280px)
– `.hp-container–narrow` — 42rem
– `.hp-container–prose` — 48rem
– `.hp-container–md` — 64rem
– `.hp-container–xl` — 90rem

## Spacing tokens

| Token | Value |
|—|—|
| `–hp-s-1` | 4px |
| `–hp-s-2` | 8px |
| `–hp-s-3` | 12px |
| `–hp-s-4` | 16px |
| `–hp-s-5` | 24px |
| `–hp-s-6` | 32px |
| `–hp-s-7` | 48px |
| `–hp-s-8` | 64px |

## Related

– [`docs/DESIGN-SYSTEM.md`](/docs/DESIGN-SYSTEM.md)
– [`docs/STYLE-GUIDE.md`](/docs/STYLE-GUIDE.md)