Five screens, twenty renders
A communication artefact for design review and client approval. Not production code. Open any screen live, or view the render. Arabic is the primary locale and was built first; English is derived from it. The strip at the top of each live screen is a prototype control, not product UI, and switches list and form states.
Live screens
العربية — الأساس
English — derived
Renders
Full-page captures at 375×812 (2×) and 1280×800 (1×), produced by scripts/render.cjs after its checks pass. Click to open at full size.
Arabic
English
Read before reviewing
- Colour is decided — every value is a role from
COLOUR_SYSTEM.md. Amber appears as a fill on one action per screen and nowhere as text or a meaningful border. - The typeface is decided — Alan Sans (Arabic and Latin), the shipped subsets from
/root/majalmaster, commita4a975d. It replaced IBM Plex, the earlier placeholder, and the Beiruti/Fustat candidates weighed alongside it; seedesign-context/typography/README.mdon master for the F-56 write-up and the measured leading values applied here. - The scale is being proposed — eight type sizes, nine spacing steps, four radii, three tonal elevation steps. Every size in the prototype is one of them;
scripts/check-scale.cjsfails on any other. Details inREADME.md. - Select lists: native is the floor — the control matches the inputs everywhere. The open list matches too on Chrome and Edge 135+ (a CSS-only enhancement); on Safari, Firefox and every phone it is the platform's own picker, kept on purpose for its target size and screen-reader behaviour. The area picker, where type-ahead matters, has a custom combobox. Not a defect; reasoning in
README.md. - No sign-in step is built between the public job page and the app-shell apply flow. It is a deliberate omission, stated in
README.md. - Company names are invented Kuwaiti trade names. No posting is attributed to a real company.