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.

Header

Pen tool
#F02E65 100%
RR
JW
<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 ronald@appwrite.io
JW
Jenny Wilson jenny@appwrite.io

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
npm install @appwrite.io/pink
import "@appwrite.io/pink";
Angular logo
Vue Logo
React Logo
Solid Logo
Svelte Logo

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
Smiling avatar
Smiling avatar
#F02E65 100%
$ git commit

Try It Out Yourself

Kristin Watson

Kristin Watson

kristin.watson@appwrite.io

Articles

View all articles

Join Our Growing Developer Community

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