Tenet UI · React design system
Design decisions, shipped as code.
Semantic design tokens, accessible React components and an icon set, in one npm package with one stylesheet. Warm paper, ink and a single clay accent.
Iowan Old StyleA serif for display, a humanist sans for reading, a mono for code.
- Clay
- Olive
- Ochre
- Brick
- Ink
At a glance
- components
- 41
- design tokens in three tiers
- 104
- icons
- 80
- themes, light and dark
- 2
The system, layer by layer
The site is organised the way the system is built: foundations first, then the components made from them, the patterns that combine those, and the rules that hold across all of it.
- 01FoundationsThe decisions every component inherits, and the tokens that carry them into code.Color, Typography, Layout, Iconography, Motion, Design tokens, Theming, Token reference, Icon gallery
- 02ComponentsEach one documented from its TypeScript types, its usage guidelines and its Storybook stories, rendered live.Accordion, Avatar, Badge, Banner, Breadcrumbs, Button and 35 more
- 03PatternsComponents combined for recurring jobs.Forms, Feedback, Data display
- 04GuidelinesRules that apply across every layer, with WCAG 2.2 AA as the accessibility target.Accessibility, Content
- 05ReleasesWhat each version and component status promises, the deprecation window, and a migration guide for every minor that removes something.Versioning, Migrating to 0.5, Changelog
Working with it
One package, one stylesheet, one attribute for the theme.
Install and import
Components come from tenet-ui, icons from tenet-ui/icons. Import tenet-ui/styles.css once at the app root.
Theme with tokens
Set data-color-mode="light" or "dark" on the root element. Semantic tokens swap their values; their names never change.
Theming and the token reference
Read by agents
This site publishes llms.txt, llms-full.txt and llms-small.txt. Every page carries a last-updated date and a content-hash meta tag.
Every page of this site is generated from the tenet-ui repository at build time. tenet-ui@0.5.0