REM is the default unit with 1rem equalling the base font size of 16px.

A base increment/decrement is 0.25rem, for example 1.25rem, 1.5rem, 0.75rem, 0.5rem. If we consider this to be 1 increment or 1 decrement, then half-increments or half-decrements can be used but should be used sparingly.

A half-increment is 0.125rem (0.25rem / 2). For example, 0.125rem, 0.875rem.

Case study pages are broken into two sections, the Table of Contents and the Main Container. The Table of Contents is a fixed 200px in width, while the Main Container uses the remaining free space (1fr). The value of the width of the Main Container is not so important.

The Main Container has a fixed height of 100dvh, or dynamic viewport units. This allows the Main Container to be 100% of the viewport, and all additional content can be accessed by scrolling. This also allows the Table of Contents to remain fixed, giving users the ability to use the Table of Contents at any time.

This behaviour remains the same on tablets.

On mobile the Table of Contents is removed entirely, allowing the Main Container to be the entire width of the viewport.

On desktop devices the wrapper has a maximum width of 1200px. This means that content can never expand past 1200px in width regardless of how large a screen may be. There are a few exceptions to this rule and those are mainly site layout components. The only relevant component is the hero banner used for case studies. This component will be edge-to-edge of the screen with no regard for the 1200px maximum width.

As devices shrink in size to screens less than 1200px wide, this value changes to 100% of the screen’s width minus 2rem (32px) on each side. The wrapper always centers the content.

This is a 3-column grid. The width of a card in this case is approximately 379px when content is extended to the full 1200px on desktop. However that number is not so important as ensuring there is 2rem (32px) spacing (grid gap) for both columns and rows.

The truth is, 1200 - 32 - 32 = 1136 / 3 = 378.6666~ which isn’t a nice round number, but it’s okay! As long as the spacing between cards is a consistent 2rem, the width of cards themselves do not matter.

Now that I think about it, setting the wrapper to 1204px would result in even numbers but as I mentioned, the width of the card here is not so important as the consistent spacing between elements in the grid.

2-column variant. What determines whether a grid should be 3 columns or 2 columns depends on the amount of content in each card.

At the time of writing, there is no 4-column grid present on case study pages. There is no rule against it, but at that point the content in each card would have to be quite limited. In practice, 2-column and 3-column grids cover most use-cases.

This is a 3-column grid on desktop. This example is showing how a 3-column grid responsively scales down. This is true for a 2-column grid, 4-column grid, or any other number of columns in a grid.

That same 3-column grid on desktop will resize to 2 columns on tablet.

On mobile, the 3-column grid will resize to 1 column.

Note that the grid gap has also been reduced from 2rem to 1rem (16px) on mobile.

The Bordered Card has consistent padding around the component but the spacing (margin) between elements depends on the type of element (explained later).

Headline and description.

Heading and description.

Description only.

Headlines should be reserved for a few characters only. Big, punchy numbers or emojis to grab the reader’s attention.

The heading should deliver the main insight of a card, unless that would be too long. Generally the heading should be kept to two lines or less.

The description can further explain the heading or in some cases be the sole content of a card. Additional context may be required.

In relation to the Bordered Card, the Non-bordered Card removes the padding and border radius. The Non-bordered Card maintains the same spacing between elements in the card as the Bordered Card.

Headline and description.

Heading and description.

Description only.

Text style: Section Heading (see typographic scale)

Because width and height is implicitly set to 32px this component will never grow or shrink. It will run into problems if the character length is too long. However given the limited use-case of numbering sections, we can reasonably presume there will not be any triple character instances.

Padding between the number and the border of the box is not relevant.

This component’s colours are dynamic, meaning the colour of the element and background colour will vary from case study to case study. Case study colours are determined in larger, global components and passed down to specific components such as this one.

Text style: Link (see typographic scale)

The inline link should be used in body text, as opposed to a CTA link which would occupy its own line.

When hovered over, the arrow should rotate 45 degrees counter-clockwise and the background should transition from {grey100} to {grey200}. All animations should occur in 0.2s.

Text style: Link (see typographic scale)

Text style: Emphasis Block (see typographic scale)

The Summary Card extends the design of the Bordered Card. It is modular and uses a grid to arrange different types of content within it. Text styles are the same as the Bordered Card, that is the Card Heading and Card Description.

Unlike Cards, the Summary Card should only ever be used at full width and not in a grid with other cards.

Text style: Table of Contents Link (see typographic scale)

Links have padding even in their default states. This ensures the size of the link is consistent in all states as only colours are changing.

The Tablet of Contents layout can be best achieved using Flexbox. In any case, there should be a 6px (0.375rem) gap consistently between links. This gap is in addition to the padding of each link.