ZOO Design System

ZOO Design System

ZOO Design System
Published On
April 24, 2024
Written By
Phoontaric Suriyamanee, Kusalin Kangsanarak

What is ZOO Design System ?

It's an open-source Design System for plugins, products, and digital experiences. This design system consists of design principles and guidelines, created from our design vision, components, design tools and resources, and a vibrant community of contributors. ZOO Design System replaces the old Buffet.js library.

What is a Design System?

A design system is a collection of pre-built, reusable assets like components, patterns that allows its users to build consistent digital experiences faster. By using the pre-built and universal assets of the Design System, the time teams spend designing and building is greatly reduced and users can invest time on high value missions instead of repetitive tasks.

Design System is open-source

Design System is funded and built by Strapi, which means that the primary reason that we built it is to meet the company’s business needs, but we’ve made it open source for anyone to use and contribute back to.

Our approach

Make it consistent for everyone and anyone

The Design System we provide gives the opportunity to anyone to use or anticipate his use of Strapi by providing the right amount of information (documentation, design, code, ...)

Data informs design

Data is our side kick, we are data informed but not data-driven all the time.

Make the default settings smart

Every new feature we do should be easy to understand by default. The default setting should be adaptative, easy-to-use, smart, and efficient for any usecase. And offering plenty of ways to customize any feature.


Making content available for everyone also passes by caring deeply about making content accessible for as many people as possible. A qualitative digital experience should have a great User Experience (UX). This doesn't only include an appealing design and a clear copy but also the fact of being inclusive to everyone.

Accessibility illustration

An inclusive usability

It’s not completely true for now, but it’s an objective we’re aiming for. It’s important that Strapi product and plugins are usable and useful to everyone.

To be inclusive means we must consider accessibility at the core of how we design and develop.

Products and digital experiences must be accessible to everyone, including those with vision, hearing, cognitive, or mobility impairments.

Building experiences for everyone

Using our components is a way to improve accessibility and consistency when building products for Strapi.

Coding standards

To help people relying on assistive technologies, like text-to-speech tools or screen reader, the components use alternative text for assets leading to action or giving information, like links, dropdowns or call-to-actions.


Building accessible and inclusive experiences is a hard task, and making sure we are not unintentionally excluding users from our product is a long road. If we’ve made any mistakes in this style guide, please reach out by creating a GitHub issue and help us make it better.

Join Our Dynamic Team Today

เก็บเกี่ยวประสบการณ์ที่มีค่า และเตรียมตัวให้พร้อมสู่การเป็นมืออาชีพในอนาคต