Overview
An accessible, token-driven component library built on web standards, for designers and developers working from one source.
Design For Humans Components is a library of interface parts (buttons, fields, cards, dialogs, navigation, layouts) written in modern CSS on native HTML. Its tokens drive both the CSS and the Figma variables, so design and code stay in step.
What makes it different
- Accessible first. Every part meets WCAG 2.2 AA, and AAA where it can: 48px touch targets by default, visible focus, intent never shown by colour alone, and native elements that work with a keyboard and a screen reader without extra script.
- Native HTML. Dialogs are
<dialog>, popovers use thepopoverattribute, disclosure is<details>. The library ships no JavaScript of its own. - Few variants, each one meant. Every modifier sets one thing (its size, prominence or intent), and the same names work across every component.
- Responsive without breakpoints where it can. Layouts wrap on their own, type and spacing can grow with the screen or with their container, and compact regions step everything down together.
- One token source. Colours, type and spacing are generated from a theme, checked for contrast and order, and exported to CSS and Figma together.
Four places to look
| Where | For | What it is |
|---|---|---|
| These docs | Using the library | The ethos, how the tokens work, the components, and patterns and guidance. |
| Storybook | Going deep | Every component, variant and state, each checked by axe. |
| Token Designer | Theming | Colour, type and spacing, edited visually with live checks, written to the theme. |
| Figma | Designing | The same tokens as Figma variables and text styles. |
Status
The library is before its first release. Components are being refined one at a time against its principles, and these docs follow the main branch. Sections appear here as they’re written.