Rost

Rost started as a design system for my own needs and grew into a product of its own. Today it serves products across different industries. The portfolio site and the accounting app are two of them, and none of them owns it.

Rost is the Romanian word for purpose or order, in the sense that something is where it belongs.

Each component is a contract: one YAML file that says what the component is, which values it uses, how to use it, and where each of my apps implements it. The CSS and the docs are built from it, and apps are checked against it.

Start with how a contract works. Then the catalogue, the roadmap and the release notes. The same content, with every component live and every value of every variant, is at rost.build.

contracts/  one YAML contract per component
schema/     the contract format (JSON Schema v2) and a template
tokens/     tokens.css, tokens.json, and fonts.css (General Sans, placed where Figma puts it)
src/        the components built in code (src/components/), the effects, and the conformance check
registry/   what exists in the Figma file: components, variants, node ids, variables
baseline/   Figma's own render of each variant, the target for the coded versions
assets/     icons and vector parts exported from Figma
docs/       written by hand: CONTRACT.md, ROADMAP.md, CHANGELOG.md. Generated: the rest
web/        the website at rost.build, built from everything above
raw/        what the Figma reads returned, before parsing
bin/        building CSS, tokens and docs, the visual test, copying into apps, auditing them

Using it

npm run validate                 # schema, links between files, token names
npm run docs                     # validate, then rebuild docs/
npm run css -- thumbs            # write a component's CSS from its contract
npm run test:visual -- thumbs    # render every variant and compare it with Figma's screenshot
npm run site:dev                 # the website, live, on http://localhost:4321
npm run deploy                   # build it and publish it to rost.build

In an app:

npm run add -- <app-dir> badge             # copy a component, its contract and the check into an app
npm run add -- <app-dir>                   # bring every component the app has up to date
npm run audit -- --strict <app-dir>        # undefined vars, raw hex, token names the kit doesn't have

Checking an app shows the test an app runs.