Introduction
What the Simbolik Design System is, what it holds, and where to start.
The Simbolik Design System is a set of design tokens, CSS components and React components for building websites and web apps. The design is drawn in Figma, and this is the same design as code. It's for anyone building for the web, in plain HTML or in React, who wants a finished system to start from, and it's free to use, in paid work too. simbolik.ai (opens in a new tab) is built on it, and so is Torus (opens in a new tab), a wiki for the game X4: Foundations.
Five ideas
- CSS first. A component is a set of classes in one stylesheet. A plain HTML page gets a working component by writing its markup; the React components add props and behavior on top of the same classes.
- One home for every value. Every color, size, typeface and timing is a design token. Components read the tokens and write no value of their own, so a change to a token reaches every component.
- Nothing copied by hand. This site draws the real components and makes every piece of code it shows from the source, so the code you copy is the code that ships.
- Checked, not trusted. A command-line checker reads your site and lists every value written by hand and every component rebuilt by hand.
- Read by people and by AI agents. Every page comes as markdown too, and every component lists its choices in a manifest a program can read.
What's in it
- Design tokens in the format of the W3C Design Tokens Community Group (DTCG), built into CSS custom properties, a Tailwind theme, a TypeScript module and JSON. The Foundations pages list them.
- 110 components, each a set of
smbk-classes, in one stylesheet with the design tokens. - React components for each of them, written in TypeScript for React 19. Each sets the classes and adds what the component does.
- The Showroom, this site: every foundation and component with a live preview, its code and the tokens it reads, and blocks, ready-made arrangements of components to copy.
- The conformance checker, which reads a site built on the system and reports what strays from it.
- The Figma file, where the design is drawn, on Figma Community (opens in a new tab) under CC BY 4.0.
This is version 0.2.2 alpha. Version and Status says what the number promises and how ready each piece is.
Next steps
- Quick start: a page drawn with the design system, in four steps.
- Foundations: the token groups every component is built from, each with its tokens.
- Components: every component, with a live preview and its code.
- Blocks: ready-made arrangements of components, such as a strip of stats, with their code to copy.
- Releases: what each version holds, what breaks, and what's known to be missing.
- Licenses: what each part is under, and how to credit the Figma file. The licenses cover the design system, not the brands, so replace the simbolik logo with your own before you ship.
- The code on GitHub (opens in a new tab): the repository, with the design tokens, every component and the checker.