A design system for everything we build.

Colour is a contract

Every hue ships as three tokens, and the suffix says where each may appear. Components never name a raw colour, so light, dark and the high-contrast palette all follow from one set of classes.

--x

Fills a background, solid or as a tint.

--x-foreground

Text and icons sitting on that solid fill.

Paid

--x-ink

The same colour on the page: text, lone icons, borders.

Paid

Measured, not eyeballed: on white, text-success reads 3.13:1, under AA; text-success-ink reads 6.52:1. The default palette’s few known gaps are listed on the Colors page, and the high-contrast palette is the one the build fails over.

Five display axes, set by each user

Light or dark, contrast, the density of rows, the size of text and the brand colour — independent of each other, one attribute on <html> each, remembered per device. Try them: they apply to this whole site.

Nothing ships ungated

Every control works from a keyboard, every name a screen reader speaks can be translated, and where a component knowingly falls short its page says so. Before a version reaches npm, 15 steps have to pass:

1. typecheckStrict TypeScript over the whole source.
2. test:i18nNo Vietnamese text outside the Vietnamese tables.
3. buildOne ES module per source file, so each keeps its own directive.
4. verify:directivesEvery “use client” survives the build; no plain constant sits in a client file.
5. smoke:entriesAll nine entries load in plain Node, through the exports map — and resolve under its require condition too, the path webpack takes for next/dynamic.
6. check:exportspublint and Are the Types Wrong on the published shape.
7. test:nav-activeThe sidebar lights the right row, queries included.
8. test:grid-contractNo layout class that silently breaks a grid it is dropped into.
9. test:grid-renderDataGrid rendered for real with react-dom/server.
10. test:editor-markdownDocument → Markdown → document comes back unchanged, and the HTML the editors write keeps stored values, not drawn ones.
11. test:gantt-treeGantt's day arithmetic, dependency rules and arrow routes, TreeView's move contract, roll-ups and numbering, and both rendered on the server in two languages.
12. test:dom-renderMounted and re-rendered with react-dom/client on happy-dom — what is right on first render and wrong after a prop changes, like an avatar losing its image.
13. test:a11y-gateThe contrast gate still catches every case that once slipped past it.
14. lint:a11yContrast measured on compiled CSS, in both palettes and both themes.
15. lint:palettes

Built for Server Components

// app/products/[id]/page.tsx — a Server Component
import { Rating } from '@comitor/ui'

// ✓ strings, numbers and booleans cross to a client component
<Rating value={4.5} step={0.5} readOnly aria-label="Rated 4.5 out of 5" />

// ✗ a function does not — the page fails to render with
//   "Functions cannot be passed directly to Client Components…"
<Rating value={4.5} readOnly itemLabel={(value) => `${value} étoiles`} />