# Design systems > One JSON document per brand, followed by every Texuli surface: three example brands on one dashboard, slide, document and email, their conformance, and how to start. Language: en Canonical: https://texuli.com/design-systems/ Markdown: https://texuli.com/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 --- ![A design system card surrounded by swatches, a corner radius piece, a cube ruler and type bars](https://texuli.com/_astro/page-design-systems.BUxtScxO.webp) Design systems · new in 0.10.0 Describe a brand once, as one JSON document, and every Texuli surface follows it: components, layouts, dashboards, decks, documents, email, PDF, DOCX, PPTX, canvas exports and the Kotlin twin. The document is data only, so an agent can write one without emitting CSS or script, and the compiler enforces contrast, focus and target-size guarantees instead of reporting them. [Explore the Design Systems Solution](https://texuli.com/solutions/design-systems/) **Status:**Design systems shipped in 0.10.0 and are on npm in the 0.18 line (texuli@^0.18.0 and @texuli/tokens@^0.18.0), a pre-1.0 release: under 0.x a new minor may contain breaking changes. Earlier lines have the theme engine and token contract v2, but not the design-system document, its compiler or the texuli ds commands. ## What a design system is A closed JSON document (`format: "texuli/design-system"`): identity, then optional sections for color, typography, shape, space, elevation, surface, motion, layout, icons, component defaults, assets, voice, accessibility targets and variants. Lengths are numbers, colors are values, and nothing is raw CSS. The smallest valid document is a brand color: ``` { "format": "texuli/design-system", "formatVersion": 1, "id": "harborline", "version": "1.0.0", "name": "Harborline", "color": { "brand": { "seed": "#0e7490" } } } ``` - **Validate:** the spec checks the closed shape and answers with stable codes and JSON paths, so a person or an agent repairs a document from the code alone. - **Compile:** concrete `--tx-*` variables per mode. Text pairs meet the declared target (AA 4.5:1 or AAA 7:1), the focus ring 3:1 at 2 px or wider, and controls the declared target size; the compiler refuses only what pinned colors make impossible. - **Apply or emit:** `DesignSystemProvider` or `applyDesignSystem` on any element, `designSystemStyle` for server HTML, and emitters for CSS, a Tailwind preset, DTCG, Tokens Studio, email, PDF, DOCX, PPTX, canvas and Kotlin tokens. ## Three brands, four surfaces Three fictional brands from the repository's [examples/design-systems](https://github.com/DailybotHQ/texuli/blob/main/examples/design-systems/) folder, compiled when this page was built and applied through `DesignSystemProvider`. Each surface below is the same markup and the same content; only the design system changes. The previews show light mode, and they ship no JavaScript. - ### Quillmark `quillmark@1.0.0` · seed `#b4532a`A literary magazine: warm paper neutrals, a terracotta seed, a serif body.A brand seed with a warm neutral, type families and roles, flat surfaces, outline buttons by default.[The document for Quillmark](https://github.com/DailybotHQ/texuli/blob/main/examples/design-systems/quillmark.json) · `texuli://design-system/quillmark` - ### Ledgerline `ledgerline@2.3.0` · extends `texuli:slate-masthead` · seed `#1d4ed8`A finance back office: dense spacing, 14 px base type, crisp edges.extends: "texuli:slate-masthead", small buttons by default, a high-contrast variant held to AAA.[The document for Ledgerline](https://github.com/DailybotHQ/texuli/blob/main/examples/design-systems/ledgerline.json) · `texuli://design-system/ledgerline` - ### Tumbletown `tumbletown@1.0.0` · seed `#d6336c`A family game studio: 20 px radius, pill buttons, expressive motion.The brand pink pinned exactly, 44 px targets (control heights lifted), a glow focus ring.[The document for Tumbletown](https://github.com/DailybotHQ/texuli/blob/main/examples/design-systems/tumbletown.json) · `texuli://design-system/tumbletown` Brand fonts are named in each document but not loaded on this site, so each preview falls back along its font stack. ### Dashboard Stat cards, a bar chart on the chart palette and a table: density, radius, elevation and type scale all move with the brand. - Revenue $48.2k Increased: +4% Orders 1,284 Increased: +12% | Region | Orders | Change | | --- | --- | --- | | East | 512 | +9% | | West | 431 | +15% | | South | 341 | +11% | Dashboard under Quillmark - Revenue $48.2k Increased: +4% Orders 1,284 Increased: +12% | Region | Orders | Change | | --- | --- | --- | | East | 512 | +9% | | West | 431 | +15% | | South | 341 | +11% | Dashboard under Ledgerline - Revenue $48.2k Increased: +4% Orders 1,284 Increased: +12% | Region | Orders | Change | | --- | --- | --- | | East | 512 | +9% | | West | 431 | +15% | | South | 341 | +11% | Dashboard under Tumbletown ### Deck slide A title slide on the brand fill, with the on-fill text color the compiler holds to the contrast target. - Quarterly review Orders grew 12% this quarter Shipping took 2.1 days on average - Returns fell to 1.8% Harbor Supply · fictional data Deck slide under Quillmark - Quarterly review Orders grew 12% this quarter Shipping took 2.1 days on average - Returns fell to 1.8% Harbor Supply · fictional data Deck slide under Ledgerline - Quarterly review Orders grew 12% this quarter Shipping took 2.1 days on average - Returns fell to 1.8% Harbor Supply · fictional data Deck slide under Tumbletown ### Document page Title, lead, list, quote, callout and badges, set in the type roles of each brand. - Release notes, week 44 Type roles, spacing and colors all come from the design system. The orders dashboard loads twice as fast. - Exports keep the brand colors. > Best week of the quarter, and the calmest on-call yet. Heads up Two products are low on stock. Shipped Week 44 Document page under Quillmark - Release notes, week 44 Type roles, spacing and colors all come from the design system. The orders dashboard loads twice as fast. - Exports keep the brand colors. > Best week of the quarter, and the calmest on-call yet. Heads up Two products are low on stock. Shipped Week 44 Document page under Ledgerline - Release notes, week 44 Type roles, spacing and colors all come from the design system. The orders dashboard loads twice as fast. - Exports keep the brand colors. > Best week of the quarter, and the calmest on-call yet. Heads up Two products are low on stock. Shipped Week 44 Document page under Tumbletown ### Email An email composition; the real email HTML comes from @texuli/tools/email with the same design system. - Harbor Supply Harbor weekly digest Orders grew **12%** over last week. $48.2k revenue 1,284 orders Open the dashboard You get this digest weekly. Fictional data, example.com.Email under Quillmark - Harbor Supply Harbor weekly digest Orders grew **12%** over last week. $48.2k revenue 1,284 orders Open the dashboard You get this digest weekly. Fictional data, example.com.Email under Ledgerline - Harbor Supply Harbor weekly digest Orders grew **12%** over last week. $48.2k revenue 1,284 orders Open the dashboard You get this digest weekly. Fictional data, example.com.Email under Tumbletown ## Conformance Every number below is read from the compiler's report when this page was built, through `checkDesignSystem`: the static half of `texuli ds check` (the spec's validation, the `extends` chain, the compile of the document and of its high-contrast variant, then the guarantees checked again over the compiled variables). Contrast pairs passing per mode, target sizes and solver moves, per brand and run | Brand and run | Target | Light pairs | Dark pairs | Tightest text pair (light) | Control heights | Solver moves | Result | | --- | --- | --- | --- | --- | --- | --- | --- | | Quillmark, Base | AA, 24 px targets | 74 of 74 | 74 of 74 | 4.98:1 (needs 4.5:1) | 4 of 4 | 0 | Passes | | Ledgerline, Base | AA, 24 px targets | 74 of 74 | 74 of 74 | 5.06:1 (needs 4.5:1) | 4 of 4 | 0 | Passes | | Ledgerline, high-contrast variant | AAA, 24 px targets | 74 of 74 | 74 of 74 | 7.09:1 (needs 7:1) | 4 of 4 | 0 | Passes | | Tumbletown, Base | AA, 44 px targets | 74 of 74 | 74 of 74 | 4.61:1 (needs 4.5:1) | 4 of 4 | 7 | Passes | Pairs are text on every surface role (4.5:1 at AA, 7:1 at AAA), strong borders and inputs (3:1), and the focus ring against the page and the surface (3:1). Control heights are the control sizes held to the brand's target size. A solver move is a color or a size the compiler changed to meet a guarantee, per mode: Tumbletown's are its control heights lifted to its 44 px target and the text color on its pinned pink in dark mode. Run the same check on a brand, or on your own document: ``` texuli ds check examples/design-systems/quillmark.json texuli ds check examples/design-systems/ledgerline.json texuli ds check examples/design-systems/tumbletown.json ``` `--render` also paints every agent-emittable catalog component under the design system in headless Chromium and checks axe, the painted contrast of every pair and colors that ignore the design system; CI runs it on these three brands. Details: [texuli ds check](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ds-check.md). ## Start one ### In the browser: the studio Start from a seed color, a logo, a library theme or a DTCG or Tokens Studio file; edit every section; preview five surfaces; read the contrast report and the diff; export every format; share the document in a link. Nothing leaves the page. [Open the design system studio](https://texuli.com/theme-studio/) ### In a terminal: texuli ds Eight commands in `@texuli/tools`: `init`, `validate`, `compile`, `preview`, `diff`, `import`, `export` and `check`. Exit 0 when valid, 1 when refused. ``` texuli ds init brand.ds.json --name Harborline # a starter document texuli ds validate brand.ds.json # stable codes and JSON paths texuli ds compile brand.ds.json --format css --out dist/brand.css texuli ds preview brand.ds.json --format svg --out review/brand.svg texuli ds diff brand.ds.json next.ds.json # changed variables, contrast regressions texuli ds import tokens/brand.tokens.json --from dtcg --out imported.ds.json texuli ds export brand.ds.json --format dtcg --out tokens/brand.tokens.json texuli ds check brand.ds.json --render # the conformance check ``` [Every command and operation](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ds.md) ### With an agent: the MCP The same operations as MCP tools, on the local server (`npx -y @texuli/mcp`) and the remote one at `https://texuli.com/mcp`: - `blueprint.theme`: Apply a design system to a blueprint - `ds.validate`: Validate a design system - `ds.compile`: Compile a design system - `ds.contrast`: Report design-system contrast - `ds.suggest`: Suggest a design system - `ds.import`: Import a design system - `ds.generate`: Generate a design-system draft - `ds.allow`: List allowed components for a locked design system - `ds.bundle`: Pack or unpack a portable design-system bundle - `ds.diff`: Diff two design systems - `ds.preview`: Preview a design system - `ds.save`: Save a design system to a file (local only) The prompt `create-design-system` walks an agent from a brief to a validated document. The resource `texuli://design-system/{id}` serves the example brands and every library theme as a document. [Connect your agent](https://texuli.com/mcp-server/) ### Read the guide Authoring by hand or from tokens you already have, the validation codes, compile and apply, patches and variants, versioning, distribution, migrating from themes, the guarantees and every output. [The design systems guide](https://github.com/DailybotHQ/texuli/blob/main/docs/DESIGN_SYSTEMS.md) ### See the whole loop Generate a draft from brand inputs, review it in the kit, approve it in a commit, lock prototypes to the allowed set and share it as a versioned bundle. [The Design Systems Solution](https://texuli.com/solutions/design-systems/)