Getting started

What is inside

Quick start

No build step. Open index.html in any browser, or serve the folder with any web server:

npx serve .
# or
python -m http.server 8080

Folder structure

brand-name-1/
├── index.html            home page (F-Pattern)
├── documentation.html
├── admin/                dashboard, analytics, orders, calendar, kanban ...
├── tools/ components/ helpers/ utilities/   70 pages x 20 examples
├── examples/             41 example pages
├── forms/                full forms
├── effects/  layouts/  icons/
└── assets/
    ├── css/  theme.css, ui.css, template.css, effects.css
    ├── js/
    └── img/   SVG artwork

Change colours, fonts and corners

Everything visual comes from the tokens in assets/css/theme.css. Change a value and every page follows:

:root {
  --wt-primary: #4f46e5;
  --wt-primary-rgb: 79, 70, 229;
  --wt-secondary: #7c3aed;
  --wt-accent: #06b6d4;
  --wt-radius: 0.625rem;
  --wt-font-heading: "Lexend", system-ui, sans-serif;
}

Dark mode: the moon button switches data-ui-theme on the <html> element and remembers the choice. Set data-ui-theme="dark" in the markup to make dark the default.

How the Pure CSS version works

No framework at all: modern CSS (custom properties, cascade layers, :has, container queries) and vanilla JavaScript.

• Pure HTML5 + modern CSS (cascade layers, custom properties, :has(), color-mix()) and a small vanilla script, assets/js/ui.js.
• Icons: Bootstrap Icons font. Fonts: Google Fonts (Lexend, Lexend).

Browser support

Older browsers still show every page; only newer effects (such as @property animations) fall back to static styles.

Credits

• Pure CSS - MIT licence
• Bootstrap Icons - MIT licence
• Google Fonts - SIL Open Font License
• All illustrations in assets/img are original SVG artwork made for this template.