Express
Storefront design system
Porcelain & graphite
One palette for every shop. Continuous corners, springs that start from where things are, text set in Cairo and figures in Plex Mono. Switch language, numerals and theme here — every specimen below follows.
Colour
Porcelain neutrals and a graphite accent, the same for every shop. Colour comes from product photos and status.
- page
- surface
- sunk
- well
- text
- text-2
- text-3
- rule
- brand
- on-brand
- ink
- on-ink
- success
- success-wash
- warning
- warning-wash
- danger
- danger-wash
- info
- info-wash
- line
- line-strong
- star
- focus
Type
Cairo for words in both scripts — tracking tightens as text grows, never in Arabic. Plex Mono for figures.
Everything, delivered
Today's deals
Picked for you
Delivery and returns
Genuine products, delivered across Egypt — pay cash on delivery.
Body text sits at 16px with open leading; Arabic gets a little more room between lines than Latin.
Secondary text for details and hints.
Kicker label
1,234,567.89 · NIL-48213 · ٠١٢٣٤٥٦٧٨٩
Shape & motion
Continuous corners (squircles), no pills except true circles. Springs, not fixed curves: press any tile.
6
8
12
16
20
26
◯
- --spring-defaultdamping 1 · response .35s · 510ms
- --spring-snappydamping 1 · response .25s · 370ms
- --spring-gentledamping 1 · response .5s · 730ms
- --spring-bouncydamping .8 · response .3s · 400ms
Segmented & chips
Links, not toggles: each option is a page, the current one raised. 32px segments, 36px chips — both 44px to a finger.
Chips
Link chips are ways forward (aisles, searches); filter chips are active filters, each a link that removes it.
Badges & status
Badges sit on photos, so they are solid. Status labels: icon + word on the tone's wash, 6px corners.
Merchandising
−20%ExpressNewBestsellerOnly 3 leftOut of stock
Order status
ReceivedPreparingOn the wayDeliveredDelayedCancelled
Price & rating
Money in ink; a sale is red with what it was beside it. Stars fill to the tenth, from the reading start.
Sizes
EGP 1,299.00EGP 1,299.00EGP 1,299.00EGP 64,999.00
Sale, from, refund
EGP 999.00, was EGP 1,399.00, 29% offEGP 64,999.00, was EGP 71,999.00, 10% offFrom EGP 74.99−EGP 50.00
Ratings
Pictures
The ratio is reserved before a byte arrives; a blurred placeholder holds the place. Packshots rest on the well — with a rim light in dark mode.
Product cards
Real catalogue items. Fixed rows keep a grid aligned and let the skeleton match exactly; a sold-out card is veiled.
Out of stock
ExpressBestseller
Express
Express
Rail (scroll-snap, edges fade, arrows on desktop)
Express
Express
ExpressBestseller
Out of stock
Express
Drawers & toasts
Springs you can grab: drawers follow the finger, velocity decides, and they leave the way they came. Toasts are the page turned over.
Drawer & sheet
Toasts
Quantity
Notices
An inline message in a tone: icon, title, a line, actions. Danger and warning interrupt screen readers; the rest wait their turn.
Prices include 14% VAT
Delivery is added at checkout.
Added to your cart
Galaxy S25 Ultra, 256 GB.
Only 3 left
Order soon to get it today.
We couldn't add that
Your cart already has the most you can order.
Delivery times are estimates
The courier calls before arriving.
New: express delivery in Giza
Within two hours, every day.
Title only, no line
Revealed by the browser (slots)
Forms
52px fields with 16px text, labels above, hints and errors below — and radio cards for choices that need a line of context.
We'll text you when the courier is on the way
Enter a full email address, like name@example.com
States
Every state says what happened and offers a way on: empty, failed, offline, not found, not built yet. Errors are worded in plain Modern Standard Arabic.
Empty · did you mean
No results for “galaxi”
Check the spelling, or try fewer words.
Did you mean galaxy?
Empty · cart
Your cart is empty
Today's deals are a good place to start.
Empty · no results
No results for “galaxy s99”
Check the spelling, or try fewer words.
Error
Offline
You're offline
Check your connection. We'll reconnect by ourselves.
Not found
Error 404
We couldn't find that page
The link may be old or mistyped.
Coming soon · payment
Not in this preview yet
Card and wallet payments
Pay by card, Apple Pay or a mobile wallet. In this preview every order is cash on delivery.
Coming soon · account
Not in this preview yet
Your account
Saved addresses, past orders and one-tap reorder, on every device.
A section fails
A whole page fails
Choices
Facets filter a listing; choice chips pick one value (variant links, radios, colour swatches); choice lists are rows with a price.
Lines & totals
A product line (picture, name, detail, price, controls), label–amount totals, and key–value blocks with an Edit action.
Totals: saving, free, total; a hidden row
- Subtotal
- EGP 12,397.00
- Savings
- −EGP 1,500.00
- Delivery
- EGP 45.00
- Delivery
- Free
- Total
- EGP 10,897.00
VAT included
Updating (aria-busy dims it)
- Subtotal
- EGP 12,397.00
- Savings
- −EGP 1,500.00
- Delivery
- EGP 45.00
- Delivery
- Free
- Total
- EGP 10,897.00
VAT included
Item rows · regular: controls on their own row
- OPPO A57 (Renewed) — Gold
Gold · 64 GB
EGP 3,998.00 - EGP 1,299,999.00
- No picture, no linkEGP 100.00
Item rows · compact: one row (checkout, order)
- EGP 3,998.00
- Samsung Galaxy S25 Ultra 5G, 12 GB RAM, 512 GB, Titanium Silverblue, with the S Pen
Titanium · 512 GB
EGP 1,299,999.00
Key–value list, with Edit
- Payment
- Cash on delivery
Steps & progress
Numbered steps on a filling track (finished steps link back), the order timeline, and the state of a region that polls.
First step
A middle step
Last step
Timeline, live (core/timeline.ts)
- Placed, done14:02
- Confirmed, done14:05
- Preparing, in progressNow
- On the way, not yet
- Delivered, not yet
Live status: live, retrying, offline, idle
Live updates
Couldn't update.
You're offline. Updates resume when you're back.
This order is complete.
Driven by core/live-status.ts
Live updates
Network
What a visitor sees when the connection drops, a page is slow or a navigation fails. The banner, the alert and the progress bar are page-wide pieces of the shell, driven by the router.
- Offline: a calm banner at the top with Try again; back online, the page refreshes in place.
- A navigation fails (offline, too slow, server error): an alert says why and offers Retry; the page you were on stays.
- A slow navigation: a thin progress bar, shown only past 150 ms.
Offline banner
A navigation fails
A slow navigation
Every read goes through core/net.ts: one 10 s timeout, one retry after a network failure or a 5xx (never after a 4xx), and no try is spent while offline.
Skeletons
Solid blocks that pulse, built from the boxes of what replaces them. Each pair is loading beside loaded: nothing moves when one becomes the other.
Heading and text
Loading
Loaded
Galaxy S25
A 6.9-inch screen that stays readable in the midday sun, a titanium frame, the S Pen tucked inside, and a 200 MP camera that keeps detail at night. Seven years of updates, and delivery in Cairo within hours.
Picture
Loading
Loaded
Fields
Loading
Loaded
For the courier
Rail
Loading
Loaded
Express
Out of stock
ExpressBestseller
Icons
Lucide geometry, one path per glyph so a patched page swaps an attribute, not a tree. Arrows and chevrons mirror in Arabic.
- apple
- arrow-down
- arrow-left
- arrow-right
- arrow-up-down
- arrow-up-right
- baby
- badge-check
- badge-percent
- banknote
- battery-charging
- bean
- beef
- bike
- book-open
- brush
- cable
- calendar-clock
- camera
- candy
- carrot
- check
- check-circle-2
- cherry
- chevron-down
- chevron-left
- chevron-right
- chevron-up
- circle-alert
- circle-check
- circle-x
- citrus
- clock
- cloud-off
- coffee
- construction
- cookie
- cooking-pot
- copy
- credit-card
- croissant
- cup-soda
- drumstick
- dumbbell
- egg
- external-link
- eye
- fish
- flame
- footprints
- gamepad-2
- gem
- gift
- glasses
- globe
- grape
- headphones
- heart
- heart-pulse
- hourglass
- house
- ice-cream-cone
- image
- info
- keyboard
- lamp
- languages
- laptop
- layout-grid
- leaf
- list
- list-filter
- loader-circle
- map-pin
- menu
- milk
- minus
- monitor
- moon
- mouse
- nut
- package
- package-check
- paw-print
- percent
- phone
- pill
- plus
- receipt
- refresh-cw
- refrigerator
- rotate-ccw
- salad
- search
- server-crash
- share-2
- shield-check
- shirt
- shopping-bag
- shopping-basket
- shopping-cart
- sliders-horizontal
- smartphone
- sofa
- soup
- sparkles
- speaker
- spray-can
- star
- store
- sun
- sun-snow
- tablet
- tag
- timer
- trash-2
- triangle-alert
- truck
- tv
- user
- wallet
- washing-machine
- watch
- wheat
- wifi
- wifi-off
- x
- zap
- zoom-in