General
Anatomy is Boston Scientific’s platform and tool-agnostic design system. Eventually it will be applied to all platforms, websites, and apps. Anatomy is separate from the AEM style system.
Anatomy is separate from the AEM style system, but the AEM system has been designed to match Anatomy.
The AEM style system is specific to the corporate theme currently used on the Boston Scientific corporate website, the Preventice website, and the AEM core components style guide website.
Use the AEM style system and its corresponding design library when designing for the Boston Scientific corporate website, which is on AEM.
Reference Anatomy for content writing, accessibility, foundations, and component examples. We regularly link to Anatomy throughout the style guide website as a resource.
Refer to the Global.com Communications page on the GDM Sharepoint site for information on the approval process.
If you are working with a designer or external vendor, we generally ask that you reach out to the UXD team for review before going into production.
It will not be re-added to the style system.
The exclusion is intentional to ensure accessibility, consistency, stability, and scalability. Using templates, components, and patterns in place of hacks or one-off solutions will allow for easier updating and faster evolution of the entire system.
The style of the new template and components align with the direction of our future site experience, so you won’t be able to recreate an exact replica of legacy pages. Please reach out if you need support.
Some differences between legacy and new include:
- Limiting body copy (text component) and heading (title component) colors to black or white, depending on the background color
- Limiting heading sizes to align with semantic heading structure
- Limiting text sizes to four options
These limitations were made to better adhere to accessibility standards and to create a consistent look and feel across Boston Scientific corporate site pages.
AEM grid and containers
This is a known AEM bug. This seems to happen when there are three nested containers and the third container usually gets corrupted or doesn’t inherit the Container’s layout selection.
The work-around for this bug is:
- Add your containers
- Set the second container (not the root container) to “Simple” layout
- Set the third container to “Responsive Grid” layout
- Add or drag your content into the third container and resize
Disclaimer: this seems to work most of the time, but not always. Our recommendation is to refresh and start new with separate containers.
We rely on the layout value and grid gutters, rather than padding, at the root level. We use responsive authoring and standard column offsets to make sure our content is a consistent width across pages. Check out the Authoring resources page on the style guide site for more information.
The default selection for Containers is inconsistent and can depend on the location of the container. To be safe, always explicitly select either “Simple” or “Responsive Grid”.
All designs should be built on the 12-column layout grid.
Blank grid templates are available and the grid is built into the example page templates in the Core Components Sketch library. You can download these files in Design resources.
Information on authoring within the AEM grid can be found in Authoring resources and Development resources.
No. There is no way to reorder content across breakpoints while adhering to accessibility best practices and requirements.
For more information, see Anatomy’s accessibility page and read Content reordering by Rachel Andrew. Accessibility Insights for Web is a great browser extension that reveals the tab order of a page.
Reordering content depending on breakpoint negatively impacts accessibility. But thinking responsively and designing mobile-first will help prioritize content and determine layout across breakpoints. A mobile first mindset will improve our SEO, as well, since Google switched to mobile-first indexing in early 2021.
Adding background images in the Container component is not supported.
We will be exploring ways we can add this feature without compromising accessibility or performance as we continue to evolve the style system.
Forms
Yes, you can use AEM form components. Refer to Form layouts for more information on commonly used form patterns.
Refer to Formstack forms for more information.
Images, videos, and animations
Currently, core components do not support showing differently sized images depending on the user’s viewport size. We have a ticket in the backlog to extend the Teaser component to support rendering different images across breakpoints.
There are no fixed dimensions because our site is responsive. The width of the image is determined by the width of the user’s viewport and the responsive authoring applied to the image’s component.
There is some trial-and-error involved when sizing images for the Teaser hero component and Teaser banner component.
The hero’s image height is determined by minimum set height or by height of the text content. The hero component has set anchor points to keep the image’s focal point in view as the user’s viewport decreases.
If the hero text block is set to left-aligned, the focal point is on the right side of the image. As the viewport narrows, the image’s right content will be kept in view.
If the hero text block is set to center-aligned, the focal point will be on the center of the image. As the breakpoints decrease, the image’s center-point will be kept in view.
The Banner image is unrestrained, which can lead to very large images. Keep in mind that the length of text added to this component can overlap the image more and more as the screen size gets smaller. Remember to check all breakpoints to ensure that your image is still visible behind the text block.
For more information on responsive design and image sizes, refer to:
All Core Components that support images support SVGs.
When applying decorative treatments to images, make sure to select an option under both the “Decorative Treatment Type” and the “Decorative Treatment Color” sections in the styles menu.
When applying the interactive treatment to teasers, make sure the teaser has a call-to-action or link. If there is no action, the treatment will not appear.
Always use “View as Published” when testing interactive treatments because AEM overrides the hover behavior in Edit mode.
We also recommend using the style guide site as a troubleshooting tool whenever you encounter something unexpected. If the bug exists on the style guide site, you can be sure it’s related to the component, template, or platform. If the example on the style guide site works as expected, you can use it as an authoring reference.
We are limiting color, text, alignment, and interactive treatment options for the teaser hero component to encourage a consistent look and feel on the website.
Refer to the Teaser hero page for more information on the available styles.
Adding background images in the Container component is not supported.
As we continue to evolve the style system, we’ll be exploring ways we can add this feature without compromising accessibility or performance.
The External App Container component is currently only approved to use for Forms.
Animations can be very expensive from a performance perspective. Accessibility must also be taken into account, either through making the animation accessible or making the information within the animation available in a different format. For more information, refer to Anatomy.
This means we’ll need to evaluate implementation on a case-by-case basis. Please reach out to the team with any new potential use cases before implementing animations.
There is one design treatment for the Secondary Navigation component.
The order of the navigation links is determined by the order of the pages in AEM.
To reorder pages at the same level in AEM, switch to “List View” using the dropdown menu next to the “Create” button. Then click on the grabber section of the page row, indicated by an icon on the far right of each row, and drag the page row to reorder.
To reorder a page to a different content level in AEM, you must select the page and then click “Move” in the action bar. You can then choose which level you want to move the page to.
We discourage using anchor links in a page unless it is within the Tertiary Navigation. Please reach out for approval on your in-page anchor link before publishing.
If your use case is approved, use the ID field to assign a unique identifier to be the link’s destination. Then enter the same unique identifier text, preceded by #, into the Button component’s Link field.
Example
Link field’s unique identifier: #jumpLink
Destination ID: jumpLink
Match the section name in the ID text.
Reminders
- IDs must be unique — they can only be used once per page.
- We use camelCase for IDs as a front-end code standards best practice
Titles and text
The Title component does not support italics.
Center-aligned titles are supported on all templates, but only in the full-width page content container.
The Text component supports subscript and superscript, but the edit dialog can be a bit buggy.
If you don’t immediately see the options after opening the edit dialog, try clicking into the textarea or clicking the “Toggle Fullscreen” button. You’ll be able to see additional formatting options in the fullscreen view of the Text component’s edit dialog.
The Title component does not support subscript or superscript in the edit dialog. The work-around is to copy and paste the unicode symbol into the component’s text.
There is no unicode symbol for a superscript comma. If you are dealing with two numbers in superscript, use the dot operator (U+22C5) instead.
We recommend using data tables for tabular data. The table style is nested inside the Text component. If you click the “Toggle Fullscreen” button, you’ll be able to see additional formatting options in the fullscreen view of the Text component’s edit dialog.
We currently have two styles for tabular data: a default table style and a product or technical details table style. Refer to the Text component for more information on these styles.