Softer, rounder edges give a touch of modernity and friendliness to our product.

To see a list of all radius tokens and their values please check the Overview tab.



Radii are defined as dimension resources in the format of bpkBorderRadius{radius}.

For example to use Xs as a dimension use @dimen/bpkBorderRadiusXs in xml or R.dimen.bpkBorderRadiusXs in code.


Radii in Compose are defined in BpkBorderRadius. The naming of radius tokens follows pascal case.

For example, to use Xs as a dimension it via BpkBorderRadius.Xs.



Radii in UIKit are defined in BPKCornerRadius as an Objective-C constant. in the format of BPKCornerRadius{size}.

From Swift, it can be used as such: .xs, or BPKCornerRadius.xs depending on context

From Objective-C, it can be used as such: BPKCornerRadiusXs


Radii in SwiftUI are defined in BPKCornerRadius. The naming follows camel case.

For example, to use .xs as a dimansion, do BPKCornerRadius.xs.

Some extensions have been added to specific compoents, where a BPKCornerRadius can be pased directly, like RoundedRectangle(cornerRadius: .xs)


Radii are defined as Sass variables in the format of bpk-border-radius-{size}, as well as bpk-border-radius-pill and bpk-border-radius-pill-lg.

For example to use xs in Sass use bpk-border-radius-xs.

To use our radii Sass variables, install the @skyscanner/backpack-web NPM package.