The design systemFree · AGPL-3.0 · no build step

A design system
with nothing to install.

Plain CSS, plain JSX transpiled in the page, plain HTML. No bundler, no package install, no build. Drop the folder into a project and the tokens, components, specimen cards and eight working prototypes are already there.

207Custom properties, across seven token files
54Component families, 177 exported names
78Design System cards, across fifteen groups
8Templates — whole interactive prototypes
Three ways inA copy · the project · the documents

Take a copy, clone it, or read it.

They are not the same thing. The archive is a copy that will never change under you. The repository is the living project. The markdown is the reasoning on its own, for reading or for handing to an agent.

01Getting started →
MarkdownRead or feed it

The rules only

Every document and nothing else: no CSS, no components, no bundle. What a person reads, and what a model is given.

  • readme.md — the design guide itself
  • AGENTS.md and SKILL.md
  • 54 .prompt.md pairs, one per family
  • LICENSE, NOTICE and the changelog
Download the markdown~78 KB · no assets
RepositoryBuild on it

Get it on GitHub

The project as it actually stands. Clone it for the history, or to change something and keep your changes separate from mine.

  • Commit history, issues and whatever lands next
  • Fork it, or pull an update instead of re-downloading
  • AGPL-3.0-or-later, with upstream credited in NOTICE
  • Same contents as the archive, nothing held back
View the repositorygit clone · public · AGPL-3.0
ArchiveUse it now

Download the package

A dated snapshot with everything in it, including the generated bundle — so it renders the moment it lands.

  • Tokens, component CSS and all 54 families
  • The three generated files, committed on purpose
  • Eight templates, and the eight AGENTS-notes data models inside them
  • Fonts and marks included, nothing to fetch
Download the .zipv1.0 · September 2026 · ~4.6 MB
All three carry the same rules. What differs is how much of the machinery comes with them.
Getting startedNothing to configure

Four ways in.

The first needs no configuration at all. The rest are one line, one paste, or one path.

02Provenance and limits →
01 · Recommended

As a design system

Create a design-system project, drop the unzipped contents at its root, and open it. The compiler finds styles.css, the 54 components, the 78 cards and the 8 templates on its own. There is nothing to configure and nothing to run first.

Picked up on open
styles.cssentry
tokens/207
components/54
templates/8
scraps/ignored
02 · Agents

In Claude Code

SKILL.md already carries its front matter and AGENTS.md explains how to assemble a screen. Drop the folder into a skills directory and it loads as a skill — the rules arrive before the first component does.

Loaded as a skill
> skills — reckon
  SKILL.md read
  AGENTS.md read
  54 prompt files indexed
03 · Portable

Other UI generators

The markdown package is the whole system without the machinery, so it travels anywhere a model reads context. Paste the design guide and the .prompt.md pairs into v0, Lovable, Bolt, Cursor or your own harness. No install, no runtime, no assumption about the stack it will produce.

Rules in, interface out
04 · Prototypes

From a template

Every templates/<slug>/ is self-contained but for one line: ds-base.js holds the path back to the system root. Repoint that string and the prototype renders anywhere. Read the matching notes file first — it documents the fixtures and the data model.

One line to change
ds-base.js
const base = '../..';the only path the template needs
ProvenanceOpen source, credited

Where it came from, and what it is not.

None of this is buried, because none of it should be. Read it before you ship something built on it.

03Back to the top →

Lineage

Reckon’s component set recreates the visual language behind coss.com and its component library, built from the open-source cosscom/coss monorepo. The upstream project is open source and its assets travel with this package, credited in NOTICE.

Worth naming in full: cosscom/coss, coss.com/ui, Base UI, Lucide and Tailwind v4.

Licence

The recreation work — tokens, component CSS, specimen cards, templates and the design guide — is AGPL-3.0-or-later, matching the upstream default it derives from. The token layer comes from a source with no MIT-licensed equivalent, so anything narrower would be a claim the provenance does not support.

Designing an interface with it is use, not derivation, and a product built with Reckon is not automatically AGPL. Copying the token files, the component implementations or the rules into your own distributed project is derivation, and §13 means network use counts. LICENSE and NOTICE travel with the source.

Not productionThese are cosmetic recreations, not production Base UI. No focus trapping, no portalling, no collision-aware positioning, no virtualised lists, no complete keyboard contracts. For production, the real package is the answer.
GeneratedThree files are generated and committed on purpose — the bundle, the manifest and the adherence config — so a clone renders without a build. Never hand-edit them; the next compile reverts it silently.
PathsFont paths resolve relative to the stylesheet. Flatten the tree, or serve styles.css from a different depth, and both faces fail to the system stack.
NamespaceThe bundle namespace is not portable. It is derived from the project it was compiled in, so a fresh install gets a different suffix. This is the single most likely thing to break on arrival.
Known gapFinance Desk’s approval limits are editable but not yet enforced — payouts do not check them. Worth knowing before a stakeholder finds it in a demo.

Reckon

Ship the screen.
Not the guesswork.

Components are the easy part. What you are missing is the layer that decides what gets computed, what gets shown, and what gets refused.

Built for Claude Design · plain markdown · nothing to run