Better experiences. Fewer things to rebuild.
Components, patterns and tools for the details that make a product feel considered. Bring your idea. Keep your attention on what makes it yours.
Built with Astro, Teasim and TeaCSS. Made for people who design and build.
- Render markup, not opinions.
- Every element ships behaviour and semantics. The stylesheet stays yours.
- Keep the data separate.
- Navigation, validation, and routes are computed by a package that renders nothing.
- Work without JavaScript first.
- The open state belongs to the browser. A runtime binds on top when there is one.
SMALL PARTS. A COHERENT WHOLE.
From an element to an experience.
Three layers, each with a clear responsibility. Use the parts that serve your product, and compose them around your content.
Elements with the details considered.
Start with the small things people use every day: buttons, menus, dialogs and theme controls. Keep native semantics and keyboard behavior close to the element.
@teasim/astraControls · Navigation · FeedbackParts that become a whole page.
Compose elements into introductions, feature grids, FAQs and site chrome. Spend your attention on the story and hierarchy of the page.
@teasim/asterPage sections · Layouts · Site chromeA structure behind the surface.
Give content a schema, derive navigation and connect it to the site. Keep the information model independent of how the interface looks.
@teasim/astroContent · Navigation · Site integrationA PRACTICAL WAY TO BUILD
Intent. Composition. Care.
A reusable part gives you a starting point. The work is bringing those parts together into something people can understand and use.
- 01
Start with the experience.
Define who the page is for, what they need to understand and the action they should be able to take.
- 02
Compose the right parts.
Choose elements and page patterns, connect the content, then bring your own typography, color and visual rhythm.
- 03
Check the details in use.
Walk through the real page. Test small screens, keyboard navigation, themes and the states between the happy paths.
THE PAGE IS THE EXAMPLE
You are already using the parts.
The navigation, theme switcher, section layouts and answers below are composed from the same toolkit. This website is a working example of the approach.
Your content.
Your visual language.
Keep the information model, page arrangement and interactive behavior separate. Change the story without rebuilding every control.
Try the questions belowContent & structurePage metadata and the site integration
astroPage compositionHero, feature grid, footer and FAQ
asterInterface behaviorMenus, buttons and theme controls
astraConnected by the site. Styled with TeaCSS.
A FEW USEFUL ANSWERS
Before you start composing.
What is Hmkit?
Hmkit is a design engineering project focused on components, patterns and tools for better product experiences. This site demonstrates that approach with Astro, Teasim and TeaCSS.
Who is it for?
Design engineers and product teams who care about both the experience people use and the code they maintain.
How does Hmkit relate to Teasim?
This website uses Teasim elements, page-level blocks and content infrastructure. Hmkit is the finished site and product perspective; the reusable packages are published under @teasim.
Do I have to use the same visual style?
The page is styled through the application’s TeaCSS setup. Typography, color and composition are site decisions, so this restrained grid is one possible expression of the parts.
Is there a native component library available?
Web and native are part of the broader design direction. The implementation shown here is an Astro website; this page does not announce a native library release.
How do I get started?
Tell us about the experience you are building and the parts you keep rebuilding. Email us to discuss fit, package access and current availability.
MAKE ROOM FOR THE WORK THAT MATTERS
What are you tired of rebuilding?
Tell us about the experience you are making, the details that slow you down, and what a better starting point would look like.
A conversation about your project, fit and current availability.