Skip to content

00 — Direction

Cool paper. Volt blue.
Lime, coral, lilac.

HAUL is a cool, clean catalogue with a pulse: a blue-white paper ground, 1px ink rules instead of boxed cards, a soft editorial serif for headlines, and one electric blue for everything you should press. Lime, coral and lilac give each category and offer its own colour, so the store feels lively without turning into noise.

01— Palette
Volt blue#2B44FF

Primary: CTAs, links, focus, header bar

White on blue 6.2:1

Lime#D2F34A

Deals, highlights, badges

Ink on lime 15.4:1

Coral#FF6F5A

Sale %, urgency, errors, ratings

Coral-ink text 4.8:1

Lilac#C8BCFF

Soft surfaces, category colour

Ink on lilac 11.2:1

Indigo#18215A

Deep brand surfaces, editorial bands

Paper on indigo 13.8:1

Warm neutral ramp n-50 → n-900 · dark mode flips surfaces to true ink

02— Type scale

Aa

DM Sans

Headlines, interface, body & prices

Aa

Geist Mono

SKUs · order IDs · OTPs

  1. mega

    DM Sans 700 · −3.5%

    Haul.

  2. display

    DM Sans 700 · 45 → 104px · −3.5%

    Fresh drops.

  3. h1

    DM Sans 600 · 36 → 68px

    Here today. At your door tomorrow.

  4. h2

    DM Sans 600 · 28 → 44px

    Your cart, but smarter.

  5. h3

    DM Sans 600 · 20 → 28px

    Arc Buds Pro — second gen

  6. body

    DM Sans 400 · 16/1.55

    Thirty-hour battery, a case that clicks shut like it means it, and noise cancelling that actually cancels.

  7. mono

    Geist Mono · SKUs, order IDs, OTPs only

    ₹4,299 · SKU HL-EL-0412 · ORDER #HL-24-118842

  8. label

    DM Sans 600 · uppercase · +9%

    01 — Trending

03— Headline treatments

A · Campaign banner / brand moments

Everything
you're after.

12,480 orders today800+ pincodes next-day4.8 ★ from 92k reviews

B · Type over image — drops / campaigns

New · Pulse Watch S4

Fresh
drops.
Zero detours.

Pulse Watch S4 · 44mm₹12,999 ₹15,499

C · Editorial — section openers

02 — Trending

The things people kept coming back for this week — ranked by repeat buys, not ad spend.

Picked by people who actually use it.

01

Arc Buds Pro

₹6,499

02

Loam Linen Shirt

₹2,190

03

Tidewater Bottle

₹899

04— Marks

Custom geometric wordmark, squared counters, Signal full stop that echoes the tagline.

Monogram: the H's legs are box walls, the crossbar is the fold, the flaps swing open. The dot is the thing you ordered.

05— Home page — wireframe
  1. 01

    Header + category rail

    Ink utility bar (free delivery, track order, sell, INR). Logo, pincode, a dominant search bar with category scope and ⌘K, then sign in / wishlist / cart with live counts. Below it, a 10-icon category rail. On mobile the header scrolls away and a bottom tab bar takes over.

  2. 02

    Promo carousel + side offers

    No headline-and-paragraph hero. Products sell from the first pixel: an 8-col auto-rotating banner (festive edit, audio week, new launch) with product renders and one CTA each, beside a live flash-deal tile with a countdown and a first-order coupon tile.

  3. 03

    Trust strip

    One thin ruled row: next-day delivery, 7-day returns, secure payments, real reviews.

  4. 04

    01 — Flash deals

    A shelf with the countdown in the header, horizontally scrolling deal cards with discount %, stock warnings and a “% claimed” bar.

  5. 05

    02 — Ideas for you

    Four collection panels (Desk reset, Under ₹999, Weekend away, New this week), each a 2×2 of products with prices. It works like the “On everybody's list” rows, but styled in-brand.

  6. 06

    03 — Trending grid

    A dense 5-col product grid: hover add-to-cart, wishlist, rating chip, price with MRP and % off.

  7. 07

    Below the fold

    Shop-the-look hotspots, trending grid, brand marquee, the pinned “How we pick” story, recently viewed, recommendations that explain themselves, the app band, and an editorial footer with newsletter and image credits.

06— Motion & voice
  • fast · 200ms · hovers, toggles, chips
  • base · 360ms · drawers, popovers, cart bump
  • slow · 600ms · page transitions, hero, reveals
  • spring · stiffness 420 / damping 32 · add-to-cart, counters
  • reduced motion · all durations → 0, marquees stop, scroll-scenes become static
  • Fresh drops. Zero detours.
  • Picked by people who actually use it.
  • Here today. At your door tomorrow.
  • Your cart, but smarter.
  • Less scrolling. More having.
  • Good stuff, no small print.
Fresh drops. Zero detours. ✺Picked by people who actually use it. ✺Here today. At your door tomorrow. ✺Your cart, but smarter. ✺Less scrolling. More having. ✺Good stuff, no small print. ✺Fresh drops. Zero detours. ✺Picked by people who actually use it. ✺Here today. At your door tomorrow. ✺Your cart, but smarter. ✺Less scrolling. More having. ✺Good stuff, no small print. ✺