Skip to Content
Quality AssuranceUIUX StandardsVisual DesignColor

Color

Purpose

Establish a consistent color scheme to enhance user experience, reinforce brand identity and train users to recognize and understand the interface.

Colors

  • dark-mode: #0f172a : Dark Background #0f172a

  • phpc-blue-border: #00719a : Border #00719a

  • blue-phpr: #3549ff : ?? #3549FF

  • phpc-blue: #01bbff : Button Light Mode #01bbff

  • phpc-blue-dark: #0083b4 : Button Dark Mode #0083b4

  • phpc-add-light: #16a34a : Light Button to add #16A34A

  • phpc-add-dark: #15803d : Dark Button to add #15803D

  • phpc-edit-light: #ed9c28 : Light Button to edit #ed9c28

  • phpc-edit-dark: #b9730f : Dark Button to edit #b9730f

  • phpc-delete-light: #c43737 : Light Button to delete #c43737

  • phpc-delete-dark: #9c2828 : Dark Button to delete #9c2828

Change

The color are use in the bundle components to make the UI more consistent. They are defined in the tailwind.config.ts file.1

tailwind.config.ts
  theme: {
    extend: {
      colors: {
        'dark-mode': '#0f172a',
        'phpc-blue-border': '#00719a',
        'blue-phpr': '#3549ff',
        'phpc-blue': '#01bbff',
        'phpc-blue-dark': '#0083b4',
        'phpc-add-light': '#16a34a',
        'phpc-add-dark': '#15803d',
        'phpc-edit-light': '#ed9c28',
        'phpc-edit-dark': '#b9730f',
        'phpc-delete-light': '#c43737',
        'phpc-delete-dark': '#9c2828'
      }
    }
  }

If the bundle components setup is done correctly, you can use the components with the right color in your project. To do the setup follow this.

<Button /> // The button will be in the right color

You can’t use the colors directly in another project because Tailwind doesn’t share color settings between projects. If it’s absolutely necessary, you can copy the color definitions into your own tailwind.config.ts file. However, we prefer to avoid that. Instead, consider creating a component in the shared bundle that fits your needs.

To know how we use it go see our TailwindCSS doc.

Footnotes

  1. To learn more about tailwind, visit the Tailwind CSS documentation on custom color .
    ↩

Last updated on
Visual DesignLayout