1. What you have
Every page is a file undersrc/pages/, one per route, and the collections behind them are files undersrc/content/. Everything the browser downloads unchanged lives inpublic/assets/: one stylesheet atpublic/assets/css/styles.css, the self-hosted webfont inpublic/assets/fonts/and every image inpublic/assets/images/. Runnpm installonce, thennpm run dev— edit a file and the page updates without a refresh.
2. Colours, type and spacing
The design's variables are declared once, in the:rootblock at the top ofpublic/assets/css/styles.css. Changing--_colors---primary-colors--primaryrestyles every page that uses it, and the same is true of the type scale, the line heights and the section padding. Search the stylesheet for--_typographyand--_colorsto see the full set — those two groups are where almost every visual change you will want to make belongs.
3. Type
The template sets its type in Inter Tight, served frompublic/assets/fonts/rather than from Google's CDN, so a page makes no third-party request. To change it, replace the.woff2file and the@font-faceblock inpublic/assets/fonts/fonts.css, then point--_typography---font-family--global-fontat the new family name. Headings level 3 and 4 use a system stack and download nothing.
4. Motion
All of the motion is CSS, driven by a small amount of TypeScript insrc/scripts/formix.ts. Scroll reveals are the.revealclasses with adata-reveal-delayin milliseconds; scroll-linked sections carrydata-scruband are animated by@keyframesin the components section of the stylesheet. Every animation is disabled underprefers-reduced-motion, so there is nothing to switch off for accessibility. To remove a reveal, delete itsreveal reveal-*classes from the element.
5. The cart and the forms
The shop is a working demonstration: the basket, the quantity controls, the subtotal and the checkout run onlocalStorage, under the keyformix:cart. Nothing is sent anywhere and no payment is taken — connect your own provider atplaceOrder()insrc/lib/cart.tswhen you are ready. The contact and newsletter forms validate and show the design's own success message; point theiractionat your form service to make them live.
6. Still stuck?
If anything here is unclear, or you would like a hand adapting the template, email us atcontact@kaziehsan.com. We are happy to help.