456

Pink Design

Design. Build. Collaborate.

Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Pink is designed to prioritize collaboration, dev experience, and accessibility.

Get Started

Pen tool

#F02E65 100%

RR


      <td class="table-col" data-title="Name">

        <div class="u-inline-flex u-cross-center u-gap-12">

          <span class="avatar is-color-pink">RR</span>

          <!-- ... -->

        </div>

      </td>

      <!-- ... -->

      <td class="table-col" data-title="Name">

        <div class="u-inline-flex u-cross-center u-gap-12">

          <div class="avatar">

            <img src="/jenny.jpg" alt="JW" />

          </div>

          <!-- ... -->

        </div>

      </td>

$ git commit

Name
RR Ronald Richards [email protected]
Jenny Wilson [email protected]

Design

Design and create simple, consistent and user friendly features when contributing to Appwrite, or use our components for your own products

Fully accessibile
Light and dark mode support
Optimized for Dev tooling

Build

Design system created with developer experience in mind, with support of our internal developer team

Easy to integrate with your preferred framework
Only one CSS file is needed

Getting started guide


      npm install "@appwrite.io/pink"


      import "@appwrite.io/pink";

Collaborate

One (open) source of truth for collaborating with others on Appwrite, or your own products

Documentation and tips on usage of components
Fully open source
Collaborate with us in Discord and GitHub

#F02E65 100%

$ git commit

Try It Out Yourself

Kristin Watson

[email protected]

Articles

View all articles

Join Our Growing Developer Community

Design and develop with us the best developer experience out there!