Colors
Color helps us create a consistent brand identity across our products. Shades selected in Pink Design maintain a AA accessibility level.
Usage
All of our colors are available as CSS variables. The CSS variables represent the HSL values, for example, --color-primary-100
is 343, 87%, 56%
. Colors can be used as follows:
<style>
div {
color: hsl(var(--color-primary-100));
/* To control opacity: */
color: hsl(var(--color-primary-100) / 0.5);
}
</style>
Brand
Pink Design’s expanded brand color palette contains 3 shades. This is our primary color palette used to indicate primary actions.
--color-primary-100--color-primary-200--color-primary-300
Neutrals
Pink Design’s neutral palette is used for both light and dark mode. Neutrals are used mostly for background colors, text, and seperators.
--color-neutral-0--color-neutral-5--color-neutral-10--color-neutral-15--color-neutral-20--color-neutral-50--color-neutral-60--color-neutral-70--color-neutral-80--color-neutral-85--color-neutral-90--color-neutral-100--color-neutral-105
System Colors
In the Appwrite console, we use 4 system colors:
Type | |
---|---|
Information | Blue often used for informative alerts and ‘selected’ mode in selectors. |
Success | Green often used for success alerts. |
Warning | Orange often used for warning alerts and modals. |
Error | Red often used for danger/error alerts. |
--color-information-10--color-information-50--color-information-100--color-information-120--color-information-200
--color-success-10--color-success-50--color-success-100--color-success-120--color-success-200
--color-warning-10--color-warning-50--color-warning-100--color-warning-120--color-warning-200
--color-danger-10--color-danger-50--color-danger-100--color-danger-120--color-danger-200
Additional Colors
In the Appwrite console, we use the colors below in specific components, such as avatars and code snippets.
--color-blue-100
--color-green-100
--color-orange-100
--color-red-100
--color-purple-100
--color-pink-100
Special Colors
--color-text-disabled--color-text-info--color-text-danger--color-text-warning--color-text-success
--color-border