Basma — Website
The marketing site for Basma, built to turn an HR or operations decision-maker into a demo request — and nothing else.
The public site for Basma's attendance and workforce platform. It shares its design tokens with the product dashboard, so a component copied between the two lands on exactly the same colour — the marketing page and the product a visitor eventually logs into look like the same company built both.
The Challenge
Convert an operations decision-maker, answer their real objections before the FAQ, and never drift away from the product's own design language.
- One job only: a demo request. No pricing page, no signup funnel, no second conversion path competing with it
- Say what Basma is in one screen — the outcome, not the feature list
- Answer the objections an operations manager actually raises: geofencing, offline clock-in, payroll export, Arabic
- Look like marketing without inventing a second design system next to the product's
The Solution
A token superset shared with the dashboard, a two-level surface system, and every CTA on the page pointing at one form.
tokens.cssis a deliberate superset of the dashboard'stheme.css— every shared token keeps the identical name and value, and the file only adds what a marketing page needs- A two-level surface system (tinted page, floating white panels, dark ink bands) — which is why there is not a single divider line anywhere on the page
- Highlighter-marker headline treatment with word-split scroll reveals, choreographed by a staggered
--iindex - The hero is a connected node graph — employee, attendance inputs, the product mark, responses, manager — geometrically symmetric, so Arabic mirrors it with zero RTL-specific code
- Depth comes from inset bevels rather than drop shadows; only the centre tile keeps an outer shadow
- Full-bleed marquee tracks that re-tile themselves to span any viewport, from mobile to ultrawide, with no gaps
- Every CTA resolves to one place: a validated demo request form with its own success state
The Basma Platform
Basma ships as four separate products against one backend. Each is its own build, and each one I designed and engineered end to end.
- Mobile app — Flutter, iOS & Android — geofenced clock-in with biometric verification, leave workflows and manager dashboards.
- Marketing site — The public landing page, built around a single conversion path: request a demo. (this project)
- Web dashboard — Thirteen admin screens — attendance, payroll, employee records, reports — white-labelled per tenant. (coming soon)
- Desktop data entry — A Python desktop tool that turns scanned files and HR spreadsheets into reviewable database records.
Dual Platform Ecosystem
The same product across both surfaces: employees clock in and self-service on iOS & Android, while this site turns HR decision-makers into demo requests.
Screenshots
