Docs

Every component in Design Schema is specified in one Markdown doc, and these pages render that schema: what a component is for, the props it takes, and the accessibility contract it is generated against. Foundations and Patterns render the prose from the same source — the tokens the components are built from, and the arrangements that span more than one of them.

Install

The components ship on npm for three platforms. Every one of them styles itself from a theme’s tokens, so an app imports the tokens once, at its root, alongside the components.

React

npm install @design-schema/react @design-schema/tokens
import '@design-schema/tokens/calm-precise/css';
import '@design-schema/react/index.css';
import { Button } from '@design-schema/react';

<Button label="Save" onClick={save} />

Lit (web components)

npm install @design-schema/lit @design-schema/tokens
<script type="module">
  import '@design-schema/tokens/calm-precise/css';
  import '@design-schema/lit'; // registers every ds-* element
</script>

<ds-button label="Save"></ds-button>

React Native

npm install @design-schema/rn @design-schema/tokens react-native-svg
import { Button, ThemeProvider } from '@design-schema/rn';

<ThemeProvider>
  <Button label="Save" onPress={save} />
</ThemeProvider>

Components

51 components in 10 phases, grouped in the order the generator composes them.

Foundations

Design tokens

How color, typography, spacing and size are defined once and delivered to every platform.

Layout and rhythm

The tokens that decide space between components and at page level — gutters, sections, gaps, insets and measure — derived from the theme's density and rhythm, and the rules for using them.

Styling and overrides

How generated components are styled, the three layers at which a look can change, and the one per-instance override contract that works identically on web, web components and React Native.

Focus management

The rules for where keyboard focus goes — into an overlay, around inside it, back out again, and along a list — and the two primitives every component uses to obey them, so focus is never trapped by accident or lost by design.

Spec sheet

Every token value and every component style binding for the calm-precise theme, resolved in light and dark, with contrast ratios for the color pairs that matter.

Patterns

Settings page

The first dogfood page — a settings screen built entirely from generated components under the layout rhythm, in both themes, on all three platforms. What it must contain, how it is laid out, and what counts as the components not fitting.

Also in these docs

Naming demo