Jutro Design System and UI Framework

Create beautiful and engaging digital apps that run on Guidewire - the world's most trusted P&C platform with Guidewire Jutro.
Announced at Connections: Building on the success of our design system and UI framework, Jutro Digital Platform is now Early Access in the Flaine ski release. Learn more in our latest blog post, “Powering Insurance Digital Innovation

What is Jutro?

Craft beautiful digital experiences for the world’s most trusted P&C platform.

Available starting with Guidewire Digital 11, Jutro is an adaptable system of meta-data driven UI components and interactions that support best practices in user interface design. By using Jutro to build digital products for the insurance industry, designers, developers, and product owners can streamline the effort it takes to create beautiful and compelling products. Jutro includes:

  • Component library: Jutro offers developers a library of pre-built components. These speed up design while also promoting consistency across consumer applications. Developers will be able to accelerate the building of their applications, leveraging component level capabilities such as analytics, localization, theming, and accessibility.
  • Codeless UI composition: Each of the UI components is easily configured via presentation metadata, such as labels or pages, thus building a metadata-driven application that can be easily modified without writing code.
  • Design guidelines and patterns: We offer a set of UI assets, made for designers, that have been designed around a consistent paradigm. These UI assets include highly repeatable pre-designed UI components, standardized application layouts, and themes.

Conceptualize and design with Jutro

Gain an overview of design systems and how Jutro brings added value with its focus on the P&C industry. See how to use business patterns as building blocks to jumpstart your experience development.

Related Info

Article
How to reuse complex fragments across metadata files with the codeless component feature of Guidewire Jutro.
Article
Learn how the Jutro command-line interface (CLI) can be used during your Jutro digital app builds for testing and other scripting.
Blog
The best way to get started with Jutro is to know React. Here's a complete learning plan for JavaScript and ES6+ concepts.

Design and Develop with Jutro

Equip yourself with the foundational skills that you need to design and develop using the Jutro Design System.

These short videos provide an introduction to what Jutro is and how it works, reducing the amount of time it takes for you to get up and running with your designs.

What are Jutro Floorplans?

Learn the fundamentals of working with Jutro floorplans, and how they contribute to consistent and responsive UI design.

Design with Jutro Using Figma

Preview how the Jutro component library is organized in Figma, and the key steps that are involved in designing with Jutro assets. In addition, learn how teams can use theming to adapt Jutro to their own visual requirements.

How to Configure Jutro Floorplans

Take a look at how to configure the properties of Jutro floorplans, including navigation, notifications, side panels and scrolling behavior.

Build and Configure with Jutro

This video demonstrates how to start building your application in code using the Jutro starter app. Learn how to retrieve metadata from components in Storybook, customize it, and add it to your code.

Ready to Build?

Read the documentation to get started creating amazing digital experiences with Guidewire Jutro.

Jutro Storybook – Component Library

The Jutro UI component explorer (also called Jutro Storybook) is not an editor. Instead it’s an explorer of Jutro components (currently based on Storybookjs) where you can explore the Jutro components available off the shelf (GA and lab preview) and their properties, play with the component configuration, and obtain Presentation Metadata for use in your application code. It’s the #1 resource used by teams during the implementation of Jutro based applications, and it’s also a good resource for designers to understand what’s available in Jutro.

Jutro Storybook
The example below shows the Story Metadata, Story Source, and Component Import Statement for the Badge component in Jutro:

{
  "component" : "badge"
    "componentProps" : {
      "maxValue" : 10
      "size" : "medium"
    }
  "id" : "badge"
  "type" : "element"
}


import { Badge } from '@jutro/components';



<Badge
  id="badge"
  maxValue={10}
  size="medium"
  type="notification"
  value={9}
/>


Related Info

Article
How to reuse complex fragments across metadata files with the codeless component feature of Guidewire Jutro.
Article
Learn how the Jutro command-line interface (CLI) can be used during your Jutro digital app builds for testing and other scripting.
Blog
The best way to get started with Jutro is to know React. Here's a complete learning plan for JavaScript and ES6+ concepts.

Don’t see what you are looking for?