JET AI

Overview

At JET we use AI to assist and elevate our users' experiences.

We have established an AI branding with its own, distinct visual identity for the purpose of providing clarity to our users on AI content across our products. This is so that we can continually be transparent in our use of AI.

---

Brand principles

Dynamic

AI is ever-evolving, and our motion pieces reflect its dynamic nature bringing the technology to life.

Futuristic

AI brings opportunity to elevate our user's experiences and drive efficiency, whilst supporting them with their tasks.

Transparent

To overcome trust barriers, we must clearly communicate when and how AI is used.

Humanistic

As AI is artificial, so it's important we create human-centered experiences that deliver real value.

---

Dos and Don'ts

---

Iconography

We use specific icons to communicate AI content at JET. The sparkle icons are the primary visual indicators and look to enable AI recognition for users. Because of this, sparkle icons should not be used in any other contexts or meanings.

Icon variants

Currently we are only using the filled variant for both AI icons, if you'd like to use the outline variant please get in touch with the PIE design system team.

We use two types of icon for AI content:

1. Type 1: It's made up of 2 sparkles and should be used in all static AI content.
2. Type 2: It's made up of 1 sparkle and should only be used in designs where the icon will be animated in build. See how we use this icon animated in the motion section of these guidelines and motion foundations.

Icon examples

The primary AI icon is ‘Type 1’ and it includes 2 sparkles. This is to be used on all static AI content where the icon does not animate. We use this icon because it feels more interesting and dynamic than the alternative does when no animation is applied.

To see examples of our ‘Type 2’ icon animated please check the motion section of these guidelines and motion foundations.

---

Gradients

There are two gradients used for AI content.

• The border gradient is available to use across products. The fill gradient is only available for use within the AI assistant.
• In the instance where both can be used, consider the hierarchy of the content within the existing screen/journey when choosing the gradient.

Direction and angle

The border and container gradients have the same 140° angle applied to them. Cupcake is always top-left and Aubergine bottom-right.

The gradient tokens have the above applied. Do not edit or detach the gradients.

Gradients light mode

We have two distinct gradients for AI content:

• The token ai-border-default can be used as a strong border for buttons, tags and other containers (see more information in the component section). There is a border animation which can be used to highlight content. See the motion section for more details.
• The token ai-container-default can only be used within the AI assistant.

Light mode $ai-container-default

Light mode $ai-border-default

Gradients dark mode

In dark mode, our $ai-container-default gradient token switches to a darker, but equally subtle version of the gradient on dark theme.

The token $ai-border-default, however remains the same. This is to preserve the brand identity of our AI content across themes.

Dark mode $ai-container-default

Dark mode $ai-border-default

Examples

The border gradient can be applied across all areas of our product. The container gradients can only be applied within the AI assistant.

---

Colours

AI in product should primarily be communicated using gradients, as this is one of our main visual indicators for AI content.

However we aim to support our gradients with these additional colours from the PIE Foundations library.

Colours light mode

Colours dark mode

---

Motion

Motion is a huge part of how we communicate AI within our products. We use it to make the AI experience feel more dynamic whilst also enhancing loading states, usability, and new features.

Motion in AI should always feel smooth and fluid. Our motion intentionally mimics the pattern of breathing to ensure it feels calming and almost human like in nature.

If you would like additional motion pieces to support your work, please get in touch.

Animated background

We have an animated background image that’s only used for the AI Assistants.

The animation is set to an extremely subtle loop to ensure users aren’t annoyed or disorientated by the motion. Please ensure that this motion, although subtle, can be turned off through device reduce motion settings.

We supply our animating background as Lottie and JSON files, please use this with a blur of 80dp.

Border animation

We use gradient border animations to capture user attention or signify user action in relation to AI generated content. Our gradient borders move clockwise.

Gradient border animations can be applied to buttons or containers and can either be continuous or play on a loop of two rotations and come to a stop.

Continuous animation works great for buttons where we want to callout user action whilst animating twice and stopping can be used to simply highlight returned AI queries that we wouldn't want to keep distracting the user with.

Thinking / Loading animation

Our thinking / loading animation is the heart of our AI and can be used in most places where AI query is in progress.

It plays on a loop expanding from its default shape to a subtle bloat before contracting back to default in order to mimic the pattern of breathing. It also spins between rounds.

---

Components

The PIE AI component library includes common components for designing AI user flows.

When designing, consider the use of the components and avoid applying duplicate gradients and icons. AI design should be intentional and contain one prominent piece of branding, not multiple.

If you would like additional components made to support your work, please get in touch with the PIE Design System team.

Button with icon

The AI button component can be used to signify an entry point into an AI experience.

You can also choose to use standard PIE button variants for AI content if you have already applied the branding in another way.

• Use icon 1 to clearly label that the action uses AI.
• Use icon 1 as there is no 'thinking / loading' motion used for buttons.
• Use only on default backgrounds as this uses the AI border gradient.

Icon button

Use one of the AI icons to signify the use of AI:

• Use icon 1 if there is no motion involved.
• Use icon 2 if the 'thinking / loading' motion is involved.

Chip

The AI chip component can be used alongside other chip variants.

You can also choose to use standard PIE chip variants for AI content if you have already applied the branding in another way.

Tag

The AI tag component can be used to contextualise AI content.

You can also choose to use standard PIE tag variants for AI content if you have already applied the branding in another way.