Pink
Pink. Appwrite's official framework agnostic design system 🎨 🩷
Install / Use
/learn @appwrite/PinkREADME
Pink Design is a CSS library designed for building accessible and visually appealing user interfaces. The library is built with a focus on accessibility, ensuring that users of all abilities can easily interact with your web application. Pink Design offers a wide range of classes and components that can be easily integrated into your project. Whether you're building a complex user interface or a simple web app, Pink Design has everything you need to create a polished and professional look.
Getting Started
NPM
Install the CSS library:
npm install "@appwrite.io/pink"
After installing Pink Design as a package, include Pink Design as CSS library by importing it in your JavaScript files.
import "@appwrite.io/pink";
// optionally, add icons
import "@appwrite.io/pink-icons";
CDN
Copy the following code into the <head> section of your HTML file.
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink" />
<!-- optionally, add icons -->
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" />
Accessibility
Our design library is designed to be inclusive, making it easy for everyone to interact with and navigate, regardless of any unique needs they may have. This enhances the user experience for all and aligns with the ethical standards of web development. At Appwrite, we are dedicated to fostering accessibility in all that we do.
We are constantly striving to improve. If you notice any areas where we can enhance accessibility, please do not hesitate to share your feedback and suggestions.
The documentation website for Pink Design has been built with Astro web framework .
Supported Browsers
| Browser | Version | | ------------------ | ------- | | Chrome | >=99 | | Safari | >=15.4 | | Firefox | >=97 | | Opera | >=85 | | Chrome for Android | >=109 | | Safari iOS | >=15.4 | | Samsung Internet | >=18 |
Contributing
All code contributions - including those from people with commit access - must go through a pull request and be approved by a core team member before being merged. This is to ensure a proper review of all the code.
We truly ❤️ pull requests! If you wish to help, you can learn more about how you can contribute to this project in the contribution guide.
Security
For security issues, kindly email us at security@appwrite.io instead of posting a public issue on GitHub.
Follow Us
Join our growing community around the world! See our official Blog. Follow us on Twitter, Facebook Page, Facebook Group, Dev Community or join our live Discord server for more help, ideas, and discussions.
License
This repository is available under the MIT.
Related Skills
diffs
341.8kUse the diffs tool to produce real, shareable diffs (viewer URL, file artifact, or both) instead of manual edit summaries.
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
1.9kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
ui-ux-designer
Use this agent when you need to design, implement, or improve user interface components and user experience flows. Examples include: creating new pages or components, improving existing UI layouts, implementing responsive designs, optimizing user interactions, building forms or dashboards, analyzing existing UI through browser snapshots, or when you need to ensure UI components follow design system standards and shadcn/ui best practices.\n\n<example>\nContext: User needs to create a new dashboard page for team management.\nuser: "I need to create a team management dashboard where users can view team members, invite new members, and manage roles"\nassistant: "I'll use the ui-ux-designer agent to design and implement this dashboard with proper UX considerations, using shadcn/ui components and our design system tokens."\n</example>\n\n<example>\nContext: User wants to improve the user experience of an existing form.\nuser: "The signup form feels clunky and users are dropping off. Can you improve it?"\nassistant: "Let me use the ui-ux-designer agent to analyze the current form UX and implement improvements using our design system and shadcn/ui components."\n</example>\n\n<example>\nContext: User wants to evaluate and improve existing UI.\nuser: "Can you take a look at our pricing page and see how we can make it more appealing and user-friendly?"\nassistant: "I'll use the ui-ux-designer agent to take a snapshot of the current pricing page, analyze the UX against Notion-inspired design principles, and implement improvements using our design tokens."\n</example>
