Plain HTML first
Every component is documented and demonstrated in plain HTML. Server templates (JSP, PHP, …) are only an optional layer on top.
SmartHand Design System
Plain HTML, Tailwind CSS and vanilla JavaScript. Drop it into any project — static site, PHP, JSP, anything that serves HTML.
What this is
Section titled “What this is”The SmartHand Design System is a self-contained kit of design tokens, styles, components and blocks. It is not tied to any single application — it is authored here and consumed by any project that can serve HTML and static assets.
Tailwind CSS v4
A full token system — primitives → semantic → action — with automatic light/dark theming.
Vanilla JavaScript
Attribute-driven components (data-*) that initialise themselves. No framework, no build step
to consume.
Two ways to install
A Vanilla path (plain HTML) and a JSP / Gradle path (server-rendered), sharing the exact same design system.
Live previews
Section titled “Live previews”Every example on this site renders inside a real iframe against the actual compiled bundle — the same CSS and JS you ship. What you see is what you get.