Introduction

Gravity is Buildit @ Wipro Digital‘s design system. As such, it strives to provide Buildit staff with all the support and resources they need to create high-quality and consistent user interfaces. We want all our apps, websites and, potentially, collaterol in other media to be instantly recognisable and familiar as Buildit products.

Gravity design system logo

Vision

Gravity aims to continuously keep Buildit at the forefront of design systems.

Beyond “just” being a design system for us to use, Gravity is also a means for Buildit staff and colleagues from the wider Wipro organisation to gain hands-on experience of using, creating and maintaining a design system. This expertise is then transferable to design system projects we do for our clients.

Given that Buildit is a consultancy and not a product company, it is this educational aspect that is Gravity’s primary goal.

Using Gravity

On the Web

Currently, Gravity is tailored to crafting user interfaces for the Web. It provides ready-made CSS, JavaScript and SVG assets that can be integrated directly into websites or web apps. All you need to do is generate the appropriate HTML markup. This pattern library showcases all available UI styles and components that Gravity’s CSS provides.

We strongly advocate “working in the medium” as soon as possible. In other words, the less time spent designing and iterating your ideas outside of an actual web browser, the better. Therefore, we do not currently provide any kind of visual design templates. This is intentional. We want to encourage designers who would otherwise work by themselves in visual design tools to instead collaborate closely with developers and jointly create their product’s UI.

Gravity’s CSS determines most of the visual aesthetics, so you no longer need to. You should instead focus your efforts on the structure of your UI. What is its information architecture? What content does it need to present to users and in what priority order? What constrols do your users need to perform their tasks? Whiteboard sketches and hand-drawn wireframes are perfectly sufficient to explore your ideas and express an initial draft. From there, with the help of a developer if needed, you can produce the corresponding HTML strucutres and let Gravity take care of the rest. Once your draft has come to life in the browser, test it with users (and on various devices), learn and iterate as necessary.

This pattern library gives you a live catalogue of all UI styles and components that Gravity provides for the Web. Explore the “Components” section in the navigation on the left to browse them.

We ❤️ feedback and contributions! Please do not hesitate to get in touch with us if you have any questions, ideas or feedback. For example, in any of these scenarios we want to hear from you

  • A component you need is missing (or even if you’ve made a custom one that you’d like to contribute).
  • An existing component doesn’t quite meet your needs, but could be enhanced or extended so that it does.
  • You’re struggling to get up and running with Gravity in your project.
  • You want a second opinion on your UI design or code.

Other platforms

Gravity does not yet provide designs, code or guidance for non-Web platforms like native iOS or Android, or indeed more exotic platforms like voice assistants or VR/AR. We intend to keep this under review and, if there is sufficient demand, would gladly consider expanding as needed in the future.

That being said, many of our core design tokens and assets (which we like to call Gravity’s “particles”) are platform agnostic and could easily be exported into formats suitable for non-Web platforms. In fact, we already have experimental Objective-C and Swift exports of our design tokens.

If you are interested in experimenting with Gravity on non-Web platforms please get in touch with us for a chat.

Other media

Gravity does not need to be limited to digital UIs. We consider Gravity to also be the custodian of Buildit’s branding. Need the Buildit logo for your presentation deck? An icon for a diagram? Gravity aims to eventually be the single source of truth for all of those things!

After all, if we have the means to give all our UIs a consistent look and feel and to rapidly roll out future updates and improvements to that look and feel, then why shouldn’t we afford the same benfits to other kinds of media?

We’d love to hear your ideas and wishes in this respect, so please get in touch and tell us!