Squircles
Squircles are a distinctive and ownable part of our brand’s look and feel. This section details the different types and how best to utilise them in your designs to keep everything consistent and recognisably Experian.
Need a squircle asset?
Visit our Brand Asset Hub to access a range of squircle assets.
Brand Asset Hub
Introducing squircles
Squircles are those “not quite a square, not quite a circle” tiles that radiate from our brand mark.
This versatile shape can be used in a variety of ways, from framing content to creating distinctive brand visuals.
In this section, you can find details on the two types of squircles and how best to implement them.
2D squircles
We use the 2D graphic device to organise content. It can be used as a shape to contain information, frame photography, or simply to add interest in layouts.
3D squircles
We use 3D squircle renders as a distinctive brand expression asset, symbolising the flow of data. These are used in place of photography when representing the Experian brand more broadly.
Squircle construction
To ensure squircle consistency, we adopt a 1:4 corner radius ratio. Simply divide the side length by 4 to determine the corner radius.
For instance, a 100 x 100 px squircle would have a corner radius of 25 px.
Squircles as a graphic device
These examples highlight the versatility of squircles in 2D applications.
Squircles function as adaptable containers for text or imagery. They can be rotated and resized to suit the composition, and may extend beyond layout boundaries; introducing a sense of movement and energy to the design.
They can also be used as frames to house content such as headings or iconography, or simply to elevate the visual interest of a layout through their distinctive form.
Our distinctive visual identity is built around the squircle and rounded rectangle. To preserve brand clarity and consistency, the use of additional shapes should be avoided.
Introducing 3D squircles
These assets can be used in place of traditional photography or textured backgrounds, acting as the visual focal point in layouts, marketing materials, presentations, video content, exhibition graphics, and more.
The 3D squircles are hero brand assets, bold and recognisable elements that bring the Experian identity to life. They’re primarily designed for use when representing the brand more broadly or conveying its meaning at a conceptual level, for example, in event stands or large-scale brand expressions. They’re also effective when human imagery isn’t suitable, such as when illustrating more abstract or complex themes like data, decisioning, AI, or innovation.
Use them confidently and with purpose to create impact, ensuring they remain a clear focal point rather than background texture. Avoid overusing them within a layout or applying them decoratively, as this can create visual clutter and reduce their effectiveness as hero assets.
Working alongside photography
3D squircles and photography each play distinct roles within the Experian visual identity.
Photography should lead when the goal is to connect on a human or emotional level, for example, when communicating stories about people or culture. Authentic imagery helps create relatability and engagement.
3D squircles should be used when the message is more conceptual or abstract, such as illustrating themes related to data, technology, or innovation.
3D squircles do not replace photography. They can be used side by side in the same layout, but never on top of each other. Layering the two creates mismatched texture, lighting, and perspective that contradict our natural photographic style.
Use photography to tell stories and convey emotion, and 3D squircles to represent the brand’s innovative or technological depth.
- Text can be added over renders if it remains legible.
- Rotate renders to fit the design as required.
- Renders should act as the hero element of the design, scale and crop as needed.
- Add a text panel over renders to aid legibility, or break up the design layout.
- Version without backgrounds allow you to apply a solid colour from the Primary or Support palette, or use a gradient.
- Holding shapes can be added to frame content if desired.
- Do not frame within shapes.
- Do not place photography on renders, and do not place renders on photography.
- Do not recolour or place overlays on renders.
- Do not use tertiary palette colour backgrounds.
- Do not distort or make renders too small.
- Do not use multiple renders in a single layout.
Corner radius guidance
Rounded edges are a core element of the Experian design language, originating from our logo, seen in both the squircles and the wordmark, and echoed throughout our iconography.
Where possible, follow this rule to ensure a cohesive and consistent visual identity across all brand materials.
When using a single rounded rectangle on a layout:
- Set the corner radius to 10% of the shortest side.
- To calculate this, simply divide the shortest edge by 10.
Multiple shapes with shared dimensions
When multiple shapes share the same height or width:
- Apply the 10% rule to the shared dimension.
- For example, if all shapes share the same width, divide that width by 10 to determine the corner radius.
In this example, both shapes have the same shortest side of 230px.
230 ÷ 10 = 23, so the corner radius is 23px.
This approach keeps all shapes looking consistent and unified.
Multiple shapes with varying sizes
When working with a variety of shapes in a single composition:
- Identify the largest and smallest shapes.
- Measure the shortest side of each shape.
- Add the two shortest sides together, then divide by 2 to find the average.
- Apply the 10% Rule by dividing this average by 10 to get the corner radius.
- Use this radius consistently across all shapes in the composition for a unified look.
In this example:
- Shape A is the largest, with a shortest side of 170px.
- Shape B is the smallest, with a shortest side of 80px.
To find a consistent corner radius:
- Add the shortest sides: 170 + 80 = 250
- Divide by 2 to get the average: 250 ÷ 2 = 125
- Apply the 10% Rule: 10% of 125 = 12.5
- Round up to the nearest whole number: 13px
