What is noon?

noon in brief

The noon style is the interface language of the Gulf's home-grown online marketplace. It is recognisable at once: a white page, a bright yellow lozenge in the corner holding a lowercase wordmark, and slate-navy type set on top of the yellow in place of black. Yellow is a small, deliberate object, closer to a sticker on a parcel than to a coloured background.

The second defining feature is that the system is built to run in Arabic and English at once. Gutters, icons, prices and carousels all flip for right-to-left reading. The country switcher sits in the header beside the address picker as a control that people really use, and every product card shows a price with its currency code and a delivery window, because in Dubai and Riyadh the question of when something arrives is part of its price.

Taken together, the style describes a retail interface that is practical, local and bilingual by design. It is not a Western template with an Arabic translation added afterwards. The layout was imagined as mirrored from the beginning, and that single decision shapes the grid, the spacing, the alignment of numbers and even the direction in which a carousel moves.

See the noon design system

Where does noon come from?

noon launched in 2017 from Dubai in the United Arab Emirates, with storefronts in Saudi Arabia and Egypt as well. The source dates the story from 2016, when the platform was announced, to 2017, when it launched. Its founder is named as Mohamed Alabbar, chairman of the property developer Emaar, and the Public Investment Fund appears among the key figures, reflecting the scale of the ambition. The comparison implied by the source is the American global marketplace: a regional competitor designed to understand the Gulf customer better than a foreign platform could.

That regional purpose explains the visual choices. A Gulf shopper moves between countries, currencies and two scripts, so the header carries a country switcher and an address picker, and prices always show a currency code. The delivery window is displayed next to price because speed of arrival is a purchase factor. Later products added to the platform, noon Food, noon Minutes and noon Daily between 2021 and 2023, extended the same thinking to fast grocery and meal delivery, and the interface language had to hold up for quick, repeat purchases as well as considered ones.

The source names three traditions that the style belongs to. The first is Gulf super-app commerce, where a single brand tries to cover shopping, food and everyday delivery in one habit. The second is bidirectional Arabic and Latin interface design, the craft of making two scripts and two reading directions share one layout without one looking secondary. The third is quick-commerce delivery UI, which puts time promises and clear stock and status information at the centre of each card.

Faraz Khalid and the Indian Type Foundry are named among the key figures besides Alabbar and the Public Investment Fund. The foundry is a type design house, and its inclusion reflects how important lettering is to the style: a lowercase wordmark and a typeface that handles Arabic and Latin together are the visual basis of the brand. The origin therefore combines business backing, regional need and typographic craft, and the interface carries traces of all three.

What defines the noon look?

See the noon design system

Who shaped noon?

How do you use noon today?

For slides, the noon style gives a clear way to open a presentation: a white cover, a small yellow lozenge as the only colour moment, and a navy title below it. Content slides can use the sticker idea, placing one yellow chip on a key figure or call-out while the rest stays white. For data slides, display value and currency or unit together, in the way a product card pairs price with currency code.

For web and app interfaces, the style fits localised e-commerce, quick delivery, marketplaces and any product with prices and arrival times. Build components with logical start and end rules so that mirroring costs nothing. Put the country and address controls in the header, show the delivery window beside the price, and use the lozenge for tags and secondary buttons. A pricing page for a service can follow the same card pattern, with currency stated explicitly.

For editorial and marketing pages, use yellow only in small items, such as a badge on a campaign banner, and let photography and white space do the rest. Seasonal sale pages work best when the yellow chip highlights the offer and the slate-navy type states the terms plainly. Bilingual campaign pages should be designed in both directions at the same time rather than translated at the end.

The style is also a good model for multilingual consumer products beyond retail: food ordering, travel, ticketing or banking in regions where two scripts coexist. What it teaches is that bilingual quality is a layout question, not a translation question.

The most common mistake is to flood the page with yellow, which turns a sticker into a wash, reduces contrast for the navy type and makes the product images fight the background. A second mistake is building in left and right instead of start and end, so the Arabic version needs a pile of overrides. Finally, avoid dropping the currency code or the delivery window to save space; these two facts are what shoppers in this market expect to see first.

See the noon design system

noon — FAQ