Safa Design System
A token-first design system and React component library that keeps brand identity consistent across every app I build.
Inspiration
The name comes from صفا (Safa) - Arabic for clarity, purity, serenity. It's the feeling I wanted every interface built on this system to have: calm, uncluttered, and easy to trust. That drew me to use an earthy palette.
Practically, Safa started because I wanted a single, reusable foundation I could drop into any app so I could focus on the actual problem I was solving instead of re-inventing the design.
Core Purpose
Safa is token-first: plain CSS variables are the single source of truth, and Tailwind v4, React, and (eventually) React Native all consume the same tokens, so the brand stays identical everywhere it's used.
It's split into a few focused packages:
@safa/tokensfor the design tokens@safa/reactfor the component library@safa/utilsfor shared helpers- Storybook for visual ease and documentation
The system aims to:
- Keep every product visually and behaviourally consistent
- Speed up prototyping so ideas can be built and tested faster
- Cut down on duplicated UI work across projects
- Stay accessible by default, not as an afterthought
The Design Challenge
The main challenge was creating a scalable foundation that could evolve without introducing inconsistency across projects.
One key challenge was designing a token architecture that supported scalability and easy brand evolution. Tokens are organised into three tiers - primitives, semantic, and component - with components only referencing semantic tokens rather than raw values. This creates a single source of truth, allowing future brand updates to be made centrally without requiring changes across individual components.
Another challenge was building accessible interactive components without relying on a headless UI library. Components such as Modal, Select, and Tabs required careful consideration around focus management, keyboard navigation, and screen reader behaviour. Token sets are also validated against AA colour contrast compliance as part of the development workflow.
The overall goal was to create a system with enough structure to encourage consistency, while remaining simple and intuitive to use when building future applications.
Current & Future Development
Safa is in active use across my own projects and is still growing. Planned work includes:
- expanding the component library
- adding more interaction patterns and templates
- building out React Native support so the same tokens can drive native apps too