Borders help us define elements within our UI. Keeping sizes consistent help us maintain uniformity.

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



Borders are defined as dimension resources in the format of bpkBorderSize{size}.

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


Borders in Compose are defined in BpkBorderSize. The naming of border tokens follows pascal case.

For example, to use Sm as a dimension it via BpkBorderSize.Sm.



Borders are defined as Objective-C constants in the format of BPKBorderWidth{size}.

For example to use Xl in Objective-C use BPKBorderWidthXl, and .xl in Swift.


Borders are defined as Sass variables in the format of bpk-border-size-{size}.

For example to use Xl in Sass use bpk-border-size-xl.

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