Howamesh
Howamesh is a Saudi creative collective that had a brand deck and no website. I built a bilingual landing page for its principles, its fields of work, an archive of 39 delivered works and a contact form: a static site with no framework, where each language is a real page. The brand itself is the collective’s own.
- HTML
- CSS
- JavaScript
- Node.js
- RTL
- Web fonts
- SEO
- Netlify
- My part
- Everything but the brand
- When
- 2026
- Works
- 39
- Status
- Live
Overview
Howamesh is a Saudi creative collective: a network of designers and builders working on brand identity, strategy, products and content. They had a brand deck and no website. I built them one: a bilingual landing page that presents the collective’s principles, the fields it works in, an archive of 39 delivered works, and a contact form. It is a static site with no framework and no runtime dependencies, and both languages are real pages rather than one page translated by JavaScript.
My role
I built all of it: the content pipeline, the build, the design system, the typography work, the animation and the deployment. The only thing I did not make is the brand itself: the palette, the illustrations and the wordmark are the collective’s own, and the page is a transcription of their deck rather than a reinvention of it.
LimitThe palette, the illustrations and the wordmark are the collective’s own. The page transcribes their deck; it does not reinvent it.
What shipped
- A build script that renders one template function twice and writes two complete pages: Arabic at the root, canonical and right-to-left, English under /en/, each carrying the other’s hreflang alternate.
- Two content modules, one per language, that are the single source of the copy, plus a check script that fails the build if a work, a client or a section is missing from either edition, so the two can never drift apart.
- The nine working principles as a selectable network diagram: pick a node and the matching principle and its illustration cross-fade in.
- An archive of the collective’s 39 works, grouped by field into native disclosure elements, so a long index stays short until someone actually wants it.
- A contact form on Netlify Forms with a honeypot, pending, error and success states, and a native POST fallback when JavaScript is unavailable.
- Light and dark themes sharing one set of semantic tokens: the system preference by default, with a manual choice that persists.
- Generated sitemap and robots files, canonical and hreflang tags, Organization structured data and social cards, all produced by the same build.
- Deployed on Netlify at a custom domain, with security headers, a content security policy that allows no external origin at all, and a cache policy separating fingerprinted assets from the ones that change.
Typography & fonts
- The two house typefaces are self-hosted and subsetted, so the page makes no third-party request and the font policy can be locked to the site’s own origin.
- Each family is cut twice, Latin and Arabic, declared under one family name with non-overlapping Unicode ranges: which is what keeps a hundred kilobytes of Arabic outlines off the English page.
- Only the display subset for the page’s own script is preloaded: self-hosting without a preload is slower than a font CDN, because nothing discovers the font until the stylesheet parses.
- Arabic body copy is set one weight heavier than the Latin, because the display face loses its thin joins and its dots at the lighter weight in a way the Latin does not.
- The hero wordmark is the real vector artwork from the brand deck, inlined into the HTML so it paints with the first frame. It uses swash forms the default font instance will not reproduce, so it stays artwork rather than live type.
DecisionArabic body copy is set one weight heavier than the Latin, so the thin joins and the dots survive.
UX decisions
- The language toggle is a plain link between two real URLs, so switching language works with JavaScript off and both editions are indexable.
- Every directional rule in the stylesheet is written with logical properties rather than left and right, so the mirrored edition is correct by construction instead of by a pile of overrides.
- The script is optional by construction: reveal animations are gated behind a class only JavaScript can add, so with the script blocked every section is simply visible.
- The brand mark turns as you scroll, driven by a CSS scroll timeline rather than a scroll listener: so scrolling back up unwinds it exactly, and nothing runs on the main thread per frame.
- Rotation is not mirrored for the right-to-left edition. A turn is not a logical property, and mirroring it would make the two pages disagree about which way scrolling down turns the mark.
- All motion is switched off under a reduced-motion preference, including the card hover lift.
Worth a closer look
The lesson I keep from this one is about Arabic web fonts. The standard subsetting tool drops the contextual shaping features by default, and Arabic then renders as a row of disconnected isolated letters: while the file size looks exactly right and every automated check passes. A correct byte count proves nothing about the shaper; the only way to know is to render Arabic and look at it. The build script now carries that warning in its header, because it is the kind of failure that is invisible to anyone who does not read the script.
DecisionRender Arabic and look at it after every font change. A correct byte count proves nothing about shaping.
Screens
