Teamhouse
A Vector Art template for a small-company HR app.
A landing site for an HR app that covers hiring, onboarding, time off and payroll for companies of ten to two hundred people. Flat vector art throughout: one 3 px ink outline on every drawn shape, flat fills in cobalt, marigold, blush and mint on warm paper, and hard offset shadows instead of blur. The sample brand, Teamhouse, its people, prices and dates are fictional.
- For
- HR SaaS
- Built with
- HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A small office drawn as a cut-away doll's house: the new hire walks in, the empty Monday desk fills with a laptop, badge, mug and plant, the checklist ticks itself, and the roof lifts as you scroll; then a pinned first thirty days where a desk fills day by day.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a small office drawn as a cut-away doll's house (meeting room, kitchen, three desks, stairs) beside the headline. Then five files you can close (struck through), a pinned first thirty days where a desk fills day by day, a working time-off calendar, an org chart with team filters, a payslip that feeds out of a slot with a sample pay run, per-person pricing with a team-size slider and a monthly/yearly switch, questions, and a marigold closing band whose door opens as you scroll. - Sample checklist (
onboarding.html): Rui's first week grouped by who does each task (People, IT, Manager, Buddy, Rui). Ticking lights one more window of a drawn house, moves the progress bar and names the next task. Filters with an empty state, an add-task form with validation, and a reset. Ticks stay in the visitor's own browser (localStorage) and the page works without it. - 404 (
404.html): an empty desk with a blank name card. - Light and dark themes: in dark the page goes to a deep ink ground and the rooms stay lit. The toggle remembers the choice; otherwise the system setting is followed. Phone to wide desktop, visible focus, reduced motion respected.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Sample checklist
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0
- anime.js 4.5.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
