Foolscap

A design system with components for React, Vue, and Angular.

Made for interface and design-system teams.

Discuss using itDelivered to clients

Overview

Foolscap layers design tokens, CSS, shared interaction logic, and framework adapters. Teams can start with the stylesheet and add accessible components in React, Vue, or Angular as they need them.

What it provides

Tokens and CSS

The visual foundation

Named design tokens, generated CSS variables, and a paper-and-ink style that works on semantic HTML. Override the tokens to theme it.

Interaction core

Shared behaviour

Framework-independent state machines handle keyboard, focus, and accessibility for comboboxes, date pickers, tree views, and other complex widgets.

Framework adapters

React, Vue, Angular

Components, hooks, and composables for each framework, built on the same CSS and behaviour.

Storybook

Inspect every state

Storybook for each framework, with interaction and visual checks.

Built with

  • TypeScript
  • CSS
  • React
  • Vue
  • Angular
  • Storybook

Behaviour is written once and shared, so each framework adapter stays thin and consistent.

Back to all engineering

Use Foolscap in your product

Tell us what you need and where it will run. We will agree scope, integrations, and rollout.

Discuss using it