Skip to main content

Design

The Design library includes themeable user interface components, design tokens, and styling utilities. It is written in Sass and TypeScript with React.

Status: Draft

Getting started

Prerequisites: Node or Bun

Install as dev dependency.

npm install -D @tangible/design

Sass

@use "@tangible/design";

TypeScript

import * as design from '@tangible/design'

Goals

Generic

Provide building blocks for design systems and themes.

HTML elements and React components are styled using a shared set of tokens, which can have variants and themes. Multiple themes can be combined on the same page.

Accessible by default: keyboard navigation, screen reader support.

Modular

Load only the features you use. Ideally the library core defines token collections in JSON; generates Sass variables, functions, mixins, placeholders; then produce only the CSS variables and rules as needed.

CSS classes and custom properties are prefixed to support embedded context such as WordPress frontend and admin.

Portable

Embrace the Design Tokens standard format (JSON) being developed by the W3C Community Group. This way shared values can be created and used across platforms, languages, and design tools.