This website requires JavaScript to deliver the best possible experience.

The need for modularity

We believe that modularity has become an absolute necessity in the different aspects of the modern world. This certainly applies to the field of web design and development as well.

Following a modular approach and thinking of web pages in terms of reusable components provides great consistency as well as flexiblity for those working on any system and reaps a lot of benefits for the systems themselves.

Why build a design system?

Since we are a foundation company, and we always strive to establish solid systems that are able to stand the test of time; it only made sense that we come up with our very own design system to regulate our internal activities and have every team on the same page, seeing things from the same lens.

In the past, a short conversation could keep and maybe a word document was everything needed to kick out an internal project. But as our team scaled, conversations lost its power and the dots weren’t connected perfectly. Everyone was aware of their part of the job but couldn’t close the circle with one another.

Vision and principles

When working on Base, we wanted to get things back to its origin and use the least possible elements to communicate any message. Base has the following core principles:

Responsive Elements

One of the main highlights of Base is the replacing the idea of media queries with the responsive elements theory, which keeps scalability in check across all the different screen sizes.

Abstracting Everything

In Base we use elements as found in its natural condition without shadows or overdone beautifying.

Bold Typography

We mainly rely on big text sizes when designing and pay attention to spacing for accessibility and readability

Consistent Experience

The code and design elements of Base are created with flexibility in mind to guarantee a unified experience on all devices.

High Flexibility

Flexibility was one of our main concerns as we needed a system that scales with our needs and suits every project so we don’t reinvent the wheel every time.

Prioritizing Functionality

Aesthetics still mattered but when comprised with how things will work, we chose the easiest way not the most beautiful one.

How Base assists the process

It accelerates the design and development process.

It creates a flexible and bold visual language.

It unifies the experience on all devices and platforms.

Notes and disclaimers

We built Base to work with internally in our company, as it fits our bold identity and serves many purposes and goals we have.

This means it may not work for you or you may even find it too different for your taste. Base is Open Source and welcomes your contributions.