Gradients
Gradients are a type of style that are made up of two or more colours and can be used for backgrounds, containers and small UI elements.
Gradient alias tokens
Gradient alias tokens are made up of two or more global colour tokens set at stops between 0-100%.
AI
Alias gradient tokens used exclusively for AI content.
Container
Example Description Token name
- Gradient ai container default ai-container-default Global tokens used: $color-cupcake-10$color-aubergine-05$gradient-ai-container-default
Border
Example Description Token name
- Gradient ai border default ai-border-default Global tokens used: $color-cupcake-40$color-aubergine-30$gradient-ai-border-default
Jet +
Alias gradient tokens used exclusively for JET+ sub-brand.
Brand
Example Description Token name
- Gradient jetplus brand 01 jetplus-brand-01 Global tokens used: $color-orange-25$color-orange-30$color-tomato-50$gradient-jetplus-brand-01
- Gradient jetplus brand 02 jetplus-brand-02 Global tokens used: $color-orange-10$color-orange-20$color-tomato-30$gradient-jetplus-brand-02
- Gradient jetplus brand 03 jetplus-brand-03 Global tokens used: $color-orange-0$color-orange-10$color-tomato-5$gradient-jetplus-brand-03
Support
Example Description Token name
- Gradient jetplus support 01 jetplus-support-01 Global tokens used: $color-mozzarella-20$transparent$gradient-jetplus-support-01
- Gradient jetplus support 02 jetplus-support-02 Global tokens used: $color-orange-10$transparent$gradient-jetplus-support-02
AI
Alias gradient tokens used exclusively for AI content.
Container
Example Description Token name
- Gradient ai container default ai-container-default Global tokens used: $color-cupcake-80$color-purple$gradient-ai-container-default
Border
Example Description Token name
- Gradient ai border default ai-border-default Global tokens used: $color-cupcake-40$color-aubergine-30$gradient-ai-border-default
Jet +
Alias gradient tokens used exclusively for JET+ sub-brand.
Brand
Example Description Token name
- Gradient jetplus brand 01 jetplus-brand-01 Global tokens used: $color-orange-25$color-orange-30$color-tomato-50$gradient-jetplus-brand-01
- Gradient jetplus brand 02 jetplus-brand-02 Global tokens used: $color-orange-70$color-orange-75$color-tomato-90$gradient-jetplus-brand-02
- Gradient jetplus brand 03 jetplus-brand-03 Global tokens used: $color-orange-75$color-orange-90$color-tomato-100$gradient-jetplus-brand-03
Support
Example Description Token name
- Gradient jetplus support 01 jetplus-support-01 Global tokens used: $color-mozzarella-70$transparent$gradient-jetplus-support-01
- Gradient jetplus support 02 jetplus-support-02 Global tokens used: $color-orange-75$transparent$gradient-jetplus-support-02