AI visual guidelines

Visual cues that indicate that a specific feature or section of the app is AI-powered.

AI in Homebase

AI in Homebase acts as a “supercharger” on top of Homebase features. We don’t have an AI assistant; instead, we have features that are AI-enhanced.

We’ll differentiate them through subtle yet unique styling that aims to be distinct but not distracting.


“AI-powered” visual cues

Both visual cues should be visible in the resting or final state.

Lightning bolt:

  • Use as a standalone icon placed on the specific area that shows the AI-enhancement.
  • Don’t use in buttons or as a replacement for bullets.

Gradient border:

Apply to the following components:

Selection card + lightning bolt

States

Turned off (default)

Shows that the feature can be supercharged by AI but it hasn’t been turned on by the user yet.

  • Lightning bolt: default color for that section (see iconography color)
  • Gradient border: default border for component

Turned on + working:

The AI-enhancement is on and at work. The animation represents the “in progress” aspect of this state.

  • Lightning bolt: animated gradient while turning on, purple haze when turned on.
  • Gradient border: animated border with pink, purple, and neon yellow
Lightning bolt

 

Done working / resting state

The AI-enhancement is done and has made its suggestion to the user. The user can now accept it or not.

  • Lightning bolt: purple haze
  • Gradient border: border with pink, purple, and neon yellow (yellow at the bottom), no animation.

Are all states necessary every time?

No.

If the AI suggestion is automatically prompted by the system and doesn’t need to be turned on, show a one-time animation and go straight to resting state.

Applying AI look and feel

Lightning bolt:

  • Use icon “AI bolt”
  • Choose selection color “AI border, Active”
  • If icon is in rest state, icon color should be Purple Haze

Gradient border:

  • Change component stroke choosing “AI Border, Active” or “AI Border, Rest”
  • Change stroke weight to 2

Examples

AI-enhanced Manager Log

AI treatment is applied only to where we’ll supercharge the action through AI by rewriting it to “make it better.”

AI-enhanced Manager Log

AI-enhanced frequent shifts

AI treatment is applied only to the frequent shift suggestion, and not the entire scheduler or the entire Add shift modal.

Frequent shits