# Brand Assets & Guidelines

## Visual Identity 

StayOnHire uses a high-visibility, industrial-professional aesthetic. The goal is to blend the reliability of the construction sector with the clean efficiency of a modern SaaS platform.

StayOnHire positions itself as a modern, efficiency-driven partner for the construction and equipment rental industry. The brand identity balances technological innovation (bright, active colors) with industrial reliability (dark, grounded foundations). The overall aesthetic is "Clean SaaS" — minimizing clutter to focus on data and action.

## Logos

{% hint style="info" %}
**Usage guidelines - please read**

When applying the StayOnHire logo please follow these simple rules:

* Stick to StayOnhire brand colors
* Scale the logo uniformly
* Ensure the logo is legible (re. size and surrounding space)
* Don't skew or rotate the logo
  {% endhint %}

### Wordmark

Use the logos with green whenever possible. Use the other logos only when background colors or patterns would interfere with the full color primary logo.

{% tabs %}
{% tab title="GREEN + WHITE " %}

<figure><img src="/files/COCThi1ViNuUt8R79Tux" alt=""><figcaption><p>Primary Brand</p></figcaption></figure>
{% endtab %}

{% tab title="GREEN + BLACK" %}

<figure><img src="/files/anMvmD8KBKaQalCViSIg" alt=""><figcaption><p>Primary Brand</p></figcaption></figure>
{% endtab %}

{% tab title="WHITE" %}

<figure><img src="/files/shJHh58g5mZmwhHYmGCi" alt=""><figcaption><p>Primary Brand</p></figcaption></figure>
{% endtab %}

{% tab title="BLACK" %}

<figure><img src="/files/CAM7WZWrlKBFUrWZxoi0" alt=""><figcaption><p>Primary Brand</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="GREEN + WHITE " %}

<figure><img src="/files/Hj5aGl7RoJe0kEt16mxx" alt="" width="360"><figcaption><p>Secondary Sub Brand / Feature</p></figcaption></figure>
{% endtab %}

{% tab title="GREEN + BLACK" %}

<figure><img src="/files/9Rr3jF6TsvPpJi1K4lew" alt="" width="360"><figcaption><p>Secondary Sub Brand / Feature</p></figcaption></figure>
{% endtab %}
{% endtabs %}

### Mark

Use these logos only when background colors or patterns would interfere with the full color primary logo.

{% tabs %}
{% tab title="GREEN + WHITE " %}

<div align="center"><figure><img src="/files/7shwdteT4TShno2D9ODF" alt="" width="128"><figcaption><p>StayOnHire Office</p></figcaption></figure></div>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="GREEN + WHITE " %}

<figure><img src="/files/hfwTA74MFRWWsmNxKaIE" alt="" width="128"><figcaption><p>Field Actions</p></figcaption></figure>
{% endtab %}
{% endtabs %}

### Icon

Use these logos only when background colors or patterns would interfere with the full color primary logo or when you will be providing the cropping.

{% tabs %}
{% tab title="GREEN + WHITE " %}

<figure><img src="/files/c6LfdQXmt9btfNo6d7VR" alt="" width="128"><figcaption><p>StayOnHire Office</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="GREEN + WHITE " %}

<figure><img src="/files/LnMWgjXhLNyGE3sNKsAz" alt="" width="128"><figcaption><p>Field Actions</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="GRADIENT" %}

* Acheived via a linear gradient from the top-right to the bottom-left'
* \#48BE14 - 100% opacity - 25% from the bottom left
* \#A8DC19 - 100% opacity - 100% top right

<figure><img src="/files/51dcc8TVzaiu0rCgux7d" alt=""><figcaption><p>Visualisation of how gradient is achieved</p></figcaption></figure>

<figure><img src="/files/NY6VoU4D6NDG68ljs28F" alt="" width="384"><figcaption><p>Download as SVG</p></figcaption></figure>
{% endtab %}
{% endtabs %}

### Splash Background Vector

Use this vector when scaling splash screens as the logo background. This contrast compliments the green, white and main user interface elements of StayOnHire's apps.

{% tabs fullWidth="false" %}
{% tab title="SPLASH VECTOR" %}

<div align="center"><figure><img src="/files/DfKhUEO2KJch5LLcccxm" alt="" width="375"><figcaption><p>Contrast white, green and StayOnHire's user interface</p></figcaption></figure></div>
{% endtab %}

{% tab title="PORTRAIT EXAMPLE" %}

<figure><img src="/files/EuS1Tm2rNkWB4HkkI3PA" alt="" width="375"><figcaption><p>Portait mobile device</p></figcaption></figure>
{% endtab %}

{% tab title="LANDSCAPE EXAMPLE" %}

<figure><img src="/files/Ff12PIDl0a7OhKB81Dhk" alt=""><figcaption><p>Landscape mobile device</p></figcaption></figure>
{% endtab %}
{% endtabs %}

## Colours

#### Main palette

**Website & Marketing (The "Brand" Face)**&#x20;

The marketing identity is designed to be high-energy and authoritative, utilizing a vibrant Action Green hero section to signify growth and operational efficiency.&#x20;

We prioritizes high-contrast typography and clear call-to-actions, such as the Website Primary Action Button (#2D75FF), to guide potential users toward conversion.&#x20;

<figure><img src="/files/CNj7DfGTFa80ITDMt24O" alt=""><figcaption><p>Example: Primary action buttons and H1 text</p></figcaption></figure>

<table data-card-size="large" data-view="cards"><thead><tr><th align="center"></th><th align="center"></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td align="center">#2D75FF<br>Website Primary Action</td><td align="center"><em>Usage:</em> Primary call-to-action buttons, logo icon, success states, and highlighting key value propositions.</td><td><a href="/files/7HPeC7uXzUXFm3iTy3Pt">/files/7HPeC7uXzUXFm3iTy3Pt</a></td></tr></tbody></table>

**App & Software (The "Utility" Face)**

The software interface shifts toward a 'Utility First' philosophy, prioritizing data density and long-term legibility.&#x20;

The color palette transitions to a grounded Deep Slate sidebar for navigation, while the main workspace uses a clean Canvas Grey background to reduce eye strain during extended use.&#x20;

To manage complex scheduling, the app utilizes a secondary palette of muted pastels for Gantt chart 'job blocks,' ensuring that status indicators and text remain clear and actionable without overwhelming the user.

<figure><img src="/files/OKblRf0zmhLIz4lPgPDu" alt=""><figcaption><p>Example: Action buttons in top right, alongside calendar colour events</p></figcaption></figure>

<table data-view="cards"><thead><tr><th align="center"></th><th align="center"></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td align="center"><strong>#186ACC</strong><br>APP Primary Action Buttons</td><td align="center"><em>Usage:</em> Primary call-to-action buttons, logo icon, success states, and highlighting key value propositions.</td><td><a href="/files/tJRic6Dz5RlVlZAPSYb6">/files/tJRic6Dz5RlVlZAPSYb6</a></td></tr><tr><td align="center"><strong>#E8F0FA</strong><br>APP Secondary Action Buttons</td><td align="center"><em>Usage:</em> Secondary call-to-action buttons</td><td><a href="/files/TatNFZ2tPifrqLRhvs6L">/files/TatNFZ2tPifrqLRhvs6L</a></td></tr><tr><td align="center"><strong>#D8D8D8</strong> - Fill<br><strong>#BDBDBD</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/o3jBm7VBtU0Djf30yeL5">/files/o3jBm7VBtU0Djf30yeL5</a></td></tr><tr><td align="center"><strong>#B1D4FC</strong> - Fill<br><strong>#81B8FA</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/rfhJLJNze7710zOU782i">/files/rfhJLJNze7710zOU782i</a></td></tr><tr><td align="center"><strong>#75D1F0</strong> - Fill<br><strong>#52C4EB</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/axr7qLPgTWqcQYBEKEVR">/files/axr7qLPgTWqcQYBEKEVR</a></td></tr><tr><td align="center"><strong>#62DAC0</strong> - Fill<br><strong>#46D2B4</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/5MjqnfKmi3IAvBI2BtFa">/files/5MjqnfKmi3IAvBI2BtFa</a></td></tr><tr><td align="center"><strong>#90E098</strong> - Fill<br><strong>#6FD679</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/R6rJl7ys2g0LzyXFImDy">/files/R6rJl7ys2g0LzyXFImDy</a></td></tr><tr><td align="center"><strong>#FFDA8F</strong> - Fill<br><strong>#FFCA63</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/s9rtbWEqbQEadzGEWZ3P">/files/s9rtbWEqbQEadzGEWZ3P</a></td></tr><tr><td align="center"><strong>#FFB79D</strong> - Fill<br><strong>#FF946F</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/uXsa8iYIvTwhXJ48tGhC">/files/uXsa8iYIvTwhXJ48tGhC</a></td></tr><tr><td align="center"><strong>#FFBCCC</strong> - Fill<br><strong>#FF88A4</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/PVKslQayMpjMAtLHX8Ub">/files/PVKslQayMpjMAtLHX8Ub</a></td></tr><tr><td align="center"><strong>#FFBAE8</strong> - Fill<br><strong>#FF87D6</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/ik5q6hdiVoqKlKrnSGZK">/files/ik5q6hdiVoqKlKrnSGZK</a></td></tr><tr><td align="center"><strong>#E4D1FD</strong> - Fill<br><strong>#C49DFA</strong> - Border</td><td align="center"><em>Usage:</em> Job and calendar event colour</td><td><a href="/files/azQsAPGgVlmUhtFx31jv">/files/azQsAPGgVlmUhtFx31jv</a></td></tr></tbody></table>

## Typography

**Website & Marketing (The "Brand" Face)**&#x20;

<figure><img src="/files/c5o391F36PLMNmPpNScM" alt=""><figcaption><p><a href="https://fonts.google.com/specimen/Montserrat">https://fonts.google.com/specimen/Montserrat</a></p></figcaption></figure>

* *Font:* Montserrat
* *Characteristics:* Rounded, friendly, and modern. It makes the "heavy" industry topics feel accessible and easy to manage.
* *Usage:* Hero banners ("Streamline Operations"), feature titles, and major announcements.

**App & Software (The "Utility" Face)**

<figure><img src="/files/nDaIf9fKulT7GxaVFmOz" alt=""><figcaption><p><a href="https://fonts.google.com/specimen/Arimo">https://fonts.google.com/specimen/Arimo</a></p></figcaption></figure>

* Interface Font: Inter or Roboto.
* *Why:* These fonts are designed specifically for user interfaces. They have a tall x-height, making them legible at small sizes (like in the sidebar or Gantt chart tags in your screenshot) and handle numbers/data very well.
* *Usage:* All text inside the login portal, dashboards, and data tables.

## Tone of Voice

**Voice: The "Efficient Partner"**

StayOnHire speaks like a knowledgeable project manager. We understands the chaos of construction/rental and offers a calm, organized solution.

* Direct: Uses active verbs (*Streamline, Manage, Organise*). Avoids flowery language.
* Solution-Oriented: Focuses on the *outcome* (saving time, reducing error) rather than just the features.
* Professional yet Accessible: It avoids overly complex jargon, making the software feel inviting to users who might be used to pen-and-paper methods.

**Tone Guidelines**

* Do: Be clear, concise, and encouraging.
  * *Example:* "Organize your business. Execute jobs and projects."
* Don't: Be playful, whimsical, or overly aggressive.
  * *Avoid:* "Crush the competition!" or "The coolest app for hire."

**Key Brand Messaging Pillars**

* Simplicity: "Migrate off spreadsheets."
* Control: "Prevent double-bookings."
* Scale: "Scale fleets and labour."


---

# 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.stayonhire.com/brand-kit/assets.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.