Holding shape

The athenahealth holding shape is a simple way for us to own content, making all communications feel simple and consistent.

Whats a holding shape?

Our holding shape is a device that references our core brand elements to help us elevate and organize content in a wide range of applications. The following section will lay out the best and most impactful ways to use the holding shape.

The root of our holding shape

The root of our holding shape

Drawing from the circular forms of our logo, a curved-edge holding shape for photography and graphics is used to create a simple, consistent and flexible approach across all of our communications.

logo

Behaviors

How to use the holding shape

The athenahealth holding shape has a range of behaviors and use cases.

Each holding shape must contain its own content/shouldn't bleed into other holding shapes

holding shape

Content showcase

Using holding shape as content window
holding shape

Storytelling

Simultaneously holding photography and guiding icons or text to tell a more robust
holding shape

Information division

Using the shape to create hierarchy in instances where a lot of information is on display

Creation

Consistent corners

To create the corner radius of the athenahealth holding shape, divide the shortest edge by 10.

For example, a 100px by 200px shape will have a 10px corner radius.

Note: if number is not evenly divided, round corner radius up or down to the nearest whole number.

Vertical

hero purple on honey on white
Divide the shortest side of the holding shape by 10 to calculate the corner radius value.

Shape width: 190px
Corner radius: 19px

Horizontal

hero purple on honey on white
Divide the shortest side of the holding shape by 10 to calculate the corner radius value. NOTE: If number is not evenly divided round up or down to the nearest whole number

Vessel height: 236px
Corner radius: 24px
Multiple holding shapes

Often a layout will contain more than one holding shape. In these instances the corner radius should be determined by the smallest shapes within the composition.

Multiple holding shapes

hero purple on honey on white
Above there are two holding shapes within one composition. One measures 190 px, the other 380 px. The smaller of the two shapes determines the usage of a 19 px corner radius.

Example

hero purple on honey on white
The presentation slide shown here is an example of multiple holding shapes within one composition. The corner radius for all shapes is determined by the smaller shapes located on the left side of this slide.
hero purple on honey on white
Please note: All corners within a composition do not need to be rounded. In the example shown to the left, this illustration utilizes square and rounded corners to create contrast between elements.

Use Cases

Content showcase

Our simplest use of the holding shape creates a window for content. When using the holding shape in this way it’s important to use it large, letting the content it contains become the focal piece of the composition. At a minimum, the holding shape should occupy 25% of the available space.

Example

hero purple on honey on white
In this example the holding shape contains photography as the primary visual. The holding shape occupies nearly half of the composition.

Placement

hero purple on honey on white
The examples above illustrate how the holding shape is always anchored to at least one corner of the composition to create a calming, grounded feeling. It should never float in the middle of the composition.

Equal margins

hero purple on honey on white
Whether anchoring to one, two or four corners, equal margins should be maintained around the edge of the composition. The holding shape is always aligned to our grid.
Content showcase cropped

When using our holding shape as a content showcase it may also be cropped. The holding shape should only be cropped on one side, always leaving two rounded corners visible.

Example

hero purple on honey on white
In this example the holding shape has been cropped. As with the uncropped version, it's important to use the holding shape as the primary focal piece of the composition.

Cropping

hero purple on honey on white
When cropping, only one side of the shape should be cropped leaving two rounded corners visible in the composition. The holding shape may be cropped off of any side of the composition.

Equal margins

hero purple on honey on white
The cropped holding shape should always extend from one margin to another, either horizontally or vertically. Margins are equal on all sides of the composition. The holding shape is always aligned to our grid.
Information division

For applications with many levels of information, the holding shape can be used to divide and organize. This approach should be used to ease understanding of content, never to complicate something straight-forward.Information may be divided across 2-6 shapes.

Examples

hero purple on honey on whitehero purple on honey on white
In the examples above information is divided using our holding shape. The examples show how the holding shape can contain our various identity elements, including color, typography, photography and iconography.

Arrangement

hero purple on honey on white
Arrangements of the holding shape should never be haphazard. A linear alignment along one one side, either vertical or horizontal should always be used. Holding shapes always adhere to our grid as well.

Sizing

hero purple on honey on white
When arranging holding shapes to divide information, a common height or width must be used across all shapes. Holding shapes always adhere to our grid as well.
Information division

In order to avoid a disorganized appearance when using the holding shape to divide information, the overall arrangement is anchored to one of the margins (top, bottom, left, right) and align to the underlying grid.

Placement

hero purple on honey on white
Above are examples for how to divide information and anchor the overall arrangement along each margin. A horizontal and vertical format for each margin is shown. Notice the use of a common height or width for each shape within each composition.

On this Page

Contact

For all brand related questions, please reach out to brand@athenahealth.com. If you need help creating marketing assets such as promotional items, one-pagers or other collateral please complete the Marketing Asset Request form.