# TPW Style Guide

Official City Colors

| Link                                        | Hex Code  | Swatch                                                                                                                                                                                                                                                                                     | Color Name            |
| ------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- |
| [#44499C](https://www.colorhexa.com/44499c) | `#44499C` | <div><figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2FfwJICSt2F8Q56YZpuxQr%2Fimage.png?alt=media&#x26;token=0214e6a9-2fb5-4585-a52e-c4ba550b6fc0" alt=""><figcaption></figcaption></figure></div> | Bluebonnet Blue       |
| [#22254E](https://www.colorhexa.com/22254E) | `#22254E` | <div><figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2FnhO7HaCod4TCESAgkwic%2Fimage.png?alt=media&#x26;token=7742fd0b-1c7d-4816-8a65-602415ae42de" alt=""><figcaption></figcaption></figure></div> | Bluebonnet Blue, Dark |
| [#f7f6f5](https://www.colorhexa.com/f7f6f5) | `#f7f6f5` | <div><figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2F4ZiQkIOoAigW5BKgFmVC%2Fimage.png?alt=media&#x26;token=95161b7b-31d1-47a6-b7a4-d4b419840383" alt=""><figcaption></figcaption></figure></div> | <p>Faded              |
| <br>White</p>                               |           |                                                                                                                                                                                                                                                                                            |                       |
| [#009F4D](https://www.colorhexa.com/009F4D) | `#009F4D` | <div><figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2F4KN91icDKQIRFJXuq40B%2Fimage.png?alt=media&#x26;token=d037cd56-0898-4a03-a14f-8f93d4aa1058" alt=""><figcaption></figcaption></figure></div> | Hill Country Green    |
| [#008743](https://www.colorhexa.com/008743) | `#008743` | <div><figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2FVsCuMzIAIU9cseDKTq38%2Fimage.png?alt=media&#x26;token=bf3ff700-ea09-423c-9130-cdedbc268ff6" alt=""><figcaption></figcaption></figure></div> | <p>Compliant          |
| <br>Green</p>                               |           |                                                                                                                                                                                                                                                                                            |                       |
| [#005027](https://www.colorhexa.com/005027) | `#005027` | <div><figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2FhQpSlJF98dAFjkY9Tu39%2Fimage.png?alt=media&#x26;token=96a6a81e-7c77-48e4-bc63-263e977f35bf" alt=""><figcaption></figcaption></figure></div> | <p>Hill Country       |
| <br>Green, Dark</p>                         |           |                                                                                                                                                                                                                                                                                            |                       |
| [#dcf2fd](https://www.colorhexa.com/dcf2fd) | `#dcf2fd` | ![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2FYj8rFkrgRiRvJlhaBLix%2Fimage.png?alt=media\&token=0c7f5f5c-47b3-49ba-b259-5795ee0611a6)                                                                        | <p>Bluebonnet         |
| <br>Blue, Light</p>                         |           |                                                                                                                                                                                                                                                                                            |                       |
| [#dff0e3](https://www.colorhexa.com/dff0e3) | `#dff0e3` | <div><figure><img src="https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LzNSSXajDFpzOv2IhIv%2Fuploads%2FLoWJv05yInMjZG4QJZE8%2Fimage.png?alt=media&#x26;token=7da1997d-c2e4-47c1-b42a-9466dfde168b" alt=""><figcaption></figcaption></figure></div> | <p>Hill Country       |
| <br>Green, Light</p>                        |           |                                                                                                                                                                                                                                                                                            |                       |

## New Knack App Design Settings

{% tabs %}
{% tab title="Look & Feel" %}

### Page Layout

* Choices: Full Width - Max Width
  * Preferred: Full Width

### Text

* Default
* Link Color: `#44499C`

### Buttons

* Fill Color: `#008743` - Green
* Text Color: `#f7f6f5`  - White

### Notifications

* Text Color: `#f7f6f5`  - White
* Background Color: `#2f96b4` - Default light blue
  {% endtab %}

{% tab title="Header & Page Menu" %}

### Header

* Background Color: `#22254E`- Dark Blue
* Options
  * None

### Layout

* Page Menu Position - Below
* Page Menu Alignment - Left
* Title & Logo Alignment - Left

### Title

* Display Header Title (only until banner is ready)
* Size: L
* Text Color: `#f7f6f5`  - White

### Logo

* Icon Type - (Icon choice)
* Size: M
* Text Color: `#f7f6f5`  - White

### Page Menu

* Display Page Menu - enabled
* Page Menu Options - \[x] Only show links user has access to
* Format
  * Text
  * Button
  * Tabs (by default)
  * Size: L
  * Text Color: `#f7f6f5`  - White
  * Fill Color: \[x] Use the default link color
  * Active Link - Text Color: `#f7f6f5`  - White
  * Active Link - Fill Color: `#009F4D` - Green&#x20;

### Page Menu - Dropdown

* Links - Text Color: `#f7f6f5`  - White
* Links - Background Color: `#f7f6f5`  - White
* Active Link - Text Color: Same as text color
* Active Link - Background Color: `#009F4D` - Green

### Mobile Menu

* Mobile Menu Toggle Color: `#FF8F00` - Orange
* Links - Text Color: `#22254E` - Dark Blue
* Links - Background Color: `#009F4D` - Green
* Active Link - Text Color: `#f7f6f5`  - White
* Active Link - Fill Color: `#009F4D` - Green
  {% endtab %}

{% tab title="View Links" %}

### Page Links

* Style
  * Fill (Preferred)
  * Outline
  * Text&#x20;
  * Legacy&#x20;
* Size: M
* Text Color: `#f7f6f5`  - White
* Fill Color: `#22254E`- Dark Blue
* Text Options - Uppercase

### Action Links

Style

* Fill (Preferred)
* Outline
* Text&#x20;
* Legacy&#x20;
* Size: M
* Text Color: `#f7f6f5`  - White
* Fill Color: `#22254E`- Dark Blue
* Text Options - Uppercase

### Delete Links

* Legacy
  {% endtab %}
  {% endtabs %}