Foolscap

A consistent visual foundation with portable component behaviour.

Made for interface and design-system teams.

Overview

This engineering project is under active development. The scope below describes its intended design; deployment readiness and supported capabilities must be confirmed for each engagement.

A design system needs to maintain more than a set of colours. Teams also need predictable keyboard behaviour, focus management, consistent component structure, and a way to carry that work across applications using different frameworks.

Foolscap separates those responsibilities into layers. Tokens define the visual language, CSS applies it, interaction machines own behaviour, and framework adapters connect that behaviour to a rendering environment. Applications can adopt the system incrementally and reuse the same foundations across product surfaces.

What it provides

Tokens and CSS

A consistent visual foundation

The token package defines named design values and generated CSS custom properties. The stylesheet supports semantic HTML, layout primitives, and explicit component parts, allowing a team to start with the visual foundation before adopting more involved widgets.

The paper-and-ink aesthetic gives the library a recognisable identity while keeping information prominent. Token overrides let applications adjust the theme through a common vocabulary rather than rewriting every component's styles.

Interaction core

Shared behaviour

Framework-independent machines own state transitions, keyboard interactions, accessibility properties, subscriptions, and cleanup. They expose the information a renderer needs to apply roles, states, event handlers, and focus behaviour.

The library uses different levels of enhancement. Presentational and native controls remain CSS-led; enhanced elements receive a focused behavioural layer; composite widgets use shared machines. That approach gives simple controls a smaller integration burden while giving complex interactions a defined state model.

Framework adapters

Familiar product integration

React, Vue, and Angular adapters bind the common CSS and machines to each framework's component model. Teams receive framework-appropriate components and hooks or composables while keeping the visual and behavioural foundations aligned.

The catalogue includes everyday controls and composite widgets such as selection controls, comboboxes, date pickers, tree views, and navigation patterns. Framework-specific APIs and examples live with each adapter's documentation, allowing teams to evaluate the exact component they need.

Documentation and component demonstrations

Separate Storybook applications cover the three adapter environments. Stories show component states and usage, while interaction and visual checks provide ways to detect changes in behaviour and presentation.

This documentation layer is part of the developer product. A team can inspect a control's states before integrating it and review how the same design language appears in another framework.

Integration example

A product can load the Foolscap stylesheet and use the React adapter's `Card`, `CardBody`, `CardTitle`, and `Button` exports for a consistent content panel. Another application can adopt the same tokens and CSS through Vue components.

For a custom renderer, a developer can use an interaction machine directly: create it, bind its property getters to the element, subscribe to state, and clean it up when the view is removed. Each adoption path builds on a clear layer of the system.

Built with

Baobab built both the visual language and the reusable component architecture. Shared interaction logic reduces framework-specific duplication, while thin adapters preserve familiar integration patterns. The system demonstrates component API design, interaction modelling, design-token tooling, and documentation across multiple framework environments.

Questions

Is this available for deployment?

Deployment readiness has not yet been verified for this catalogue entry. Contact us to discuss current scope, release gates, and your requirements.

Who owns this software?

This is owned engineering work from The Baobab, a brand of Fortezza Nuova Enterprise. Deployment and licensing terms are agreed for the relevant product.

Back to all engineering

Use Foolscap in your product

Discuss the capabilities you need, deployment environment, and integration responsibilities. We will confirm current readiness and agree a scope before committing to a release.

Discuss using it