Mini apps
Design kit
Styles, fonts, icons, animation, confetti and sounds that every mini app can load for free — built from open source and put into your page when the app is built.
Design kit
Every mini app can use the design kit: a stylesheet of tokens and components, six fonts, more than 2,000 icons, an animation library, and confetti and sound effects. You load it from index.html by paths that start with th-kit/. The files are not in your folder: when your app is built, the platform puts them into the page, so they work in the sealed frame like your own files do.
<link rel="stylesheet" href="th-kit/ui.css">
<link rel="stylesheet" href="th-kit/fonts/bricolage-grotesque.css">
<script src="th-kit/motion.js"></script>
<script src="th-kit/fx.js"></script>
The kit is a floor to build on, not a look to wear. Set --accent to your app's colour, pick a font, and give the app one element people will remember.
Styles: th-kit/ui.css
Tokens. Set them on :root to make the kit yours.
| Token | What it is |
|---|---|
--accent, --on-accent | Your colour, and the text colour on it |
--bg, --surface, --surface-2, --surface-3 | Page and card backgrounds |
--text, --text-2, --text-3, --border, --border-strong | Text and lines |
--ok, --warn, --bad | Status colours |
--font-body, --font-display, --font-mono | Fonts |
--text-xs … --text-4xl | Type sizes; the large ones scale with the screen |
--space-1 … --space-8, --radius | Spacing and corner radius |
--shadow-1 … --shadow-5 | Layered shadows |
--ease-out, --ease-in-out, --ease-drawer, --ease-spring | Motion curves |
--dur-press, --dur-fast, --dur, --dur-slow | Motion durations, 120 ms to 320 ms |
--gray-1 … --gray-12, --violet-9, --grass-11, … | Colour scales, in light and dark |
Light and dark follow the device. Put data-theme="dark" or data-theme="light" on <html> to fix one, and data-neutral="slate", "sand" or "mauve" for warmer or cooler grays.
Components.
| Class | What it is |
|---|---|
th-btn + th-btn-primary, -soft, -ghost, -outline, -sm, -lg, -icon, -block | Buttons; add is-loading while waiting |
th-card, th-card-tap | A card, and one you can tap |
th-input, th-textarea, th-select, th-label | Form fields |
th-chip (is-on), th-badge, th-avatar | Small parts |
th-tabs | Segmented tabs: buttons with aria-selected="true" on the chosen one |
th-list | Rows divided by lines |
th-progress | A bar: style="--value: 60%" with a <span> inside |
th-modal, th-sheet | On a <dialog> opened with showModal() |
th-toast | Add is-shown to show it |
th-spinner, th-skeleton, th-dots | Loading states |
th-empty | An empty or first-time screen |
th-container, th-stack, th-row, th-grid | Layout |
Effects. Use one or two, where they mean something.
| Class | What it does |
|---|---|
th-enter | Fades and rises in; style="--i: 1", 2, 3 … staggers siblings |
th-pop, th-shake, th-float, th-pulse | A pop in, a shake, a gentle float, a pulsing ring |
th-glow, th-glass, th-gradient-text | A coloured glow, frosted glass, gradient text |
th-shine, th-beam | A light sweeping across, a beam running round the border |
th-aurora, th-grain | A slow wash of colour, film grain |
th-marquee | A row that scrolls by itself |
Everything respects reduce motion: movement becomes a gentle fade, never nothing at all.
Fonts: th-kit/fonts/NAME.css
| File | Font family | Good for |
|---|---|---|
inter.css | Inter | Text in any app |
bricolage-grotesque.css | Bricolage Grotesque | Bold, friendly titles |
fraunces.css | Fraunces | Warm, editorial titles |
space-grotesk.css | Space Grotesk | Technical, modern titles |
nunito.css | Nunito | Soft and rounded: children, casual games |
jetbrains-mono.css | JetBrains Mono | Code, scores, numbers |
They carry Latin letters only. Keep the system fonts after them so other scripts still show:
:root { --font-display: "Fraunces", var(--font-body); }
Icons
Write an <i> with the name of any Lucide icon. It becomes the icon itself, inline, in the text colour:
<button class="th-btn th-btn-primary"><i data-icon="sparkles"></i> Make it</button>
Its classes and aria-label carry over. For icons you create in JavaScript, list them on icons.js, then call icon(name):
<script src="th-kit/icons.js?heart,star,x"></script>
<script>
button.innerHTML = icon("heart") + " Like";
</script>
If you use a name that does not exist, the build stops and suggests the nearest names.
Animation: th-kit/motion.js
window.anime is anime.js v4: animate, createTimeline, createTimer, stagger, spring, eases, waapi, svg and utils.
anime.animate(".card", {
translateY: [12, 0],
opacity: [0, 1],
delay: anime.stagger(40),
duration: 400,
ease: "outExpo",
});
window.autoAnimate(list) makes a list animate its own items as they are added, removed and moved (AutoAnimate).
Confetti, sounds and small moments: th-kit/fx.js
| Call | What it does |
|---|---|
fx.confetti(options), fx.celebrate(), fx.burst(element) | Confetti: a burst, a celebration, or a little burst from an element |
fx.sound(name) | tap, pop, select, success, fail, coin, whoosh, magic, levelUp, tick — synthesised, no sound files |
fx.mute(true) | Turns sounds off; give people a switch |
fx.pop(el), fx.shake(el), fx.flash(el), fx.enter(el) | Quick reactions to what someone did |
fx.count(el, 1280) | Counts a number up |
fx.type(el, text) | Writes text a letter at a time |
fx.haptic() | A short vibration, where the phone allows it |
Good taste, in short
- Start from what the app is about. A kitchen timer, a kids' quiz and a tool for traders should look nothing alike.
- Animate what people do — adding, confirming, winning — not every card on the page. Keep interface motion between 120 ms and 300 ms, and save confetti for real wins.
- One memorable element, everything else quiet.
Credits
The kit is built from open source, used under its licences:
- anime.js — MIT, Julian Garnier
- AutoAnimate — MIT, FormKit
- canvas-confetti — ISC, Kiril Vatev
- ZzFX — MIT, Frank Force
- Open Props — MIT, Adam Argyle
- Radix Colors — MIT, Radix
- Lucide — ISC, Lucide Contributors
- Inter, Bricolage Grotesque, Fraunces, Space Grotesk, Nunito and JetBrains Mono — SIL Open Font License 1.1, through Fontsource
The design guidance the building AI follows draws on Anthropic's frontend-design skill (Apache-2.0) and Emil Kowalski's animation skills (MIT).