← Back to the app

Nukkad design system

Everything, a corner away

One idea holds this together: edge-of-glass teal. Float glass is clear face-on but glows green-teal at its cut edge, so the brand colour is the material's own edge colour. It also lands in the one hue band no Indian quick-commerce app occupies — Zepto owns violet, Blinkit yellow, Instamart orange, Zomato red, BigBasket lime.

The mark

A lowercase n drawn as one road that turns a corner. The right leg stops short and a dot completes it: the destination, just around the corner. The gap between them is half a stroke wide, and that gap is the last minute of the delivery. Two shapes, one colour — which is why it survives at 16px and under Android's monochrome theming.

Nukkad mark

Colour

Peacock leads. Genda means exactly one thing everywhere in the app — money saved — and kulhad belongs to Tapri. Light mode is warm paper, never pure white; dark mode is teal-cast ink, never pure black.

Type

Bricolage Grotesque carries numbers and headlines, IBM Plex Sans carries words, and Plex Devanagari carries Hindi so a bilingual line does not look like a fallback. Deliberately not Inter, Poppins or Manrope — the default stack of generated interfaces.

Everything, a corner awayLarge title · Bricolage 700
Arriving in 12 minutesTitle 2 · 600
Amul Taaza Toned MilkHeadline · Plex 600
One fee. Free over ₹99. Nothing added later.Body · Plex 400
नुक्कड़ · सब कुछ, बस एक नुक्कड़ दूरAnek Devanagari 700
1,24,999 27₹32 10–14 Prices · tabular, Indian grouping

Liquid Glass

Glass belongs to the floating control layer and nowhere else. Putting it on product cards is the fastest way to look like generic glassmorphism, so the content layer here stays opaque and the chrome does the refracting. Chromium gets a real SVG displacement filter inside backdrop-filter; Safari and Firefox get blur and saturation; Reduce Transparency gets an opaque surface.

Regular · carries text Clear · icons only Brand tint · the one action Regular, 20px radius
Yes — dock, cart bar, ETA pill, search field, sheet headers, toasts.
Never — product cards, the bill, forms, list rows, long text.
Never — glass stacked on glass, or more than four surfaces at once.
Always — a readable fallback under Reduce Transparency.

Components

Every control here is content-layer, so nothing in this section is glass.

Buttons

Steppers, badges, marks

2 12% OFF New Veg Non-veg

The bill

Item total₹412
Savings on MRP− ₹49
Delivery₹30FREE
To pay₹363

Progress and chips

Selected Default Outline

Icons

The marks that carry meaning are drawn for Nukkad: a shopfront with a half-rolled shutter, a jaali screen with one cell lit, a cloth jhola, a door nameplate, and a bolt whose lower half turns ninety degrees — the corner.

Product art

Eighty-six packs, all generated from source. Each is a silhouette archetype chosen by shelf (carton, sack, tin, tube, blister), a hue keyed to the brand, and a contact shadow. Open packshot databases do cover Indian SKUs, but a mix of studio shots and phone photos taken on kitchen floors reads as scraped — one illustrated system reads as a shop with a shelf standard.