Building Syllabus as Ruangguru Design System from 0 to 1

Syllabus is a Ruangguru design system for products and digital experiences to build consistency across user experiences. Syllabus was created to solve the problem of inconsistent design elements, which were causing confusion for users and slowed down design also development progress.

Syllabus consists of token libraries that have foundational elements, such as colors, typography, gradients, shadows, and spacing. These elements work together to build components, starting from atoms and building up to molecules, which are then used to create the screens, designs, and flows that we see in user interfaces.

We have 3 main teams that handle three library categories per team, such Foundations, Components, and Assets & Illustrations. As a member of the team that handled Foundations, I was responsible to define the foundation's elements such as color palette, typography, layout, corner radius, shadow, spacing, and design tokens. Besides that, I have to ensure that foundations library is aligned with the other teams' libraries (components and assets library). Throughout the development process, I worked closely with the other teams to ensure consistency across team and to avoid any overlap or confusion.