Sprylo — Tech & Gadgets Ecommerce HTML Template

Sprylo is a free, production-ready HTML template built for tech and electronics retailers, gadget marketplaces, audio and camera shops, and modern consumer electronics stores. The visual direction is a clean break from the cream-and-serif hospitality look that dominates html.design's recent run — a bright #FFFFFF paper surface with a confident indigo primary at #4F46E5, and a hero built from five multi-color bento product cards (deep-blue gradient, purple gradient, orange, green, near-black) instead of the usual single hero image. Plus Jakarta Sans leads the display, Outfit holds the body, and Roboto Mono carries the coordinates, eyebrows, and tabular numbers.

The home page leads with a utility strip (free-shipping promo + currency / account links), a sticky main header with a central search and account/wishlist/cart icons, and a sticky secondary category nav with an indigo "All Categories" pill. Below the nav, a 5-card bento hero presents a flagship product on a large deep-blue gradient card, a purple gradient sidekick, and three smaller cards (orange, green, black) on the row beneath — each with its own product render positioned bottom-right with a soft drop-shadow. The page then steps through a tabbed trending-products row, two discount banners, a round-tile category grid, a compact "just for you" card row, a wordmark brand strip, an indigo-to-purple newsletter banner, and a five-column footer.

Pages

• index.html — Home with the 5-card bento hero, trending products (tabbed filter), 2-up discount banners, round-tile category grid, compact picks row, brand strip, indigo-purple newsletter, 5-column footer
• shop.html — Catalogue with sticky sidebar filters (category / price-range / brand / rating / availability), sort toolbar, 3-up product grid, numbered pagination
• product.html — Product detail with 5-thumbnail gallery + main image, price with strike-through and save badge, colour swatches, configuration option pills, quantity stepper, add-to-cart / buy-now / wishlist trio, specs table, review distribution with individual reviews, related products row
• cart.html — Cart with line items, quantity stepper, promo-code input, order summary with discount line, trust strip, payment-method icons
• contact.html — Contact with 5 info blocks (circular icons), trade-desk callout, 4-field grid form, short FAQ

Tech

• Static HTML, vanilla CSS, vanilla JS — no framework, no build step, no JS dependencies
• Google Fonts: Plus Jakarta Sans (500/600/700/800 — headlines), Outfit (400/500/600/700 — body), Roboto Mono (400/500 — eyebrows, captions, coordinates)
• Real Unsplash product photography linked directly — replace with your own assets before launch
• Reduced-motion friendly, keyboard accessible, semantic landmarks, skip-link, ARIA on interactive controls
• Responsive at 375 / 768 / 1024 / 1440

Design system

All tokens at the top of assets/css/styles.css:

• Palette — --paper (#FFFFFF) primary surface, --bg (#F8FAFC) section fill, --ink (#0F172A) text, --indigo (#4F46E5) primary CTA + accent, --indigo-soft (#EEF2FF) chip / hover fill, plus a bento family: --card-blue, --card-purple, --card-orange, --card-green, --card-black
• Typography — three-font system (display / body / mono), modular type scale, headlines at 700/800 weight in Plus Jakarta Sans
• Layout — sticky 84px main header + sticky 60px category nav (z-stacked), 1280px container max
• Shadows — three depth tiers plus a signature indigo-offset shadow on primary CTAs
• Motion — single ease (cubic-bezier(0.22, 1, 0.36, 1)), full reduced-motion fallback

Adjust the :root block to recolour or rescale the whole template. Change --indigo to restyle every primary CTA, badge, hover, and accent line across all five pages. Swap the bento --card-* colours to restyle the hero without touching markup.

License

Free for personal and commercial projects. Attribution appreciated but not required. Photography is linked from Unsplash; replace before production deployment.