index.html: demo page with the controls and examplesdesign.md: Google DESIGN.md-style machine-readable tokens and design rationale for LLM consumersstyles.css: token-driven light and dark theme implementationscript.js: theme, font, and demo interaction behaviorinterpolation.js: self-testing string interpolation reference; copy onlyinterpolateinto consuming projectsconfiguration.md: JSON5 config/secrets environment-reference and Docker Compose.envcontractstyle.md: canonical UI contract for humans and LLMsJAVASCRIPT_AND_TS_CODING_STYLE.md: implementation style rules for JS and TSSVELTE_NODE_HTTP_PROXY.md: SvelteKit Node HTTP API proxy pattern for configurable browser-to-API routingdeployment.md: deployment, version metadata, startup diagnostics, health endpoint, and image tagging contractmcp-SPEC.md: MCP server project specification for tools that front upstream systemsagents.md: instructions for agents consuming this repo
If you are using this repository from another project:
- Read
design.mdfirst when an LLM or tool needs portable design tokens. - Read
style.mdsecond for the stricter local UI contract. - Read
JAVASCRIPT_AND_TS_CODING_STYLE.mdthird for implementation conventions. - Read
configuration.mdwhen work touches config files, secrets files, environment variables,.env, or Docker Compose. - Read
agents.mdif the consumer is an agent or LLM workflow. - Read
SVELTE_NODE_HTTP_PROXY.mdwhen work touches SvelteKit/Node HTTP API proxying or configurable API base paths. - Read
deployment.mdwhen work touches Docker builds, releases, startup diagnostics, health endpoints, image tags, or deployable service metadata. - Read
mcp-SPEC.mdwhen work touches MCP servers, MCP tools, upstream-client wrappers, or MCP deployment patterns. - Read
index.html,styles.css, andscript.jsonly when you need implementation examples.
This style system is built around:
- full-page monospace typography
- root-driven
data-themeswitching - root-driven
data-fontswitching - flat surfaces with no gradients
- four semantic tones:
startmidwarningdanger
The current demo supports:
- dark mode
- light mode
- page-wide font selection
- page-wide content width selection
- shared control styling for buttons, inputs, selects, textareas, sliders, toggles, tabs, alerts, badges, tables, cards, details/summary disclosures, dropdown multi-selects, removable badge actions, modal dialogs, and table-cell inspection buttons
Open index.html in a browser to inspect the demo.
Carry the system into another project by preserving the root contract:
<html data-theme="dark" data-font="system-stack" data-content-width="standard">Then keep component styling token-driven and aligned with style.md.
This repository is intentionally documented for LLM-first consumption.
design.mdis the portable design-token source for LLMs and compatible tooling.style.mdis the shortest local source of truth for UI decisions.JAVASCRIPT_AND_TS_CODING_STYLE.mdis the source of truth for implementation conventions.configuration.mdis the source of truth for JSON5 environment references and optional Compose.envloading.SVELTE_NODE_HTTP_PROXY.mdis the source of truth for the SvelteKit Node API proxy pattern.deployment.mdis the source of truth for deployment metadata, startup version logging, health endpoint metadata, and image publishing.mcp-SPEC.mdis the source of truth for MCP server project structure, safety, auth, tools, and deployment expectations.agents.mdtells agents to prefer those docs over scanning the whole demo.
- Theme switching should happen at the root, not per component.
- Font switching should change the whole page, not isolated elements.
- Blue, green, warning, and danger tones should remain semantically stable.
- If reusable design tokens or component rules change, update
design.mdandstyle.mdso downstream projects stay aligned.