Border radius tokens define the corner rounding of elements in the shop frontend. Galaxus and Digitec have separate border radius systems, reflecting the different visual styles of each brand.

Galaxus uses more rounded corners, while Digitec uses smaller radii and a more square appearance. The token values therefore differ between the two brands.

• Token
• NONE00
• SMALL4px2px
• MEDIUM8px2px
• LARGE12px2px
• ROUND9999px9999px
• GALAXUS_ROUND_DIGITEC_MEDIUM9999px2px
• GALAXUS_SMALL_DIGITEC_NONE4px0

#Usage

import { borderRadius } from "@blocks/theme";
import { styled } from "next-yak";

export const Card = styled.div`
  border-radius: ${borderRadius.MEDIUM};
`;

#Guidelines

Each token carries an intent. Choose by what the element is, not by the value you want to see.

• SMALL: compact UI such as checkboxes, chips and small buttons where they are compact, on desktop and widescreen.
• MEDIUM: the default, for cards, tiles, input fields and buttons.
• LARGE: large surfaces that own the screen, such as dialogs and overlays.
• ROUND: elements that read as a pill or a circle, such as avatars, badges and circular icon buttons.
• NONE: edges that must stay crisp, typically full-bleed or flush content such as magazine images.

#The special cases

Two tokens go further and give each portal a different shape:

• GALAXUS_ROUND_DIGITEC_MEDIUM: round on Galaxus, medium on Digitec.
• GALAXUS_SMALL_DIGITEC_NONE: small on Galaxus, square on Digitec.