UI themes — Tawaaf mockup

§4A.1 · Color palette

Color

Three tones carry the brand: deep green (ground and type), gold (accent and trim), cream (paper). No bright accents. No rainbow states. The current palette is in good shape — what's missing is a defined semantic layer for warnings, errors, and success.

Current brand palette

Deep Green

#0a2e22

Hero, theme-color

Forest Green

#0f3d2e

Primary type, CTAs

Hover Green

#1a5440

Link/CTA hover

Gold

#c9a961

Tiraz, accent, primary button

Deep Gold

#8b6f2e

Eyebrow text, citation

Cream

#faf8f3

Paper, body background

Proposed semantic palette (new)

Derived from the brand colors but visually distinguished for messaging.

Warn

#c47a3a

Heat danger, missed slot, attention

Error

#a04830

Form errors, failed states

Info

#2f6a52

Tip, second-opinion citation

Success

#0f5c3f

Saved, complete, verified

Do

Use gold on deep green or on cream. Use green for ink. Use semantic colors only for status — never for body text.

Don't

Use gold for inline body links on cream — contrast is ~3.1:1 and fails AA. Use gold only for decorative trim or large display text.

§4A.2 · Typography

Type stack

Italiana (wordmark) · Fraunces (editorial serif) · Inter (UI) · Amiri (Arabic). The pairing is right. The cleanup is: trim weights to what's actually used, exploit Fraunces optical sizing, set the fallback chain, and give Arabic the line-height it needs.

Italiana · 400 · wordmark only

tawaaf

Fallback chain: 'Italiana', 'Cormorant Garamond', 'Cormorant', serif

Fraunces · 600 · display headlines

A quiet companion.

Recommend enabling font-variation-settings: 'opsz' 144 at sizes ≥32px for tighter display rendering.

Fraunces · italic 400 · pull-quotes & ledes

"For the journey itself."

Inter · 600 · UI emphasis

Stand at Arafat until sunset.

Inter · 400 · body

Wuquf begins from Dhuhr (~12:23 PM Saudi time) and you must remain inside the Arafat boundary until sunset.

Drop weights 300 and 800. Grep confirms only 400/500/600/700 are used. Trim saves ~70 KB cold.

Amiri · 400 · Arabic body

لَا إِلَٰهَ إِلَّا اللَّهُ وَحْدَهُ لَا شَرِيكَ لَهُ

Line-height bumped to 1.9 from inherited 1.55 so diacritics breathe. Fallback: 'Amiri', 'Traditional Arabic', 'Geeza Pro', serif.

Proposed type scale

Modular scale. Replace ad-hoc sizes (74, 32, 28, 24, 20, 18, 16, 15, 14, 13, 11) with these.

--t-64Display

--t-48Hero

--t-36Page title

--t-28Section

--t-22Card heading

--t-18Lede / large body

--t-16Body

--t-14Secondary

--t-12Caption

§4A.3 · Spacing

8-point spacing scale

Currently padding values are ad-hoc. Lock to a single scale and the visual rhythm tightens significantly.

--s-4

--s-8

--s-12

--s-16

--s-24

--s-32

--s-48

--s-64

§4A.4 · Iconography

Standardize on Phosphor (regular weight)

Currently emoji, Unicode glyphs, and ad-hoc SVGs all coexist. Phosphor is free, has multiple weights, pairs well with Fraunces' optical sizing aesthetic, and ships ~9000 icons. Ship ~15 as an inline SVG sprite.

Home

Tawaaf

Duas

Rituals

Qibla

Prayer

Doubt

Hydration

Family

Emergency

Tahajjud

٧

Pebble · 7

§4A.5 + 4A.10 · Voice + states

Empty, loading, and error states

No stock illustrations. No skeleton shimmers. The empty and loading states should sound like the rest of the site: quiet, in voice.

In voice (recommended)

"Calculating prayer times…"

"And speak good words to people." (Qur'an 2:83)

"That page hasn't been written yet — or it has been put away."

Avoid

Stock 404 illustrations.

Skeleton shimmer / pulse loaders.

"Oops! Something went wrong" copy.

§4A.6 · Motion

Motion system

Define the durations and easings, audit pages against them, respect prefers-reduced-motion. Three speeds is enough.

Fast

150ms ease-out

Button press, hover, focus ring

Reveal

240ms ease-out

Sheet rise, accordion, expand

Instant

0ms

Data refresh, content swap, pure information

The visual system, examined.