Thread & Ink comes to the website

September 9, 2026 · Abdulkareem H. Ali

In July we redrew the Tawaasal app around a design language we call [Thread & Ink](/en/blog/thread-and-ink-new-design) — the kashida from our own wordmark pulled into a connecting thread, warm paper by day, deep ink by night.

We did not do the website at the same time. So for two months there was a seam: you read about Tawaasal on a site of white cards and lavender gradients, then opened the product and found paper, ink and a lapis thread. Two companies, apparently.

That seam is gone. tawaasal.com is now Thread & Ink, top to bottom.

The same paper, the same ink, the same thread

Every marketing page sits on the warm paper you already know from the app, and turns to deep ink at night. The thread runs through the site the way it runs through the product: under page titles, as the letterhead rule beneath the navigation, as the dotted leader between a label and its number, as the small ring around every icon.

Headings are Baloo Bhaijaan 2 and body text is Rubik — the same two families the app uses, chosen because they are drawn Arabic-first rather than adapted to it. An Arabic heading on the website now has exactly the presence it has in the product.

Not just the pages you were shown

The facelift went past the shop window. The CMS your school administrators work in and the billing portal where you manage your subscription are in the same language — same paper, same ink, same thread, both themes. If you sign up, nothing changes character the moment you log in.

The hero shows the software, not a drawing of it

The old home page had four floating cards and a gradient. The new one has a screenshot of the actual admin dashboard with the actual iOS app tilted in front of it — and both follow you. Reading in Arabic gets you the Arabic app, laid out right to left. A device set to dark mode gets the dark app. We used to show an English screenshot wrapped in Arabic copy, which quietly told every Arabic-speaking visitor they were an afterthought.

Terracotta still means "this needs you"

In the app, orange marks the thing waiting on a decision — a leave request, an approval. On the site it now marks the one action a page is asking of you, and nothing else. Same colour, same meaning, on purpose. It is the only warm thing on a cool page, which is what makes it work.

Legibility we measure rather than assume

Every colour pairing on the site is checked by a script on every build: forty-seven combinations of text and background, each measured against WCAG 2.1 contrast ratios. Below the threshold, the build fails.

That is not a line for a blog post. "It looks readable enough" is a judgement made by someone with good eyesight, on a good monitor, in a well-lit room — and almost nobody reads a school website in those conditions. A parent checks it on an old phone in a car park.

The measurement caught things no one would have seen by eye: white text on a green card at 2.47:1, a grey that passed on one background and failed on another, a button whose hover changed colour instead of getting brighter.

Nothing moved

As with the app in July, this was an identity layer and not a redesign of how anything works. Every page is where it was, every link goes where it went, every form behaves the same. The site simply stopped looking like a template and started looking like the software it is selling.

Have a look — and if something on it is wrong, unclear or ugly, tell us.