Runtime tokens, not build-time
Publish a token set via CDN (versioned, immutable paths) and running apps update without a new deploy. shadcn/Radix/Chakra can't do that.
MIT licensenpm · @grundtone/vue40+ components
Change your brand in one place.
See it live everywhere — no rebuild.
Open source design system, Vue/Nuxt-first. The same tokens also theme your email templates — React Native support is experimental. Token-native. Framework-agnostic.
themed 00:00:00 · 0 builds · 0 deploys · switch #0
The whole page — header, buttons, badges, cards, code block — reads from applyThemeToDOM(). This isn't a demo of the mechanism. It IS the mechanism.
The name
Why "grundtone"?
Danish for root note — the tone every other tone in a piece of music is tuned against.
grundtone is one of four KlangHaus open-source projects named after Danish music terms, not generic tech words — a deliberate choice, not a coincidence.
Grundtone, n. (music theory)
The fundamental frequency. The note you build the harmony on top of — remove it, and the chord falls apart. It's invisible in the finished piece, but everything sounds wrong without it.
That's what a design system actually is. Not a component library — the tone every other tone in your product vibrates from.
Colors, spacing, type — set once, tuned against everywhere. Change the root note and every chord built on it changes with it, live. Whether you're building a UI or a piece of music, you start on the grundtone.
One source, every surface
Does it work in my stack?
One token set. Change one value — everything updates, no rebuild.
import { applyThemeToDOM } from '@grundtone/vue';
applyThemeToDOM(theme.light);
// ← one call. No rebuild, no deploy.
// active primary: #0059b3<script setup>
import { GTButton } from '@grundtone/vue';
</script>
<template>
<!-- Follows theme.primary — live, no rebuild -->
<GTButton variant="primary">Buy ticket</GTButton>
</template>What makes grundtone different
What do I get?
One chain, designer to prod
Non-developers edit tokens visually in Studio; developers consume via SDK/CDN. shadcn is copy-paste for developers — this is an end-to-end chain.
Self-hosted, EU-first
Fonts are always self-hosted — never a Google Fonts CDN. Infrastructure in the EU. A real difference after the Fashion-ID ruling, not just a checkbox.
Accessibility built in
Focus management, roving tabindex and screen-reader attributes as shared utilities across the components — not patched on afterwards.
Token architecture
Three things nobody else has
Font licensing with an audit trail
Curated OFL fonts self-hosted, or your own — with a license attestation per file. We can document WHO vouched for the license.
Light/dark per project
Both theme sets publish together and switch at runtime — no bespoke media-query hacks.
Rollback is moving a pointer
Every publish is an immutable version —
current points at the active one. Undo a brand by moving the pointer, not by re-deploying. current → v3Pricing principle
Pricing
grundtone open source is 100% free, forever — MIT license, no credit card. Studio (the optional no-code layer) has its own tiers.
We price per active brand — not per user, not per seat.
FreeSoloStudioScaleEnterprise
5 tiers, all priced per brand. See current pricing →(that page governs — not this one)
In production
Who uses it?
Built and battle-tested in production by KlangHaus — across Backstage, Etude, Studio and transactional email. Not many logos yet.
StudioEtudeBackstageResonansmdHaus