Getting Started with Pink Design

Pink Design is Appwrite’s Open Source design system for building consistent and reusable user interfaces.

This design system was developed with Appwrite’s console in mind, with a particular focus on accessibility and usability, without giving up on style! ;)

Pink Design is versatile in its application. It can be easily integrated with popular frameworks such as React, Svelte, Angular, or Vue or used in conjunction with standard HTML and CSS.

You can use Pink Design in your personal projects or contribute to its development and help us improve Appwrite.

🎨 How do I get Pink Design?

There are two ways to add Pink Design to your project:

By linking the stylesheet directly in your HTML file, like so:

<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink" />
<!-- optionally, add icons -->
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" />

Or by installing it through npm and importing it in your project’s JavaScript file, as follows:

npm install @appwrite.io/pink

and then by importing it like this:

import "@appwrite.io/pink/dist/pink.css";

// optionally, add icons
import "@appwrite.io/pink-icons";

And voilà, once you’ve completed either of these steps, you can start using Pink Design’s UI elements and components!

Make sure to check the Getting Started guide for more information 😊

⌨️ It’s coding time

Pink Design provides many pre-designed UI elements and components, such as buttons, inputs, cards, and more. You can easily use them by adding the corresponding classes to your HTML.

<button class="button">
  <span class="text">Hello world</span>
</button>

Easy as that! 🔥

🏁 Conclusion

And that’s all it takes to add Pink Design to your project. You can view the following resources as well if you want to explore Pink Design further:

Pink Design GitHub

Appwrite Discord