> For the complete documentation index, see [llms.txt](https://docs.stayonhire.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stayonhire.com/brand-kit/assets.md).

# 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."