Framo — One Template. Every Website.
Framo is a multipurpose HTML template built on Tailwind CSS 4. It ships 100 complete websites, 1,391 pages, a full shop kit, light and dark modes, and a Style Switcher in the live preview that rebrands any demo in minutes and exports your look as one file. Every page is plain HTML, CSS and JavaScript: open it from the folder, edit it in any editor and publish it on any host. No jQuery, no framework, no lock-in.
Each demo is a finished site, not a single home page: its own home, inner pages, color presets and dark scheme, written for a real kind of business. Pick the demo closest to your project, set your colors and fonts in the Style Switcher, export one theme.css and fill in your content.
Framo is also built for AI. The download includes a Claude skill with the whole documentation and a map of every demo, page and section, so Claude Code, Cursor, Codex and other coding assistants build with the template instead of around it.
Live Preview · Documentation
Highlights
- 100 prebuilt websites across 10 categories, each with its own inner pages (1,150 demo pages in all)
- 1,391 HTML pages: the demos plus 241 template pages — elements, headers, footers, shop, blog, portfolio and company pages
- 21 complete shop demos on one kit of 57 shop pages, from catalogue to order confirmation
- Style Switcher on every demo of the live preview: design your look, then export it as one theme.css
- 502 color presets, each set chosen for its own demo
- Light and dark modes on every template page and 92 demos (the other 8 are dark by design)
- 32 elements and 500+ variants, each element on its own page
- 22 header types, four mega menu layouts and an automatic mobile menu
- 21 page headers and 18 footer types, each switched with one class
- AI-Ready: a Claude skill with the documentation, a map of the template and helper scripts
- Tailwind CSS 4, Vite, Alpine.js and modern JavaScript. No jQuery
- Fully responsive, designed at phone, tablet and desktop sizes
- Fast and accessible: Lighthouse 95 Performance, 95 Accessibility, 100 Best Practices, 92 SEO (desktop, on a simple page)
- Tested before every release with Playwright against approved screenshots, in light and in dark
- 110+ pages of documentation, online and offline, six months of support and free updates
100 Prebuilt Websites
Every demo is a finished site: its own home page, 6 to 19 inner pages, five color presets, four corner styles and, for almost all of them, a dark scheme. All of them are in the package.
Business
Main · Corporate · Holding Group · Engineering · Private Capital · Wealth Management · Accounting Firm · Mortgage Broker · Law Firm · Business Consulting · Corporate Services · Enterprise Transformation · Strategy Firm · Professional Services · Risk & Compliance · Growth Consulting · People & Organisation · Logistics & Freight · Financial Planner · Tax Advisor · Business Loans · Insurance
Consulting
Consulting · Executive Coaching · Life Coach
Agency
AI Agency · SEO Agency · Agency · Growth Agency · Marketing Agency
AI & Tech
Digital Banking · Trading Platform · SaaS Analytics · SaaS Automation · AI Creative Studio · AI Support Agent · Fitness App · Meditation App · Startup · IT Services · Software Development · Cybersecurity · Security Services · Cloud Hosting
Portfolio
Freelancer · Creative Studio · Branding Studio · Architecture Studio · Architecture Firm · Photographer · Product Designer · Creative Developer · Illustrator · Creative Director · Motion Designer
Shop
Electronics Store · Fashion Store · Jewelry Store · Grocery Store · Furniture Store · Beauty Store · Pet Store · Kids Store · Outdoor Store · Sneaker Store · Casual Fashion Store · Activewear Store · Makeup Store · Handmade Store · Auto Parts Store · Modern Furniture Store · Megastore · Tech Accessories Store · Skincare Store · Designer Fashion Store · Fine Jewelry Store
Health & Beauty
Medical Clinic · Beauty Salon · Day Spa · Skin Clinic · Gym & Strength · Yoga Studio · Pilates Studio · Dance Studio
Food & Hospitality
Restaurant · Café & Bakery · Island Resort · City Hotel · Aparthotel
Industry & Trades
Factory & Manufacturing · Solar Installer · Renewable Energy · Construction · Construction & Renovation · Auto Services
Blog & Magazine
Daily News · Lifestyle Magazine · Personal Blog · Travel Blog · Tech & Reviews
Style Switcher and One Theme File
Every demo in the live preview opens with a Style Switcher. Use it to try your brand on any demo, then export the result: the switcher writes one commented theme.css that you drop into the project. The downloaded site has no switcher, just your look in plain CSS variables.
- Colors: five brand colors per preset, or type your own hex; each color shows its text and fill contrast as you go
- Typography: 34 Google Fonts for body, heading, accent and display text, with text size, heading weight and tracking
- Corners: square, subtle, default or round
- Buttons: as designed, square, rounded or pill, with case, weight and letter spacing
- Layout: container width from 1120 to 1600 px and section spacing
- Mode: light or dark, and in theme.css light, dark or the visitor’s system setting
- Export: download the file, copy its CSS, or copy a link that opens the same look for your client
- No build step: replace one file and every page follows; your own styles stay in custom.css
Complete Shop Kit
21 shop demos, each a whole store from the catalogue to the order confirmation, built on one kit of 57 shop pages. Shop styles and scripts load only on shop pages.
- 18 shop layouts: 2, 3, 4 and 5 columns, sidebar, right sidebar, hidden sidebar, filter panel, filter dropdowns, list, banner, split banner, photo panel, collections, full width, masonry, metro and metro sidebar
- 15 product card styles: classic, bordered grid, soft tiles, quick add, variant thumbs, price swap, image scrub, deal countdown, spec reveal, info overlay, dark overlay, gradient fade, center icons, center panel and cursor tag
- 12 single product pages: classic gallery, mosaic, stacked, wide gallery, wide grid, centered carousel, split screen, sidebar, accordion, bundle, extended story and studio backdrop
- Purchase flow: mini cart in the header, cart, empty cart, checkout and order complete
- Customer pages: sign in and register, my account, wishlist and order tracking
- Building blocks: category headers, 12 filter blocks, quick view, reviews and “bought together”
Blog and Portfolio
- 10 blog layouts: card grid, carousel, classic sidebar, editorial, horizontal cards, horizontal scroll, image overlay, masonry, mosaic and text cards
- 10 article styles: full cover, floating title, gallery, step-by-step guide, photo story, podcast, sidebar, split header, typographic and video
- 12 portfolio layouts: alternate, carousel, color changer, grid, justified, masonry, metro, parallax, photo scroll, slideshow, stacked and sticky scroll, with filters
- 7 single projects: carousel, case study, editorial, gallery, sidebar, stacked and video
Company and Utility Pages
- About (4): company profile, people and culture, our story, the studio
- Services (6): services, capabilities, studio services, packages and pricing, how we work, product showcase
- Contact (10): book a call, project brief, departments, direct and minimal, contact hub, offices and map, map hero, simple form, split screen, dark studio
- Pricing (3), Team (2) and Clients (3)
- FAQ, How We Work, Glossary, 404, Coming Soon, Maintenance, Sign In and Register
Headers, Menus, Page Headers and Footers
- 22 header types on one markup: default, capsule, centered logo, contact info, dark glass, floating, floating contained, glass, ink glass, info panel, inline menu, overlay menu, pill menu, navigation rail, reveal on scroll up, shop, side drawer, sidebar, split menu, stacked, transparent and utility bar
- Header add-ons: announcement bar, ticker, search and full-screen search, info panel, language menu and cart
- Mega menus in four layouts (columns, media rail, tabbed and services) plus multi-level dropdowns, opened with hover intent and from the keyboard
- Mobile menu built automatically from the desktop menu, with nested accordions, the current page marked and Esc to close
- 21 page headers: minimal, title and breadcrumb, slim, brand gradient, dark dots, animated gradient, animated waves, solid, six image styles (centered, title and copy, full-screen, parallax, rounded, hero reel), split, angled and wave edges, article, help center search and particles
- 18 footers: default, columns, contact, minimal, floating bar, newsletter, newsletter split, CTA bar, CTA banner, CTA image, big headline, marquee, watermark, waves, shop contact strip, store cards, dark newsletter and magazine
32 Elements, 500+ Variants
Every element page shows its variants side by side, ready to copy into any section.
Accordions · Alerts · Badges · Before / After · Buttons · Call to Action · Cards · Carousels · Countdowns · Counters · Dividers · Forms · Icon Boxes · Image Frames · Image Gallery · Lightboxes & Modals · Lists · Maps · Marquee · Medias · Parallax · Posts & Articles · Pricing Tables · Progress Bars · Reveal · Sections · Sliding Boxes · Social · Tabs · Testimonials · Tooltips · Typography
Effects and Motion
- 58 scroll entrances: fade, blur, clip, unveil, zoom, slide, flip, rotate, bounce, iris and rise-mask, with delays and group stagger
- Text effects: letter-by-letter reveal, word rotator, scroll highlight and hand-drawn text marks
- Image effects: reveals, zoom and blur, Ken Burns, orbits and hover effects
- Cursors: follower, glass lens, drag, magnetic, spotlight cards, label, image reveal and image trail
- Scrolling: parallax, stacked cards, horizontal scroll, sticky sections, scroll progress and progressive blur, with Lenis smooth scrolling
- Marquees, 8 preloaders, particle, aurora and wave backgrounds, and a before / after slider
- Every effect respects the visitor’s reduced-motion setting, and GSAP loads only on the pages that use it
Components
- Forms: live validation, multi-step wizard, password strength, choice chips, toggles, range, drop zone and tags, with a guide for connecting them to your own mail script or form service
- Maps with Leaflet and OpenStreetMap in light, voyager or dark, with markers, popups and a store locator
- Lightboxes for images, galleries, videos and pages, and native dialog modals
- Sliders and carousels with Swiper, with thumbnails, fractions and progress
- Media: click-to-play YouTube and Vimeo, video backgrounds and a podcast player with chapters
- Tabs, accordions, tooltips, popovers, countdowns, counters, progress bars, list filters and copy to clipboard
- 1,530 Phosphor icons in six weights, self-hosted, with a searchable icon page
Built for AI
The download includes an AI kit for Claude Code, claude.ai, Cursor, Codex and other coding assistants: a Claude skill, CLAUDE.md and AGENTS.md files, the whole documentation as Markdown and a one-line index of every section of every page.
- Suggests the demo that fits the business and starts the site from it
- Reuses the template’s own sections instead of writing new ones
- Sets the brand in the theme file and leaves the template’s code untouched
- Copies the header and footer across pages, then checks links, assets, markup, titles and forms before launch
Under the Hood
- Tailwind CSS 4.3: utility classes in the markup, the whole theme as CSS variables
- Vite 6.4: a dev server that reloads on save, one command that builds every page
- Alpine.js 3.15: tabs, menus and modals written in the HTML, without a framework
- GSAP 3.15, Swiper 11.2, Lenis 1.3, GLightbox 3.3, Leaflet 1.9 and Phosphor Icons 2.1
- HTML partials for shared blocks, one theme.css for the look and one custom.css for your own styles
- Heavy libraries and the shop code load only on the pages that need them
- Works in current Chrome, Edge, Firefox and Safari, including iOS
Quality
- Lighthouse (desktop, on a simple page): 95 Performance, 95 Accessibility, 100 Best Practices, 92 SEO
- Every page compared with its approved screenshot by Playwright, in light and in dark, before each release
- Keyboard-friendly menus, tabs and dialogs, focus rings for keyboard users, reduced motion respected and content that works without JavaScript
- No analytics, tracking or cookies; forms send nothing until you connect them; a guide for self-hosting the fonts
- Clean, readable and commented code
What You Get in the Download
- Ready package: all 1,391 pages built, with relative links, opening straight from the folder; edit them in any editor
- Developer package: the sources, partials and design tokens with a Vite dev server and build (Node 22+ and pnpm)
- Documentation: the full documentation site, offline
- AI kit: the Claude skill, CLAUDE.md, AGENTS.md and a skill file for claude.ai
Documentation and Support
More than 110 documentation pages, online and in the download, cover getting started, customization, layout, demos, the developer package, every element and feature, JavaScript, the shop, accessibility, performance, privacy and browser support, with search.
Six months of support are included with your purchase, and updates, including new demos, are free.
Images
The photos and videos in the live preview are for demonstration only and are not included in the download. They are replaced by placeholder images of the same size, so every layout is ready for your own pictures.
Changelog
Version 1.0.0 — October 29, 2026 · Initial release
Added
- 100 demos, each a complete website with its own theme file.
- 241 template pages: about, services, pricing, blog, portfolio, contact, shop and more.
- 22 header styles, 18 footer styles and 21 page header styles.
- 32 element pages showing every element and its variants.
- A light and a dark color scheme for every page.
- One theme file for colors, fonts, corners and buttons, and the Style Switcher in the online preview to create it.
- The Ready package (built HTML) and the Developer package (source, partials, Tailwind CSS and a development server).
- A readable main.js with a comment on every feature; the shop (shop.js, shop.css) and the template’s own showcase (showcase.js, showcase.css) in files of their own, loaded only on the pages that use them.
- This documentation, online and inside the download.