oneSlash Design System

oneSlash is my own open-source React component library, with a documentation site at designsystem.oneslash.io. Every time I built a new app, I was reimplementing the same components from scratch: buttons, navigation, and form fields, all over again.

Decisions

One library for every product. Instead of rebuilding components for each app, I created oneSlash, a React-based component library that keeps everything consistent across my products.

Built for other people too. I built it for my apps, but I wanted others to use it, so the library is open source and I created a documentation site for anyone building with it.

Constraints are the point. Building a design system from scratch taught me that the real value is not in the components but in the constraints they enforce, one source of truth that every product follows.

Outcome

Scindo, Commentify, both its marketing site and its app, and this portfolio run on oneSlash. The shared foundation cut iteration time and kept everything visually consistent without extra effort. I created the library and maintain it at oneSlash, my side venture since 2024, where I work across design, frontend, and backend.

Screens

The documentation site's getting-started guide, with design tokens for typography, colors, and spacing and the component list in its navigation. Then the products running on the library: the Commentify marketing site, the Commentify app, and this portfolio.