Symbols of Single Source
We’re a small team from Georgia making libraries that create an ecosystem of rapid-development tools in Javascript. Our job is to contribute to DOM rendering framework, CSS methodology, Design System, and UIkit.
Our platform consists of 3 steps:
1. Design System - defining your brand guidelines
2. UIKit - a marketplace of reusable UI components adjusting your design system
3. The Platform - to manage, test, and modify everything in a shared space
It covers:
- Syncing design and code processes
- Guidelines of making scalable and accessible UI
- UI automation and integrations
- Low-code environment and no-code online editor
Usually, it’s handled by teams hired by large companies. Small and mid-sized enterprises can’t afford such specialized grouping. This process involves the design, code, and synchronization, but we try to unify it in a single flow. We understand the complexity of creating and maintaining a Design System, CSS, and UIkit - it is time-consuming, high cost, and still challenging to get the desired result. Adjusting current frameworks is usually complex and takes one more layer of a learning curve, lack of reusability, scalability, and personalization.
On the other hand, we think the design system can’t be a single source if we define it in two different places - design and code. When the Design System does not consider coding approaches, it makes systematization impossible. Suppose design tools are the space for its definition - how can we calculate proper measurements across devices, especially computable units (em, vw, etc.) in the Sketch, Figma, or XD?
So, we decided to deep dive to make the system that would bring it to the surface. We discovered a new way of a Design System that gets synchronized with CSS structure. We approach that by defining the same structure to both sides. We created the intermediary library to talk to both - design files and the DOM in JSON language.
We default our system to `em` units to make it more dynamic and scalable, meaning we can transform any component in size and space without breaking proportions (https://cln.sh/lnhpvy). It sets up some guidelines that do not really limit and still give us infinite variations per se (https://scaling.symbols.app/).
It will be affordable for everyone, including individual entrepreneurs and professionals. For us, documentation is for ones who want to dig deeper; for others, let’s make the process simple. It provides a testing environment for components to check them in different users’ preferences, including dark and light modes and responsive breakpoints. The platform also provides GUI to customize the Design System and components.
We have a monorepo setup, and each component has its own versioning, which can be imported individually or selectively. Your changes and saved components will bundle up in a single NPM package.
Simply enjoy the process of editing!
We have the first demo at the end of November. We’ll open our design system and components for invited users when we launch. Later - to everyone. You can check it out on GitHub, use it, and engage in discussions.
Meanwhile, we launched the waitlist campaign to get early stats about your needs and preferences; we’ll also use them for your customized invitation.
To get an invitation, sign up for the waitlist at https://go.symbo.ls/signup.
More in-depth post on Medium: https://medium.symbols.blog/symbols-of-single-source-4a90c56e13d1