Kattam
A saree storefront that states exactly what it is selling — composition, weave, weight, measurements.
- Design direction
- Modern South Indian · editorial · specification-led
- Typefaces
- Fraunces · Instrument Sans · Anek Tamil
- Pages included
- 14
- Palette
Design decisions
Each of these came out of researching how this trade actually sells, not from a style preference.
- 01
Built on a visible warp/weft hairline grid — no drop shadows, no rounded cards, no gradients anywhere.
- 02
Every product carries a ten-line specification block: composition, weave, zari, weight, measured length and width, blouse piece, care.
- 03
A per-product colour-accuracy note, which answers the single most common complaint about buying textiles online.
- 04
Design codes are promoted to first-class UI — copyable, searchable, and injected into the WhatsApp message, because customers quote codes.
- 05
Checkout and WhatsApp are presented as equal buying rails rather than treating the conversation as a support fallback.
- 06
Product imagery is generated from each design code as a deterministic woven pattern, so the layout is complete and consistent before real photography exists.
Pages included
Every one is a real, working route. Open any of them.
- Home/11 sections, editorial hero
- Catalogue/shop/URL-driven filters, sort, search
- Collection/shop/soft-silk/6 collection routes
- Occasion/occasion/wedding-guest/6 occasion routes
- Product detail/saree/arakku-maroon-soft-silk-temple-border/Gallery, spec table, disclosures
- Cart/cart/
- Checkout/checkout/Dual rail
- Search/search/By code or description
- Provenance story/elampillai/
- Fabric guide/fabric-guide/
- About/about/
- Shipping/help/shipping/
- Returns/help/returns/
- Contact/contact/
How it’s built
The specifics matter because they determine what the site costs to run, how fast it is, and whether you can move it later.
- Stack
- Next.js 16 App Router, React 19, TypeScript, Tailwind CSS v4
- Rendering
- Fully static export — every route is prerendered HTML, independently crawlable
- JavaScript
- No animation or UI library. One IntersectionObserver for reveals; hand-built drawer, gallery and filters
- Accessibility
- Semantic landmarks, focus-trapped dialogs, ARIA tablist gallery, live regions, prefers-reduced-motion honoured
- Hosting
- Deploys to any static host including cPanel shared hosting — no Node runtime required
Suited to
- Saree and textile retailers with a physical shop
- Sellers whose customers ask questions over WhatsApp before buying
- Catalogues where fabric facts matter more than lifestyle photography
- Businesses in a regional cluster with a genuine provenance story
What it doesn’t include
Stated up front rather than discovered later.
- Product photography is not included. The theme ships with generated pattern previews so the design is complete without them, and swaps to real photos by changing one field in the product data.
- Sample catalogue data (24 products) demonstrates the structure. It is not real stock.
- Payment is wired as a handoff to a hosted gateway page. A static export has no server, so card processing happens on the gateway's own page.
Want Kattam for your shop?
Message us on WhatsApp. Tell us what you stock and roughly how many products, and we’ll come back with a timeline and a price.