WonsildFoundation

A personal design system for starting web apps with the type, spacing and everyday controls already considered. Styled React components, shared layout rules and two visual styles, delivered as a shadcn registry.

The system’s own landing page, built with its shared components.

A starting point for my own apps.

I built WonsildFoundation because I wanted a consistent starting point for my own apps. It brings together styled React components, shared layout rules and a shadcn registry, so useful design decisions carry into the next project instead of being made again.

Each project gets its own copy. A font, colour or component can change for that app without changing the original foundation.

Rules that come with every new app.

Typography, colour and spacing are defined once and shared by every component. Spacing uses five named roles, from 8 px between a label and its field to 64 px between sections: closer within a group, more space between groups.

Editorial typography sample beside five spacing roles: label, related, group, region and section.

Shared typography and spacing relationships give new screens a consistent starting point.

Controls, and a screen built from them.

Buttons and form fields showing default, invalid and disabled states in the Editorial style.

Primary, secondary and disabled actions, alongside helper text and validation states.

Controlseleven

Button, input, select, switch, slider, tabs, dialog, alert, badge, label and table.

Page pieces

Layout primitives, a page header, a text field with its label and helper text, an empty state, and a copyable command.

Example screen

A project list with search, a selected row and an editing form, composed only from the parts above. It uses demo data that resets when the page reloads; it is an example, not a product.

A searchable project list with a selected row and a project-details form with save and archive actions.

A project workspace composed from the system, using session-only demo data.

Two styles, light and dark.

Editorial uses paper tones and a soft olive accent. Stone uses warm neutrals and a serif pairing. Both use the same components and both work in light and dark mode.

WonsildFoundation landing page in Stone, with serif headings, warm neutral surfaces and a yellow accent. — Stone changes the typography and palette while keeping the same components.

WonsildFoundation landing page in dark mode, with pale text, charcoal surfaces and an olive sample. — The Editorial palette also has a dedicated dark theme.

Three ways to start.

Template

A new app that starts with the foundation already in place.

Full registry

Copy the components into an existing app through shadcn.

Theme only

Just the theme, without the components, for an app that already has its own.

Updates

A project keeps its own copy, so changes to the foundation do not reach existing projects on their own. Updates are taken in deliberately.

Availability

The live demo shows the landing page, the component reference and both styles. The source and install instructions are in the GitHub repository. This page describes version 0.5.1.

A starting point for my own apps.

Rules that come with every new app.

Controls, and a screen built from them.

Two styles, light and dark.

Three ways to start.

Availability

Built with