WAVE DESIGN SYSTEM

A Wavemaker Library for Easy, Consistent and Fast UI Design & Development

Wave Design System adheres to standard practices of Material 3, with ready-to-use components, themes, and tokens that help you build beautiful web and mobile user interfaces.

Create Responsive, Scalable User Experiences

Global Tokens

Foundational building blocks like color, typography, spacing, and layout ensure design consistency across projects, enabling teams to scale designs effortlessly.

Responsive by Default

Wave’s components are designed to adapt flawlessly across devices, including mobile, tablet, and desktop, ensuring a unified experience for users, regardless of screen size.

Accessible Design

With pre-defined contrast ratios, adaptable text sizes, and accessible interaction states, Wave ensures that designs are inclusive and WCAG-compliant by default.

Interaction Patterns

Built-in interaction states like hover, focus, pressed, and disabled provide a consistent, user-friendly experience, reinforced with smooth transitions and feedback.

Build Modern User Interfaces

Customizable components
Wave Design System offers a robust library of components that can be tailored to fit your brand identity. From buttons and forms to navigation bars, every element is designed to be fully responsive and easily adjustable, ensuring consistency across projects.
Advanced UX guidance
Built with a focus on usability, Wave provides detailed design principles and interaction patterns. These guidelines ensure your interfaces are intuitive, accessible, and optimized for seamless user experiences across devices.
Modern design principles
Inspired by industry leaders like Material Design (Material 3.0), Wave adheres to the latest design standards. It ensures scalable, responsive, and visually appealing designs that align with enterprise needs and modern user expectations.

Build Superfast
With Autocode Plugin

Wave Design system helps you build production-ready UI, and Autocode takes it to the next level, the plugin converts your figma UI directly to an app, complete with all the elements and user interactions, within minutes. Developers can bind APIs inside the WaveMaker studio - a fully functional app is live in no time.

Start Building Now

Figma

Access the complete Wave Design System directly in Figma. With ready-to-use components, themes, and tokens, you can prototype and design faster while ensuring consistency across every screen.

Storybook

Explore our detailed Storybook documentation to learn about every component in the Wave library. From implementation guides to usage tips, you’ll find everything you need to integrate Wave seamlessly into you.

Apps Built on the Wave Design System

Consistent user experiences, across. Explore apps built with the Wave Design system on Wavemaker.
Build Better with Wavemaker
WaveMaker is open-standards, provides a composable architecture, and allows you to deploy in one-click to a cloud of your choice. With a simple developer-seat pricing model, there is no cap on the number of users or apps built on the studio.