Skip to main content
OroCommerce 6.1 LTS introduced the Golden Carbon and Refreshing Teal storefront themes with a modern design, fully editable homepage, configurable content templates and widgets, an improved retina-optimized slider, and product segment widgets. These themes are designed with accessibility and internationalization in mind. This style guide provides the resources and process to align the Golden Carbon theme with your brand’s corporate identity.
The Figma files on this page use the Golden Carbon theme, which is the recommended and most actively maintained theme for OroCommerce 6.1. The Refreshing Teal theme remains available in 6.1 and is pre-installed by default. For Refreshing Teal Figma files, refer to the version 6.0 downloads.

​
Download Figma Design Files

Two Figma files are available to support theme customization:
FileContents
Style GuideColor styles, shadows, typography, and ready-to-go UI components built with auto layouts
Design MockupsAll primary screens and page components for customizable design alterations
Accessing these files requires a Figma account on a Professional, Organization, or Enterprise plan. This plan level is required to connect the library file to your working design files.
For Refreshing Teal (version 6.0):

​
Customize the Library

1

Import the Figma files

Import both the Style Guide 6.1 and Design Mockups 6.1 files into your Figma project.
2

Publish the library

In the imported library file (Storefront Style Guide 6.1), open the Assets tab in the left panel and click the book icon. Find the file name and click Publish, then Publish again in the styles confirmation window.
3

Resolve missing libraries

After publishing, open the Assets tab and click the book icon again. If it shows Includes 1 missing library under Libraries available in this file, click the chevron and select your newly imported file in the Choose library dropdown, then click Swap Library. Ensure Swap default styles in instances is checked.
4

Connect the work file

Open your Design Mockups 6.1 file. In the Assets tab, click the book icon. Under Libraries available in this file, find Includes 1 missing library, click the chevron, select your library file in Choose library, and click Swap Library. This may take some time.
5

Verify and customize

Confirm your library is listed as Added and the file has no elements from other libraries. You can now customize the library styles and components.

​
Apply Changes

Once you have finished customizing the style guide and component library:
1

Publish changes from the library file

Open the library file (Storefront Style Guide 6.1). In the Assets panel, click the book icon, find the current file, click Publish changes, then Publish.
2

Update the work file

Open your work Figma file (Design Mockups 6.1). Click Review unpublished changes (the book icon in the top-right Figma toolbar) and then Update all.
3

Apply per-page changes

For deeper customizations such as changing element positions or page layouts, navigate through each page in your work file and make changes there directly.
Checks the color contrast ratio of all visible text in a frame and provides feedback on WCAG AA and AAA compliance. Includes real-time color sliders to adjust colors and see the contrast ratio update live.
Batch-change color styles (hue, saturation, lightness, alpha, hex) and typography styles (font family, weight, line height, letter spacing). Supports batch delete and rename.
Bulk swap instances and styles between masters with the same name. Copy styles between files. Manage pathnames like toolbar/nav/back using a folder-like interface.
Merge and link all color and text styles on a page. Provides overall usage assessment, groups elements with the same appearance, and can apply fixes automatically.
Find all instances of a component used in your file.
Select layers by name, type, or any property (hidden, parent, similar, etc.).
Import icons from Material Design Icons, FontAwesome, Jam Icons, and more than 100 other icon sets (over 100,000 icons total) as vector shapes.
Browse or search published collections of text strings, images, and icons for populating designs with realistic content.

​
Atomic Design Approach

The OroCommerce UI is structured around the Atomic Design methodology, building interfaces from small, reusable parts up to complete pages.

Atoms

The smallest indivisible elements: colors, typography, buttons, icons, inputs. Each atom has unique properties (background color, form, title color, size, font) that propagate through the entire interface when modified.

Molecules

Functional groups of atoms. For example, an input combined with two buttons forms a shopping list title editing form. Molecules ensure interface consistency.

Organisms

Relatively complex UI components made up of molecules, atoms, or other organisms. The storefront header is an organism — it contains a logo atom, a search field molecule, navigation menu molecule, and login link atoms.

Templates

Objects that define page layout and basic content structure. Templates show how components interact and cover UX cases without actual content.

Pages

Templates applied with real content, representing the final interface visible to end users. The final stage of atomic design.

​
Responsive Approach

OroCommerce uses responsive web design to ensure pages display correctly across all devices and screen sizes. Designs must be provided for the following horizontal breakpoints:
BreakpointTarget device
360pxMobile device
768pxTablet
1280pxSmall desktop (optional)
1920pxLarge desktop
Content, design, and performance must remain consistent across all breakpoints to deliver a satisfactory user experience on every device.

Build docs developers (and LLMs) love

Get started for freeTalk to us