Introducing Reapit Elements

18 February 2022 48938 Views

Reapit Elements is an open-source, cross-platform design system that gives designers and developers a framework to quickly create responsive, device-agnostic, and user-friendly apps for the Reapit AppMarket.

The system consists of working code, design tools and resources, human interface guidelines and a publishing process for community contributors.

An integral part of our design system is its design language, which is intended to help understand how to use the components and styles together to create a consistent user interface across our platform and products, as well as to streamline collaboration between designers and developers, and transform design patterns into code— with well-defined and reusable components.

Elements of our design system include:

1. Layouts and Grids: A responsive, mobile first framework for laying out pages at any browser resolution, with multi-level navigation to transition between views

2. Visual Language: Designed to present data, application features and calls-to-action in a way that is engaging, attractive, and clear to the user

3. UI Elements: Based on Atomic design principles, each element has been designed to work as a building block, composable in a modern component-based architecture

4. Breakpoint System: Each breakpoint range determines the number of columns, and recommended margins and gutters for each display size.

It's easy to get started using our interactive UI component explorer, allowing for reuse and visual testing of our design system and its individual atomic components without needing to fuss with data, APIs, or business logic.

When you're ready to start prototyping, our Create-React-App template can get you up and running in seconds with a scaffolded app that includes the Reapit Elements modules with examples of suggested layouts for lists, tables and forms; pre-authenticated against our Platform API using Reapit Connect and Connect Session.

For developers not working with React, Elements can be imported as a stylesheet and semantic classes added to any markup language, achieving the same results in any stack. The component explorer gives rendered HTML markup examples for each module to make this possible.

Everything in our design system — from colour and type to interaction and language — is built to be compliant with industry standards, effortlessly scaling across platforms for the widest audience possible: which is why hundreds of developers, prop-techs, and customers worldwide are using our design system and its reusable components and patterns to build AppMarket and enterprise apps quickly and at scale, help product teams work more efficiently, and make Reapit’s applications more cohesive. We can't wait to see what you build!

 

Find out how easy it is for developers to register to build an app for the Reapit AppMarket on our Foundations for Developers page.