Introduce Business
Tells your company story in alternating image-and-text feature rows, backed by a client logo wall and stats that scroll-reveal into view.
View template
Template package · v2.0
Six structurally distinct layouts. One quality system.
Sixfold isn't six reskins of the same page. It's six genuinely different page layouts — feature rows, an editorial board, a booking wizard, a fee matrix, a bento mosaic, and a masonry gallery — each with its own signature interaction, all sharing one accessible, mobile-first design system. Pick a template, drop in your copy, ship. No build step, no framework, no bloat.
Six layouts, ready to make your own
Each template below is built on a different page skeleton with its own signature interaction — yet they all share the same components, tokens, and accessibility baseline.
F&B Menu
A two-column, magazine-style menu broadsheet with dietary filter chips that instantly narrow the page to just the dishes a guest can eat.
View templateBook Appointment
A guided, multi-step booking wizard with a live summary panel that updates as clients choose a service, date, and time — fully keyboard-accessible.
View templateService & Fees
A transparent, itemized fee breakdown paired with a full plan-comparison matrix and a monthly/annual toggle that re-prices it live.
View templatePromotion
An asymmetric bento mosaic of mixed-size deal tiles, topped with a live countdown and a scrolling promo ticker that turns browsers into buyers.
View templatePortfolio / Gallery
A true masonry gallery in a refined dark theme, with category filters and an accessible lightbox — built for studios and creatives.
View template
Distinct layouts, one system
Different skeletons. Shared quality.
Each template is built on its own layout primitives — feature rows, an editorial board, a stepper,
a fee list and matrix, a bento grid, masonry — so no two pages share a skeleton. But they all draw
from a single shared/styles.css that defines every color, font, space, and component as
a design token, and each page overrides just three properties — --accent,
--accent-soft, and --accent-contrast — to set its skin.
That means genuinely varied layouts with one consistent quality bar: the same accessibility, the same responsive behavior, the same tiny footprint — and edits that take seconds, not a refactor.
What's in the box
- Six distinct layout archetypes, each with its own signature interaction
- Reusable layout primitives: feature rows, board, bento, matrix, fee list, stepper, masonry
- Mobile-first, with breakpoints at 480 / 768 / 1024px and no horizontal scroll at 360px
- Accessible focus states, 44px-minimum tap targets, and reduced-motion support
- No framework, no build step, no external dependencies