# Your brand, locked in one file. > Generate a design system from brand inputs, review it in the kit, approve it in a commit, and check every prototype against it. Language: en Canonical: https://texuli.com/solutions/design-systems/ Markdown: https://texuli.com/solutions/design-systems.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML. Last Updated: 2026-11-13 --- Solution · Design systems Generate a design system from what you already have, review every component it allows, approve it in a commit, and check that every prototype stays inside it. One JSON document, enforced contrast, no CSS to hand-copy. Status: available [See it on a sample brand](https://texuli.com/solutions/design-systems/#demo)[Read the guide](https://texuli.com/guides/solutions/design-systems/) ![One frosted-lilac glass document card that locks a cluster of themed component cubes into one brand](https://texuli.com/_astro/solution-design-systems-hero.D3iiMxul.webp) ## Lock a brand in a minute. Try this - Pick a brand input: a brief, a token file or a stylesheet. Read what was dropped or repaired. - Preview the generated brand on real components, in light and dark. - Switch Badge or the ghost button off, and watch the locked check report the finding. - Note the status: draft. Approval is a person and a reviewed commit, not a button here. 1. Pick a brand input Harborline Brief A calm, rounded teal brand, from a one-line brief. Quillmark Tokens An editorial rust brand, from a small DTCG token file. Tumbletown CSS A playful pink brand, from its site stylesheet. ### 2. The input and its report Harborline input ``` name Harborline, brand #0e7490, rounded, calm, comfortable ``` `texuli ds generate --brief "name Harborline, brand #0e7490, rounded, calm, comfortable" -o design-systems/harborline.ds.json` 0 dropped values · 1 repair · contrast, focus and target size hold Repaired - `$.accessibility.targetMin` control height below the 44px target (6 values) Status: **draft**. A person approves it with `texuli ds approve` and a reviewed commit, not here. ### 3. Preview the Harborline kit Preview mode Light Dark ### Join the Harborline beta A sample prototype, built only from catalog components. Work email New ### 4. Lock the allowed set Allowed in this design system Badge (the component) Button, ghost variant (one variant) Locked check passed: every component in the prototype is allowed. The same check runs in CI as `texuli ds validate --locked`, on your sources and blueprints. Fictional brands. The drafts were generated when this site was built, and the check runs on a sample prototype, not your app. [See a full kit: Ledgerline](https://texuli.com/design-systems/kit/) ## From brand inputs to locked prototypes. ### Create: start from a brief, tokens, CSS or a logo. texuli ds generate merges a short brief, a token file, your site CSS, sampled logo colors or a library theme into one design-system draft. Its report lists every value an importer dropped or a later source overwrote, and every color the contrast solver moved, with the reason. A repair is a brand color that changed: read it before you go on. Agents call ds.generate, which returns a draft and never saves or approves. - Import and generate - One brand document ![A brief card, a token sheet, a CSS sheet and logo swatches flowing into one pearl design system document](https://texuli.com/_astro/solution-design-systems-story-1.3wXfuthc.webp) ### Review: see every component it allows, in light and dark. The texuli/ds-kit page renders the design system in one place: foundations, voice, every allowed component in each allowed variant, size and state, the brand’s own components and the approval record with its hash check. Disallowed values are marked, never rendered. The compiler holds every text pair to AA instead of only reporting it. - Compile and apply ![A wall of component tiles in a light half and a dark half, reviewed beside one design system card](https://texuli.com/_astro/solution-design-systems-story-2.cepl3zBs.webp) ### Approve: a person, a commit, CODEOWNERS. A reviewer runs texuli ds approve --by . It validates first, then stamps the approval and a content hash. The CLI cannot prove who approved: the guarantee is the reviewed commit, with your design-systems folder owned by your design reviewer in CODEOWNERS. Agents never approve, and texuli ds hash exits 1 when an approved file changed. - One brand document ![A design system card receiving a check seal while a commit node joins a reviewed branch line](https://texuli.com/_astro/solution-design-systems-story-3.BG4GmHK4.webp) ### Lock: prototypes use what the brand allows. The allow section names the catalog components, variants, sizes, tones, densities, category colors and states the brand permits. Every catalog component root carries data-tx-component and its axes, so a check maps a painted page back to the catalog. texuli ds validate --locked --prototype reads your sources and blueprints without running them; --render adds the render check and --report lists findings without failing while you migrate. Your own components join as namespaced catalog extensions with --extensions. - Govern components ![Component cubes inside a lilac outline passing a check gate while one off-set cube waits outside](https://texuli.com/_astro/solution-design-systems-story-4.CAYNjwpv.webp) ### Share: hand it over as one versioned bundle. texuli ds pack packs the document with its library sources and release history. Consumers pin an exact version and move it on purpose; texuli ds diff shows what changed, and a narrower allowed set is a breaking change. The bundle, the allow manifest and the check report each have a published contract type, so other tools can read them. - One brand document ![A sealed bundle box with a version tag cube travelling along dashed paths to two consumer screens](https://texuli.com/_astro/solution-design-systems-story-5.DewbwykJ.webp) ## One document, every surface. - ### Describe The spec defines the design-system document, the allow manifest and the catalog extension format.Package: `@texuli/spec` - ### Compile The compiler turns the document into --tx-* variables for light and dark, with contrast, focus and target size enforced.Package: `@texuli/tokens` - ### Paint Texuli components read those variables; the provider scopes a brand to a page or one element.Package: `texuli` - ### Check texuli ds generates, approves, packs and runs the locked checks on your prototypes.Package: `@texuli/tools` - ### Hand to agents The MCP server gives agents the same ds operations, locally or at texuli.com/mcp. Agents draft and validate; they never approve. Design systems is built from @texuli/tools, texuli, @texuli/tokens and @texuli/spec, on @texuli/catalog, @texuli/blocks, @texuli/charts, @texuli/media, @texuli/document, @texuli/primitives, @texuli/core, @texuli/deck and @texuli/emojis. Solution Design systems Packages - L8[`@texuli/tools`](https://www.npmjs.com/package/@texuli/tools) The texuli ds command-line tools Subpaths: . - L3[`texuli`](https://www.npmjs.com/package/texuli) Svelte provider and the Ledgerline design-system kit Subpaths: ./design-system · ./ds-kit - L2[`@texuli/tokens`](https://www.npmjs.com/package/@texuli/tokens) Compile, generate, import, apply and emit design-system documents Subpaths: ./design-system/compile · ./design-system/generate · ./design-system/import · ./design-system/apply · ./design-system/emit - L0[`@texuli/spec`](https://www.npmjs.com/package/@texuli/spec) The design-system document, schemas and validation contract Subpaths: ./design-system Built on - L6 `@texuli/catalog` (Agent catalog) - L5 `@texuli/blocks` (Content blocks) - L4 `@texuli/charts` (Charts) - L4 `@texuli/media` (Media) - L1 `@texuli/document` (Document engine) - L1 `@texuli/primitives` (Headless primitives) - L0 `@texuli/core` (Texels and the URL policy) - L0 `@texuli/deck` (Deck model and engine) - L0 `@texuli/emojis` (Unicode emoji catalog and engine) ![Five-beat pipeline from a design system card through a compiler cube to components, a check gate and an agent console](https://texuli.com/_astro/solution-design-systems-how.DOhku5LM.webp) Built with Texuli ## Built on it: Protoyard. Protoyard, open-source local prototyping, builds locked prototypes on Texuli. See how it uses Texuli, or visit Protoyard’s own site. - [Visit protoyard.app](https://protoyard.app) - [How Protoyard uses Texuli](https://texuli.com/built-with/protoyard/) ![Prototype screens assembled from the same branded cubes inside a lilac outline, editorial not a product screenshot](https://texuli.com/_astro/solution-design-systems-protoyard.CsCj45aK.webp) Build with Design systems ## Run the loop from your terminal ### Install ``` pnpm add texuli @texuli/tokens pnpm add -D @texuli/tools ``` ### Create ``` # 1. Create: a draft and its report (harborline.ds.json.report.json) texuli ds generate --from-tokens tokens/brand.tokens.json --from-css src/brand.css -o design-systems/harborline.ds.json ``` ### Approve ``` # 3. Approve: a person stamps it, then commits it for the CODEOWNERS review texuli ds approve design-systems/harborline.ds.json --by "Design reviewer" --version 1.0.0 texuli ds hash design-systems/harborline.ds.json # exit 1 when an approved file changed ``` ### Lock ``` # 4. Lock: check every prototype against the allowed set (CI) texuli ds validate design-systems/harborline.ds.json --locked --prototype ./src --json ``` ### Share ``` # 5. Share: one versioned bundle texuli ds pack design-systems/harborline.ds.json --out dist/harborline-1.0.0.bundle.json ``` Verified by `packages/tools/tests/ds-*-cli.test.ts` ## Recipes - ### [Review a brand in the kit](https://texuli.com/design-systems/kit/) Every allowed component of a fictional brand, Ledgerline, in each variant, size and state, in light and dark. - ### [Edit a draft in the Studio](https://texuli.com/theme-studio/) Tune colors, type and the allowed set in the browser, then export a draft to review. - ### [Browse the reference](https://texuli.com/design-systems/) Example brands, the conformance sheet and every texuli ds command. - ### [Wire the locked check into CI (external site)](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ds-check.md) Flags, findings and exit codes of texuli ds validate --locked and texuli ds check. ## For agents Agents call the same operations through the MCP server, locally with npx -y @texuli/mcp or at texuli.com/mcp. They generate and validate drafts. Approval stays with a person. - [MCP server](https://texuli.com/mcp-server/) - [Agent skill](https://texuli.com/skill/) - [Building with agents](https://texuli.com/agents-page/) - `ds.generate` ds.generate: AvailableDraft a design system from a brief, tokens, CSS or logo colors, with its report. - `ds.validate` ds.validate: AvailableValidate a document, or a prototype against its locked allowed set. - `ds.allow` ds.allow: AvailableRead or narrow the allowed components, variants, sizes, tones and states. - `ds.save` ds.save: AvailableSave a draft; it refuses an approved document (approval-human-only). - `ds.bundle` ds.bundle: AvailablePack a document with its library sources and release history. ## Platforms - ### Web Web: AvailableSvelte 5 packages published on npm (pre-1.0). - ### Compose Desktop Compose Desktop: In developmentKotlin Multiplatform renderer on the JVM, built in this repository.[`native/docs/parity.json`](https://github.com/DailybotHQ/texuli/blob/main/native/docs/parity.json) - [`native/texuli-spec/src/commonMain/kotlin/com/texuli/spec/tokens/DesignTokens.kt`](https://github.com/DailybotHQ/texuli/blob/main/native/texuli-spec/src/commonMain/kotlin/com/texuli/spec/tokens/DesignTokens.kt) - [`native/conformance/src/jvmTest/kotlin/com/texuli/conformance/DesignSystemFixtureTest.kt`](https://github.com/DailybotHQ/texuli/blob/main/native/conformance/src/jvmTest/kotlin/com/texuli/conformance/DesignSystemFixtureTest.kt) - [`native/conformance/src/jvmTest/kotlin/com/texuli/conformance/DesignTokensConformanceTest.kt`](https://github.com/DailybotHQ/texuli/blob/main/native/conformance/src/jvmTest/kotlin/com/texuli/conformance/DesignTokensConformanceTest.kt) - ### Android Android: PlannedNative renderer target. - ### iOS iOS: PlannedNative renderer target. [How the native renderer works](https://texuli.com/native/) ## Questions Do I need to write CSS? No. The document is data only. The compiler emits the --tx-* variables and the CSS for light and dark. Can an agent approve a design system? No. Agents generate and validate drafts, and ds.save refuses an approved document. Approval is texuli ds approve plus a reviewed commit. Does “approved” prove who approved? No. approvedBy is what the reviewer typed. The proof is your review process: the commit and CODEOWNERS. What does the locked check read? Your sources, blueprints and CSS, as text, bounded and never executed. --render checks the bundled conformance sheet, or a page you serve and pass with --url; Texuli never starts your app. We have our own components. Do they fail the check? Not if you publish them as catalog extensions (:) and pass --extensions. The allowed set is then checked against Texuli’s catalog plus yours. Can I start from tokens we already have? Yes. texuli ds generate reads a DTCG token file, your CSS and a brief, and its report lists what was dropped or repaired. texuli ds import converts a single DTCG or Tokens Studio file. Is it stable? It is pre-1.0. Under 0.x a new minor may break, so pin an exact version. On native, Compose Desktop support is in development and Android and iOS are planned. ## More Solutions - ### [Slides](https://texuli.com/solutions/slides/) Write decks as JSON or Markdown and present them in the browser.Status: in development - ### [Documents](https://texuli.com/solutions/documents/) Edit, read, paginate and export block documents.Status: in development - ### [Workflows](https://texuli.com/solutions/workflows/) Author and view workflow graphs inside your app.Status: in development - ### [Canvas](https://texuli.com/solutions/canvas/) An embeddable whiteboard with shapes, connectors and export.Status: in development - ### [Sheets](https://texuli.com/solutions/sheets/) An embeddable spreadsheet with formulas and CSV.Status: in development - ### [Dashboards](https://texuli.com/solutions/dashboards/) KPI boards people arrange, from the keyboard too.Status: in development - ### [Forms](https://texuli.com/solutions/forms/) Schema-driven forms with conditions, steps and drafts.Status: in development - ### [Agent chat](https://texuli.com/solutions/agent-chat/) A thread whose replies paint validated blueprints.Status: in development - ### [Rich text editor](https://texuli.com/solutions/editor/) Owned rich text with Markdown in and out, safe paste and export to any chat.Status: in development ## Start building with Design systems Carry one brand document across Texuli surfaces. [Read the guide](https://texuli.com/guides/solutions/design-systems/)[See the kit](https://texuli.com/design-systems/kit/)[Open the Studio](https://texuli.com/theme-studio/)[Design systems reference](https://texuli.com/design-systems/)[Full guide on GitHub](https://github.com/DailybotHQ/texuli/blob/main/docs/DESIGN_SYSTEMS.md) ![A low horizon of stacked cubes rising to one glowing pearl cube under a wide open sky](https://texuli.com/_astro/home-final.BGuYKnjC.webp) ![A low horizon of stacked cubes rising to one glowing pearl cube under a wide open sky](https://texuli.com/_astro/home-final.BGuYKnjC.webp) ## For agents Lock a brand in a minute: the live Design systems demo runs in the browser on fixture data. Fictional brands. The drafts were generated when this site was built, and the check runs on a sample prototype, not your app. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md). Limits today: - The design-system document and compiler are on npm, pre-1.0: under 0.x a new minor may break, so pin an exact version. - Compose Desktop decodes documents and uses token sets compiled on the web side; it does not compile arbitrary brand documents in Kotlin yet. - Android and iOS targets are planned. - Generation produces a draft that needs review before approval. MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)): - `ds.validate`: Validate a design system. - `ds.generate`: Generate a design-system draft. - `ds.compile`: Compile a design system. Docs: - [Design systems docs](https://texuli.com/guides/solutions/design-systems/) - [@texuli/spec README](https://github.com/DailybotHQ/texuli/blob/main/packages/spec/README.md) - [@texuli/tokens README](https://github.com/DailybotHQ/texuli/blob/main/packages/tokens/README.md) - [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md) - [@texuli/tools README](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/README.md)