Kristin Watson
kristin.watson@appwrite.io
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
#F02E65 100%
RR
<td class="table-col" data-title="Name"> <div class="u-inline-flex u-cross-center u-gap-12"> <span class="avatar">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="" 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";
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
<article class="card u-text-center">
<img
class="avatar is-size-x-large u-margin-inline-auto"
src="https://source.unsplash.com/LaK153ghdig/132x132"
alt="Kristin Watson"
width="66"
height="66"
/>
<h3 class="body-text-2 u-margin-block-start-16">
Kristin Watson
</h3>
<p class="u-margin-block-start-4 u-color-text-gray">
kristin.watson@appwrite.io
</p>
<button
class="button u-margin-inline-auto u-margin-block-start-24"
>
<span class="text">Edit profile</span>
</button>
</article>
Articles
-
Announcing Pink Design
Building software is fun. Building open source software is even better. At Appwrite, open source is at the core of everything we do...
3 min read -
Getting Started with Pink Design
Pink Design is Appwrite's Open Source design system for building consistent and reusable user interfaces...
2 min read -
CSS Layers for CSS Resets
I have always been one of those people who preferred the aggressive CSS reset methods. These methods delete most of the default styles of the browser...
7 min read
Join Our Growing Developer Community
Design and develop with us the best developer experience out there!
