0.1 alpha

• Design tokens in the format of the W3C Design Tokens Community Group (DTCG), drawn from the Figma file. The build turns them into CSS custom properties, a Tailwind theme, a TypeScript module and JSON. Two themes (light and dark), two densities (comfortable and compact), and type sizes that follow the window's width.
• Foundations: a page for each token group, from color and type to motion, on what the group is for and how to use it.
• Components: buttons, inputs, selects, checkboxes and sliders; cards, alerts, toasts and tooltips; breadcrumbs, tabs, a header, a footer and a sidebar that folds into a column of icons; modals, drawers, dropdowns, popovers, tables and a command palette. Each one is a stylesheet first, with a React wrapper over it.
• One stylesheet, css/simbolik.css, for sites without React, with the fonts (Funnel Display, Geist and Geist Mono) and the Phosphor icons beside it.
• The conformance checker, which reads a project and lists every raw value where a design token belongs.

Each component and foundation carries a Status. Most components start as Candidate (believed complete, may still change); the card, the drawer, the logo, the modal and the skeleton start as Experimental (expect big changes). Of the foundations, typography and radius start as Stable; border width, elevation, focus, opacity, size, spacing and stacking order as Candidate; and blur, breakpoints, color and motion as Experimental. From here, each moves on its own.

Until 1.0, any version can rename or remove things. Its notes list what breaks. The smbk- class names are what a site's markup leans on most, so a renamed class is always named in them.

• The app bar has no in-between form. Wide, it holds its links, search and actions in one row; narrow, it moves them into a menu. On a screen wide enough for the wide form but too narrow for everything in it, they run out of the bar. Until the app bar has a form for this, put data-layout="narrow" on a wrapper around a crowded bar.
• The dropdown always opens downward. With too little room below its opener, part of the panel ends up out of view. The select's list already opens upward when there's more room above, and the dropdown's panel doesn't yet.
• Some color pairs fall short of contrast. A few colors measure below the contrast ratio WCAG asks for against the background they sit on. Text needs 4.5 to 1; the edge or mark that shows a control or its state needs 3 to 1. Some pairs are still to be fixed. Others are kept on purpose, a choice of taste for the system's look. The Contrast section of the color page lists every pair, what it measures and what it needs.

The code is on GitHub, https://github.com/simbolik-lab/simbolik-design-system (opens in a new tab), tagged v0.1.0-alpha. Clone it, then npm ci, npm run css:bundle and npm run release:bundle write a Release bundle to release/0.1.0-alpha/. It's one folder with what a site builds with and every license, and the README says how to use each part.

The Figma file the design is drawn in is on Figma Community, https://www.figma.com/community/file/1688324308358870630 (opens in a new tab), where anyone can open it and copy it.

The code is under the MIT License and the Figma file under CC BY 4.0. The Licenses page says what each one asks.