# Changing UI styles: introduction to the pattern library

The Platform Client uses the Pattern Library to standardize the styles and have them available in a single place that can be edited by frontend developers without advanced knowledge of AngularJS.

The Pattern Library runs as a dependency of the web client, it's included in the package.json file and is just a [regular npm library](https://www.npmjs.com/package/ushahidi-platform-pattern-library). Please note that unless you specifically need to change the layout beyond what's possible in the client's codebase, or want to change styles (such as colors, fonts, etc) the pattern library will **not** need to be setup as a stand alone project.

## Use cases for editing (or not) the pattern library

### Use case: adding a new view to the client

To add new views in the Platform Client, we recommend you first check if you can compose those views with pre-existing patterns from our pattern library.

You can see the available patterns here:

{% embed url="<http://preview.ushahidi.com/platform-pattern-library/master/>" %}

### Use case: changing the color palette

To change the color palette, you will need to modify the pattern library's color variables. The good thing is that all colors are defined here, and you can easily change them and see the results in the patterns before moving forward with applying the changes to the client.

{% embed url="<http://preview.ushahidi.com/platform-pattern-library/master/assets/html/1_basics/>" %}

### Changing other styles like icons, fonts, or adding layouts

When you need completely new layouts with new styles, you will need to add or modify the pattern library.

We recommend you review the different structures in the pattern library before starting:

{% embed url="<http://preview.ushahidi.com/platform-pattern-library/master/index.html>" %}

## Setting up the pattern library for development

Find the setup guide in

{% content-ref url="/pages/-M2-FPe-TR\_GoqJCo86z" %}
[Setting up the Pattern Library for development](/platform-developer-documentation/dev-legacy-v3/development-and-code/setup_alternatives/setting-up-the-pattern-library-for-development.md)
{% endcontent-ref %}

### Working with the pattern library

Continue reading in this chapter to get a full introduction to the pattern library.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ushahidi.com/platform-developer-documentation/dev-legacy-v3/front-end-development/changing-ui-styles-introduction-to-the-pattern-library.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.