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-30
--color-neutral-50
--color-neutral-70
--color-neutral-100
--color-neutral-120
--color-neutral-150
--color-neutral-200
--color-neutral-300
--color-neutral-400
--color-neutral-500

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