Bracket 3.2
What is in the box
Bracket is the design system Kalder Industries uses for its own products. It is published here so that contractors and the teams in Vantsen and Arles can build against the same decisions without asking for a copy.
41
Components
Forty-one components in the React package, thirty-eight of them with a matching Figma component. Every one carries a status: stable, beta, or deprecated with the release that removes it.
218
Tokens
Two hundred and eighteen named values for colour, space, type, radius, border and elevation, published as CSS custom properties, a JSON file and a Figma variable collection built from the same source.
2
Themes
Light and dark. Both are built from the same semantic layer, so a component that reads bk-color-surface rather than a hex value works in each without a branch.
1
One type family
Kalder Mono at six sizes and two weights. There is no display face and no second family; a heading is distinguished by size and space, not by a different typeface.
AA
Contrast checked in the pipeline
Every semantic colour pair is checked against WCAG AA on each build. A pair that falls below it fails the build rather than appearing in a report nobody reads.
6
Six-weekly releases
A minor release every six weeks, patches whenever a fix is ready. Breaking changes only in a major, announced twelve weeks ahead and never more than once a year.
Status
What is stable and what is not
Status is a promise about change, not a judgement of quality. A beta component can be perfectly good and still move under you.
Stable
The props, the token names and the rendered structure will not change except in a major release, and a major is announced twelve weeks ahead with a codemod where one can be written. Twenty-nine of the forty-one components are stable.
Beta
In the package, documented, and usable in production if you accept that props may be renamed in any minor release. Nine components are in beta. Each one names, on its entry, what is still undecided about it.
Deprecated
Still works, still shipped, prints a console warning in development, and has a named release that removes it. Three components are deprecated. None will be removed before 4.0 in March 2027.
Not in Bracket
Charts, rich text editing, maps and calendars. Each has been proposed and declined because maintaining one properly costs more than the two teams asking for it would save. Build them in your own product and take the tokens with you.
What a major release costs you
In 3.0, the last one, a large application took one developer two days, most of it running codemods and looking at the diff. We measured it on three products before we published the number.
Older versions
The previous major is patched for security for twelve months after the new one ships. 2.x is patched until March 2026 and nothing else is fixed in it.
Install
Four steps, about ten minutes
Add the package
npm install @kalder/bracket from the internal registry. Contractors use the public mirror at registry.example.com with the read token their contract includes.
Import the stylesheet once
One import of @kalder/bracket/tokens.css at the root of the application. It defines every custom property and nothing else: no reset, no font loading, no global element rules.
Set the theme on an element
A data-bk-theme attribute of light or dark on the html element, or on any subtree that needs the other one. Nothing reads the system preference for you; that decision belongs to the product.
Use tokens, never values
A hex code, a pixel spacing or a font size written by hand is the one thing that makes the next release painful. The lint rule in @kalder/bracket-lint catches most of them.
Ask
When the documentation does not answer it
Two people maintain Bracket alongside other work. Questions here are answered within two working days; anything urgent is better raised at Thursday office hours, where it is answered in the hour. Bugs belong on the tracker, where the answer stays readable for the next person.
Tell us the version, the component and what you expected instead.
- Monday to Friday
- Answered within two working days
- Thursday office hours
- 15:00 - 16:00