Skip to main content

Introduction

Welcome to the The Wall documentation!
This design system is a comprehensive guide to creating consistent and cohesive digital experiences across all our products. Whether you're a designer, developer, or product manager, this resource will help you maintain quality and consistency in your work.

A design system is more than just a collection of UI components. It’s a living, breathing framework that encapsulates our brand’s visual language, interaction patterns, and guidelines for creating user interfaces. Our design system provides a shared vocabulary and a set of best practices that ensure our products look and feel consistent across platforms.

Key Elements​

Our design system is composed of several key elements:

  • Tokens: they are a way of abstracting and organizing design decisions into a set of reusable, shareable, and consistent values.
  • Components: Reusable interface elements like buttons, forms, and modals that adhere to our design principles.
  • Icons: they are the visual symbols that convey meaning quickly and intuitively, enhancing user interface clarity and consistency across our products.
  • Guidelines: Best practices for using the components and creating new ones, ensuring they meet our accessibility, responsiveness, and performance standards.
  • Patterns: Solutions to common design challenges, helping to streamline the user experience across different contexts.

Goals​

The primary goals of our design system are:

  • Consistency: Establish and maintain a consistent visual language and user experience across all products.
  • Brand Identity: Ensure that the Design System accurately reflects and upholds the organization's brand identity, including colors, spacings, typography, assets and many other customizable tokens.
  • Reusability: Create reusable components, patterns, and styles that can be easily shared and implemented across different projects.
  • Efficiency: Streamline the design and development process by providing standardized components and guidelines, reducing duplication of effort.
  • Cross-Functional Collaboration: Facilitate collaboration between design and development teams, encouraging a shared understanding and language.
  • Documentation: Provide comprehensive and up-to-date documentation for designers and developers, including guidelines, usage examples, and best practices.
  • Versioning: Implement version control to manage updates and changes to the Design System, allowing for a structured and organized evolution.

Benefits​

  • For Designers: Spend less time reinventing the wheel and more time focusing on creative solutions.
  • For Developers: Use pre-built, well-documented components that ensure a seamless implementation.
  • For Product Managers: Ensure that the products align with the brand’s vision and are delivered faster and more consistently.

Who Should Use It​

This design system is intended for:

  • Designers: To help create consistent and high-quality user interfaces.
  • Developers: To streamline the development process with reusable, well-documented components.
  • Product Managers: To ensure that all products are aligned with our brand’s design principles.
  • QA Teams: To help ensure that the design standards are met in the final product.

How to Use the Design System​

Getting started is easy! Here’s how you can use the design system:

  1. Explore the Components: Browse the available UI components and patterns to see what fits your needs.
  2. Follow the Guidelines: Make sure to adhere to the design principles and accessibility standards.
  3. Contribute: If you need a new component or an update, follow the contribution guidelines to propose changes.

Evolution and Maintenance​

Our design system is a living project. It will evolve as our products grow and our brands identity develops. Regular updates will be made to include new components, guidelines, and best practices.

The design system is maintained by the Design System Team, a cross-functional group of designers, developers, and product managers. Feedback and contributions from all users are encouraged to keep the system relevant and up-to-date.

By adhering to this design system, you’re helping to build a cohesive and user-friendly product experience. We’re excited to see what you create with it!

How to Contribute?​

If you wish to contribute to the-wall, you may start by reading the contributing guide.

Contact Us​

  • General questions or support - Please reach out to the #ask-the-wall Slack channel where The Wall team will support you

  • Issues and Bugs

    • If the bug you found has some complexity, submit an issue to the Github Repository
    • If not, you may submit a Pull Request with a fix

  • New Features

    • For a Major Feature, first submit an issue with the The Wall to the Github Repository and outline your proposal so that it can be discussed. This will also allow us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project
    • Small Features can be crafted and directly submitted as a Pull Request