The Hooman Loop · Design System v1.0
Konstrukt is a JSON-first design system. Five palettes and two modes are authored once as W3C DTCG tokens, then generated into CSS, a Swift/SwiftUI package, and a machine-readable manifest. Change a value in one place and the portal, the marketing site, internal tools, and iOS move together.
Palette — click to re-theme this page
Ten complete themes, rendered side by side. Every card below is the same markup — same classes, same structure, same component set. The only difference is which token values are bound to that subtree. A theme is not a page variant you maintain; it is a variable scope.
How a theme is applied
Themes are set as attributes on <html> — or on any element, since the
generated selectors are plain attribute selectors. Nest a subtree in another palette and it
re-themes independently.
<html data-palette="hl" data-mode="dark"> <!-- any subtree can carry its own scope --> <div data-palette="courage" data-mode="light"> … </div>
| Axis | Attribute | Values |
|---|---|---|
| Palette | data-palette |
atelier · courage · minimal · hl · blueprint |
| Mode | data-mode |
light · dark |
| Runtime | HLTheme |
Persists to localStorage, follows system preference, syncs across tabs |
The portable component vocabulary. Every tile is live markup on this page — not a screenshot — so it re-themes with the palette you picked above. Open the full component reference for markup, variants, and copy-ready snippets.
| Portal | Live |
| iOS | Build |
One token source, three shapes of artefact. The web gets custom properties, iOS gets a typed Swift package, and tooling — including design apps and AI agents — gets a resolved manifest. No hand-maintained second copy of the design.
Ten selector blocks, one per palette × mode. Load the stylesheet and the runtime.
<link rel="stylesheet" href="konstrukt.css"> <link rel="stylesheet" href="base.css"> <script src="theme.js"></script>
Import the generated token stylesheet from your entry CSS or layout.
@import '@hooman-loop/konstrukt/css';
A typed theme in the environment. Same values, no re-typing hex codes.
@Environment(\.konstruktTheme) var theme
Text("Hi").foregroundStyle(theme.accent)Every theme, resolved. This page's theme wall is rendered from it at runtime.
{
"themes": {
"hl.dark": { "bg": { "value": "#121212" }, … }
}
}Tokens are authored as W3C DTCG JSON. A Style Dictionary build emits every artefact and a parity gate compares the generated CSS against a frozen canonical snapshot, value for value — so a refactor cannot silently drift a colour.
npm run check compares generated CSS to build/canonical-tokens.css — selector by selector, declaration by declaration.
| Surface | Stack | Consumption | Status |
|---|---|---|---|
| Client portal | Static HTML / JS | Generated tokens + base components | Live |
| Marketing site | Astro | src/styles/konstrukt.css |
Live |
| iOS app | SwiftUI | Generated Swift package | In progress |
| Internal tools | Static HTML | Single-file pages on the same tokens | Live |
| This page | Static HTML | Dogfoods the generated output | Live |