Design resources

OpenBridge provides designers with a comprehensive, open-source design toolkit for industrial workplaces. Everything is available to you in our Design libraries and case files in Figma.

Design libraries

Start her! These are the core building blocks and contain all OpenBridge components and icons.

Click here for OpenBridge 5.0.

OpenBridge 6.0 user interface dashboard with various control panels, graphs, and icons for managing high performance workplaces including navigation, CCTV, vessel, and environmental data.
Collection of black weather, navigation, communication, warning, and safety icons with some highlighted in color, titled 'OpenBridge Icons' and labeled for high performance workplaces.

Design cases

Explore case files to learn how to design with OpenBridge. These cases use the OpenBridge 6.0 Library.

Click here for OpenBridge 5.0 cases.

Featured
Small screens
Alerts, BAM & CAM
Application patterns

Get started!

OpenBridge is built in Figma, the leading platform for digital interface design. To use the resources, you’ll need a Figma account. Learn more on Figma’s website or their YouTube channel.

  • Black abstract symbol composed of four interconnected circles and lines inside a dashed square with a cursor arrow pointing at the bottom right corner.

    1. Get basic Figma skills

    Before diving into OpenBridge, ensure you're comfortable with Figma. Learn how to use frames, components, styles, and variables.

  • A black outline of a folder with a downward pointing arrow in the center, representing a download or save action.

    2. Install OpenBridge

    Set up the OpenBridge 6.0 Library and OpenBridge Icons in your Figma workspace and get familiar with them.

  • Outline illustration of a package with a magnifying glass over it, symbolizing search or inspection.

    3. Study the guideline

    Dive into the case files to see how layouts, spacing, and components are used. Get a feel for the design language, grids, and interaction patterns.

  • Illustration of a computer cursor selecting a rectangle, connected via dashed lines to two larger rectangles, one below the other, on a light gray background.

    4. Build your application

    Apply what you've learned to design your own application using the OpenBridge framework.

  • Vector graphic of a design tool icon, showing a square shape with a selection outline and a pen tool symbol overlay.

    5. Create new component

    If something’s missing, you’re welcome to design it yourself. Follow the guidelines and reach out for feedback or support.

  • A grid of six empty squares with a cursor clicking on the top left square.

    6. Contribute back

    Your work can benefit others. Share components, ideas, or improvements with the community.

OpenBridge 5.0

Version 5.0 is still used across several active projects and remains available for those who need access to earlier libraries, palettes, icons, and case examples. While 6.0 is the current standard, we continue to support 5.0 for reference and consistency.

Library, Palettes & Icons

Access the complete 5.0 component library along with the original color palettes and icon set used in past projects.

Software user interface on multiple screens displaying navigation, weather, and instrumentation data, with a background image of an open water landscape with clouds and the sky.

Palettes: Day, Dusk, Night, Bright

Case Examples

Browse interfaces and use cases built with OpenBridge 5.0 for inspiration or reference in ongoing work.

Cover of a publication titled 'Cases for advanced workplaces' with screenshots of various digital dashboards and maps used for navigation and data analysis.

OpenBridge 4.0

While no longer maintained, the OpenBridge 4.0 library remains available for reference and use in older projects

Screenshots of a design system interface called OpenBridge Design System 4.0, showing icons, sliders, buttons, and control panels for user interface design.