Templates · complete screens
Start from a whole page, not an empty file.
Loading the catalog …
Thumbnails are not pictures. Each one is the actual page loaded in a frame at 1280 px and scaled down with CSS, so spacing, type and colour are the ones you would get from the file. Cards further down the page load their frame only as you approach them.
What a template is, and what it is not
These are starting points that already render, theme and reflow — they are not finished products. Before you ship one:
- Copy it into your project and test it there. The audit notes on each card describe checks made in this repository's own frame, at the widths the catalog lists, not checks in your stack, your content or your fonts.
- Replace the sample content. Every card, row, chart and profile here is filler written to show the components under real text, and real text is usually longer or shorter than the filler.
- Keep the token file with it. Each preview resolves ../../design-tokens/engine.css; move the file without the tokens and it loses its spacing, colour and dark theme.
- Re-run the accessibility pass on your content. Contrast was verified for the palette and copy shipped here; your own colour overrides and images are your job.
- Wire the behaviour you actually need. Navigation, forms and data here are static or demo-level — there is no backend, no router and no auth in these files.
Everything listed is MIT licensed and the repository’s own code, so you can read it all before you take any of it. These templates are HTML/CSS/JS only: the React, Vue and Web Components ports cover 14 individual components, not a whole screen, so no framework version of a template is claimed here.